Show 'Storage size' column directly in the storage table (#3615)

opendatahub-io · Jan 13, 2025 · ebc2c66 · ebc2c66
1 parent 88db0fb
commit ebc2c66
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 125 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts b/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
@@ -32,9 +32,8 @@ class ClusterStorageRow extends TableRow {
     return this.find().find('[data-label="Storage class"]');
   }
 
-  shouldHaveStorageSize(name: string) {
-    this.find().siblings().find('[data-label=Size]').contains(name).should('exist');
-    return this;
+  findSizeColumn() {
+    return this.find().find('[data-label="Storage size"]');
   }
 
   showStorageClassDetails() {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts
@@ -338,11 +338,9 @@ describe('ClusterStorage', () => {
     clusterStorageRow.findStorageClassColumn().should('not.exist');
     clusterStorageRow.shouldHaveStorageTypeValue('Persistent storage');
     clusterStorageRow.findConnectedWorkbenches().should('have.text', 'No connections');
-    clusterStorageRow.toggleExpandableContent();
-    clusterStorageRow.shouldHaveStorageSize('5Gi');
+    clusterStorageRow.findSizeColumn().contains('5GiB');
 
     //sort by Name
-    clusterStorage.findClusterStorageTableHeaderButton('Name').click();
     clusterStorage.findClusterStorageTableHeaderButton('Name').should(be.sortAscending);
     clusterStorage.findClusterStorageTableHeaderButton('Name').click();
     clusterStorage.findClusterStorageTableHeaderButton('Name').should(be.sortDescending);
@@ -354,8 +352,7 @@ describe('ClusterStorage', () => {
     const clusterStorageRow = clusterStorage.getClusterStorageRow(
       'Updated storage with no workbench',
     );
-    clusterStorageRow.toggleExpandableContent();
-    clusterStorageRow.shouldHaveStorageSize('Max 13Gi');
+    clusterStorageRow.findSizeColumn().should('have.text', 'Max 13GiB');
     clusterStorageRow.findStorageSizeWarning();
     clusterStorageRow.findStorageSizeWarning().should('exist');
   });

diff --git a/frontend/src/pages/projects/components/StorageSizeBars.tsx b/frontend/src/pages/projects/components/StorageSizeBars.tsx
@@ -64,10 +64,7 @@ const StorageSizeBar: React.FC<StorageSizeBarProps> = ({ pvc }) => {
   if (error) {
     inUseRender = (
       <Tooltip content={`Unable to get storage data. ${error.message}`}>
-        <ExclamationCircleIcon
-          color="var(--pf-t--global--icon--color--status--danger--default)"
-          tabIndex={0}
-        />
+        <ExclamationCircleIcon color="var(--pf-t--global--icon--color--status--danger--default)" />
       </Tooltip>
     );
   } else if (!loaded) {

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx
@@ -76,7 +76,6 @@ const StorageTable: React.FC<StorageTableProps> = ({ pvcs, refresh, onAddPVC })
       <Table
         data={storageTableData}
         columns={getStorageColumns()}
-        disableRowRenderSupport
         data-testid="storage-table"
         variant="compact"
         rowRenderer={(data, i) => (

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  ActionsColumn,
-  ExpandableRowContent,
-  IAction,
-  Tbody,
-  Td,
-  Tr,
-} from '@patternfly/react-table';
+import { ActionsColumn, IAction, Td, Tr } from '@patternfly/react-table';
 import {
   Flex,
   FlexItem,
@@ -46,7 +39,6 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
   onEditPVC,
   onAddPVC,
 }) => {
-  const [isExpanded, setExpanded] = React.useState(false);
   const isRootVolume = useIsRootVolume(obj.pvc);
 
   const isStorageClassesAvailable = useIsAreaAvailable(SupportedArea.STORAGE_CLASSES).status;
@@ -73,124 +65,102 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
   }
 
   return (
-    <Tbody isExpanded={isExpanded}>
-      <Tr {...(rowIndex % 2 === 0 && { isStriped: true })}>
-        <Td
-          expand={{
-            rowIndex,
-            expandId: 'storage-row-item',
-            isExpanded,
-            onToggle: () => setExpanded(!isExpanded),
-          }}
-        />
-        <Td dataLabel="Name">
+    <Tr {...(rowIndex % 2 === 0 && { isStriped: true })}>
+      <Td dataLabel="Name">
+        <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem>
+            <TableRowTitleDescription
+              title={getDisplayNameFromK8sResource(obj.pvc)}
+              resource={obj.pvc}
+            />
+          </FlexItem>
+          <FlexItem>
+            <StorageWarningStatus obj={obj.pvc} onEditPVC={onEditPVC} onAddPVC={onAddPVC} />
+          </FlexItem>
+        </Flex>
+        <Content component="p">{getDescriptionFromK8sResource(obj.pvc)}</Content>
+      </Td>
+
+      {isStorageClassesAvailable && (
+        <Td modifier="truncate" dataLabel="Storage class">
           <Flex
             spaceItems={{ default: 'spaceItemsSm' }}
             alignItems={{ default: 'alignItemsCenter' }}
           >
             <FlexItem>
               <TableRowTitleDescription
-                title={getDisplayNameFromK8sResource(obj.pvc)}
-                resource={obj.pvc}
+                title={
+                  storageClassConfig?.displayName ??
+                  obj.storageClass?.metadata.name ??
+                  obj.pvc.spec.storageClassName ??
+                  ''
+                }
+                resource={obj.storageClass}
               />
             </FlexItem>
-            <FlexItem>
-              <StorageWarningStatus obj={obj.pvc} onEditPVC={onEditPVC} onAddPVC={onAddPVC} />
-            </FlexItem>
-          </Flex>
-          <Content component="p">{getDescriptionFromK8sResource(obj.pvc)}</Content>
-        </Td>
-
-        {isStorageClassesAvailable && (
-          <Td modifier="truncate" dataLabel="Storage class">
-            <Flex
-              spaceItems={{ default: 'spaceItemsSm' }}
-              alignItems={{ default: 'alignItemsCenter' }}
-            >
+            {storageClassesLoaded && (
               <FlexItem>
-                <TableRowTitleDescription
-                  title={
-                    storageClassConfig?.displayName ??
-                    obj.storageClass?.metadata.name ??
-                    obj.pvc.spec.storageClassName ??
-                    ''
-                  }
-                  resource={obj.storageClass}
-                />
-              </FlexItem>
-              {storageClassesLoaded && (
-                <FlexItem>
-                  {!obj.storageClass ? (
-                    <Tooltip content="This storage class is deleted.">
+                {!obj.storageClass ? (
+                  <Tooltip content="This storage class is deleted.">
+                    <Label
+                      data-testid="storage-class-deleted"
+                      isCompact
+                      icon={<ExclamationTriangleIcon />}
+                      color="yellow"
+                    >
+                      Deleted
+                    </Label>
+                  </Tooltip>
+                ) : (
+                  storageClassConfig?.isEnabled === false && (
+                    <Tooltip
+                      data-testid="storage-class-deprecated-tooltip"
+                      content="This storage class is deprecated, but the cluster storage is still active."
+                    >
                       <Label
-                        data-testid="storage-class-deleted"
+                        data-testid="storage-class-deprecated"
                         isCompact
                         icon={<ExclamationTriangleIcon />}
                         color="yellow"
                       >
-                        Deleted
+                        Deprecated
                       </Label>
                     </Tooltip>
-                  ) : (
-                    storageClassConfig?.isEnabled === false && (
-                      <Tooltip
-                        data-testid="storage-class-deprecated-tooltip"
-                        content="This storage class is deprecated, but the cluster storage is still active."
-                      >
-                        <Label
-                          data-testid="storage-class-deprecated"
-                          isCompact
-                          icon={<ExclamationTriangleIcon />}
-                          color="yellow"
-                        >
-                          Deprecated
-                        </Label>
-                      </Tooltip>
-                    )
-                  )}
-                </FlexItem>
-              )}
-            </Flex>
-            <Content component={ContentVariants.small}>
-              {storageClassesLoaded ? storageClassConfig?.description : <Skeleton />}
-            </Content>
-          </Td>
-        )}
-        <Td dataLabel="Type">
-          <Content component="p">
-            <Flex>
-              <FlexItem spacer={{ default: 'spacerSm' }}>
-                <HddIcon />
+                  )
+                )}
               </FlexItem>
-              <FlexItem>{` Persistent storage`}</FlexItem>
-            </Flex>
+            )}
+          </Flex>
+          <Content component={ContentVariants.small}>
+            {storageClassesLoaded ? storageClassConfig?.description : <Skeleton />}
           </Content>
         </Td>
-        {workbenchEnabled && (
-          <Td dataLabel="Workbench connections">
-            <ConnectedNotebookNames
-              context={ConnectedNotebookContext.EXISTING_PVC}
-              relatedResourceName={obj.pvc.metadata.name}
-            />
-          </Td>
-        )}
-        <Td isActionCell>
-          <ActionsColumn items={actions} />
-        </Td>
-      </Tr>
-      <Tr isExpanded={isExpanded}>
-        <Td />
-        <Td dataLabel="Size">
-          <ExpandableRowContent>
-            <strong>Size</strong>
-            <StorageSizeBar pvc={obj.pvc} />
-          </ExpandableRowContent>
+      )}
+      <Td dataLabel="Type">
+        <Content component="p">
+          <Flex>
+            <FlexItem spacer={{ default: 'spacerSm' }}>
+              <HddIcon />
+            </FlexItem>
+            <FlexItem>{` Persistent storage`}</FlexItem>
+          </Flex>
+        </Content>
+      </Td>
+      <Td dataLabel="Storage size">
+        <StorageSizeBar pvc={obj.pvc} />
+      </Td>
+      {workbenchEnabled && (
+        <Td dataLabel="Workbench connections">
+          <ConnectedNotebookNames
+            context={ConnectedNotebookContext.EXISTING_PVC}
+            relatedResourceName={obj.pvc.metadata.name}
+          />
         </Td>
-        <Td />
-        <Td />
-        <Td />
-      </Tr>
-    </Tbody>
+      )}
+      <Td isActionCell>
+        <ActionsColumn items={actions} />
+      </Td>
+    </Tr>
   );
 };
 

diff --git a/frontend/src/pages/projects/screens/detail/storage/data.ts b/frontend/src/pages/projects/screens/detail/storage/data.ts
@@ -4,11 +4,6 @@ import { getStorageClassConfig } from '~/pages/storageClasses/utils';
 import { StorageTableData } from './types';
 
 export const columns: SortableData<StorageTableData>[] = [
-  {
-    field: 'expand',
-    label: '',
-    sortable: false,
-  },
   {
     field: 'name',
     label: 'Name',
@@ -36,6 +31,12 @@ export const columns: SortableData<StorageTableData>[] = [
     width: 20,
     sortable: false,
   },
+  {
+    field: 'storage_size',
+    label: 'Storage size',
+    width: 20,
+    sortable: false,
+  },
   {
     field: 'connected',
     label: 'Workbench connections',