Bug 1830121: Enable pod list to display node instead of owner

frontend/public/components/daemon-set.tsx

@@ -15,6 +15,7 @@ import {
   detailsPage,
   LabelList,
   navFactory,
+  PodsComponent,
   ResourceKebab,
   ResourceLink,
   ResourceSummary,
@@ -204,6 +205,10 @@ export const DaemonSetsPage: React.FC<DaemonSetsPageProps> = (props) => (
   <ListPage canCreate={true} ListComponent={DaemonSets} kind={kind} {...props} />
 );
 
+const DaemonSetPods: React.FC<DaemonSetPodsProps> = (props) => (
+  <PodsComponent {...props} customData={{ showNodes: true }} />
+);
+
 export const DaemonSetsDetailsPage: React.FC<DaemonSetsDetailsPageProps> = (props) => (
   <DetailsPage
     {...props}
@@ -212,7 +217,7 @@ export const DaemonSetsDetailsPage: React.FC<DaemonSetsDetailsPageProps> = (prop
     pages={[
       details(detailsPage(DaemonSetDetails)),
       editYaml(),
-      pods(),
+      pods(DaemonSetPods),
       envEditor(EnvironmentTab),
       events(ResourceEventStream),
     ]}
@@ -244,6 +249,10 @@ type DaemonSetsPageProps = {
   selector?: any;
 };
 
+type DaemonSetPodsProps = {
+  obj: K8sResourceKind;
+};
+
 type DaemonSetsDetailsPageProps = {
   match: any;
 };

frontend/public/components/job.tsx

@@ -5,7 +5,7 @@ import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 
 import { Status } from '@console/shared';
-import { getJobTypeAndCompletions, K8sKind, JobKind } from '../module/k8s';
+import { getJobTypeAndCompletions, K8sKind, JobKind, K8sResourceKind } from '../module/k8s';
 import { Conditions } from './conditions';
 import { DetailsPage, ListPage, Table, TableRow, TableData, RowFunction } from './factory';
 import { configureJobParallelismModal } from './modals';
@@ -15,6 +15,7 @@ import {
   Kebab,
   KebabAction,
   LabelList,
+  PodsComponent,
   ResourceKebab,
   ResourceLink,
   ResourceSummary,
@@ -193,14 +194,18 @@ const JobDetails: React.FC<JobsDetailsProps> = ({ obj: job }) => (
   </>
 );
 
+const JobPods: React.FC<JobPodsProps> = (props) => (
+  <PodsComponent {...props} customData={{ showNodes: true }} />
+);
+
 const { details, pods, editYaml, events } = navFactory;
 const JobsDetailsPage: React.FC<JobsDetailsPageProps> = (props) => (
   <DetailsPage
     {...props}
     getResourceStatus={jobStatus}
     kind={kind}
     menuActions={menuActions}
-    pages={[details(JobDetails), editYaml(), pods(), events(ResourceEventStream)]}
+    pages={[details(JobDetails), editYaml(), pods(JobPods), events(ResourceEventStream)]}
   />
 );
 const JobsList: React.FC = (props) => (
@@ -228,6 +233,10 @@ type JobsPageProps = {
   selector?: any;
 };
 
+type JobPodsProps = {
+  obj: K8sResourceKind;
+};
+
 type JobsDetailsPageProps = {
   match: any;
 };

frontend/public/components/pod.tsx

@@ -114,7 +114,14 @@ const podRowStateToProps = ({ UI }) => ({
 });
 
 const PodTableRow = connect<PodTableRowPropsFromState, null, PodTableRowProps>(podRowStateToProps)(
-  ({ obj: pod, index, rowKey, style, metrics }: PodTableRowProps & PodTableRowPropsFromState) => {
+  ({
+    obj: pod,
+    index,
+    rowKey,
+    style,
+    metrics,
+    showNodes,
+  }: PodTableRowProps & PodTableRowPropsFromState) => {
     const { name, namespace, creationTimestamp } = pod.metadata;
     const { readyCount, totalContainers } = podReadiness(pod);
     const phase = podPhase(pod);
@@ -137,7 +144,11 @@ const PodTableRow = connect<PodTableRowPropsFromState, null, PodTableRowProps>(p
         </TableData>
         <TableData className={tableColumnClasses[4]}>{restarts}</TableData>
         <TableData className={tableColumnClasses[5]}>
-          <OwnerReferences resource={pod} />
+          {showNodes ? (
+            <ResourceLink kind="Node" name={pod.spec.nodeName} namespace={namespace} />
+          ) : (
+            <OwnerReferences resource={pod} />
+          )}
         </TableData>
         <TableData className={tableColumnClasses[6]}>
           {bytes ? `${formatBytesAsMiB(bytes)} MiB` : '-'}
@@ -162,69 +173,70 @@ const PodTableRow = connect<PodTableRowPropsFromState, null, PodTableRowProps>(p
 );
 PodTableRow.displayName = 'PodTableRow';
 
-const PodTableHeader = () => {
-  return [
-    {
-      title: 'Name',
-      sortField: 'metadata.name',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[0] },
-    },
-    {
-      title: 'Namespace',
-      sortField: 'metadata.namespace',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[1] },
-    },
-    {
-      title: 'Status',
-      sortFunc: 'podPhase',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[2] },
-    },
-    {
-      title: 'Ready',
-      sortFunc: 'podReadiness',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[3] },
-    },
-    {
-      title: 'Restarts',
-      sortFunc: 'podRestarts',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[4] },
-    },
-    {
-      title: 'Owner',
-      sortField: 'metadata.ownerReferences[0].name',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[5] },
-    },
-    {
-      title: 'Memory',
-      sortFunc: 'podMemory',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[6] },
-    },
-    {
-      title: 'CPU',
-      sortFunc: 'podCPU',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[7] },
-    },
-    {
-      title: 'Created',
-      sortField: 'metadata.creationTimestamp',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[8] },
-    },
-    {
-      title: '',
-      props: { className: tableColumnClasses[9] },
-    },
-  ];
+const getHeader = (showNodes) => {
+  return () => {
+    return [
+      {
+        title: 'Name',
+        sortField: 'metadata.name',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[0] },
+      },
+      {
+        title: 'Namespace',
+        sortField: 'metadata.namespace',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[1] },
+      },
+      {
+        title: 'Status',
+        sortFunc: 'podPhase',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[2] },
+      },
+      {
+        title: 'Ready',
+        sortFunc: 'podReadiness',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[3] },
+      },
+      {
+        title: 'Restarts',
+        sortFunc: 'podRestarts',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[4] },
+      },
+      {
+        title: showNodes ? 'Node' : 'Owner',
+        sortField: showNodes ? 'spec.nodeName' : 'metadata.ownerReferences[0].name',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[5] },
+      },
+      {
+        title: 'Memory',
+        sortFunc: 'podMemory',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[6] },
+      },
+      {
+        title: 'CPU',
+        sortFunc: 'podCPU',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[7] },
+      },
+      {
+        title: 'Created',
+        sortField: 'metadata.creationTimestamp',
+        transforms: [sortable],
+        props: { className: tableColumnClasses[8] },
+      },
+      {
+        title: '',
+        props: { className: tableColumnClasses[9] },
+      },
+    ];
+  };
 };
