Remove Firehose Component and Fix and Cleanup Impacted Types

Author: cajieh

frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md

@@ -389,7 +389,7 @@ Adds an activity to the Activity Card of Overview Dashboard where the triggering
 
 | Name | Value Type | Optional | Description |
 | ---- | ---------- | -------- | ----------- |
-| `k8sResource` | `CodeRef<FirehoseResource & { isList: true; }>` | no | The utilization item to be replaced. |
+| `k8sResource` | `CodeRef<WatchK8sResource & { prop: string; } & { isList: true; }>` | no | The utilization item to be replaced. |
 | `component` | `CodeRef<React.ComponentType<K8sActivityProps<T>>>` | no | The action component. |
 | `isActivity` | `CodeRef<(resource: T) => boolean>` | yes | Function which determines if the given resource represents the action. If not defined, every resource represents activity. |
 | `getTimestamp` | `CodeRef<(resource: T) => Date>` | yes | Timestamp for the given action, which will be used for ordering. |
@@ -407,7 +407,7 @@ Adds a health subsystem to the status card of Overview dashboard where the sourc
 | Name | Value Type | Optional | Description |
 | ---- | ---------- | -------- | ----------- |
 | `title` | `string` | no | Title of operators section in the popup. |
-| `resources` | `CodeRef<FirehoseResource[]>` | no | Kubernetes resources which will be fetched and passed to `healthHandler`. |
+| `resources` | `CodeRef<WatchK8sResourceWithProp[]>` | no | Kubernetes resources which will be fetched and passed to `healthHandler`. |
 | `getOperatorsWithStatuses` | `CodeRef<GetOperatorsWithStatuses<T>>` | yes | Resolves status for the operators. |
 | `operatorRowLoader` | `CodeRef<React.ComponentType<OperatorRowProps<T>>>` | yes | Loader for popup row component. |
 | `viewAllLink` | `string` | yes | Links to all resources page. If not provided then a list page of the first resource from resources prop is used. |
@@ -427,7 +427,7 @@ Adds a health subsystem to the status card of Overview dashboard where the sourc
 | `title` | `string` | no | The display name of the subsystem. |
 | `queries` | `string[]` | no | The Prometheus queries |
 | `healthHandler` | `CodeRef<PrometheusHealthHandler>` | no | Resolve the subsystem's health. |
-| `additionalResource` | `CodeRef<FirehoseResource>` | yes | Additional resource which will be fetched and passed to `healthHandler`. |
+| `additionalResource` | `CodeRef<WatchK8sResourceWithProp>` | yes | Additional resource which will be fetched and passed to `healthHandler`. |
 | `popupComponent` | `CodeRef<React.ComponentType<PrometheusHealthPopupProps>>` | yes | Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content. |
 | `popupTitle` | `string` | yes | The title of the popover. |
 | `popupClassname` | `string` | yes | Optional classname for the popup top-level component. |
@@ -468,8 +468,8 @@ Adds a health subsystem to the status card of Overview dashboard where the sourc
 | `url` | `string` | no | The URL to fetch data from. It will be prefixed with base k8s URL. |
 | `healthHandler` | `CodeRef<URLHealthHandler<T>>` | no | Resolve the subsystem's health. |
 | `fetch` | `CodeRef<Fetch>` | yes | Custom function to fetch data from the URL.<br/>If none is specified, default one (`coFetchJson`) will be used.<br/>Response is then parsed by `healthHandler`. |
-| `additionalResource` | `CodeRef<FirehoseResource>` | yes | Additional resource which will be fetched and passed to `healthHandler`. |
-| `popupComponent` | `CodeRef<React.ComponentType<{ healthResult?: T; healthResultError?: any; k8sResult?: FirehoseResult<R>; }>>` | yes | Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content. |
+| `additionalResource` | `CodeRef<WatchK8sResourceWithProp>` | yes | Additional resource which will be fetched and passed to `healthHandler`. |
+| `popupComponent` | `CodeRef<React.ComponentType<{ healthResult?: T; healthResultError?: any; k8sResult?: WatchK8sResultsObject<R>; }>>` | yes | Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content. |
 | `popupTitle` | `string` | yes | The title of the popover. |
 
 ---

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -226,31 +226,12 @@ export type WatchK8sResourcesGeneric = {
   };
 };
 
