Add utilization info on storage pool list page #2144

weirdwiz · 2025-07-08T10:48:06Z

openshift-ci · 2025-07-08T10:48:13Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: weirdwiz
Once this PR has been reviewed and has the lgtm label, please assign alfonsomthd for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

SanjalKatiyar · 2025-07-22T07:10:41Z

@weirdwiz can u plz update this PR... @bipuladh's epic added quite a few refactoring...

Signed-off-by: Divyansh Kamboj <[email protected]>

openshift-ci · 2025-07-24T15:19:35Z

@weirdwiz: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/odf-console-e2e-aws	`a021e9c`	link	true	`/test odf-console-e2e-aws`

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

SanjalKatiyar · 2025-07-25T06:46:34Z

@weirdwiz u also need to update status card on main overview dashboard: https://github.com/red-hat-storage/odf-console/blob/master/packages/odf/components/overview/storage-cluster-card/StorageClusterCard.tsx#L178

SanjalKatiyar · 2025-07-25T06:11:22Z

packages/ocs/components/pool-utilization/PoolUtilizationPopoverContent.tsx

+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';


Suggested change

import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';

import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';

import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens';

import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';

SanjalKatiyar · 2025-07-25T06:13:22Z

packages/ocs/components/pool-utilization/PoolUtilizationPopoverContent.tsx

+    <div className="odf-pool-utilization-popover">
+      <div className="odf-pool-utilization-popover__header">
+        <Icon style={{ color: iconColor }} className="pf-v5-u-mr-sm" />
+        <span className="odf-pool-utilization-popover__pool-name">
+          {pool.metadata.name}
+        </span>
+      </div>
+      <div className="odf-pool-utilization-popover__body">
+        <div className="odf-pool-utilization-popover__item">
+          <strong>{t('Used:')}</strong> {pool.usedCapacity}
+          <Label
+            variant="filled"
+            color={pool.type === PoolType.BLOCK ? 'blue' : 'green'}
+            className="pf-v5-u-ml-sm"
+          >
+            {volumeMode}
+          </Label>
+        </div>
+        <div className="odf-pool-utilization-popover__item">
+          <strong>{t('Maximum available:')}</strong> {pool.totalCapacity}
+        </div>
+        {pool.critical && (
+          <div className="odf-pool-utilization-popover__message">
+            {t(
+              'Storage pool critically full. Add capacity to avoid disruptions'
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};


nits: use https://v5-archive.patternfly.org/components/description-list#horizontal for better styling...

SanjalKatiyar · 2025-07-25T06:15:15Z

packages/ocs/components/pool-utilization/pool-utilization.scss

+.odf-pool-utilization-card {
+  &__alert {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+
+    &-icon {
+      color: var(--pf-v5-global--warning-color--100);
+      font-size: var(--pf-v5-global--icon--FontSize--lg);
+    }
+
+    &-count {
+      font-size: var(--pf-v5-global--FontSize--2xl);
+      font-weight: var(--pf-v5-global--FontWeight--bold);
+      color: var(--pf-v5-global--warning-color--100);
+    }
+  }
+
+  &__description {
+    color: var(--pf-v5-global--Color--200);
+    margin-bottom: var(--pf-v5-global--spacer--md);
+  }
+
+  &__usage {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__highlighted-row {
+    border-left: 3px solid var(--pf-v5-global--primary-color--100);
+    padding-left: var(--pf-v5-global--spacer--md);
+  }
+
+  &__no-issues,
+  &__loading,
+  &__error {
+    text-align: center;
+    padding: var(--pf-v5-global--spacer--xl) var(--pf-v5-global--spacer--md);
+    color: var(--pf-v5-global--Color--200);
+  }
+
+  &__healthy-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--pf-v5-global--spacer--2xl) var(--pf-v5-global--spacer--md);
+    min-height: 200px;
+  }
+
+  &__healthy-icon {
+    margin-bottom: var(--pf-v5-global--spacer--md);
+  }
+
+  &__healthy-message {
+    font-size: var(--pf-v5-global--FontSize--xl);
+    color: var(--pf-v5-global--Color--100);
+    margin: 0;
+  }
+
+  &__error {
+    color: var(--pf-v5-global--danger-color--100);
+  }
+}
+
+.odf-pool-utilization-popover {
+  &__header {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+  }
+
+  &__pool-name {
+    color: var(--pf-v5-global--Color--100);
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-v5-global--spacer--sm);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-v5-global--spacer--sm);
+  }
+
+  &__message {
+    margin-top: var(--pf-v5-global--spacer--sm);
+    padding-top: var(--pf-v5-global--spacer--sm);
+    color: var(--pf-v5-global--Color--200);
+  }
+}


most of this won't be needed if u use https://v5-archive.patternfly.org/components/description-list#horizontal from PF5...

SanjalKatiyar · 2025-07-25T06:16:20Z

