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({}); + +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 = () => { + 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 ( + + + Details + View all + + + + + {name} + + + + + + + + + + + + {ip} + + + + + ); +}; + +type PodDashboardDetailsCardProps = DashboardItemProps; diff --git a/frontend/public/components/pod-dashboard.tsx b/frontend/public/components/pod-dashboard.tsx new file mode 100644 index 00000000000..6b234bbfe81 --- /dev/null +++ b/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 = (props) => { + const { obj: pod } = props; + const context = { pod }; + return ( +
+ + + + + +
+ ); +}; + +type PodDashboardProps = { + obj?: 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 = (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), 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