remove Firehose

Author: cajieh

frontend/packages/console-app/src/actions/hooks/useBindingActions.ts

@@ -45,11 +45,11 @@ export const useBindingActions = (
   const navigate = useNavigate();
   const [commonActions] = useCommonActions(model, obj, [CommonActionCreator.Delete] as const);
 
-  const { subjectIndex, subjects = [] } = obj;
+  const { subjectIndex, subjects } = obj ?? {};
   const subject = subjects?.[subjectIndex];
   const deleteBindingSubject = useWarningModal({
     title: t('public~Delete {{label}} subject?', {
-      label: model.kind,
+      label: model?.kind,
     }),
     children: t('public~Are you sure you want to delete subject {{name}} of type {{kind}}?', {
       name: subject?.name,
@@ -146,9 +146,9 @@ export const useBindingActions = (
         : []),
       factory.DuplicateBinding(),
       factory.EditBindingSubject(),
-      ...(subjects.length === 1 ? [commonActions.Delete] : [factory.DeleteBindingSubject()]),
+      ...(subjects?.length === 1 ? [commonActions.Delete] : [factory.DeleteBindingSubject()]),
     ];
-  }, [memoizedFilterActions, subject?.kind, factory, subjects.length, commonActions.Delete]);
+  }, [memoizedFilterActions, subject?.kind, factory, subjects?.length, commonActions.Delete]);
 
   return actions;
 };

frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode, FC } from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Alert } from '@patternfly/react-core';
 import { useTranslation, Trans } from 'react-i18next';
+import { WatchK8sResource } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sWatchResource';
 import { PodConnectLoader } from '@console/internal/components/pod';
-import { Firehose } from '@console/internal/components/utils/firehose';
 import { LoadingBox } from '@console/internal/components/utils/status-box';
-import type { FirehoseResource, FirehoseResult } from '@console/internal/components/utils/types';
 import { ImageStreamTagModel, NamespaceModel, PodModel } from '@console/internal/models';
 import { NodeKind, PodKind, k8sCreate, k8sGet, k8sKillByName } from '@console/internal/module/k8s';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
@@ -15,7 +15,9 @@ type NodeTerminalErrorProps = {
 };
 
 type NodeTerminalInnerProps = {
-  obj?: FirehoseResult<PodKind>;
+  pod: PodKind | undefined;
+  loaded: boolean;
+  loadError: any;
 };
 
 type NodeTerminalProps = {
@@ -124,7 +126,7 @@ const NodeTerminalError: FC<NodeTerminalErrorProps> = ({ error }) => {
   );
 };
 
