Create new extension to show health status from Resource on dashboards.

The status card health subsystem shows status fetched from promethes and url.
This commit extends that to add an extension to show status from Resources.
The new extension is `Dashboards/Overview/Health/Resource`

Signed-off-by: Afreen Rahman <afrahman@redhat.com>

frontend/packages/console-plugin-sdk/src/typings/dashboards.ts

@@ -11,7 +11,11 @@ import {
   ExpandedComponentProps,
 } from '@console/shared/src/components/dashboard/inventory-card/InventoryItem';
 import { PrometheusResponse } from '@console/internal/components/graphs';
-import { WatchK8sResources } from '@console/internal/components/utils/k8s-watch-hook';
+import {
+  WatchK8sResources,
+  ResourcesObject,
+  WatchK8sResults,
+} from '@console/internal/components/utils/k8s-watch-hook';
 import { Extension, LazyLoader } from './base';
 
 namespace ExtensionProperties {
@@ -76,6 +80,26 @@ namespace ExtensionProperties {
     popupTitle?: string;
   }
 
+  export interface DashboardsOverviewHealthResourceSubsystem<R extends ResourcesObject>
+    extends DashboardsOverviewHealthSubsystem {
+    /** Kubernetes resources which will be fetched and passed to healthHandler  */
+    resources: WatchK8sResources<R>;
+
+    /** Resolve the subsystem's health */
+    healthHandler: ResourceHealthHandler<R>;
+
+    /**
+     * Loader for popup content. If defined health item will be represented as link
+     * which opens popup with given content.
+     */
+    popupComponent?: LazyLoader<any>;
+
+    /**
+     * Popup title
+     */
+    popupTitle?: string;
+  }
+
   export interface DashboardsOverviewHealthOperator<R extends K8sResourceCommon>
     extends DashboardsOverviewHealthSubsystem {
     /** Title of operators section in popup */
@@ -217,6 +241,17 @@ export const isDashboardsOverviewHealthPrometheusSubsystem = (
 ): e is DashboardsOverviewHealthPrometheusSubsystem =>
   e.type === 'Dashboards/Overview/Health/Prometheus';
 
+export interface DashboardsOverviewHealthResourceSubsystem<
+  R extends ResourcesObject = ResourcesObject
+> extends Extension<ExtensionProperties.DashboardsOverviewHealthResourceSubsystem<R>> {
+  type: 'Dashboards/Overview/Health/Resource';
+}
+
+export const isDashboardsOverviewHealthResourceSubsystem = (
+  e: Extension,
+): e is DashboardsOverviewHealthResourceSubsystem =>
+  e.type === 'Dashboards/Overview/Health/Resource';
+
 export interface DashboardsOverviewHealthOperator<R extends K8sResourceCommon = K8sResourceCommon>
   extends Extension<ExtensionProperties.DashboardsOverviewHealthOperator<R>> {
   type: 'Dashboards/Overview/Health/Operator';
@@ -229,13 +264,15 @@ export const isDashboardsOverviewHealthOperator = (
 export type DashboardsOverviewHealthSubsystem =
   | DashboardsOverviewHealthURLSubsystem
   | DashboardsOverviewHealthPrometheusSubsystem
+  | DashboardsOverviewHealthResourceSubsystem
   | DashboardsOverviewHealthOperator;
 
 export const isDashboardsOverviewHealthSubsystem = (
   e: Extension,
 ): e is DashboardsOverviewHealthSubsystem =>
   isDashboardsOverviewHealthURLSubsystem(e) ||
   isDashboardsOverviewHealthPrometheusSubsystem(e) ||
+  isDashboardsOverviewHealthResourceSubsystem(e) ||
   isDashboardsOverviewHealthOperator(e);
 
 export interface DashboardsTab extends Extension<ExtensionProperties.DashboardsTab> {
@@ -340,6 +377,10 @@ export type PrometheusHealthHandler = (
   additionalResource?: FirehoseResult<K8sResourceKind | K8sResourceKind[]>,
 ) => SubsystemHealth;
 
+export type ResourceHealthHandler<R extends ResourcesObject> = (
+  resourcesResult: WatchK8sResults<R>,
+) => SubsystemHealth;
+
 export type OperatorHealthHandler = (resources: FirehoseResourcesResult) => OperatorHealth;
 
 export type OperatorHealth = {

frontend/public/components/dashboard/dashboards-page/cluster-dashboard/health-item.tsx

@@ -4,6 +4,7 @@ import {
   DashboardsOverviewHealthOperator,
   DashboardsOverviewHealthURLSubsystem,
   DashboardsOverviewHealthPrometheusSubsystem,
+  DashboardsOverviewHealthResourceSubsystem,
 } from '@console/plugin-sdk';
 import HealthItem from '@console/shared/src/components/dashboard/status-card/HealthItem';
 import OperatorStatusBody, {
@@ -14,11 +15,12 @@ import {
   getMostImportantStatuses,
 } from '@console/shared/src/components/dashboard/status-card/state-utils';
 import { HealthState } from '@console/shared/src/components/dashboard/status-card/states';
+import { K8sKind } from '../../../../module/k8s';
 import { FirehoseResourcesResult, AsyncComponent, resourcePath } from '../../../utils';
-import { uniqueResource } from './utils';
-import { withDashboardResources, DashboardItemProps } from '../../with-dashboard-resources';
+import { useK8sWatchResources } from '../../../utils/k8s-watch-hook';
 import { PrometheusResponse } from '../../../graphs';
-import { K8sKind } from '../../../../module/k8s';
+import { withDashboardResources, DashboardItemProps } from '../../with-dashboard-resources';
+import { uniqueResource } from './utils';
 
 export const OperatorsPopup: React.FC<OperatorsPopupProps> = ({
   resources,
@@ -226,6 +228,28 @@ export const PrometheusHealthItem = withDashboardResources<PrometheusHealthItemP
   },
 );
 
+export const ResourceHealthItem: React.FC<ResourceHealthItemProps> = ({ subsystem }) => {
+  const { title, resources, healthHandler, popupComponent, popupTitle } = subsystem;
+  const resourcesResult = useK8sWatchResources(resources);
+
+  const healthState = healthHandler(resourcesResult);
+
+  const PopupComponentCallback = React.useCallback(
+    () => <AsyncComponent loader={popupComponent} resourcesResult={resourcesResult} />,
+    [popupComponent, resourcesResult],
+  );
+
+  return (
+    <HealthItem
+      title={title}
+      state={healthState.state}
+      details={healthState.message}
+      popupTitle={popupTitle}
+      PopupComponent={popupComponent ? PopupComponentCallback : null}
+    />
+  );
+};
+
 type OperatorHealthItemProps = DashboardItemProps & {
   operatorExtensions: DashboardsOverviewHealthOperator[];
 };
@@ -240,6 +264,10 @@ type PrometheusHealthItemProps = DashboardItemProps & {
   models: ImmutableMap<string, K8sKind>;
 };
 
+type ResourceHealthItemProps = {
+  subsystem: DashboardsOverviewHealthResourceSubsystem['properties'];
+};
+
 type OperatorsPopupProps = {
   resources: FirehoseResourcesResult;
   operatorExtensions: DashboardsOverviewHealthOperator[];

frontend/public/components/utils/k8s-watch-hook.ts

@@ -223,11 +223,11 @@ type GetIDAndDispatch = (
   k8sModel: K8sKind,
 ) => { id: string; dispatch: (dispatch: Dispatch, getState: () => RootState) => void };
 
-type ResourcesObject = { [key: string]: K8sResourceCommon | K8sResourceCommon[] };
+export type ResourcesObject = { [key: string]: K8sResourceCommon | K8sResourceCommon[] };
 
 type WatchK8sResult<R extends K8sResourceCommon | K8sResourceCommon[]> = [R, boolean, any];
 
-type WatchK8sResults<R extends ResourcesObject> = {
+export type WatchK8sResults<R extends ResourcesObject> = {
   [k in keyof R]: { data: R[k]; loaded: boolean; loadError: any };
 };