[release-4.4] Bug 1811031: Independent Dashboard is not showing correct metrics

frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/utils.ts

@@ -33,7 +33,7 @@ export const getCephHealthState: PrometheusHealthHandler = (responses = [], erro
 export const getDataResiliencyState: PrometheusHealthHandler = (responses = [], errors = []) => {
   const progress: number = getResiliencyProgress(responses[0]);
   if (errors[0]) {
-    return { state: HealthState.UNKNOWN };
+    return { state: HealthState.NOT_AVAILABLE };
   }
   if (!responses[0]) {
     return { state: HealthState.LOADING };

frontend/packages/ceph-storage-plugin/src/components/independent-dashboard-page/breakdown-card/card.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Dropdown, humanizeBinaryBytes } from '@console/internal/components/utils';
+import {
+  DashboardItemProps,
+  withDashboardResources,
+} from '@console/internal/components/dashboard/with-dashboard-resources';
+import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
+import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
+import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
+import { getInstantVectorStats } from '@console/internal/components/graphs/utils';
+import {
+  breakdownIndependentQueryMap,
+  CAPACITY_BREAKDOWN_QUERIES,
+} from '../../../constants/queries';
+import { PROJECTS } from '../../../constants';
+import {
+  sortInstantVectorStats,
+  getStackChartStats,
+} from '../../dashboard-page/storage-dashboard/breakdown-card/utils';
+import { HeaderPrometheusViewLink } from '../../dashboard-page/storage-dashboard/breakdown-card/breakdown-header';
+import { BreakdownCardBody } from '../../dashboard-page/storage-dashboard/breakdown-card/breakdown-body';
+import '../../dashboard-page/storage-dashboard/capacity-breakdown/capacity-breakdown-card.scss';
+
+const keys = Object.keys(breakdownIndependentQueryMap);
+const dropdownOptions = _.zipObject(keys, keys);
+
+const BreakdownCard: React.FC<DashboardItemProps> = ({
+  watchPrometheus,
+  stopWatchPrometheusQuery,
+  prometheusResults,
+}) => {
+  const [metricType, setMetricType] = React.useState(PROJECTS);
+  const { queries, model, metric } = breakdownIndependentQueryMap[metricType];
+  const queryKeys = Object.keys(queries);
+
+  React.useEffect(() => {
+    queryKeys.forEach((q) => watchPrometheus(queries[q]));
+    return () => queryKeys.forEach((key) => stopWatchPrometheusQuery(queries[key]));
+  }, [watchPrometheus, stopWatchPrometheusQuery, metricType, queryKeys, queries]);
+
+  const results = queryKeys.map((key) => prometheusResults.getIn([queries[key], 'data']));
+  const queriesLoadError = queryKeys.some((q) =>
+    prometheusResults.getIn([queries[q], 'loadError']),
+  );
+
+  const queriesDataLoaded = queryKeys.some((q) => !prometheusResults.getIn([queries[q], 'data']));
+
+  const humanize = humanizeBinaryBytes;
+  const top6MetricsData = getInstantVectorStats(results[0], metric);
+  const top5SortedMetricsData = sortInstantVectorStats(top6MetricsData);
+  const top5MetricsStats = getStackChartStats(top5SortedMetricsData, humanize);
+  const metricTotal = results[1]?.data?.result[0]?.value[1];
+  const link = `topk(20, (${CAPACITY_BREAKDOWN_QUERIES[queryKeys[0]]}))`;
+
+  return (
+    <DashboardCard>
+      <DashboardCardHeader>
+        <DashboardCardTitle>Capacity breakdown</DashboardCardTitle>
+        <div className="ceph-capacity-breakdown-card__header">
+          <HeaderPrometheusViewLink link={link} />
+          <Dropdown
+            items={dropdownOptions}
+            onChange={setMetricType}
+            selectedKey={metricType}
+            title={metricType}
+          />
+        </div>
+      </DashboardCardHeader>
+      <DashboardCardBody classname="ceph-capacity-breakdown-card__body">
+        <BreakdownCardBody
+          isLoading={queriesDataLoaded}
+          hasLoadError={queriesLoadError}
+          metricTotal={metricTotal}
+          capacityUsed={metricTotal}
+          top5MetricsStats={top5MetricsStats}
+          metricModel={model}
+          humanize={humanize}
+        />
+      </DashboardCardBody>
+    </DashboardCard>
+  );
+};
+
+export default withDashboardResources(BreakdownCard);

frontend/packages/ceph-storage-plugin/src/components/independent-dashboard-page/status-card/card.tsx

@@ -1,35 +1,43 @@
 import * as React from 'react';
 import { GalleryItem, Gallery } from '@patternfly/react-core';
 import { withDashboardResources } from '@console/internal/components/dashboard/with-dashboard-resources';
-import { PrometheusResponse } from '@console/internal/components/graphs';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
 import HealthBody from '@console/shared/src/components/dashboard/status-card/HealthBody';
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
 import HealthItem from '@console/shared/src/components/dashboard/status-card/HealthItem';
-import { StorageDashboardQuery, STORAGE_HEALTH_QUERIES } from '../../../constants/queries';
-import { getCephHealthState } from '../../dashboard-page/storage-dashboard/status-card/utils';
-import { CephAlerts } from '../../dashboard-page/storage-dashboard/status-card/status-card';
+import { referenceForModel, K8sResourceKind } from '@console/internal/module/k8s';
+import { FirehoseResource, FirehoseResult } from '@console/internal/components/utils/types';
+import { OCSServiceModel } from '../../../models';
+import { getClusterHealth } from '../../independent-mode/utils';
+import { OCS_INDEPENDENT_CR_NAME, CEPH_STORAGE_NAMESPACE } from '../../../constants';
 
-const cephStatusQuery = STORAGE_HEALTH_QUERIES[StorageDashboardQuery.CEPH_STATUS_QUERY];
+const clusterResource: FirehoseResource = {
+  kind: referenceForModel(OCSServiceModel),
+  name: OCS_INDEPENDENT_CR_NAME,
+  namespaced: true,
+  namespace: CEPH_STORAGE_NAMESPACE,
+  isList: false,
+  prop: 'ocs',
+};
 
 const StatusCard = withDashboardResources((props) => {
-  const { watchPrometheus, stopWatchPrometheusQuery, prometheusResults } = props;
+  const { watchK8sResource, stopWatchK8sResource, resources } = props;
 
   React.useEffect(() => {
-    watchPrometheus(cephStatusQuery);
+    watchK8sResource(clusterResource);
     return () => {
-      stopWatchPrometheusQuery(cephStatusQuery);
+      stopWatchK8sResource(clusterResource);
     };
-  }, [watchPrometheus, stopWatchPrometheusQuery]);
+  }, [watchK8sResource, stopWatchK8sResource]);
 
-  const cephHealthData = prometheusResults.getIn([cephStatusQuery, 'data']) as PrometheusResponse;
-  const cephHealthLoadError = prometheusResults.getIn([
-    cephStatusQuery,
-    'loadError',
-  ]) as PrometheusResponse;
-  const cephHealthState = getCephHealthState([cephHealthData], [cephHealthLoadError]);
+  const cluster = resources?.ocs as FirehoseResult<K8sResourceKind>;
+  const data = cluster?.data;
+  const loaded = cluster?.loaded;
+  const error = cluster?.loadError;
+
+  const status = getClusterHealth(data, loaded, error);
 
   return (
     <DashboardCard gradient>
@@ -40,11 +48,10 @@ const StatusCard = withDashboardResources((props) => {
         <HealthBody>
           <Gallery className="co-overview-status__health" gutter="md">
             <GalleryItem>
-              <HealthItem title="OCS Cluster" state={cephHealthState.state} />
+              <HealthItem title="OCS Cluster" state={status} />
             </GalleryItem>
           </Gallery>
         </HealthBody>
-        <CephAlerts />
       </DashboardCardBody>
     </DashboardCard>
   );

frontend/packages/ceph-storage-plugin/src/components/independent-dashboard-page/utilization-card/card.tsx

@@ -11,7 +11,7 @@ import {
   Duration,
 } from '@console/shared/src/components/dashboard/duration-hook';
 import { PrometheusUtilizationItem } from '@console/internal/components/dashboard/dashboards-page/cluster-dashboard/utilization-card';
-import { StorageDashboardQuery, UTILIZATION_QUERY } from '../../../constants/queries';
+import { StorageDashboardQuery, INDEPENDENT_UTILIZATION_QUERIES } from '../../../constants/queries';
 
 const UtilizationCard: React.FC = () => {
   const [duration, setDuration] = useMetricDuration();
@@ -27,15 +27,17 @@ const UtilizationCard: React.FC = () => {
         <UtilizationBody timestamps={timestamps}>
           <PrometheusUtilizationItem
             title="Used Capacity"
-            utilizationQuery={UTILIZATION_QUERY[StorageDashboardQuery.CEPH_CAPACITY_USED]}
+            utilizationQuery={INDEPENDENT_UTILIZATION_QUERIES[StorageDashboardQuery.USED_CAPACITY]}
             duration={duration}
             humanizeValue={humanizeBinaryBytes}
             byteDataType={ByteDataTypes.BinaryBytes}
             setTimestamps={setTimestamps}
           />
           <PrometheusUtilizationItem
             title="Requested capacity"
-            utilizationQuery={UTILIZATION_QUERY[StorageDashboardQuery.CEPH_CAPACITY_TOTAL]}
+            utilizationQuery={
+              INDEPENDENT_UTILIZATION_QUERIES[StorageDashboardQuery.REQUESTED_CAPACITY]
+            }
             duration={duration}
             humanizeValue={humanizeBinaryBytes}
             byteDataType={ByteDataTypes.BinaryBytes}

frontend/packages/ceph-storage-plugin/src/components/independent-mode/install.tsx

@@ -95,6 +95,7 @@ const InstallExternalCluster = withHandlePromise((props: InstallExternalClusterP
         'cluster-name': clusterName,
         fsid: externalFSID,
         'admin-secret': externalAdminSecret,
+        'mon-secret': 'mon-secret',
       },
       type: 'Opaque',
     };
@@ -120,7 +121,7 @@ const InstallExternalCluster = withHandlePromise((props: InstallExternalClusterP
       },
       spec: {
         externalStorage: {
-          enabled: true,
+          enable: true,
         },
       },
     };

frontend/packages/ceph-storage-plugin/src/components/independent-mode/utils.ts

@@ -1,6 +1,8 @@
 import * as _ from 'lodash';
 import { ClusterServiceVersionKind } from '@console/operator-lifecycle-manager';
+import { HealthState } from '@console/shared/src/components/dashboard/status-card/states';
 import { DataValidator, DataState, ErrorType, Field } from './types';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 
 export const getValidJSON: DataValidator = (fData) => {
   try {
@@ -27,3 +29,30 @@ export const checkForIndependentSupport = (csv: ClusterServiceVersionKind): bool
     csv.metadata.annotations?.['external.cluster.ocs.openshift.io/supported'];
   return independent === 'true';
 };
+
+enum ClusterPhase {
+  CONNECTED = 'Connected',
+  READY = 'Ready',
+  CONNECTING = 'Connecting',
+  PROGRESSING = 'Progressing',
+  ERROR = 'Error',
+}
+
+const PhaseToState = Object.freeze({
+  [ClusterPhase.CONNECTED]: HealthState.OK,
+  [ClusterPhase.READY]: HealthState.OK,
+  [ClusterPhase.CONNECTING]: HealthState.UPDATING,
+  [ClusterPhase.PROGRESSING]: HealthState.UPDATING,
+  [ClusterPhase.ERROR]: HealthState.ERROR,
+});
+
+export const getClusterHealth = (cluster: K8sResourceKind, loaded: boolean, error): HealthState => {
+  const phase = cluster?.status?.phase;
+  if (!_.isEmpty(error)) {
+    if (error?.response?.status === 404) return HealthState.NOT_AVAILABLE;
+    return HealthState.ERROR;
+  }
+  if (!loaded) return HealthState.LOADING;
+  if (!_.isEmpty(cluster)) return PhaseToState[phase];
+  return HealthState.NOT_AVAILABLE;
+};

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

@@ -9,3 +9,4 @@ export const PODS = 'Pods';
 export const BY_USED = 'By Used Capacity';
 export const BY_REQUESTED = 'By Requested Capacity';
 export const OCS_OPERATOR = 'ocs-operator';
+export const OCS_INDEPENDENT_CR_NAME = 'ocs-independent-storagecluster';

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

@@ -21,8 +21,17 @@ export enum StorageDashboardQuery {
   STORAGE_CEPH_CAPACITY_USED_QUERY = 'STORAGE_CEPH_CAPACITY_USED_QUERY',
   RESILIENCY_PROGRESS = 'RESILIENCY_PROGRESS',
   NODES_BY_USED = 'NODES_BY_USED',
+  USED_CAPACITY = 'USED_CAPACITY',
+  REQUESTED_CAPACITY = 'REQUESTED_CAPACITY',
 }
 
+export const INDEPENDENT_UTILIZATION_QUERIES = {
+  [StorageDashboardQuery.REQUESTED_CAPACITY]:
+    'sum((kube_persistentvolumeclaim_resource_requests_storage_bytes * on (namespace,persistentvolumeclaim) group_right() kube_pod_spec_volumes_persistentvolumeclaims_info) * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass)  group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"}))',
+  [StorageDashboardQuery.USED_CAPACITY]:
+    'sum((kubelet_volume_stats_used_bytes * on (namespace,persistentvolumeclaim) group_right() kube_pod_spec_volumes_persistentvolumeclaims_info) * on (namespace,persistentvolumeclaim) group_left(storageclass, provisioner) (kube_persistentvolumeclaim_info * on (storageclass)  group_left(provisioner) kube_storageclass_info {provisioner=~"(.*rbd.csi.ceph.com)|(.*cephfs.csi.ceph.com)|(ceph.rook.io/block)"}))',
+};
+
 export const STORAGE_HEALTH_QUERIES = {
   [StorageDashboardQuery.CEPH_STATUS_QUERY]: 'ceph_health_status',
 };
@@ -121,6 +130,42 @@ export const breakdownQueryMap = {
   },
 };
 
+export const breakdownIndependentQueryMap = {
+  [PROJECTS]: {
+    model: ProjectModel,
+    metric: 'namespace',
+    queries: {
+      [StorageDashboardQuery.PROJECTS_BY_USED]: `(topk(6,(${
+        CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PROJECTS_BY_USED]
+      })))`,
+      [StorageDashboardQuery.PROJECTS_TOTAL_USED]:
+        CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PROJECTS_TOTAL_USED],
+    },
+  },
+  [STORAGE_CLASSES]: {
+    model: StorageClassModel,
+    metric: 'storageclass',
+    queries: {
+      [StorageDashboardQuery.STORAGE_CLASSES_BY_USED]: `(topk(6,(${
+        CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.STORAGE_CLASSES_BY_USED]
+      })))`,
+      [StorageDashboardQuery.STORAGE_CLASSES_TOTAL_USED]:
+        CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.STORAGE_CLASSES_TOTAL_USED],
+    },
+  },
+  [PODS]: {
+    model: PodModel,
+    metric: 'pod',
+    queries: {
+      [StorageDashboardQuery.PODS_BY_USED]: `(topk(6,(${
+        CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PODS_BY_USED]
+      })))`,
+      [StorageDashboardQuery.PODS_TOTAL_USED]:
+        CAPACITY_BREAKDOWN_QUERIES[StorageDashboardQuery.PODS_TOTAL_USED],
+    },
+  },
+};
+
 export const utilizationPopoverQueryMap = [
   {
     model: ProjectModel,

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

@@ -3,14 +3,15 @@ import { setFlag, handleError } from '@console/internal/actions/features';
 import { ActionFeatureFlagDetector } from '@console/plugin-sdk';
 import { SubscriptionModel } from '@console/operator-lifecycle-manager';
 import { OCSServiceModel } from './models';
+import { OCS_INDEPENDENT_CR_NAME, CEPH_STORAGE_NAMESPACE } from './constants';
 
 export const OCS_INDEPENDENT_FLAG = 'OCS_INDEPENDENT';
 
 const isIndependent = (data: K8sResourceKind): boolean =>
   data.spec?.externalStorage?.enable ?? false;
 
 export const detectIndependentMode: ActionFeatureFlagDetector = (dispatch) =>
-  k8sGet(OCSServiceModel, 'ocs-independent-storagecluster', 'openshift-storage').then(
+  k8sGet(OCSServiceModel, OCS_INDEPENDENT_CR_NAME, CEPH_STORAGE_NAMESPACE).then(
     (obj: K8sResourceKind) => dispatch(setFlag(OCS_INDEPENDENT_FLAG, isIndependent(obj))),
     (err) => {
       err?.response?.status === 404
@@ -27,7 +28,7 @@ export const isOCS44Version = (subscription: K8sResourceKind): boolean => {
 };
 
 export const detectOCSVersion44: ActionFeatureFlagDetector = (dispatch) =>
-  k8sGet(SubscriptionModel, 'ocs-subscription', 'openshift-storage').then(
+  k8sGet(SubscriptionModel, 'ocs-subscription', CEPH_STORAGE_NAMESPACE).then(
     (obj: K8sResourceKind) => dispatch(setFlag(OCS_VERSION_4_4_FLAG, isOCS44Version(obj))),
     (err) => {
       err?.response?.status === 404

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

@@ -301,7 +301,7 @@ const plugin: Plugin<ConsumedExtensions> = [
       position: GridPosition.MAIN,
       loader: () =>
         import(
-          './components/dashboard-page/storage-dashboard/capacity-breakdown/capacity-breakdown-card' /* webpackChunkName: "ceph-storage-usage-breakdown-card" */
+          './components/independent-dashboard-page/breakdown-card/card' /* webpackChunkName: "independent-breakdown-card" */
         ).then((m) => m.default),
       required: OCS_INDEPENDENT_FLAG,
     },

frontend/packages/noobaa-storage-plugin/src/components/status-card/statuses.tsx

@@ -40,9 +40,12 @@ export const getNooBaaState: GetObjectServiceStatus = (
   const unhealthyBucketsRatio = unhealthyBuckets / buckets;
   const noData = !(buckets && unhealthyBuckets && pools && unhealthyPools && noobaaPhase);
 
-  if (hasLoadError || noData) {
+  if (hasLoadError) {
     return { state: HealthState.UNKNOWN };
   }
+  if (noData) {
+    return { state: HealthState.NOT_AVAILABLE };
+  }
   if (isLoading) {
     return { state: HealthState.LOADING };
   }