Display node column in pods list (#1832)

* Display node column in pods list

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

* Adding flat option to <Badge />

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing <Span /> component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using badge with tooltips in pods list

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

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;
     }
   }
 }

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 { Badge } from "../badge";
 
 
 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<Props> {
           [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<Props> {
           (pod: Pod) => pod.getSearchFields(),
           (pod: Pod) => pod.getStatusMessage(),
           (pod: Pod) => pod.status.podIP,
+          (pod: Pod) => pod.getNodeName(),
         ]}
         renderHeaderTitle={<Trans>Pods</Trans>}
         renderTableHeader={[
@@ -97,12 +101,13 @@ export class Pods extends React.Component<Props> {
           { title: <Trans>Containers</Trans>, className: "containers", sortBy: sortBy.containers },
           { title: <Trans>Restarts</Trans>, className: "restarts", sortBy: sortBy.restarts },
           { title: <Trans>Controlled By</Trans>, className: "owners", sortBy: sortBy.owners },
+          { title: <Trans>Node</Trans>, className: "node", sortBy: sortBy.node },
           { title: <Trans>QoS</Trans>, className: "qos", sortBy: sortBy.qos },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
         ]}
         renderTableContents={(pod: Pod) => [
-          pod.getName(),
+          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} />,
           <KubeObjectStatusIcon key="icon" object={pod} />,
           pod.getNs(),
           this.renderContainersStatus(pod),
@@ -112,11 +117,20 @@ export class Pods extends React.Component<Props> {
             const detailsLink = getDetailsUrl(lookupApiLink(ref, pod));
 
             return (
-              <Link key={name} to={detailsLink} className="owner" onClick={stopPropagation}>
+              <Badge flat key={name} className="owner" tooltip={name}>
+                <Link to={detailsLink} onClick={stopPropagation}>
                   {kind}
                 </Link>
+              </Badge>
             );
           }),
+          pod.getNodeName() ?
+            <Badge flat key="node" className="node" tooltip={pod.getNodeName()}>
+              <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
+                {pod.getNodeName()}
+              </Link>
+            </Badge>
+            : "",
           pod.getQosClass(),
           pod.getAge(),
           { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) }

src/renderer/components/badge/badge.scss

@@ -1,14 +1,17 @@
 .Badge {
   display: inline-block;
-  background: $colorVague;
-  color: $textColorSecondary;
-  border-radius: $radius;
-  padding: .2em .4em;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &:not(.flat) {
+    background: $colorVague;
+    color: $textColorSecondary;
+    border-radius: $radius;
+    padding: .2em .4em;
+  }
+
   &.small {
     font-size: $font-size-small;
   }

src/renderer/components/badge/badge.tsx

@@ -6,16 +6,17 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
+  flat?: boolean;
   label?: React.ReactNode;
 }
 
 @withTooltip
 export class Badge extends React.Component<BadgeProps> {
   render() {
-    const { className, label, small, children, ...elemProps } = this.props;
+    const { className, label, small, flat, children, ...elemProps } = this.props;
 
     return <>
-      <span className={cssNames("Badge", { small }, className)} {...elemProps}>
+      <span className={cssNames("Badge", { small, flat }, className)} {...elemProps}>
         {label}
         {children}
       </span>