-PodTableHeader.displayName = 'PodTableHeader';
 
 export const ContainerLink: React.FC<ContainerLinkProps> = ({ pod, name }) => (
   <span className="co-resource-item co-resource-item--inline">
@@ -498,13 +510,30 @@ export const PodsDetailsPage: React.FC<PodDetailsPageProps> = (props) => (
 );
 PodsDetailsPage.displayName = 'PodsDetailsPage';
 
-const Row = (rowArgs: RowFunctionArgs<PodKind>) => (
-  <PodTableRow obj={rowArgs.obj} index={rowArgs.index} rowKey={rowArgs.key} style={rowArgs.style} />
-);
+const getRow = (showNodes) => {
+  return (rowArgs: RowFunctionArgs<PodKind>) => (
+    <PodTableRow
+      obj={rowArgs.obj}
+      index={rowArgs.index}
+      rowKey={rowArgs.key}
+      style={rowArgs.style}
+      showNodes={showNodes}
+    />
+  );
+};
 
-export const PodList: React.FC = (props) => (
-  <Table {...props} aria-label="Pods" Header={PodTableHeader} Row={Row} virtualize />
-);
+export const PodList: React.FC<PodListProps> = (props) => {
+  const showNodes = props?.customData?.showNodes;
+  return (
+    <Table
+      {...props}
+      aria-label="Pods"
+      Header={getHeader(showNodes)}
+      Row={getRow(showNodes)}
+      virtualize
+    />
+  );
+};
 PodList.displayName = 'PodList';
 
 const filters = [
@@ -534,7 +563,7 @@ export const PodsPage = connect<{}, PodPagePropsFromDispatch, PodPageProps>(
   null,
   dispatchToProps,
 )((props: PodPageProps & PodPagePropsFromDispatch) => {
-  const { canCreate = true, namespace, setPodMetrics, ...listProps } = props;
+  const { canCreate = true, namespace, setPodMetrics, customData, ...listProps } = props;
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
     if (showMetrics) {
@@ -563,6 +592,7 @@ export const PodsPage = connect<{}, PodPagePropsFromDispatch, PodPageProps>(
       ListComponent={PodList}
       rowFilters={filters}
       namespace={namespace}
+      customData={customData}
     />
   );
 });
@@ -609,18 +639,24 @@ type PodTableRowProps = {
   index: number;
   rowKey: string;
   style: object;
+  showNodes?: boolean;
 };
 
 type PodTableRowPropsFromState = {
   metrics: UIActions.PodMetrics;
 };
 
+type PodListProps = {
+  customData?: any;
+};
+
 type PodPageProps = {
   canCreate?: boolean;
   fieldSelector?: any;
   namespace?: string;
   selector?: any;
   showTitle?: boolean;
+  customData?: any;
 };
 
 type PodPagePropsFromDispatch = {

frontend/public/components/replicaset.jsx

@@ -21,6 +21,7 @@ import {
   ResourceKebab,
   OwnerReferences,
   Timestamp,
+  PodsComponent,
 } from './utils';
 import { ResourceEventStream } from './events';
 import { VolumesTable } from './volumes-table';
@@ -89,6 +90,8 @@ const environmentComponent = (props) => (
   />
 );
 
+const ReplicaSetPods = (props) => <PodsComponent {...props} customData={{ showNodes: true }} />;
+
 const { details, editYaml, pods, envEditor, events } = navFactory;
 const ReplicaSetsDetailsPage = (props) => (
   <DetailsPage
@@ -97,7 +100,7 @@ const ReplicaSetsDetailsPage = (props) => (
     pages={[
       details(Details),
       editYaml(),
-      pods(),
+      pods(ReplicaSetPods),
       envEditor(environmentComponent),
       events(ResourceEventStream),
     ]}

frontend/public/components/replication-controller.jsx

@@ -22,6 +22,7 @@ import {
   asAccessReview,
   OwnerReferences,
   Timestamp,
+  PodsComponent,
 } from './utils';
 
 import { VolumesTable } from './volumes-table';
@@ -131,6 +132,10 @@ const CancelAction = (kind, obj) => ({
   accessReview: asAccessReview(kind, obj, 'patch'),
 });
 
+const ReplicationControllerPods = (props) => (
+  <PodsComponent {...props} customData={{ showNodes: true }} />
+);
+
 const menuActions = [CancelAction, ...replicaSetMenuActions];
 
 export const ReplicationControllersDetailsPage = (props) => (
@@ -143,7 +148,7 @@ export const ReplicationControllersDetailsPage = (props) => (
     pages={[
       details(Details),
       editYaml(),
-      pods(),
+      pods(ReplicationControllerPods),
       envEditor(environmentComponent),
       events(ResourceEventStream),
     ]}