-export type FirehoseResource = {
-  kind: K8sResourceKindReference;
-  name?: string;
-  namespace?: string;
-  isList?: boolean;
-  selector?: Selector;
+/**
+ * Extension of WatchK8sResource that includes the prop field required by
+ * components and extension types.
+ */
+export type WatchK8sResourceWithProp = WatchK8sResource & {
   prop: string;
-  namespaced?: boolean;
-  optional?: boolean;
-  limit?: number;
-  fieldSelector?: string;
-};
-
-export type FirehoseResult<
-  R extends K8sResourceCommon | K8sResourceCommon[] = K8sResourceCommon[]
-> = {
-  loaded: boolean;
-  loadError: string;
-  optional?: boolean;
-  data: R;
-  kind?: string;
-};
-
-export type FirehoseResourcesResult = {
-  [key: string]: FirehoseResult<K8sResourceCommon | K8sResourceCommon[]>;
 };
 
 export type WatchK8sResult<R extends K8sResourceCommon | K8sResourceCommon[]> = [R, boolean, any];

frontend/packages/console-dynamic-plugin-sdk/src/extensions/dashboard-types.ts

@@ -6,8 +6,7 @@ import type {
   PrometheusResponse,
   ResourcesObject,
   WatchK8sResults,
-  FirehoseResourcesResult,
-  FirehoseResult,
+  WatchK8sResultsObject,
   OverviewCardSpan,
   K8sResourceKind,
 } from './console-types';
@@ -18,7 +17,7 @@ import type {
 export type CardSpan = OverviewCardSpan;
 
 export type GetOperatorsWithStatuses<R extends K8sResourceCommon = K8sResourceCommon> = (
-  resources: FirehoseResourcesResult,
+  resources: WatchK8sResults<ResourcesObject>,
 ) => OperatorStatusWithResources<R>[];
 
 export type K8sActivityProps<R extends K8sResourceCommon = K8sResourceCommon> = {
@@ -53,13 +52,13 @@ export type OperatorHealth = {
 export type PrometheusHealthHandler = (
   responses: { response: PrometheusResponse; error: any }[],
   t?: TFunction,
-  additionalResource?: FirehoseResult<K8sResourceCommon | K8sResourceCommon[]>,
+  additionalResource?: WatchK8sResultsObject<K8sResourceCommon | K8sResourceCommon[]>,
   infrastructure?: K8sResourceKind,
 ) => SubsystemHealth;
 
 export type PrometheusHealthPopupProps = {
   responses: { response: PrometheusResponse; error: any }[];
-  k8sResult?: FirehoseResult<K8sResourceCommon | K8sResourceCommon[]>;
+  k8sResult?: WatchK8sResultsObject<K8sResourceCommon | K8sResourceCommon[]>;
   hide: () => void;
 };
 
@@ -80,7 +79,7 @@ export type SubsystemHealth = {
 export type URLHealthHandler<
   R,
   T extends K8sResourceCommon | K8sResourceCommon[] = K8sResourceCommon | K8sResourceCommon[]
-> = (response: R, error: any, additionalResource?: FirehoseResult<T>) => SubsystemHealth;
+> = (response: R, error: any, additionalResource?: WatchK8sResultsObject<T>) => SubsystemHealth;
 
 export type StatusPopupItemProps = {
   children: ReactNode;

frontend/packages/console-dynamic-plugin-sdk/src/extensions/dashboards.ts

@@ -8,8 +8,8 @@ import type {
   StatusGroupMapper,
   WatchK8sResources,
   WatchK8sResults,
-  FirehoseResource,
-  FirehoseResult,
+  WatchK8sResourceWithProp,
+  WatchK8sResultsObject,
 } from './console-types';
 import type {
   CardSpan,
@@ -62,7 +62,7 @@ export type DashboardsOverviewHealthPrometheusSubsystem = Extension<
     /** Resolve the subsystem's health. */
     healthHandler: CodeRef<PrometheusHealthHandler>;
     /** Additional resource which will be fetched and passed to `healthHandler`. */
-    additionalResource?: CodeRef<FirehoseResource>;
+    additionalResource?: CodeRef<WatchK8sResourceWithProp>;
     /** Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content. */
     popupComponent?: CodeRef<React.ComponentType<PrometheusHealthPopupProps>>;
     /** The title of the popover. */
@@ -96,13 +96,13 @@ export type DashboardsOverviewHealthURLSubsystem<
      */
     fetch?: CodeRef<Fetch>;
     /** Additional resource which will be fetched and passed to `healthHandler`. */
-    additionalResource?: CodeRef<FirehoseResource>;
+    additionalResource?: CodeRef<WatchK8sResourceWithProp>;
     /** Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content. */
     popupComponent?: CodeRef<
       React.ComponentType<{
         healthResult?: T;
         healthResultError?: any;
-        k8sResult?: FirehoseResult<R>;
+        k8sResult?: WatchK8sResultsObject<R>;
       }>
     >;
     /** The title of the popover. */
@@ -138,7 +138,7 @@ export type DashboardsOverviewHealthOperator<
     /** Title of operators section in the popup. */
     title: string;
     /** Kubernetes resources which will be fetched and passed to `healthHandler`. */
-    resources: CodeRef<FirehoseResource[]>;
+    resources: CodeRef<WatchK8sResourceWithProp[]>;
     /** Resolves status for the operators. */
     getOperatorsWithStatuses?: CodeRef<GetOperatorsWithStatuses<T>>;
     /** Loader for popup row component. */
@@ -193,7 +193,7 @@ export type DashboardsOverviewResourceActivity<
   'console.dashboards/overview/activity/resource',
   {
     /** The utilization item to be replaced. */
-    k8sResource: CodeRef<FirehoseResource & { isList: true }>;
+    k8sResource: CodeRef<WatchK8sResourceWithProp & { isList: true }>;
     /** Function which determines if the given resource represents the action. If not defined, every resource represents activity. */
     isActivity?: CodeRef<(resource: T) => boolean>;
     /** Timestamp for the given action, which will be used for ordering. */

frontend/packages/console-shared/src/components/dashboard/status-card/OperatorStatusBody.tsx

@@ -3,9 +3,13 @@ import { useCallback } from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
-import type { GetOperatorsWithStatuses, OperatorRowProps } from '@console/dynamic-plugin-sdk';
+import type {
+  GetOperatorsWithStatuses,
+  OperatorRowProps,
+  WatchK8sResults,
+  K8sResourceCommon,
+} from '@console/dynamic-plugin-sdk';
 import type { LazyLoader } from '@console/internal/components/utils/async';
-import type { FirehoseResourcesResult } from '@console/internal/components/utils/types';
 import { getMostImportantStatuses } from './state-utils';
 import { HealthState } from './states';
 import StatusItem, { StatusPopupSection } from './StatusPopup';
@@ -75,7 +79,7 @@ export const OperatorsSection: FC<OperatorsSectionProps> = ({
 };
 
 type OperatorsSectionProps = {
-  resources: FirehoseResourcesResult;
+  resources: WatchK8sResults<{ [key: string]: K8sResourceCommon | K8sResourceCommon[] }>;
   getOperatorsWithStatuses: GetOperatorsWithStatuses;
   title: string;
   linkTo: string;

frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx

@@ -4,11 +4,11 @@ import * as fuzzy from 'fuzzysearch';
 import type { TFunction } from 'i18next';
 import * as _ from 'lodash';
 import { withTranslation } from 'react-i18next';
+import type { WatchK8sResultsObject } from '@console/dynamic-plugin-sdk';
 import type { ConsoleSelectProps } from '@console/internal/components/utils/console-select';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
 import { ResourceIcon } from '@console/internal/components/utils/resource-icon';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
-import type { FirehoseResult } from '@console/internal/components/utils/types';
 import type { K8sResourceKind, K8sKind } from '@console/internal/module/k8s';
 import { referenceForModel, modelFor, referenceFor } from '@console/internal/module/k8s';
 
@@ -65,7 +65,7 @@ export interface ResourceDropdownProps {
   transformLabel?: Function;
   loaded?: boolean;
   loadError?: string;
-  resources?: FirehoseResult[];
+  resources?: WatchK8sResultsObject<K8sResourceKind | K8sResourceKind[]>[];
   autoSelect?: boolean;
   resourceFilter?: (resource: K8sResourceKind) => boolean;
   onChange?: (key: string, name?: string | object, selectedResource?: K8sResourceKind) => void;
@@ -195,15 +195,16 @@ class ResourceDropdownInternal extends Component<ResourceDropdownProps & { t: TF
     } = props;
 
     const unsortedList = { ...appendItems };
-    _.each(resources, ({ data, kind }) => {
+    _.each(resources, ({ data }) => {
+      const dataArray = Array.isArray(data) ? data : [data];
       _.reduce(
-        data,
+        dataArray,
         (acc, resource) => {
           const { customKey, key: name } = this.craftResourceKey(resource, props);
           const dataValue = customKey || name;
           if (dataValue) {
             if (showBadge) {
-              const model = modelFor(referenceFor(resource)) || (kind && modelFor(kind));
+              const model = modelFor(referenceFor(resource));
               acc[dataValue] = model ? (
                 <DropdownItem key={resource.metadata.uid} model={model} name={name} />
               ) : (

frontend/packages/console-shared/src/components/formik-fields/ResourceDropdownField.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
+import { useMemo } from 'react';
 import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import type { FormikValues } from 'formik';
 import { useField, useFormikContext } from 'formik';
-import type { FirehoseResult } from '@console/internal/components/utils/types';
+import type { WatchK8sResultsObject } from '@console/dynamic-plugin-sdk';
 import type { K8sResourceKind } from '@console/internal/module/k8s';
 import { useFormikValidationFix } from '../../hooks/formik-validation-fix';
 import type { ResourceDropdownItems } from '../dropdown/ResourceDropdown';
@@ -12,7 +13,7 @@ import { getFieldId } from './field-utils';
 
 export interface ResourceDropdownFieldProps extends DropdownFieldProps {
   dataSelector: string[] | number[] | symbol[];
-  resources: FirehoseResult[];
+  resources: WatchK8sResultsObject<K8sResourceKind | K8sResourceKind[]>[];
   showBadge?: boolean;
   onLoad?: (items: ResourceDropdownItems) => void;
   onChange?: (key: string, name?: string | object, resource?: K8sResourceKind) => void;
@@ -49,6 +50,19 @@ const ResourceDropdownField: FC<ResourceDropdownFieldProps> = ({
 
   useFormikValidationFix(field.value);
 
+  // ResourceDropdown expects these as top-level props to manage loading state
+  const { loaded, loadError } = useMemo(() => {
+    if (!resources) {
+      return { loaded: true, loadError: undefined };
+    }
+    const allLoaded = resources.every((r) => r.loaded);
+    const resourceWithLoadError = resources.find((r) => r.loadError);
+    return {
+      loaded: allLoaded,
+      loadError: resourceWithLoadError?.loadError,
+    };
+  }, [resources]);
+
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={required} data-test={dataTest}>
       <ResourceDropdown
@@ -60,6 +74,8 @@ const ResourceDropdownField: FC<ResourceDropdownFieldProps> = ({
         onLoad={onLoad}
         resourceFilter={resourceFilter}
         resources={resources}
+        loaded={loaded}
+        loadError={loadError}
         onChange={(value: string, name: string | object, resource: K8sResourceKind) => {
           props.onChange && props.onChange(value, name, resource);
           setFieldValue(props.name, value);

frontend/packages/console-shared/src/hooks/useResourceSidebarSamples.ts

@@ -3,9 +3,13 @@ import YAML from 'js-yaml';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { PodDisruptionBudgetModel } from '@console/app/src/models';
-import type { AddAction, CatalogItemType, Perspective } from '@console/dynamic-plugin-sdk';
+import type {
+  AddAction,
+  CatalogItemType,
+  Perspective,
+  WatchK8sResultsObject,
+} from '@console/dynamic-plugin-sdk';
 import { isAddAction, isCatalogItemType, isPerspective } from '@console/dynamic-plugin-sdk';
-import type { FirehoseResult } from '@console/internal/components/utils/types';
 import {
   BuildConfigModel,
   ClusterRoleModel,
@@ -331,7 +335,10 @@ const useDefaultSamples = () => {
     );
 };
 
-export const useResourceSidebarSamples = (kindObj: K8sKind, yamlSamplesList: FirehoseResult) => {
+export const useResourceSidebarSamples = (
+  kindObj: K8sKind,
+  yamlSamplesList: WatchK8sResultsObject<K8sResourceKind[]>,
+) => {
   const defaultSamples = useDefaultSamples();
 
   if (!kindObj) {

frontend/packages/console-shared/src/types/pod.ts

@@ -1,8 +1,9 @@
 import type {
   ExtPodKind,
+  K8sResourceCommon,
   PodControllerOverviewItem,
+  WatchK8sResultsObject,
 } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
-import type { FirehoseResult } from '@console/internal/components/utils/types';
 import type { DeploymentKind, PodKind } from '@console/internal/module/k8s';
 
 export type {
@@ -15,19 +16,19 @@ export type {
 } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 
 export interface PodDataResources {
-  replicationControllers: FirehoseResult;
-  replicaSets: FirehoseResult;
-  pods: FirehoseResult<PodKind[]>;
-  deploymentConfigs?: FirehoseResult;
-  deployments?: FirehoseResult<DeploymentKind[]>;
+  replicationControllers: WatchK8sResultsObject<K8sResourceCommon[]>;
+  replicaSets: WatchK8sResultsObject<K8sResourceCommon[]>;
+  pods: WatchK8sResultsObject<PodKind[]>;
+  deploymentConfigs?: WatchK8sResultsObject<K8sResourceCommon[]>;
+  deployments?: WatchK8sResultsObject<DeploymentKind[]>;
 }
 
 export interface PodRingResources {
-  pods: FirehoseResult<PodKind[]>;
-  replicaSets: FirehoseResult;
-  replicationControllers: FirehoseResult;
-  deployments?: FirehoseResult<DeploymentKind[]>;
-  deploymentConfigs?: FirehoseResult;
+  pods: WatchK8sResultsObject<PodKind[]>;
+  replicaSets: WatchK8sResultsObject<K8sResourceCommon[]>;
+  replicationControllers: WatchK8sResultsObject<K8sResourceCommon[]>;
+  deployments?: WatchK8sResultsObject<DeploymentKind[]>;
+  deploymentConfigs?: WatchK8sResultsObject<K8sResourceCommon[]>;
 }
 
 export interface PodRingData {