diff --git a/src/renderer/components/+workloads-pods/pods.scss b/src/renderer/components/+workloads-pods/pods.scss index 7a6b9fe34b..43c24c70d4 100644 --- a/src/renderer/components/+workloads-pods/pods.scss +++ b/src/renderer/components/+workloads-pods/pods.scss @@ -6,6 +6,14 @@ flex-grow: 2; } + &.age { + flex-grow: 0.5; + } + + &.qos { + flex-grow: 0.8; + } + &.warning { @include table-cell-warning; } @@ -22,6 +30,7 @@ &.status { @include pod-status-colors; + flex-grow: 0.7; } } } \ No newline at end of file diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx index e2fc68538f..215e76eb7c 100644 --- a/src/renderer/components/+workloads-pods/pods.tsx +++ b/src/renderer/components/+workloads-pods/pods.tsx @@ -10,7 +10,7 @@ import { volumeClaimStore } from "../+storage-volume-claims/volume-claim.store"; import { IPodsRouteParams } from "../+workloads"; import { eventStore } from "../+events/event.store"; import { KubeObjectListLayout } from "../kube-object"; -import { Pod } from "../../api/endpoints"; +import { nodesApi, Pod } from "../../api/endpoints"; import { StatusBrick } from "../status-brick"; import { cssNames, stopPropagation } from "../../utils"; import { getDetailsUrl } from "../../navigation"; @@ -19,6 +19,7 @@ import startCase from "lodash/startCase"; import kebabCase from "lodash/kebabCase"; import { lookupApiLink } from "../../api/kube-api"; import { KubeObjectStatusIcon } from "../kube-object-status-icon"; +import { Span } from "../span"; enum sortBy { @@ -28,6 +29,7 @@ enum sortBy { restarts = "restarts", age = "age", qos = "qos", + node = "node", owners = "owners", status = "status", } @@ -81,6 +83,7 @@ export class Pods extends React.Component { [sortBy.restarts]: (pod: Pod) => pod.getRestartsCount(), [sortBy.owners]: (pod: Pod) => pod.getOwnerRefs().map(ref => ref.kind), [sortBy.qos]: (pod: Pod) => pod.getQosClass(), + [sortBy.node]: (pod: Pod) => pod.getNodeName(), [sortBy.age]: (pod: Pod) => pod.metadata.creationTimestamp, [sortBy.status]: (pod: Pod) => pod.getStatusMessage(), }} @@ -88,6 +91,7 @@ export class Pods extends React.Component { (pod: Pod) => pod.getSearchFields(), (pod: Pod) => pod.getStatusMessage(), (pod: Pod) => pod.status.podIP, + (pod: Pod) => pod.getNodeName(), ]} renderHeaderTitle={Pods} renderTableHeader={[ @@ -97,12 +101,13 @@ export class Pods extends React.Component { { title: Containers, className: "containers", sortBy: sortBy.containers }, { title: Restarts, className: "restarts", sortBy: sortBy.restarts }, { title: Controlled By, className: "owners", sortBy: sortBy.owners }, + { title: Node, className: "node", sortBy: sortBy.node }, { title: QoS, className: "qos", sortBy: sortBy.qos }, { title: Age, className: "age", sortBy: sortBy.age }, { title: Status, className: "status", sortBy: sortBy.status }, ]} renderTableContents={(pod: Pod) => [ - pod.getName(), + , , pod.getNs(), this.renderContainersStatus(pod), @@ -112,11 +117,20 @@ export class Pods extends React.Component { const detailsLink = getDetailsUrl(lookupApiLink(ref, pod)); return ( - - {kind} - + + + {kind} + + ); }), + pod.getNodeName() ? + + + {pod.getNodeName()} + + + : "", pod.getQosClass(), pod.getAge(), { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) } diff --git a/src/renderer/components/span/index.ts b/src/renderer/components/span/index.ts new file mode 100644 index 0000000000..2c53e1e2ba --- /dev/null +++ b/src/renderer/components/span/index.ts @@ -0,0 +1 @@ +export * from "./span"; \ No newline at end of file diff --git a/src/renderer/components/span/span.tsx b/src/renderer/components/span/span.tsx new file mode 100644 index 0000000000..ae85ca30b8 --- /dev/null +++ b/src/renderer/components/span/span.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { TooltipDecoratorProps, withTooltip } from "../tooltip"; + +export interface SpanProps extends React.HTMLAttributes, TooltipDecoratorProps { + label?: React.ReactNode; +} + +@withTooltip +export class Span extends React.Component { + render() { + const { className, label, children, ...elemProps } = this.props; + + return <> + + {label} + {children} + + ; + } +}