Refactor public/ Directory Components to useK8sWatchResource(s)

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

@@ -2,10 +2,10 @@ import type { ReactNode, FC } from 'react';
 import { useState, useEffect } 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,44 @@ 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 [isCreatingPod, setIsCreatingPod] = useState(true);
+  const [podWatchResource, setPodWatchResource] = useState<WatchK8sResource | null>(null);
   const [errorMessage, setErrorMessage] = useState('');
   const nodeName = node.metadata.name;
   const isWindows = node.status?.nodeInfo?.operatingSystem === 'windows';
 
+  const [pod, loaded, loadError] = useK8sWatchResource<PodKind>(podWatchResource);
+
   useEffect(() => {
     let namespace;
     const name = `${nodeName?.replace(/\./g, '-')}-debug`;
@@ -196,18 +210,17 @@ 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,
+          });
+          setIsCreatingPod(false);
         }
       } catch (e) {
         setErrorMessage(e.message);
+        setIsCreatingPod(false);
         if (namespace) {
           deleteNamespace(namespace.metadata.name);
         }
@@ -221,13 +234,15 @@ const NodeTerminal: FC<NodeTerminalProps> = ({ obj: node }) => {
     };
   }, [nodeName, isWindows]);
 
-  return errorMessage ? (
-    <NodeTerminalError error={errorMessage} />
-  ) : (
-    <Firehose resources={resources}>
-      <NodeTerminalInner />
-    </Firehose>
-  );
+  if (errorMessage) {
+    return <NodeTerminalError error={errorMessage} />;
+  }
+
+  if (isCreatingPod) {
+    return <LoadingBox />;
+  }
+
+  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,18 +184,19 @@ 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) => {
+    const binding = row.obj;
     const rowCells = {
       [tableColumnInfo[0].id]: {
         cell: <BindingName binding={binding} />,
-        props: getNameCellProps(binding.metadata.name),
+        props: getNameCellProps(binding.metadata?.name),
       },
       [tableColumnInfo[1].id]: {
         cell: <RoleLink binding={binding} />,
@@ -208,7 +208,7 @@ const getDataViewRows: GetDataViewRows<BindingKind> = (data, columns) => {
         cell: binding.subject.name,
       },
       [tableColumnInfo[4].id]: {
-        cell: binding.metadata.namespace ? (
+        cell: binding.metadata?.namespace ? (
           <ResourceLink kind="Namespace" name={binding.metadata.namespace} />
         ) : (
           i18next.t('public~All namespaces')
@@ -784,52 +784,79 @@ const getSubjectIndex = () => {
 };
 
 const BindingLoadingWrapper: FC<BindingLoadingWrapperProps> = (props) => {
+  const { obj, loaded, loadError, fixedKeys } = props;
   const [, setActiveNamespace] = useActiveNamespace();
+
+  if (!loaded) {
+    return <LoadingBox />;
+  }
+
+  if (loadError) {
+    return <StatusBox data={obj} loaded={loaded} loadError={loadError} />;
+  }
+
+  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)));
+  fixedKeys.forEach((k) => (fixed[k] = 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 +908,9 @@ type BindingLoadingWrapperProps = {
   titleVerbAndKind: string;
   saveButtonText?: string;
   isCreate?: boolean;
-  obj?: {
-    data: RoleBindingKind | ClusterRoleBindingKind;
-  };
+  obj?: RoleBindingKind | ClusterRoleBindingKind;
+  loaded: boolean;
+  loadError: any;
 };
 
 type EditRoleBindingProps = {