From 415fe912b48302b15927d8a044f2bcfdf197c15a Mon Sep 17 00:00:00 2001
From: Bipul Adhikari <badhikar@redhat.com>
Date: Tue, 12 Nov 2024 10:19:50 +0545
Subject: [PATCH] Adds column for quota utilization in client list page

Signed-off-by: Bipul Adhikari <badhikar@redhat.com>
---
 locales/en/plugin__odf-console.json               |  1 +
 .../components/storage-consumers/client-list.tsx  | 15 +++++++++++++++
 packages/shared/src/types/storage.ts              |  1 +
 3 files changed, 17 insertions(+)

diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
index a28e1afa1..4214fb14f 100644
--- a/locales/en/plugin__odf-console.json
+++ b/locales/en/plugin__odf-console.json
@@ -1222,6 +1222,7 @@
   "To connect a storage client to the Data Foundation provider cluster, click <2>Generate client onboarding token</2> and use the token to deploy the client cluster.": "To connect a storage client to the Data Foundation provider cluster, click <2>Generate client onboarding token</2> and use the token to deploy the client cluster.",
   "Cluster name (ID)": "Cluster name (ID)",
   "Storage quota": "Storage quota",
+  "Storage quota utilization ratio": "Storage quota utilization ratio",
   "Openshift version": "Openshift version",
   "Data Foundation version": "Data Foundation version",
   "Last heartbeat": "Last heartbeat",
diff --git a/packages/odf/components/storage-consumers/client-list.tsx b/packages/odf/components/storage-consumers/client-list.tsx
index 273e5803c..253c06ff5 100644
--- a/packages/odf/components/storage-consumers/client-list.tsx
+++ b/packages/odf/components/storage-consumers/client-list.tsx
@@ -116,6 +116,10 @@ const tableColumns = [
     className: '',
     id: 'storageQuota',
   },
+  {
+    className: '',
+    id: 'storageQuotaUtilRatio',
+  },
   {
     className: '',
     id: 'openshiftVersion',
@@ -171,6 +175,11 @@ const ClientsList: React.FC<ClientListProps> = (props) => {
             column.sort = 'status.storageQuotaInGiB';
             column.props.info = { popover: <StorageQuotaPopoverContent /> };
             break;
+          case 'storageQuotaUtilRation':
+            column.title = t('Storage quota utilization ratio');
+            column.sort = 'status.client.storageQuotaUtilization';
+            column.props.info = { popover: <StorageQuotaPopoverContent /> };
+            break;
           case 'openshiftVersion':
             column.title = t('Openshift version');
             column.sort = 'status.client.platformVersion';
@@ -216,6 +225,9 @@ const ClientsList: React.FC<ClientListProps> = (props) => {
 const getOpenshiftVersion = (obj: StorageConsumerKind) =>
   obj?.status?.client?.platformVersion;
 
+const getStorageQuotaUtilizationRatio = (obj: StorageConsumerKind) =>
+  `${obj?.status?.client?.storageQuotaUtilizationRatio}`;
+
 const getDataFoundationVersion = (obj: StorageConsumerKind) =>
   obj?.status?.client?.operatorVersion;
 
@@ -340,6 +352,9 @@ const StorageClientRow: React.FC<
           case 'storageQuota':
             data = humanizedStorageQuota;
             break;
+          case 'storageQuotaUtilizationRatio':
+            data = getStorageQuotaUtilizationRatio(obj) || '-';
+            break;
           case 'openshiftVersion':
             data = getOpenshiftVersion(obj) || '-';
             break;
diff --git a/packages/shared/src/types/storage.ts b/packages/shared/src/types/storage.ts
index 2295c5f2f..bef7d4dd8 100644
--- a/packages/shared/src/types/storage.ts
+++ b/packages/shared/src/types/storage.ts
@@ -193,6 +193,7 @@ type ClientStatus = {
   clusterId: string;
   clusterName: string;
   name: string;
+  storageQuotaUtilizationRatio: number;
 };
 
 export type StorageConsumerKind = K8sResourceCommon & {