CONSOLE-4954: Add Workload tab to Node view

Author: jeff-phillips-18

frontend/packages/console-app/locales/en/console-app.json

@@ -526,6 +526,7 @@
   "Kubelet version": "Kubelet version",
   "Kube-Proxy version": "Kube-Proxy version",
   "Configuration": "Configuration",
+  "Workload": "Workload",
   "Machine set": "Machine set",
   "This count is based on your access permissions and might not include all virtual machines.": "This count is based on your access permissions and might not include all virtual machines.",
   "{{formattedCores}} cores / {{totalCores}} cores": "{{formattedCores}} cores / {{totalCores}} cores",

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

@@ -21,6 +21,7 @@ import NodeDashboard from './node-dashboard/NodeDashboard';
 import NodeDetails from './NodeDetails';
 import NodeLogs from './NodeLogs';
 import NodeTerminal from './NodeTerminal';
+import { NodeWorkload } from './NodeWorkload';
 
 const NodePodsPage: FC<PageComponentProps<NodeKind>> = ({ obj }) => (
   <PodsPage
@@ -55,10 +56,15 @@ export const NodeDetailsPage: FC<ComponentProps<typeof DetailsPage>> = (props) =
               nameKey: 'console-app~Configuration',
               component: NodeConfiguration,
             },
+            {
+              href: 'workload',
+              // t('console-app~Workload')
+              nameKey: 'console-app~Workload',
+              component: NodeWorkload,
+            },
+            navFactory.editYaml(),
           ]
-        : []),
-      navFactory.editYaml(),
-      navFactory.pods(NodePodsPage),
+        : [navFactory.editYaml(), navFactory.pods(NodePodsPage)]),
       navFactory.logs(NodeLogs),
       navFactory.events(ResourceEventStream),
       ...(!isWindowsNode(node) ? [navFactory.terminal(NodeTerminal)] : []),

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

@@ -11,6 +11,7 @@ import { useQueryParams } from '@console/shared/src/hooks/useQueryParams';
 import { useQueryParamsMutator } from '@console/shared/src/hooks/useQueryParamsMutator';
 
 export const CONFIG_PAGE_ID = 'configuration';
