Merge pull request #1674 from bipuladh/udpates

Adds progress component for storage quota utilization

packages/odf/components/storage-consumers/QuotaUtilizationProgress.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as _ from 'lodash-es';
+import {
+  Progress,
+  ProgressMeasureLocation,
+  ProgressVariant,
+} from '@patternfly/react-core';
+
+type StorageQuotaUtilizationProps = {
+  storageQuota: number;
+  quotaUtilizationRatio: number;
+};
+
+export const StorageQuotaUtilizationProgress: React.FC<StorageQuotaUtilizationProps> =
+  ({ storageQuota, quotaUtilizationRatio }) => {
+    const usagePercentage = quotaUtilizationRatio * 100;
+    const usedAmount = storageQuota * quotaUtilizationRatio;
+    const variant = usagePercentage > 80 ? ProgressVariant.warning : undefined;
+    const isValid =
+      _.isNumber(storageQuota) && _.isNumber(quotaUtilizationRatio);
+    return isValid ? (
+      <Progress
+        value={usedAmount}
+        measureLocation={ProgressMeasureLocation.inside}
+        variant={variant}
+        max={storageQuota}
+        size="sm"
+      />
+    ) : (
+      <>-</>
+    );
+  };

packages/odf/components/storage-consumers/client-list.tsx

@@ -49,6 +49,7 @@ import {
   storageConsumerNameFilter,
 } from './list-filter';
 import { ClientOnBoardingModal } from './onboarding-modal';
+import { StorageQuotaUtilizationProgress } from './QuotaUtilizationProgress';
 import { RotateKeysModal } from './rotate-keys-modal';
 import './client-list.scss';
 
@@ -178,7 +179,7 @@ const ClientsList: React.FC<ClientListProps> = (props) => {
           case 'storageQuotaUtilRatio':
             column.title = t('Storage quota utilization ratio');
             column.sort = 'status.client.storageQuotaUtilization';
-            column.props.info = { popover: <StorageQuotaPopoverContent /> };
+            column.transforms = [sortable];
             break;
           case 'openshiftVersion':
             column.title = t('Openshift version');
@@ -353,7 +354,14 @@ const StorageClientRow: React.FC<
             data = humanizedStorageQuota;
             break;
           case 'storageQuotaUtilRatio':
-            data = getStorageQuotaUtilizationRatio(obj) || '-';
+            data = (
+              <StorageQuotaUtilizationProgress
+                quotaUtilizationRatio={Number(
+                  getStorageQuotaUtilizationRatio(obj)
+                )}
+                storageQuota={obj?.spec?.storageQuotaInGiB}
+              />
+            );
             break;
           case 'openshiftVersion':
             data = getOpenshiftVersion(obj) || '-';