- Add popover to storage in overview status card

  -  The storage dashboard are moved under storage navigation.
  -  For accessibility added a popover on storage section enabling linking to dahboards .

- Fixed an issue in control plane component

  - incorrect usage of `healthStateMessage` as an object.

Signed-off-by: Afreen Rahman <[email protected]>

frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json

@@ -505,6 +505,9 @@
  "The last saved values will be updated": "The last saved values will be updated",
  "Enable Thick Provisioning": "Enable Thick Provisioning",
  "By enabling thick-provisioning, volumes will allocate the requested capacity upon volume creation. Volume creation to be slower when thick-provisioning is enabled.": "By enabling thick-provisioning, volumes will allocate the requested capacity upon volume creation. Volume creation to be slower when thick-provisioning is enabled.",
+ "Storage status represents the health status of the Openshift Container Storage's storage cluster.": "Storage status represents the health status of the Openshift Container Storage's storage cluster.",
+ "Health": "Health",
+ "Openshift Container Storage": "Openshift Container Storage",
  "Standard": "Standard",
  "Data will be ingested by Multi-cloud object gateway, deduped, compressed and encrypted. The encrypted chunks would be saved on the selected backing stores. Best used when the applications would always use the OpenShift Container Storage endpoints to access the data.": "Data will be ingested by Multi-cloud object gateway, deduped, compressed and encrypted. The encrypted chunks would be saved on the selected backing stores. Best used when the applications would always use the OpenShift Container Storage endpoints to access the data.",
  "Data will be stored as is(no dedupe, compression, encryption) on the namespace stores. Namespace buckets allow for connecting to existing data and serving from them. Best used for existing data or when other applications (and native cloud services) need to access the data from outside the OpenShift Container Storage.": "Data will be stored as is(no dedupe, compression, encryption) on the namespace stores. Namespace buckets allow for connecting to existing data and serving from them. Best used for existing data or when other applications (and native cloud services) need to access the data from outside the OpenShift Container Storage.",

frontend/packages/ceph-storage-plugin/src/components/storage-popover.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { WatchK8sResults } from '@console/internal/components/utils/k8s-watch-hook';
+import {
+ HealthState,
+ healthStateMapping,
+ healthStateMessage,
+} from '@console/shared/src/components/dashboard/status-card/states';
+import Status, {
+ StatusPopupSection,
+} from '@console/shared/src/components/dashboard/status-card/StatusPopup';
+import { getCephHealthState } from './dashboards/persistent-internal/status-card/utils';
+import { WatchCephResource } from '../types';
+
+export const StoragePopover: React.FC<StoragePopoverProps> = ({ ceph }) => {
+ const { t } = useTranslation();
+
+ const health = getCephHealthState({ ceph }, t);
+ const icon =
+ health.state === HealthState.LOADING ? (
+ <div className="skeleton-health" />
+ ) : (
+ healthStateMapping[health.state].icon
+ );
+ const value = health.message || healthStateMessage(health.state, t);
+
+ return (
+ <>
+ {t(
+ "ceph-storage-plugin~Storage status represents the health status of the Openshift Container Storage's storage cluster.",
+ )}
+ <StatusPopupSection
+ firstColumn={t('ceph-storage-plugin~Provider')}
+ secondColumn={t('ceph-storage-plugin~Health')}
+ >
+ <Status key="ocs" value={value} icon={icon}>
+ <Link to="/ocs-dashboards">{t('ceph-storage-plugin~Openshift Container Storage')}</Link>
+ </Status>
+ </StatusPopupSection>
+ </>
+ );
+};
+
+type StoragePopoverProps = WatchK8sResults<WatchCephResource>;

frontend/packages/ceph-storage-plugin/src/plugin.ts

@@ -293,6 +293,9 @@ const plugin: Plugin<ConsumedExtensions> = [
  },
  },
  healthHandler: getCephHealthState,
+ // t('ceph-storage-plugin~Storage')
+ popupTitle: '%ceph-storage-plugin~Storage%',
+ popupComponent: () => import('./components/storage-popover').then((m) => m.StoragePopover),
  },
  flags: {
  required: [CEPH_FLAG],

frontend/packages/console-app/src/components/dashboards-page/ControlPlaneStatus.tsx

@@ -37,7 +37,7 @@ const ControlPlanePopup: React.FC<PrometheusHealthPopupProps> = ({ responses })
  ) : (
  healthStateMapping[health.state].icon
  );
- const value = health.message || healthStateMessage?.[health.state];
+ const value = health.message || healthStateMessage(health.state, t);
  return (
  <Status key={titles[index]} value={value} icon={icon}>
  {titles[index]}