+export const WORKLOADS_PAGE_ID = 'workloads';
 
 export type SubPageType = {
   component: ComponentType<PageComponentProps<K8sResourceCommon>>;

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

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import type { NodeKind } from '@console/dynamic-plugin-sdk/src';
+import { PodsPage } from '@console/internal/components/pod-list';
+import type { PageComponentProps } from '@console/internal/components/utils';
+import { NodeSubNavPage, WORKLOADS_PAGE_ID } from './NodeSubNavPage';
+
+const NodePodsPage: FC<PageComponentProps<NodeKind>> = ({ obj }) => (
+  <PodsPage
+    fieldSelector={`spec.nodeName=${obj.metadata.name}`}
+    showNamespaceOverride
+    hideFavoriteButton
+  />
+);
+
+type NodeWorkloadProps = {
+  obj: NodeKind;
+};
+
+const standardPages = [
+  {
+    tabId: 'pods',
+    // t('console-app~Pods')
+    nameKey: 'console-app~Pods',
+    component: NodePodsPage,
+    priority: 30,
+  },
+];
+
+export const NodeWorkload: FC<NodeWorkloadProps> = ({ obj }) => (
+  <NodeSubNavPage obj={obj} pageId={WORKLOADS_PAGE_ID} standardPages={standardPages} />
+);

frontend/packages/console-app/src/components/nodes/node-dashboard/InventoryCard.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import { useMemo, useContext } from 'react';
+import { useResolvedExtensions } from '@openshift/dynamic-plugin-sdk';
 import {
   Card,
   CardBody,
@@ -13,12 +14,16 @@ import {
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import BareMetalInventoryItems from '@console/app/src/components/nodes/node-dashboard/BareMetalInventoryItems';
+import { WORKLOADS_PAGE_ID } from '@console/app/src/components/nodes/NodeSubNavPage';
 import { useIsKubevirtPluginActive } from '@console/app/src/utils/kubevirt';
+import type { NodeSubNavTab } from '@console/dynamic-plugin-sdk/src';
+import { isNodeSubNavTab } from '@console/dynamic-plugin-sdk/src';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
 import { PodModel, NodeModel } from '@console/internal/models';
 import type { K8sResourceCommon, K8sKind } from '@console/internal/module/k8s';
 import { referenceForModel } from '@console/internal/module/k8s';
+import { useTranslatedExtensions } from '@console/plugin-sdk/src/utils/useTranslatedExtensions';
 import type { StatusGroupMapper } from '@console/shared/src/components/dashboard/inventory-card/InventoryItem';
 import {
   InventoryItem,
@@ -29,6 +34,8 @@ import { DescriptionListTermHelp } from '@console/shared/src/components/descript
 import { useWatchVirtualMachineInstances, VirtualMachineModel } from '../utils/NodeVmUtils';
 import { NodeDashboardContext } from './NodeDashboardContext';
 
+const NODE_VIRTUAL_MACHINES_PAGE_ID = 'virtualmachines';
+
 export const NodeInventoryItem: FC<NodeInventoryItemProps> = ({ nodeName, model, mapper }) => {
   const resource = useMemo(
     () => ({
@@ -60,6 +67,31 @@ const InventoryCard: FC = () => {
   const showVms = useIsKubevirtPluginActive();
   const [vms, vmsLoaded, vmsLoadError] = useWatchVirtualMachineInstances(obj.metadata.name);
 
+  const [subTabExtensions, extensionsResolved] = useResolvedExtensions<NodeSubNavTab>(
+    isNodeSubNavTab,
+  );
+  const nodeSubTabExtensions = useTranslatedExtensions(subTabExtensions ?? []);
+
+  const vmsLink = useMemo(() => {
+    if (extensionsResolved) {
+      const workloadExtensions = nodeSubTabExtensions.filter(
+        (ext) => ext.properties.parentTab === WORKLOADS_PAGE_ID,
+      );
+      if (
+        workloadExtensions.find(
+          (ext) => ext.properties.page.tabId === NODE_VIRTUAL_MACHINES_PAGE_ID,
+        )
+      ) {
+        return `${resourcePathFromModel(NodeModel)}/${
+          obj.metadata.name
+        }/${WORKLOADS_PAGE_ID}?activeTab${NODE_VIRTUAL_MACHINES_PAGE_ID}`;
+      }
+    }
+    return `${resourcePathFromModel(VirtualMachineModel)}/search?rowFilter-node=${
+      obj.metadata.name
+    }`;
+  }, [extensionsResolved, nodeSubTabExtensions, obj.metadata.name]);
+
   return (
     <Card data-test-id="inventory-card">
       <CardHeader>
@@ -99,11 +131,7 @@ const InventoryCard: FC = () => {
                 )}
               />
               <DescriptionListDescription>
-                <Link
-                  to={`${resourcePathFromModel(VirtualMachineModel)}/search?rowFilter-node=${
-                    obj.metadata.name
-                  }`}
-                >
+                <Link to={vmsLink}>
                   <InventoryItem
                     isLoading={!vmsLoaded}
                     title={t('console-app~Virtual machine')}

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

@@ -1072,7 +1072,7 @@ This extension can be used to add a tab on the sub-tabs for a Nodes details tab.
 | Name | Value Type | Optional | Description |
 | ---- | ---------- | -------- | ----------- |
 | `parentTab` | `'configuration' \| 'health' \| 'workloads'` | no | Which detail tab to add the sub-tab to. |
-| `page` | `{ tabId: string; name: string; priority: number; }` | no | The page to be show in node sub tabs. It takes tab name as name and priority of the tab.<br/>Note: Tabs are shown in priority order from highest to lowest. Current node tab priorities are:<br/>configuration:<br/>   Storage: 70<br/>   Operating system: 50<br/>   Machine: 40<br/>   High availability: 30 |
+| `page` | `{ tabId: string; name: string; priority: number; }` | no | The page to be show in node sub tabs. It takes tab name as name and priority of the tab.<br/>Note: Tabs are shown in priority order from highest to lowest. Current node tab priorities are:<br/>configuration:<br/>   Storage: 70<br/>   Operating system: 50<br/>   Machine: 40<br/>   High availability: 30<br/> workloads:<br/>   Pods: 30 |
 | `component` | `CodeRef<ComponentType<SubPageComponentProps<K8sResourceCommon>>>` | no | The component to be rendered when the route matches. |
 
 ---

frontend/packages/console-dynamic-plugin-sdk/src/extensions/node-subnav-tabs.ts

@@ -19,6 +19,8 @@ export type NodeSubNavTab = Extension<
      *     Operating system: 50
      *     Machine: 40
      *     High availability: 30
+     *   workloads:
+     *     Pods: 30
      */
     page: {
       tabId: string;

frontend/public/components/pod-list.tsx

@@ -588,6 +588,7 @@ export const PodsPage: FC<PodPageProps> = ({
   hideLabelFilter,
   hideColumnManagement,
   showNamespaceOverride,
+  hideFavoriteButton,
 }) => {
   const { t } = useTranslation();
   const dispatch = useConsoleDispatch();
@@ -638,7 +639,10 @@ export const PodsPage: FC<PodPageProps> = ({
 
   return (
     <>
-      <ListPageHeader title={showTitle ? t('public~Pods') : ''}>
+      <ListPageHeader
+        title={showTitle ? t('public~Pods') : ''}
+        hideFavoriteButton={hideFavoriteButton}
+      >
         {canCreate && (
           <ListPageCreate groupVersionKind={resourceKind} createAccessReview={accessReview}>
             {t('public~Create Pod')}
@@ -711,4 +715,5 @@ type PodPageProps = {
   hideNameLabelFilters?: boolean;
   hideColumnManagement?: boolean;
   showNamespaceOverride?: boolean;
+  hideFavoriteButton?: boolean;
 };