packages/ocs/dashboards/persistent-internal/pool-utilization-card/pool-utilization-card.scss

+.odf-pool-utilization-card {
+  &__alert {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+
+    &-icon {
+      color: var(--pf-v5-global--warning-color--100);
+      font-size: var(--pf-v5-global--icon--FontSize--lg);
+    }
+
+    &-count {
+      font-size: var(--pf-v5-global--FontSize--2xl);
+      font-weight: var(--pf-v5-global--FontWeight--bold);
+      color: var(--pf-v5-global--warning-color--100);
+    }
+  }
+
+  &__description {
+    color: var(--pf-v5-global--Color--200);
+    margin-bottom: var(--pf-v5-global--spacer--md);
+  }
+
+  &__usage {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__highlighted-row {
+    border-left: 3px solid var(--pf-v5-global--primary-color--100);
+    padding-left: var(--pf-v5-global--spacer--md);
+  }
+
+  &__no-issues,
+  &__loading,
+  &__error {
+    text-align: center;
+    padding: var(--pf-v5-global--spacer--xl) var(--pf-v5-global--spacer--md);
+    color: var(--pf-v5-global--Color--200);
+  }
+
+  &__error {
+    color: var(--pf-v5-global--danger-color--100);
+  }
+}
+
+.odf-pool-utilization-popover {
+  &__header {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+  }
+
+  &__pool-name {
+    color: var(--pf-v5-global--Color--100);
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-v5-global--spacer--sm);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-v5-global--spacer--sm);
+  }
+
+  &__message {
+    margin-top: var(--pf-v5-global--spacer--sm);
+    padding-top: var(--pf-v5-global--spacer--sm);
+    color: var(--pf-v5-global--Color--200);
+  }
+}


I can see multiple classes been repeated (copy-pasted) here from other file... keep same classes at a single common scss file and import from there...

SanjalKatiyar · 2025-07-25T06:19:02Z

packages/ocs/components/pool-utilization/index.ts

@@ -0,0 +1 @@
+export * from './PoolUtilizationPopoverContent';


move all the files under this folder to pool-utilization-card folder directly... it's a helper component only used in that card, we don't need entire new folder for this under components...

SanjalKatiyar · 2025-07-25T06:40:43Z

packages/ocs/storage-pool/StoragePoolListPage.tsx

  }: CustomData = rowData;

  const poolType = obj.type;
  const hideItems =
    poolType === PoolType.FILESYSTEM
      ? [ModalKeys.EDIT_LABELS, ModalKeys.EDIT_ANN]
      : [];
-  const replica = obj.spec?.replicated?.size;


why have we removed this ??

SanjalKatiyar · 2025-07-25T06:42:02Z

packages/ocs/storage-pool/StoragePoolListPage.tsx

-  const rawCapacity: string = poolRawCapacity?.[name]
-    ? humanizeBinaryBytes(poolRawCapacity?.[name])?.string
-    : '-';


same here...

SanjalKatiyar · 2025-07-25T06:43:12Z

packages/ocs/storage-pool/StoragePoolListPage.tsx

+            <div
+              className="odf-pool-utilization-card__usage"
+              style={{ cursor: 'pointer' }}
+            >
+              {isCritical ? (
+                <ExclamationCircleIcon
+                  style={{ color: dangerColor.value }}
+                  className="pf-v5-u-mr-sm"
+                />
+              ) : (
+                <ExclamationTriangleIcon
+                  style={{ color: warningColor.value }}
+                  className="pf-v5-u-mr-sm"
+                />
+              )}
+              <span>
+                {usedCapacityDisplay} ({utilizationPercentage.toFixed(1)}%)
+              </span>
+            </div>


use Button with variant as "link"

SanjalKatiyar · 2025-07-25T06:44:43Z

packages/ocs/utils/pool-utilization.tsx

+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_success_color_100 as successColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';


no need to import from dist

SanjalKatiyar · 2025-07-25T06:45:08Z

packages/ocs/utils/pool-utilization.tsx

+export const POOL_NEAR_FULL_THRESHOLD = 70; // percent
+export const POOL_FULL_THRESHOLD = 90; // percent
+
+export enum PoolUtilizationState {
+  NORMAL = 'NORMAL',
+  NEAR_FULL = 'NEAR_FULL',
+  FULL = 'FULL',
+}


move to constants

alfonsomthd · 2025-07-25T07:46:40Z

locales/en/plugin__odf-console.json

@@ -36,6 +36,10 @@
  "{{count}} results found for {{clusterName}}_other": "{{count}} results found for {{clusterName}}",
  "{{count}} selected_one": "{{count}} selected",
  "{{count}} selected_other": "{{count}} selected",
+  "{{count}} storage pools critically full_one": "{{count}} storage pools critically full",


Suggested change

"{{count}} storage pools critically full_one": "{{count}} storage pools critically full",

