From 1bde4065e0101e85f849d94d55c620e03a743373 Mon Sep 17 00:00:00 2001
From: Marek Libra <marek.libra@gmail.com>
Date: Fri, 20 Sep 2019 12:57:25 +0200
Subject: [PATCH 1/2] Add pod dashboard tab

---
 frontend/public/components/pod-dashboard.tsx | 31 ++++++++++++++++++++
 frontend/public/components/pod.tsx           |  6 ++++
 2 files changed, 37 insertions(+)
 create mode 100644 frontend/public/components/pod-dashboard.tsx

diff --git a/frontend/public/components/pod-dashboard.tsx b/frontend/public/components/pod-dashboard.tsx
new file mode 100644
index 00000000000..6cd3aa9aad0
--- /dev/null
+++ b/frontend/public/components/pod-dashboard.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Dashboard, DashboardGrid } from './dashboard';
+import { PodKind } from '@console/internal/module/k8s';
+
+export const PodDashboardContext = React.createContext<PodDashboardContext>({ pod: undefined });
+
+const mainCards = [];
+const leftCards = [];
+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;
+};
+
+type PodDashboardContext = {
+  pod: PodKind;
+};
diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
index a9881c4268f..6c663c9099b 100644
--- a/frontend/public/components/pod.tsx
+++ b/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),

From c4010de6a46fbdebcf209b944a1d75e1489d20c4 Mon Sep 17 00:00:00 2001
From: Marek Libra <marek.libra@gmail.com>
Date: Fri, 20 Sep 2019 13:26:54 +0200
Subject: [PATCH 2/2] Add PodDashboardDetailsCard component

---
 .../console-shared/src/selectors/pod.ts       |  2 +
 .../components/pod-dashboard-context.tsx      |  8 +++
 .../components/pod-dashboard-details.tsx      | 57 +++++++++++++++++++
 frontend/public/components/pod-dashboard.tsx  | 14 ++---
 frontend/public/components/utils/href.ts      |  1 +
 5 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 frontend/public/components/pod-dashboard-context.tsx
 create mode 100644 frontend/public/components/pod-dashboard-details.tsx
 create mode 100644 frontend/public/components/utils/href.ts

diff --git a/frontend/packages/console-shared/src/selectors/pod.ts b/frontend/packages/console-shared/src/selectors/pod.ts
index 892db61aca7..4bd45c1fe2e 100644
--- a/frontend/packages/console-shared/src/selectors/pod.ts
+++ b/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;
diff --git a/frontend/public/components/pod-dashboard-context.tsx b/frontend/public/components/pod-dashboard-context.tsx
new file mode 100644
index 00000000000..20e39239384
--- /dev/null
+++ b/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;
+};
diff --git a/frontend/public/components/pod-dashboard-details.tsx b/frontend/public/components/pod-dashboard-details.tsx
new file mode 100644
index 00000000000..e890de973e7
--- /dev/null
+++ b/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;
diff --git a/frontend/public/components/pod-dashboard.tsx b/frontend/public/components/pod-dashboard.tsx
index 6cd3aa9aad0..6b234bbfe81 100644
--- a/frontend/public/components/pod-dashboard.tsx
+++ b/frontend/public/components/pod-dashboard.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { PodKind } from '../module/k8s';
 import { Dashboard, DashboardGrid } from './dashboard';
-import { PodKind } from '@console/internal/module/k8s';
-
-export const PodDashboardContext = React.createContext<PodDashboardContext>({ pod: undefined });
+import { PodDashboardDetailsCard } from './pod-dashboard-details';
+import { PodDashboardContext } from './pod-dashboard-context';
 
 const mainCards = [];
-const leftCards = [];
+const leftCards = [{ Card: PodDashboardDetailsCard }];
 const rightCards = [];
 
 export const PodDashboard: React.FC<PodDashboardProps> = (props) => {
@@ -23,9 +23,5 @@ export const PodDashboard: React.FC<PodDashboardProps> = (props) => {
 };
 
 type PodDashboardProps = {
-  obj: PodKind;
-};
-
-type PodDashboardContext = {
-  pod: PodKind;
+  obj?: PodKind;
 };
diff --git a/frontend/public/components/utils/href.ts b/frontend/public/components/utils/href.ts
new file mode 100644
index 00000000000..cab22b22d3e
--- /dev/null
+++ b/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