refactor: persistent volume claims use named exports (#84)

manusa · May 6, 2024 · d2a4904 · d2a4904
1 parent e6e85cd
commit d2a4904
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 101 deletions.
diff --git a/src/main/frontend/src/App.js b/src/main/frontend/src/App.js
@@ -64,7 +64,11 @@ import {
 import {JobsPage, JobsEditPage, JobsDetailPage} from './jobs';
 import {NodesPage, NodesDetailPage, NodesEditPage} from './nodes';
 import {NamespacesPage, NamespacesDetailPage} from './namespaces';
-import pvc from './persistentvolumeclaims';
+import {
+  PersistentVolumeClaimsPage,
+  PersistentVolumeClaimsEditPage,
+  PersistentVolumeClaimsDetailPage
+} from './persistentvolumeclaims';
 import {
   PersistentVolumesPage,
   PersistentVolumesEditPage,
@@ -269,17 +273,17 @@ export const App = () => {
         <Route
           exact
           path='/persistentvolumeclaims'
-          element={<pvc.PersistentVolumeClaimsPage />}
+          element={<PersistentVolumeClaimsPage />}
         />
         <Route
           exact
           path='/persistentvolumeclaims/:uid'
-          element={<pvc.PersistentVolumeClaimsDetailPage />}
+          element={<PersistentVolumeClaimsDetailPage />}
         />
         <Route
           exact
           path='/persistentvolumeclaims/:uid/edit'
-          element={<pvc.PersistentVolumeClaimsEditPage />}
+          element={<PersistentVolumeClaimsEditPage />}
         />
         <Route
           exact

diff --git a/src/main/frontend/src/persistentvolumeclaims/List.js b/src/main/frontend/src/persistentvolumeclaims/List.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 import {name, namespace, sortByCreationTimeStamp, uid} from '../metadata';
-import pvc from './';
+import {api, selectors} from './';
 import {Icon, Link, Table} from '../components';
 import ResourceList from '../components/ResourceList';
 
@@ -33,7 +33,7 @@ const headers = [
 
 const Rows = ({persistentVolumeClaims, crudDelete}) => {
   const deletePersistentVolumeClaim = persistentVolumeClaim => async () => {
-    await pvc.api.delete(persistentVolumeClaim);
+    await api.deletePvc(persistentVolumeClaim);
     crudDelete(persistentVolumeClaim);
   };
   return persistentVolumeClaims
@@ -58,14 +58,12 @@ const Rows = ({persistentVolumeClaims, crudDelete}) => {
           </Link.Namespace>
         </Table.Cell>
         <Table.Cell>
-          {pvc.selectors.specStorageClassName(persistentVolumeClaim)}
+          {selectors.specStorageClassName(persistentVolumeClaim)}
         </Table.Cell>
         <Table.Cell>
-          {pvc.selectors.statusCapacityStorage(persistentVolumeClaim)}
-        </Table.Cell>
-        <Table.Cell>
-          {pvc.selectors.statusPhase(persistentVolumeClaim)}
+          {selectors.statusCapacityStorage(persistentVolumeClaim)}
         </Table.Cell>
+        <Table.Cell>{selectors.statusPhase(persistentVolumeClaim)}</Table.Cell>
         <Table.Cell>
           <Table.DeleteButton
             onClick={deletePersistentVolumeClaim(persistentVolumeClaim)}
@@ -75,15 +73,15 @@ const Rows = ({persistentVolumeClaims, crudDelete}) => {
     ));
 };
 
-const List = ({resources, loadedResources, crudDelete, ...properties}) => (
-  <ResourceList
-    headers={headers}
-    resources={resources}
-    loading={!loadedResources['PersistentVolumeClaim']}
-    {...properties}
-  >
-    <Rows persistentVolumeClaims={resources} crudDelete={crudDelete} />
-  </ResourceList>
+export const List = ResourceList.resourceListConnect('persistentVolumeClaims')(
+  ({resources, loadedResources, crudDelete, ...properties}) => (
+    <ResourceList
+      headers={headers}
+      resources={resources}
+      loading={!loadedResources['PersistentVolumeClaim']}
+      {...properties}
+    >
+      <Rows persistentVolumeClaims={resources} crudDelete={crudDelete} />
+    </ResourceList>
+  )
 );
-
-export default ResourceList.resourceListConnect('persistentVolumeClaims')(List);
diff --git a/src/main/frontend/src/persistentvolumeclaims/PersistentVolumeClaimsDetailPage.js b/src/main/frontend/src/persistentvolumeclaims/PersistentVolumeClaimsDetailPage.js
@@ -18,41 +18,9 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {withParams} from '../router';
 import {Details} from '../metadata';
-import pvc from './';
+import {api, selectors} from './';
 import {Form, ResourceDetailPage} from '../components';
 
-const PersistentVolumeClaimsDetailPage = ({persistentVolumeClaim}) => (
-  <ResourceDetailPage
-    kind='PersistentVolumeClaims'
-    path='persistentvolumeclaims'
-    resource={persistentVolumeClaim}
-    deleteFunction={pvc.api.delete}
-    body={
-      <>
-        <Form>
-          <Details resource={persistentVolumeClaim} />
-          <Form.Field label='Access Modes'>
-            {pvc.selectors
-              .specAccessModes(persistentVolumeClaim)
-              .map((am, idx) => (
-                <p key={idx}>{am}</p>
-              ))}
-          </Form.Field>
-          <Form.Field label='Storage Class'>
-            {pvc.selectors.specStorageClassName(persistentVolumeClaim)}
-          </Form.Field>
-          <Form.Field label='Capacity'>
-            {pvc.selectors.statusCapacityStorage(persistentVolumeClaim)}
-          </Form.Field>
-          <Form.Field label='Status'>
-            {pvc.selectors.statusPhase(persistentVolumeClaim)}
-          </Form.Field>
-        </Form>
-      </>
-    }
-  />
-);
-
 const mapStateToProps = ({persistentVolumeClaims}) => ({
   persistentVolumeClaims
 });
@@ -64,6 +32,40 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   persistentVolumeClaim: stateProps.persistentVolumeClaims[ownProps.params.uid]
 });
 
-export default withParams(
-  connect(mapStateToProps, null, mergeProps)(PersistentVolumeClaimsDetailPage)
+export const PersistentVolumeClaimsDetailPage = withParams(
+  connect(
+    mapStateToProps,
+    null,
+    mergeProps
+  )(({persistentVolumeClaim}) => (
+    <ResourceDetailPage
+      kind='PersistentVolumeClaims'
+      path='persistentvolumeclaims'
+      resource={persistentVolumeClaim}
+      deleteFunction={api.deletePvc}
+      body={
+        <>
+          <Form>
+            <Details resource={persistentVolumeClaim} />
+            <Form.Field label='Access Modes'>
+              {selectors
+                .specAccessModes(persistentVolumeClaim)
+                .map((am, idx) => (
+                  <p key={idx}>{am}</p>
+                ))}
+            </Form.Field>
+            <Form.Field label='Storage Class'>
+              {selectors.specStorageClassName(persistentVolumeClaim)}
+            </Form.Field>
+            <Form.Field label='Capacity'>
+              {selectors.statusCapacityStorage(persistentVolumeClaim)}
+            </Form.Field>
+            <Form.Field label='Status'>
+              {selectors.statusPhase(persistentVolumeClaim)}
+            </Form.Field>
+          </Form>
+        </>
+      }
+    />
+  ))
 );
diff --git a/src/main/frontend/src/persistentvolumeclaims/PersistentVolumeClaimsEditPage.js b/src/main/frontend/src/persistentvolumeclaims/PersistentVolumeClaimsEditPage.js
@@ -17,10 +17,10 @@
 import React from 'react';
 import {withParams} from '../router';
 import {name} from '../metadata';
-import pvc from './';
+import {api} from './';
 import {Link, ResourceEditPage} from '../components';
 
-const PersistentVolumeClaimsEditPage = ({params: {uid}}) => (
+export const PersistentVolumeClaimsEditPage = withParams(({params: {uid}}) => (
   <ResourceEditPage
     kind='PersistentVolumeClaims'
     path='persistentvolumeclaims'
@@ -29,9 +29,7 @@ const PersistentVolumeClaimsEditPage = ({params: {uid}}) => (
         {name(resource)}
       </Link.RouterLink>
     )}
-    save={async resource => await pvc.api.update(resource)}
+    save={async resource => await api.update(resource)}
     resourceFromState={state => state.persistentVolumeClaims[uid]}
   />
-);
-
-export default withParams(PersistentVolumeClaimsEditPage);
+));
diff --git a/src/main/frontend/src/persistentvolumeclaims/PersistentVolumeClaimsPage.js b/src/main/frontend/src/persistentvolumeclaims/PersistentVolumeClaimsPage.js
@@ -17,16 +17,17 @@
 import React from 'react';
 import {DashboardPage, FilterBar} from '../components';
 import {useUiNamespace} from '../redux';
-import pvc from './';
+import {PersistentVolumeClaimsList} from './';
 
-const PersistentVolumeClaimsPage = () => {
+export const PersistentVolumeClaimsPage = () => {
   const {selectedNamespace} = useUiNamespace();
   return (
     <DashboardPage title='PersistentVolumeClaims'>
       <FilterBar />
-      <pvc.List className='mt-4' namespace={selectedNamespace} />
+      <PersistentVolumeClaimsList
+        className='mt-4'
+        namespace={selectedNamespace}
+      />
     </DashboardPage>
   );
 };
-
-export default PersistentVolumeClaimsPage;
diff --git a/src/main/frontend/src/persistentvolumeclaims/api.js b/src/main/frontend/src/persistentvolumeclaims/api.js
@@ -16,10 +16,6 @@
  */
 import {deleteNamespacedResource, updateNamespacedResource} from '../fetch';
 
-const api = {};
+export const deletePvc = deleteNamespacedResource('persistentvolumeclaims');
 
-api.delete = deleteNamespacedResource('persistentvolumeclaims');
-
-api.update = updateNamespacedResource('persistentvolumeclaims');
-
-export default api;
+export const update = updateNamespacedResource('persistentvolumeclaims');
diff --git a/src/main/frontend/src/persistentvolumeclaims/index.js b/src/main/frontend/src/persistentvolumeclaims/index.js
@@ -14,20 +14,9 @@
  * limitations under the License.
  *
  */
-import api from './api';
-import selectors from './selectors';
-import List from './List';
-import PersistentVolumeClaimsDetailPage from './PersistentVolumeClaimsDetailPage';
-import PersistentVolumeClaimsEditPage from './PersistentVolumeClaimsEditPage';
-import PersistentVolumeClaimsPage from './PersistentVolumeClaimsPage';
-
-const pvc = {};
-
-pvc.api = api;
-pvc.selectors = selectors;
-pvc.List = List;
-pvc.PersistentVolumeClaimsDetailPage = PersistentVolumeClaimsDetailPage;
-pvc.PersistentVolumeClaimsEditPage = PersistentVolumeClaimsEditPage;
-pvc.PersistentVolumeClaimsPage = PersistentVolumeClaimsPage;
-
-export default pvc;
+export * as api from './api';
+export * as selectors from './selectors';
+export {List as PersistentVolumeClaimsList} from './List';
+export {PersistentVolumeClaimsDetailPage} from './PersistentVolumeClaimsDetailPage';
+export {PersistentVolumeClaimsEditPage} from './PersistentVolumeClaimsEditPage';
+export {PersistentVolumeClaimsPage} from './PersistentVolumeClaimsPage';
diff --git a/src/main/frontend/src/persistentvolumeclaims/selectors.js b/src/main/frontend/src/persistentvolumeclaims/selectors.js
@@ -14,13 +14,10 @@
  * limitations under the License.
  *
  */
-const selectors = {};
+export const specAccessModes = pvc => pvc?.spec?.accessModes ?? [];
+export const specStorageClassName = pvc => pvc?.spec?.storageClassName ?? '';
 
-selectors.specAccessModes = pvc => pvc?.spec?.accessModes ?? [];
-selectors.specStorageClassName = pvc => pvc?.spec?.storageClassName ?? '';
+export const statusPhase = pvc => pvc?.status?.phase ?? '';
 
-selectors.statusPhase = pvc => pvc?.status?.phase ?? '';
-
-selectors.statusCapacityStorage = pvc => pvc?.status?.capacity?.storage ?? '';
-
-export default selectors;
+export const statusCapacityStorage = pvc =>
+  pvc?.status?.capacity?.storage ?? '';
diff --git a/src/main/frontend/src/search/SearchPage.js b/src/main/frontend/src/search/SearchPage.js
@@ -31,7 +31,7 @@ import {IngressesList} from '../ingresses';
 import {JobsList} from '../jobs';
 import {NamespacesList} from '../namespaces';
 import p from '../pods';
-import pvc from '../persistentvolumeclaims';
+import {PersistentVolumeClaimsList} from '../persistentvolumeclaims';
 import {PersistentVolumesList} from '../persistentvolumes';
 import s from '../secrets';
 import ss from '../statefulsets';
@@ -174,7 +174,7 @@ const Results = ({query, selectedNamespace}) => {
         nameLike={query}
         namespace={selectedNamespace}
       />
-      <pvc.List
+      <PersistentVolumeClaimsList
         {...commonProps}
         title='PersistentVolumeClaims'
         nameLike={query}