refactor: metrics uses named exports (#69)

Author: manusa

src/main/frontend/src/containers/ContainerList.js

@@ -15,7 +15,7 @@
  *
  */
 import React from 'react';
-import metrics from '../metrics';
+import {bytesToHumanReadable} from '../metrics';
 import {Icon} from '../components';
 import Table from '../components/Table';
 
@@ -57,9 +57,7 @@ export const ContainerList = ({containers, podMetrics, ...properties}) => (
           </Table.Cell>
           <Table.Cell>
             {podMetrics &&
-              metrics.selectors.bytesToHumanReadable(
-                podMetrics.containerMemory(c.name)
-              )}
+              bytesToHumanReadable(podMetrics.containerMemory(c.name))}
           </Table.Cell>
         </Table.Row>
       ))}

src/main/frontend/src/metrics/index.js

@@ -14,10 +14,4 @@
  * limitations under the License.
  *
  */
-import selectors from './selectors';
-
-const metrics = {};
-
-metrics.selectors = selectors;
-
-export default metrics;
+export {bytesToHumanReadable, podMetrics, quantityToScalar} from './selectors';

src/main/frontend/src/metrics/selectors.js

@@ -14,9 +14,7 @@
  * limitations under the License.
  *
  */
-const selectors = {};
-
-selectors.bytesToHumanReadable = (bytes = 0) => {
+export const bytesToHumanReadable = (bytes = 0) => {
   if (bytes > Math.pow(1024, 3)) {
     return `${(bytes / Math.pow(1024, 3)).toFixed(3)} GiB`;
   } else if (bytes > Math.pow(1024, 2)) {
@@ -27,7 +25,7 @@ selectors.bytesToHumanReadable = (bytes = 0) => {
   return bytes;
 };
 
-selectors.quantityToScalar = (quantity = 0) => {
+export const quantityToScalar = (quantity = 0) => {
   const quantityString = quantity.toString();
   if (quantityString.endsWith('n')) {
     return (
@@ -48,25 +46,23 @@ selectors.quantityToScalar = (quantity = 0) => {
   return parseFloat(quantityString);
 };
 
-selectors.podMetrics = (podMetrics = {containers: []}) => {
+export const podMetrics = (podMetrics = {containers: []}) => {
   const ret = {};
   ret.totalCpu = () =>
     podMetrics.containers?.reduce(
-      (total, c) => total + selectors.quantityToScalar(c.usage?.cpu),
+      (total, c) => total + quantityToScalar(c.usage?.cpu),
       0
     );
   ret.totalMemory = () =>
     podMetrics.containers?.reduce(
-      (total, c) => total + selectors.quantityToScalar(c.usage?.memory),
+      (total, c) => total + quantityToScalar(c.usage?.memory),
       0
     );
   ret.container = containerName =>
     podMetrics.containers?.find(c => c.name === containerName) ?? {};
   ret.containerCpu = containerName =>
-    selectors.quantityToScalar(ret.container(containerName)?.usage?.cpu);
+    quantityToScalar(ret.container(containerName)?.usage?.cpu);
   ret.containerMemory = containerName =>
-    selectors.quantityToScalar(ret.container(containerName)?.usage?.memory);
+    quantityToScalar(ret.container(containerName)?.usage?.memory);
   return ret;
 };
-
-export default selectors;

src/main/frontend/src/nodes/NodesDetailPage.js

@@ -18,7 +18,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {withParams} from '../router';
 import {Details, name} from '../metadata';
-import metrics from '../metrics';
+import {bytesToHumanReadable, quantityToScalar} from '../metrics';
 import {selectors} from './';
 import p from '../pods';
 import {Card, DonutChart, Form} from '../components';
@@ -73,13 +73,13 @@ export const NodesDetailPage = withParams(
       .map(c => c.resources.requests ?? {});
     const requestedCpu = requests
       .map(r => r.cpu ?? 0)
-      .reduce((acc, c) => acc + metrics.selectors.quantityToScalar(c), 0);
-    const allocatableMemory = metrics.selectors.quantityToScalar(
+      .reduce((acc, c) => acc + quantityToScalar(c), 0);
+    const allocatableMemory = quantityToScalar(
       selectors.statusAllocatableMemory(node)
     );
     const requestedMemory = requests
       .map(r => r.memory ?? 0)
-      .reduce((acc, c) => acc + metrics.selectors.quantityToScalar(c), 0);
+      .reduce((acc, c) => acc + quantityToScalar(c), 0);
     return (
       <ResourceDetailPage
         kind='Nodes'
@@ -94,20 +94,16 @@ export const NodesDetailPage = withParams(
                 title='CPU'
                 description='Requested vs. allocatable'
                 partial={requestedCpu.toFixed(3)}
-                total={metrics.selectors
-                  .quantityToScalar(selectors.statusAllocatableCpu(node))
-                  .toFixed(3)}
+                total={quantityToScalar(
+                  selectors.statusAllocatableCpu(node)
+                ).toFixed(3)}
               />
               <Dial
                 title='Memory'
                 description='Requested vs. allocatable'
                 percent={(requestedMemory / allocatableMemory) * 100}
-                partial={metrics.selectors.bytesToHumanReadable(
-                  requestedMemory
-                )}
-                total={metrics.selectors.bytesToHumanReadable(
-                  allocatableMemory
-                )}
+                partial={bytesToHumanReadable(requestedMemory)}
+                total={bytesToHumanReadable(allocatableMemory)}
               />
               <Dial
                 title='Pods'

src/main/frontend/src/pods/PodsDetailPage.js

@@ -19,7 +19,7 @@ import {connect} from 'react-redux';
 import {withParams} from '../router';
 import {Details, uid} from '../metadata';
 import {ContainerList} from '../containers';
-import mts from '../metrics';
+import {bytesToHumanReadable, podMetrics} from '../metrics';
 import p from './';
 import {Card, Form, Icon} from '../components';
 import Link from '../components/Link';
@@ -66,7 +66,7 @@ const ActionLink = ({to, title, stylePrefix, icon}) => (
 
 const PodsDetailPage = ({pod}) => {
   const metrics = useMetrics(pod);
-  const podMetrics = metrics && mts.selectors.podMetrics(metrics);
+  const currentPodMetrics = metrics && podMetrics(metrics);
   return (
     <ResourceDetailPage
       kind='Pods'
@@ -109,15 +109,15 @@ const PodsDetailPage = ({pod}) => {
             {p.selectors.restartPolicy(pod)}
           </Form.Field>
           <Form.Field label='Pod IP'>{p.selectors.statusPodIP(pod)}</Form.Field>
-          {podMetrics && (
+          {currentPodMetrics && (
             <>
               <Form.Field label='Used CPU'>
                 <Icon icon='fa-microchip' className='text-gray-600 mr-2' />
-                {podMetrics.totalCpu().toFixed(3)}
+                {currentPodMetrics.totalCpu().toFixed(3)}
               </Form.Field>
               <Form.Field label='Used Memory'>
                 <Icon icon='fa-memory' className='text-gray-600 mr-2' />
-                {mts.selectors.bytesToHumanReadable(podMetrics.totalMemory())}
+                {bytesToHumanReadable(currentPodMetrics.totalMemory())}
               </Form.Field>
             </>
           )}
@@ -129,7 +129,7 @@ const PodsDetailPage = ({pod}) => {
         titleVariant={Card.titleVariants.medium}
         className='mt-2'
         containers={p.selectors.containers(pod)}
-        podMetrics={podMetrics}
+        podMetrics={currentPodMetrics}
       />
     </ResourceDetailPage>
   );