-const NodeTerminalInner: FC<NodeTerminalInnerProps> = ({ obj }) => {
+const NodeTerminalInner: FC<NodeTerminalInnerProps> = ({ pod, loaded, loadError }) => {
   const { t } = useTranslation();
   const message = (
     <Trans t={t} ns="console-app">
@@ -133,32 +135,47 @@ const NodeTerminalInner: FC<NodeTerminalInnerProps> = ({ obj }) => {
       </p>
     </Trans>
   );
-  switch (obj?.data?.status?.phase) {
+
+  if (loadError) {
+    return <NodeTerminalError error={loadError.message || t('console-app~Failed to load pod')} />;
+  }
+
+  if (!loaded || !pod) {
+    return <LoadingBox />;
+  }
+
+  switch (pod.status?.phase) {
     case 'Failed':
       return (
         <NodeTerminalError
           error={
             <>
               {t('console-app~The debug pod failed. ')}
-              {obj?.data?.status?.containerStatuses?.[0]?.state?.terminated?.message ||
-                obj?.data?.status?.message}
+              {pod.status?.containerStatuses?.[0]?.state?.terminated?.message ||
+                pod.status?.message}
             </>
           }
         />
       );
     case 'Running':
-      return <PodConnectLoader obj={obj.data} message={message} attach />;
+      return <PodConnectLoader obj={pod} message={message} attach />;
     default:
       return <LoadingBox />;
   }
 };
 
 const NodeTerminal: FC<NodeTerminalProps> = ({ obj: node }) => {
-  const [resources, setResources] = useState<FirehoseResource[]>([]);
+  const [podWatchResource, setPodWatchResource] = useState<WatchK8sResource | null>(null);
   const [errorMessage, setErrorMessage] = useState('');
   const nodeName = node.metadata.name;
   const isWindows = node.status?.nodeInfo?.operatingSystem === 'windows';
 
+  // Memoize the watch resource to prevent unnecessary re-renders
+  const watchResource = useMemo(() => podWatchResource, [podWatchResource]);
+
+  // Watch the debug pod using the hook
+  const [pod, loaded, loadError] = useK8sWatchResource<PodKind>(watchResource);
+
   useEffect(() => {
     let namespace;
     const name = `${nodeName?.replace(/\./g, '-')}-debug`;
@@ -196,15 +213,12 @@ const NodeTerminal: FC<NodeTerminalProps> = ({ obj: node }) => {
         await new Promise((resolve) => setTimeout(resolve, 1000));
         const debugPod = await k8sCreate(PodModel, podToCreate);
         if (debugPod) {
-          setResources([
-            {
-              isList: false,
-              kind: 'Pod',
-              name,
-              namespace: namespace.metadata.name,
-              prop: 'obj',
-            },
-          ]);
+          setPodWatchResource({
+            kind: 'Pod',
+            name,
+            namespace: namespace.metadata.name,
+            isList: false,
+          });
         }
       } catch (e) {
         setErrorMessage(e.message);
@@ -221,13 +235,11 @@ const NodeTerminal: FC<NodeTerminalProps> = ({ obj: node }) => {
     };
   }, [nodeName, isWindows]);
 
-  return errorMessage ? (
-    <NodeTerminalError error={errorMessage} />
-  ) : (
-    <Firehose resources={resources}>
-      <NodeTerminalInner />
-    </Firehose>
-  );
+  if (errorMessage) {
+    return <NodeTerminalError error={errorMessage} />;
+  }
+
+  return <NodeTerminalInner pod={pod} loaded={loaded} loadError={loadError} />;
 };
 
 export default NodeTerminal;

frontend/public/components/RBAC/bindings.tsx

@@ -47,7 +47,6 @@ import { TableColumn } from '@console/internal/module/k8s';
 import { GetDataViewRows, ResourceFilters } from '@console/app/src/components/data-view/types';
 import { tableFilters } from '../factory/table-filters';
 import { ButtonBar } from '../utils/button-bar';
-import { Firehose } from '../utils/firehose';
 import { getQueryArgument } from '../utils/router';
 import { kindObj } from '../utils/inject';
 import type { ListDropdownProps } from '../utils/list-dropdown';
@@ -57,7 +56,7 @@ import { ResourceName } from '../utils/resource-icon';
 import { StatusBox, LoadingBox } from '../utils/status-box';
 import { useAccessReview } from '../utils/rbac';
 import { flagPending } from '../../reducers/features';
-import { useK8sWatchResources } from '../utils/k8s-watch-hook';
+import { useK8sWatchResource, useK8sWatchResources } from '../utils/k8s-watch-hook';
 
 // Split each binding into one row per subject
 export const flatten = (resources): BindingKind[] =>
@@ -185,14 +184,16 @@ const bindingType = (binding: BindingKind) => {
   if (!binding) {
     return undefined;
   }
-  if (binding.roleRef.name.startsWith('system:')) {
+  if (binding.roleRef?.name?.startsWith('system:')) {
     return 'system';
   }
-  return binding.metadata.namespace ? 'namespace' : 'cluster';
+  return binding.metadata?.namespace ? 'namespace' : 'cluster';
 };
 
 const getDataViewRows: GetDataViewRows<BindingKind> = (data, columns) => {
-  return data.map(({ obj: binding }) => {
+  return data.map((row) => {
+    // Extract the actual binding from the row object
+    const binding = (row as any).obj || row;
     const rowCells = {
       [tableColumnInfo[0].id]: {
         cell: <BindingName binding={binding} />,
@@ -784,52 +785,81 @@ const getSubjectIndex = () => {
 };
 
 const BindingLoadingWrapper: FC<BindingLoadingWrapperProps> = (props) => {
+  const { obj, loaded, loadError, fixedKeys } = props;
   const [, setActiveNamespace] = useActiveNamespace();
+
+  // Don't render the form until data is loaded and valid
+  if (!loaded) {
+    return <LoadingBox />;
+  }
+
+  if (loadError) {
+    return <StatusBox data={obj} loaded={loaded} loadError={loadError} />;
+  }
+
+  // Guard against empty/invalid data
+  if (!obj || _.isEmpty(obj)) {
+    return <StatusBox data={obj} loaded={loaded} loadError={loadError} />;
+  }
+
   const fixed: { [key: string]: any } = {};
-  _.each(props.fixedKeys, (k) => (fixed[k] = _.get(props.obj.data, k)));
+  _.each(fixedKeys, (k) => (fixed[k] = _.get(obj, k)));
+
   return (
-    <StatusBox {...props.obj}>
-      <BaseEditRoleBinding
-        {...props}
-        setActiveNamespace={setActiveNamespace}
-        fixed={fixed}
-        obj={props.obj.data}
-      />
-    </StatusBox>
+    <BaseEditRoleBinding
+      {...props}
+      setActiveNamespace={setActiveNamespace}
+      fixed={fixed}
+      obj={obj}
+    />
   );
 };
 
 export const EditRoleBinding: FC<EditRoleBindingProps> = ({ kind }) => {
   const { t } = useTranslation();
   const params = useParams();
+
+  const [obj, loaded, loadError] = useK8sWatchResource<RoleBindingKind | ClusterRoleBindingKind>({
+    kind,
+    name: params.name,
+    namespace: params.ns,
+    isList: false,
+  });
+
   return (
-    <Firehose
-      resources={[{ kind, name: params.name, namespace: params.ns, isList: false, prop: 'obj' }]}
-    >
-      <BindingLoadingWrapper
-        fixedKeys={['kind', 'metadata', 'roleRef']}
-        subjectIndex={getSubjectIndex()}
-        titleVerbAndKind={t('public~Edit RoleBinding')}
-        saveButtonText={t('public~Save')}
-      />
-    </Firehose>
+    <BindingLoadingWrapper
+      obj={obj}
+      loaded={loaded}
+      loadError={loadError}
+      fixedKeys={['kind', 'metadata', 'roleRef']}
+      subjectIndex={getSubjectIndex()}
+      titleVerbAndKind={t('public~Edit RoleBinding')}
+      saveButtonText={t('public~Save')}
+    />
   );
 };
 
 export const CopyRoleBinding: FC<EditRoleBindingProps> = ({ kind }) => {
   const { t } = useTranslation();
   const params = useParams();
+
+  const [obj, loaded, loadError] = useK8sWatchResource<RoleBindingKind | ClusterRoleBindingKind>({
+    kind,
+    name: params.name,
+    namespace: params.ns,
+    isList: false,
+  });
+
   return (
-    <Firehose
-      resources={[{ kind, name: params.name, namespace: params.ns, isList: false, prop: 'obj' }]}
-    >
-      <BindingLoadingWrapper
-        fixedKeys={['kind']}
-        subjectIndex={getSubjectIndex()}
-        isCreate={true}
-        titleVerbAndKind={t('public~Duplicate RoleBinding')}
-      />
-    </Firehose>
+    <BindingLoadingWrapper
+      obj={obj}
+      loaded={loaded}
+      loadError={loadError}
+      fixedKeys={['kind']}
+      subjectIndex={getSubjectIndex()}
+      isCreate={true}
+      titleVerbAndKind={t('public~Duplicate RoleBinding')}
+    />
   );
 };
 
@@ -881,9 +911,9 @@ type BindingLoadingWrapperProps = {
   titleVerbAndKind: string;
   saveButtonText?: string;
   isCreate?: boolean;
-  obj?: {
-    data: RoleBindingKind | ClusterRoleBindingKind;
-  };
+  obj?: RoleBindingKind | ClusterRoleBindingKind;
+  loaded: boolean;
+  loadError: any;
 };
 
 type EditRoleBindingProps = {

frontend/public/components/cluster-settings/cluster-settings.tsx

@@ -88,8 +88,6 @@ import { ExternalLink } from '@console/shared/src/components/links/ExternalLink'
 import { documentationURLs, getDocumentationURL, isManaged } from '../utils/documentation';
 import { EmptyBox } from '../utils/status-box';
 import { FieldLevelHelp } from '../utils/field-level-help';
-import { Firehose } from '../utils/firehose';
-import type { FirehoseResource } from '../utils/types';
 import { HorizontalNav } from '../utils/horizontal-nav';
 import { ReleaseNotesLink } from '../utils/release-notes-link';
 import { ResourceLink, resourcePathFromModel } from '../utils/resource-link';
@@ -1170,23 +1168,24 @@ export const ClusterSettingsPage: FC = () => {
   const { t } = useTranslation();
   const hasClusterAutoscaler = useFlag(FLAGS.CLUSTER_AUTOSCALER);
   const title = t('public~Cluster Settings');
-  const resources: FirehoseResource[] = [
-    {
-      kind: clusterVersionReference,
-      name: 'version',
-      isList: false,
-      prop: 'obj',
-    },
-  ];
-  if (hasClusterAutoscaler) {
-    resources.push({
-      kind: clusterAutoscalerReference,
-      isList: true,
-      prop: 'autoscalers',
-      optional: true,
-    });
-  }
-  const resourceKeys = _.map(resources, 'prop');
+
+  const [objData, objLoaded, objLoadError] = useK8sWatchResource<ClusterVersionKind>({
+    kind: clusterVersionReference,
+    name: 'version',
+  });
+
+  const [autoscalersData, autoscalersLoaded, autoscalersLoadError] = useK8sWatchResource<
+    K8sResourceKind[]
+  >(
+    hasClusterAutoscaler
+      ? {
+          kind: clusterAutoscalerReference,
+          isList: true,
+        }
+      : null,
+  );
+
+  const resourceKeys = hasClusterAutoscaler ? ['obj', 'autoscalers'] : ['obj'];
   const pages = [
     {
       href: '',
@@ -1211,12 +1210,25 @@ export const ClusterSettingsPage: FC = () => {
     telemetryPrefix: 'Cluster Settings',
     titlePrefix: title,
   };
+
+  const loaded = hasClusterAutoscaler ? objLoaded && autoscalersLoaded : objLoaded;
+  const loadError = objLoadError || autoscalersLoadError;
+
+  const horizontalNavProps = {
+    pages,
+    resourceKeys,
+    obj: { data: objData, loaded: objLoaded },
+    ...(hasClusterAutoscaler && {
+      autoscalers: { data: autoscalersData, loaded: autoscalersLoaded },
+    }),
+    loaded,
+    loadError,
+  };
+
   return (
     <PageTitleContext.Provider value={titleProviderValues}>
       <PageHeading title={<div data-test-id="cluster-settings-page-heading">{title}</div>} />
-      <Firehose resources={resources}>
-        <HorizontalNav pages={pages} resourceKeys={resourceKeys} />
-      </Firehose>
+      <HorizontalNav {...(horizontalNavProps as any)} />
     </PageTitleContext.Provider>
   );
 };