refactor: deployments use named exports

src/main/frontend/src/App.js

@@ -25,7 +25,11 @@ import * as cj from './cronjobs';
 import crd from './customresourcedefinitions';
 import dc from './deploymentconfigs';
 import * as ds from './daemonsets';
-import deployments from './deployments';
+import {
+  DeploymentsPage,
+  DeploymentsEditPage,
+  DeploymentsDetailPage
+} from './deployments';
 import * as ep from './endpoints';
 import hpa from './horizontalpodautoscalers';
 import * as ingresses from './ingresses';
@@ -184,20 +188,16 @@ const App = ({dispatch}) => {
           path='/deploymentconfigs/:uid/edit'
           element={<dc.DeploymentConfigsEditPage />}
         />
-        <Route
-          exact
-          path='/deployments'
-          element={<deployments.DeploymentsPage />}
-        />
+        <Route exact path='/deployments' element={<DeploymentsPage />} />
         <Route
           exact
           path='/deployments/:uid'
-          element={<deployments.DeploymentsDetailPage />}
+          element={<DeploymentsDetailPage />}
         />
         <Route
           exact
           path='/deployments/:uid/edit'
-          element={<deployments.DeploymentsEditPage />}
+          element={<DeploymentsEditPage />}
         />
         <Route exact path='/endpoints' element={<ep.EndpointsPage />} />
         <Route

src/main/frontend/src/Home.js

@@ -16,7 +16,7 @@
  */
 import React from 'react';
 import {connect} from 'react-redux';
-import deployments from './deployments';
+import {DeploymentsCard} from './deployments';
 import events from './events';
 import nodes from './nodes';
 import pods from './pods';
@@ -33,7 +33,7 @@ const Home = ({selectedNamespace}) => (
         responsiveClassName={cardResponsiveClass}
         className={cardClass}
       />
-      <deployments.DeploymentsCard
+      <DeploymentsCard
         responsiveClassName={cardResponsiveClass}
         className={cardClass}
       />

src/main/frontend/src/deployments/DeploymentsCard.js

@@ -18,11 +18,18 @@ import React from 'react';
 import {connect} from 'react-redux';
 import StatusCard from '../components/StatusCard';
 import icons from '../components/icons';
-import deploymentsModule from './';
+import {selectors} from './';
 
-const DeploymentsCard = ({deployments, ...properties}) => {
+const mapStateToProps = ({deployments}) => ({
+  deployments
+});
+
+export const DeploymentsCard = connect(mapStateToProps)(({
+  deployments,
+  ...properties
+}) => {
   const objects = Object.values(deployments);
-  const ready = deploymentsModule.selectors.readyCount(objects);
+  const ready = selectors.readyCount(objects);
   const total = objects.length;
   return (
     <StatusCard
@@ -35,10 +42,4 @@ const DeploymentsCard = ({deployments, ...properties}) => {
       {...properties}
     />
   );
-};
-
-const mapStateToProps = ({deployments}) => ({
-  deployments
 });
-
-export default connect(mapStateToProps)(DeploymentsCard);

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

@@ -19,68 +19,14 @@ import {connect} from 'react-redux';
 import {withParams} from '../router';
 import metadata from '../metadata';
 import {ContainerList} from '../containers';
-import d from './';
+import {api, selectors} from './';
 import pods from '../pods';
 import rs from '../replicasets';
 import {Card, Form} from '../components';
 import Icon from '../components/Icon';
 import Link from '../components/Link';
 import ResourceDetailPage from '../components/ResourceDetailPage';
 
-const DeploymentsDetailPage = ({deployment, replicaSetsUids}) => (
-  <ResourceDetailPage
-    kind='Deployments'
-    path='deployments'
-    resource={deployment}
-    isReadyFunction={d.selectors.isReady}
-    deleteFunction={d.api.delete}
-    actions={
-      <Link
-        className='ml-2'
-        size={Link.sizes.small}
-        variant={Link.variants.outline}
-        onClick={() => d.api.restart(deployment)}
-        title='Restart'
-      >
-        <Icon stylePrefix='fas' icon='fa-redo-alt' className='mr-2' />
-        Restart
-      </Link>
-    }
-    body={
-      <Form>
-        <metadata.Details resource={deployment} />
-        <rs.ReplicasField
-          resource={deployment}
-          replicas={d.selectors.specReplicas(deployment)}
-          updateReplicas={d.api.updateReplicas}
-        />
-        <Form.Field label='Strategy'>
-          {d.selectors.specStrategyType(deployment)}
-        </Form.Field>
-      </Form>
-    }
-  >
-    <ContainerList
-      title='Containers'
-      titleVariant={Card.titleVariants.medium}
-      className='mt-2'
-      containers={d.selectors.containers(deployment)}
-    />
-    <rs.List
-      title='Replica Sets'
-      titleVariant={Card.titleVariants.medium}
-      className='mt-2'
-      ownerUid={metadata.selectors.uid(deployment)}
-    />
-    <pods.List
-      title='Pods'
-      titleVariant={Card.titleVariants.medium}
-      className='mt-2'
-      ownerUids={replicaSetsUids}
-    />
-  </ResourceDetailPage>
-);
-
 const mapStateToProps = ({deployments, replicaSets}) => ({
   deployments,
   replicaSets
@@ -102,6 +48,62 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
     .map(replicaSet => metadata.selectors.uid(replicaSet))
 });
 
-export default withParams(
-  connect(mapStateToProps, null, mergeProps)(DeploymentsDetailPage)
+export const DeploymentsDetailPage = withParams(
+  connect(
+    mapStateToProps,
+    null,
+    mergeProps
+  )(({deployment, replicaSetsUids}) => (
+    <ResourceDetailPage
+      kind='Deployments'
+      path='deployments'
+      resource={deployment}
+      isReadyFunction={selectors.isReady}
+      deleteFunction={api.deleteDeployment}
+      actions={
+        <Link
+          className='ml-2'
+          size={Link.sizes.small}
+          variant={Link.variants.outline}
+          onClick={() => api.restart(deployment)}
+          title='Restart'
+        >
+          <Icon stylePrefix='fas' icon='fa-redo-alt' className='mr-2' />
+          Restart
+        </Link>
+      }
+      body={
+        <Form>
+          <metadata.Details resource={deployment} />
+          <rs.ReplicasField
+            resource={deployment}
+            replicas={selectors.specReplicas(deployment)}
+            updateReplicas={api.updateReplicas}
+          />
+          <Form.Field label='Strategy'>
+            {selectors.specStrategyType(deployment)}
+          </Form.Field>
+        </Form>
+      }
+    >
+      <ContainerList
+        title='Containers'
+        titleVariant={Card.titleVariants.medium}
+        className='mt-2'
+        containers={selectors.containers(deployment)}
+      />
+      <rs.List
+        title='Replica Sets'
+        titleVariant={Card.titleVariants.medium}
+        className='mt-2'
+        ownerUid={metadata.selectors.uid(deployment)}
+      />
+      <pods.List
+        title='Pods'
+        titleVariant={Card.titleVariants.medium}
+        className='mt-2'
+        ownerUids={replicaSetsUids}
+      />
+    </ResourceDetailPage>
+  ))
 );

src/main/frontend/src/deployments/DeploymentsEditPage.js

@@ -17,11 +17,11 @@
 import React from 'react';
 import {withParams} from '../router';
 import md from '../metadata';
-import d from './';
+import {api} from './';
 import ResourceEditPage from '../components/ResourceEditPage';
 import Link from '../components/Link';
 
-const DeploymentsEditPage = ({params: {uid}}) => (
+export const DeploymentsEditPage = withParams(({params: {uid}}) => (
   <ResourceEditPage
     kind='Deployments'
     path='deployments'
@@ -30,9 +30,7 @@ const DeploymentsEditPage = ({params: {uid}}) => (
         {md.selectors.name(resource)}
       </Link.RouterLink>
     )}
-    save={async resource => await d.api.update(resource)}
+    save={async resource => await api.update(resource)}
     resourceFromState={state => state.deployments[uid]}
   />
-);
-
-export default withParams(DeploymentsEditPage);
+));

src/main/frontend/src/deployments/DeploymentsPage.js

@@ -16,20 +16,20 @@
  */
 import React from 'react';
 import {connect} from 'react-redux';
-import deployments from './';
+import {DeploymentsCard, DeploymentsList} from './';
 import {FilterBar} from '../components';
 import DashboardPage from '../components/DashboardPage';
 
-const DeploymentsPage = ({selectedNamespace}) => (
-  <DashboardPage title='Deployments'>
-    <deployments.DeploymentsCard />
-    <FilterBar className='mt-4' />
-    <deployments.List className='mt-4' namespace={selectedNamespace} />
-  </DashboardPage>
-);
-
 const mapStateToProps = ({ui: {selectedNamespace}}) => ({
   selectedNamespace
 });
 
-export default connect(mapStateToProps)(DeploymentsPage);
+export const DeploymentsPage = connect(mapStateToProps)(
+  ({selectedNamespace}) => (
+    <DashboardPage title='Deployments'>
+      <DeploymentsCard />
+      <FilterBar className='mt-4' />
+      <DeploymentsList className='mt-4' namespace={selectedNamespace} />
+    </DashboardPage>
+  )
+);

src/main/frontend/src/deployments/List.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import metadata from '../metadata';
-import deploymentsModule from './';
+import {api, selectors} from './';
 import redux from '../redux';
 import Icon from '../components/Icon';
 import Link from '../components/Link';
@@ -38,9 +38,9 @@ const headers = [
 
 const Rows = ({deployments}) => {
   const deleteDeployment = deployment => async () =>
-    await deploymentsModule.api.delete(deployment);
+    await api.deleteDeployment(deployment);
   const restartDeployment = deployment => async () =>
-    await deploymentsModule.api.restart(deployment);
+    await api.restart(deployment);
   return deployments
     .sort(metadata.selectors.sortByCreationTimeStamp)
     .map(deployment => (
@@ -51,12 +51,10 @@ const Rows = ({deployments}) => {
         <Table.Cell className='whitespace-nowrap w-3 text-center'>
           <Icon
             className={
-              deploymentsModule.selectors.isReady(deployment)
-                ? 'text-green-500'
-                : 'text-red-500'
+              selectors.isReady(deployment) ? 'text-green-500' : 'text-red-500'
             }
             icon={
-              deploymentsModule.selectors.isReady(deployment)
+              selectors.isReady(deployment)
                 ? 'fa-check'
                 : 'fa-exclamation-circle'
             }
@@ -77,7 +75,7 @@ const Rows = ({deployments}) => {
           </Link.Namespace>
         </Table.Cell>
         <Table.Cell className='break-all'>
-          {deploymentsModule.selectors.images(deployment).map((image, idx) => (
+          {selectors.images(deployment).map((image, idx) => (
             <div key={idx}>{image}</div>
           ))}
         </Table.Cell>
@@ -98,12 +96,6 @@ const Rows = ({deployments}) => {
     ));
 };
 
-const List = ({deployments, ...properties}) => (
-  <ResourceList headers={headers} resources={deployments} {...properties}>
-    <Rows deployments={deployments} />
-  </ResourceList>
-);
-
 const mapStateToProps = ({deployments}) => ({
   deployments
 });
@@ -117,4 +109,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   )
 });
 
-export default connect(mapStateToProps, null, mergeProps)(List);
+export const List = connect(
+  mapStateToProps,
+  null,
+  mergeProps
+)(({deployments, ...properties}) => (
+  <ResourceList headers={headers} resources={deployments} {...properties}>
+    <Rows deployments={deployments} />
+  </ResourceList>
+));

src/main/frontend/src/deployments/api.js

@@ -21,14 +21,7 @@ import {
   updateReplicasInNamespacedResource
 } from '../fetch';
 
-const api = {};
-
-api.delete = deleteNamespacedResource('deployments');
-
-api.restart = restartNamespacedResource('deployments');
-
-api.update = updateNamespacedResource('deployments');
-
-api.updateReplicas = updateReplicasInNamespacedResource('deployments');
-
-export default api;
+export const deleteDeployment = deleteNamespacedResource('deployments');
+export const restart = restartNamespacedResource('deployments');
+export const update = updateNamespacedResource('deployments');
+export const updateReplicas = updateReplicasInNamespacedResource('deployments');