refactor: pods use named exports (#97)

src/main/frontend/src/App.js

@@ -78,7 +78,13 @@ import {
   PersistentVolumesEditPage,
   PersistentVolumesDetailPage
 } from './persistentvolumes';
-import pods from './pods';
+import {
+  PodsPage,
+  PodsDetailPage,
+  PodsEditPage,
+  PodsExecPage,
+  PodsLogsPage
+} from './pods';
 import {
   ReplicationControllersPage,
   ReplicationControllersDetailPage,
@@ -312,11 +318,11 @@ export const App = () => {
           path='/persistentvolumes/:uid/edit'
           element={<PersistentVolumesEditPage />}
         />
-        <Route exact path='/pods' element={<pods.PodsPage />} />
-        <Route exact path='/pods/:uid' element={<pods.PodsDetailPage />} />
-        <Route exact path='/pods/:uid/edit' element={<pods.PodsEditPage />} />
-        <Route exact path='/pods/:uid/exec' element={<pods.PodsExecPage />} />
-        <Route exact path='/pods/:uid/logs' element={<pods.PodsLogsPage />} />
+        <Route exact path='/pods' element={<PodsPage />} />
+        <Route exact path='/pods/:uid' element={<PodsDetailPage />} />
+        <Route exact path='/pods/:uid/edit' element={<PodsEditPage />} />
+        <Route exact path='/pods/:uid/exec' element={<PodsExecPage />} />
+        <Route exact path='/pods/:uid/logs' element={<PodsLogsPage />} />
         <Route
           exact
           path='/replicationcontrollers'

src/main/frontend/src/Home.js

@@ -18,7 +18,7 @@ import React from 'react';
 import {DeploymentsCard} from './deployments';
 import {EventsList} from './events';
 import {NodesCard} from './nodes';
-import pods from './pods';
+import {PodsCard} from './pods';
 import {FilterBar} from './components';
 import {DashboardPage} from './dashboard';
 import {useUiNamespace} from './redux';
@@ -39,7 +39,7 @@ export const Home = () => {
           responsiveClassName={cardResponsiveClass}
           className={cardClass}
         />
-        <pods.PodsCard
+        <PodsCard
           responsiveClassName={cardResponsiveClass}
           className={cardClass}
         />

src/main/frontend/src/daemonsets/DaemonSetsDetailPage.js

@@ -20,7 +20,7 @@ import {withParams} from '../router';
 import {Details, uid} from '../metadata';
 import {ContainerList} from '../containers';
 import {api, selectors} from './';
-import pods from '../pods';
+import {PodsList} from '../pods';
 import {Card, Form, Icon, Link} from '../components';
 import {ResourceDetailPage} from '../dashboard';
 
@@ -71,7 +71,7 @@ export const DaemonSetsDetailPage = withParams(
         className='mt-2'
         containers={selectors.containers(daemonSet)}
       />
-      <pods.List
+      <PodsList
         title='Pods'
         titleVariant={Card.titleVariants.medium}
         className='mt-2'

src/main/frontend/src/deploymentconfigs/DeploymentConfigsDetailPage.js

@@ -20,7 +20,7 @@ import {withParams} from '../router';
 import {Details, ownerReferencesUids, uid} from '../metadata';
 import {ContainerList} from '../containers';
 import {api, selectors} from './';
-import pods from '../pods';
+import {PodsList} from '../pods';
 import {ReplicasField} from '../replicasets';
 import {ReplicationControllersList} from '../replicationcontrollers';
 import {Card, Form, Icon, Link} from '../components';
@@ -95,7 +95,7 @@ export const DeploymentConfigsDetailPage = withParams(
         className='mt-2'
         ownerUid={uid(deploymentConfig)}
       />
-      <pods.List
+      <PodsList
         title='Pods'
         titleVariant={Card.titleVariants.medium}
         className='mt-2'

src/main/frontend/src/deployments/DeploymentsDetailPage.js

@@ -20,7 +20,7 @@ import {withParams} from '../router';
 import {Details, ownerReferencesUids, uid} from '../metadata';
 import {ContainerList} from '../containers';
 import {api, selectors} from './';
-import pods from '../pods';
+import {PodsList} from '../pods';
 import {ReplicasField, ReplicaSetsList} from '../replicasets';
 import {Card, Form, Icon, Link} from '../components';
 import {ResourceDetailPage} from '../dashboard';
@@ -94,7 +94,7 @@ export const DeploymentsDetailPage = withParams(
         className='mt-2'
         ownerUid={uid(deployment)}
       />
-      <pods.List
+      <PodsList
         title='Pods'
         titleVariant={Card.titleVariants.medium}
         className='mt-2'

src/main/frontend/src/endpoints/EndpointsPage.js

@@ -17,15 +17,15 @@
 import React from 'react';
 import {FilterBar} from '../components';
 import {DashboardPage} from '../dashboard';
-import {List} from './';
+import {EndpointsList} from './';
 import {useUiNamespace} from '../redux';
 
 export const EndpointsPage = () => {
   const {selectedNamespace} = useUiNamespace();
   return (
     <DashboardPage title='Endpoints'>
       <FilterBar />
-      <List className='mt-4' namespace={selectedNamespace} />
+      <EndpointsList className='mt-4' namespace={selectedNamespace} />
     </DashboardPage>
   );
 };

src/main/frontend/src/endpoints/index.js

@@ -18,4 +18,4 @@ export * as api from './api';
 export * as selectors from './selectors';
 export {EndpointsDetailPage} from './EndpointsDetailPage';
 export {EndpointsPage} from './EndpointsPage';
-export {List} from './List';
+export {List as EndpointsList} from './List';

src/main/frontend/src/jobs/JobsDetailPage.js

@@ -20,7 +20,7 @@ import {withParams} from '../router';
 import {Details, namespace, uid} from '../metadata';
 import {api, selectors} from './';
 import {ContainerList} from '../containers';
-import pods from '../pods';
+import {PodsList} from '../pods';
 import {Card, Form} from '../components';
 import {DashboardPage, ResourceDetailPage} from '../dashboard';
 
@@ -74,7 +74,7 @@ export const JobsDetailPage = withParams(
         className='mt-2'
         containers={selectors.containers(job)}
       />
-      <pods.List
+      <PodsList
         title='Pods'
         titleVariant={Card.titleVariants.medium}
         className='mt-2'

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

@@ -20,7 +20,7 @@ import {withParams} from '../router';
 import {Details, name} from '../metadata';
 import {bytesToHumanReadable, quantityToScalar} from '../metrics';
 import {selectors} from './';
-import p from '../pods';
+import {PodsList, selectors as podSelectors} from '../pods';
 import {Card, DonutChart, Form} from '../components';
 import Minikube from '../components/icons/Minikube';
 import {ResourceDetailPage} from '../dashboard';
@@ -67,9 +67,9 @@ export const NodesDetailPage = withParams(
     mergeProps
   )(({node, isMinikube, pods}) => {
     const nodeName = name(node);
-    const podsForNode = Object.values(p.selectors.podsBy(pods, {nodeName}));
+    const podsForNode = Object.values(podSelectors.podsBy(pods, {nodeName}));
     const requests = podsForNode
-      .flatMap(p.selectors.containers)
+      .flatMap(podSelectors.containers)
       .map(c => c.resources.requests ?? {});
     const requestedCpu = requests
       .map(r => r.cpu ?? 0)
@@ -130,7 +130,7 @@ export const NodesDetailPage = withParams(
           </Form>
         }
       >
-        <p.List
+        <PodsList
           title='Pods'
           titleVariant={Card.titleVariants.medium}
           className='mt-2'

src/main/frontend/src/pods/List.js

@@ -18,9 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {name, namespace, sortByCreationTimeStamp, uid} from '../metadata';
-import p from './';
 import {Icon, Link, Table} from '../components';
 import ResourceList from '../components/ResourceList';
+import {api, selectors, StatusIcon} from './';
 
 const headers = [
   '',
@@ -34,18 +34,18 @@ const headers = [
 ];
 
 const Rows = ({pods}) => {
-  const deletePod = pod => async () => await p.api.delete(pod);
+  const deletePod = pod => async () => await api.deletePod(pod);
   return pods.sort(sortByCreationTimeStamp).map(pod => (
     <Table.ResourceRow key={uid(pod)} resource={pod}>
       <Table.Cell className='whitespace-nowrap w-3 text-center'>
         <Icon
           className={
-            p.selectors.succeededOrContainersReady(pod)
+            selectors.succeededOrContainersReady(pod)
               ? 'text-green-500'
               : 'text-red-500'
           }
           icon={
-            p.selectors.succeededOrContainersReady(pod)
+            selectors.succeededOrContainersReady(pod)
               ? 'fa-check'
               : 'fa-exclamation-circle'
           }
@@ -60,13 +60,10 @@ const Rows = ({pods}) => {
         </Link.Namespace>
       </Table.Cell>
       <Table.Cell className='whitespace-nowrap'>
-        <p.StatusIcon
-          className='mr-1'
-          statusPhase={p.selectors.statusPhase(pod)}
-        />
-        {p.selectors.statusPhase(pod)}
+        <StatusIcon className='mr-1' statusPhase={selectors.statusPhase(pod)} />
+        {selectors.statusPhase(pod)}
       </Table.Cell>
-      <Table.Cell>{p.selectors.restartCount(pod)}</Table.Cell>
+      <Table.Cell>{selectors.restartCount(pod)}</Table.Cell>
       <Table.Cell className='whitespace-nowrap text-center'>
         <Link.RouterLink
           variant={Link.variants.outline}
@@ -90,35 +87,35 @@ const Rows = ({pods}) => {
   ));
 };
 
-const List = ({
-  resources,
-  nodeName,
-  ownerUids,
-  ownerUid,
-  crudDelete,
-  loadedResources,
-  ...properties
-}) => (
-  <ResourceList headers={headers} resources={resources} {...properties}>
-    <Rows pods={resources} />
-  </ResourceList>
-);
-
-List.propTypes = {
-  nodeName: PropTypes.string,
-  ownerUids: PropTypes.arrayOf(PropTypes.string),
-  namespace: PropTypes.string
-};
-
 const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   ...stateProps,
   ...dispatchProps,
   ...ownProps,
-  resources: Object.values(p.selectors.podsBy(stateProps.resources, ownProps))
+  resources: Object.values(selectors.podsBy(stateProps.resources, ownProps))
 });
 
-export default connect(
+export const List = connect(
   ResourceList.mapStateToProps('pods'),
   null,
   mergeProps
-)(List);
+)(
+  ({
+    resources,
+    nodeName,
+    ownerUids,
+    ownerUid,
+    crudDelete,
+    loadedResources,
+    ...properties
+  }) => (
+    <ResourceList headers={headers} resources={resources} {...properties}>
+      <Rows pods={resources} />
+    </ResourceList>
+  )
+);
+
+List.propTypes = {
+  nodeName: PropTypes.string,
+  ownerUids: PropTypes.arrayOf(PropTypes.string),
+  namespace: PropTypes.string
+};

src/main/frontend/src/pods/PodsCard.js

@@ -18,12 +18,16 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {StatusCard} from '../components';
 import icons from '../components/icons';
-import podsModule from './';
+import {selectors} from './';
 
-const PodsCard = ({pods, ...properties}) => {
+const mapStateToProps = ({pods}) => ({
+  pods
+});
+
+export const PodsCard = connect(mapStateToProps)(({pods, ...properties}) => {
   const podObjects = Object.values(pods);
-  const ready = podsModule.selectors.readyCount(podObjects);
-  const succeeded = podsModule.selectors.succeededCount(podObjects);
+  const ready = selectors.readyCount(podObjects);
+  const succeeded = selectors.succeededCount(podObjects);
   const total = podObjects.length;
   return (
     <StatusCard
@@ -38,10 +42,4 @@ const PodsCard = ({pods, ...properties}) => {
       {...properties}
     />
   );
-};
-
-const mapStateToProps = ({pods}) => ({
-  pods
 });
-
-export default connect(mapStateToProps)(PodsCard);