Add Pod Dashboard

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

@@ -2,3 +2,5 @@ import { PodKind } from '@console/internal/module/k8s';
 
 export const getNodeName = (pod: PodKind): PodKind['spec']['nodeName'] =>
   pod && pod.spec ? pod.spec.nodeName : undefined;
+export const podIpAddress = (pod: PodKind): PodKind['status']['podIP'] =>
+  pod && pod.status ? pod.status.podIP : undefined;

frontend/public/components/pod-dashboard-context.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PodKind } from '../module/k8s';
+
+export const PodDashboardContext = React.createContext<PodDashboardContext>({});
+
+type PodDashboardContext = {
+  pod?: PodKind;
+};

frontend/public/components/pod-dashboard-details.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { getName, getNamespace, getUID, getCreationTimestamp } from '@console/shared';
+import { getNodeName, podIpAddress } from '@console/shared/src/selectors/pod';
+import { PodModel } from '../models';
+import { resourcePath, ResourceLink, Timestamp, NodeLink } from './utils';
+import { POD_DETAIL_OVERVIEW_HREF } from './utils/href';
+import {
+  DashboardCard,
+  DashboardCardTitle,
+  DashboardCardLink,
+  DashboardCardHeader,
+  DashboardCardBody,
+} from './dashboard/dashboard-card';
+import { DetailsBody, DetailItem } from './dashboard/details-card';
+import { DashboardItemProps } from './dashboards-page/with-dashboard-resources';
+import { PodDashboardContext } from './pod-dashboard-context';
+
+export const PodDashboardDetailsCard: React.FC<PodDashboardDetailsCardProps> = () => {
+  const podDashboardContext = React.useContext(PodDashboardContext);
+  const { pod } = podDashboardContext;
+
+  const name = getName(pod);
+  const namespace = getNamespace(pod);
+
+  const viewAllLink = `${resourcePath(PodModel.kind, name, namespace)}/${POD_DETAIL_OVERVIEW_HREF}`;
+
+  const ip = podIpAddress(pod);
+  return (
+    <DashboardCard>
+      <DashboardCardHeader>
+        <DashboardCardTitle>Details</DashboardCardTitle>
+        <DashboardCardLink to={viewAllLink}>View all</DashboardCardLink>
+      </DashboardCardHeader>
+      <DashboardCardBody isLoading={false}>
+        <DetailsBody>
+          <DetailItem title="Name" error={false} isLoading={!pod}>
+            {name}
+          </DetailItem>
+          <DetailItem title="Namespace" error={false} isLoading={!pod}>
+            <ResourceLink kind="Namespace" name={namespace} title={getUID(pod)} />
+          </DetailItem>
+          <DetailItem title="Created" error={false} isLoading={!pod}>
+            <Timestamp timestamp={getCreationTimestamp(pod)} />
+          </DetailItem>
+          <DetailItem title="Node" isLoading={!pod}>
+            <NodeLink name={getNodeName(pod)} />
+          </DetailItem>
+          <DetailItem title="IP Address" error={!ip} isLoading={!pod}>
+            {ip}
+          </DetailItem>
+        </DetailsBody>
+      </DashboardCardBody>
+    </DashboardCard>
+  );
+};
+
+type PodDashboardDetailsCardProps = DashboardItemProps;

frontend/public/components/pod-dashboard.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { PodKind } from '../module/k8s';
+import { Dashboard, DashboardGrid } from './dashboard';
+import { PodDashboardDetailsCard } from './pod-dashboard-details';
+import { PodDashboardContext } from './pod-dashboard-context';
+
+const mainCards = [];
+const leftCards = [{ Card: PodDashboardDetailsCard }];
+const rightCards = [];
+
+export const PodDashboard: React.FC<PodDashboardProps> = (props) => {
+  const { obj: pod } = props;
+  const context = { pod };
+  return (
+    <div className="co-m-pane__body">
+      <PodDashboardContext.Provider value={context}>
+        <Dashboard>
+          <DashboardGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
+        </Dashboard>
+      </PodDashboardContext.Provider>
+    </div>
+  );
+};
+
+type PodDashboardProps = {
+  obj?: PodKind;
+};

frontend/public/components/pod.tsx

@@ -38,6 +38,7 @@ import { requirePrometheus, Area } from './graphs';
 import { formatDuration } from './utils/datetime';
 import { CamelCaseWrap } from './utils/camel-case-wrap';
 import { VolumesTable } from './volumes-table';
+import { PodDashboard } from './pod-dashboard';
 
 export const menuActions = [...Kebab.factory.common];
 const validReadinessStates = new Set(['ContainersNotReady', 'Ready', 'PodCompleted']);
@@ -403,6 +404,11 @@ export const PodsDetailsPage: React.FC<PodDetailsPageProps> = (props) => (
     {...props}
     menuActions={menuActions}
     pages={[
+      {
+        href: 'dashboard', // TODO: make it default once additional Cards are implemented
+        name: 'Dashboard',
+        component: PodDashboard,
+      },
       navFactory.details(Details),
       navFactory.editYaml(),
       navFactory.envEditor(PodEnvironmentComponent),

frontend/public/components/utils/href.ts

@@ -0,0 +1 @@
+export const POD_DETAIL_OVERVIEW_HREF = ''; // TODO: see pod.tsx, will be changed once Pod Dashboard becomes the default tab