"{{count}} storage pools critically full_one": "{{count}} storage pool critically full",

alfonsomthd · 2025-07-25T07:46:57Z

locales/en/plugin__odf-console.json

@@ -36,6 +36,10 @@
  "{{count}} results found for {{clusterName}}_other": "{{count}} results found for {{clusterName}}",
  "{{count}} selected_one": "{{count}} selected",
  "{{count}} selected_other": "{{count}} selected",
+  "{{count}} storage pools critically full_one": "{{count}} storage pools critically full",
+  "{{count}} storage pools critically full_other": "{{count}} storage pools critically full",
+  "{{count}} storage pools need attention_one": "{{count}} storage pools need attention",


Suggested change

"{{count}} storage pools need attention_one": "{{count}} storage pools need attention",

"{{count}} storage pools need attention_one": "{{count}} storage pool needs attention",

alfonsomthd · 2025-07-25T08:04:54Z

packages/ocs/queries/ceph-storage.ts

@@ -267,6 +269,21 @@ export const getPoolQuery = (
    [StorageDashboardQuery.POOL_COMPRESSION_ELIGIBILITY]: `(((ceph_pool_compress_under_bytes{managedBy='${managedByOCS}'} > 0) / ceph_pool_stored_raw{managedBy='${managedByOCS}'}) * 100) * on (pool_id) group_left(name)ceph_pool_metadata{name=~'${names}',managedBy='${managedByOCS}'}`,
    [StorageDashboardQuery.POOL_COMPRESSION_RATIO]: `((ceph_pool_compress_under_bytes{managedBy='${managedByOCS}'} / ceph_pool_compress_bytes_used{managedBy='${managedByOCS}'} > 0) and on(pool_id) (((ceph_pool_compress_under_bytes{managedBy='${managedByOCS}'} > 0) / ceph_pool_stored_raw{managedBy='${managedByOCS}'}) * 100 > 0.5)) * on (pool_id) group_left(name)ceph_pool_metadata{name=~'${names}',managedBy='${managedByOCS}'}`,
    [StorageDashboardQuery.POOL_MIRRORING_IMAGE_HEALTH]: `max by (namespace, managedBy, rados_namespace, name) (ocs_pool_mirroring_image_health{managedBy='${managedByOCS}', name=~'${names}'}) * on (namespace, managedBy, rados_namespace, name) group_left () (max by (namespace, managedBy, rados_namespace, name) (ocs_pool_mirroring_status{managedBy='${managedByOCS}', name=~'${names}'}))`,
+    [StorageDashboardQuery.POOL_UTILIZATION_PERCENTAGE]: `((ceph_pool_bytes_used{managedBy='${managedByOCS}'} / (ceph_pool_bytes_used{managedBy='${managedByOCS}'} + ceph_pool_avail_raw{managedBy='${managedByOCS}'})) * 100) * on (pool_id) group_left(name)ceph_pool_metadata{name=~'${names}',managedBy='${managedByOCS}'}`,


@aruniiird can you PTAL at the queries?

openshift-merge-robot added the needs-rebase label Jul 17, 2025

weirdwiz force-pushed the master branch from 4ac2da2 to f35353c Compare July 21, 2025 15:15

openshift-merge-robot removed the needs-rebase label Jul 21, 2025

weirdwiz force-pushed the master branch from f35353c to f329b39 Compare July 22, 2025 05:52

weirdwiz force-pushed the master branch 7 times, most recently from ea22dc6 to 4429cfe Compare July 24, 2025 13:11

add pool utilization to the storagepoollistpage

a021e9c

Signed-off-by: Divyansh Kamboj <[email protected]>

weirdwiz force-pushed the master branch from 4429cfe to a021e9c Compare July 24, 2025 13:12

SanjalKatiyar requested changes Jul 25, 2025

View reviewed changes

openshift-ci bot assigned SanjalKatiyar Jul 25, 2025

alfonsomthd reviewed Jul 25, 2025

View reviewed changes

		import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
		import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';

		@@ -0,0 +1 @@
		export * from './PoolUtilizationPopoverContent';

	"{{count}} storage pools critically full_one": "{{count}} storage pools critically full",
	"{{count}} storage pools critically full_one": "{{count}} storage pool critically full",

	"{{count}} storage pools need attention_one": "{{count}} storage pools need attention",
	"{{count}} storage pools need attention_one": "{{count}} storage pool needs attention",

Add utilization info on storage pool list page #2144

Are you sure you want to change the base?

Add utilization info on storage pool list page #2144

Uh oh!

Conversation

weirdwiz commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openshift-ci bot commented Jul 8, 2025

Uh oh!

SanjalKatiyar commented Jul 22, 2025

Uh oh!

openshift-ci bot commented Jul 24, 2025

Uh oh!

SanjalKatiyar commented Jul 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

weirdwiz commented Jul 8, 2025 •

edited

Loading