Better displaying container's info for Pods (#7331)

* Better displaying container's info for Pods and all tooltips with `formatters={{tableView: true}}`

Signed-off-by: Roman <ixrock@gmail.com>

* fix: keep containerID on a single line

Signed-off-by: Roman <ixrock@gmail.com>

* nope, i can :P (make it perfect)

Signed-off-by: Roman <ixrock@gmail.com>

---------

Signed-off-by: Roman <ixrock@gmail.com>

packages/core/src/common/k8s-api/endpoints/pod.api.ts

@@ -80,6 +80,8 @@ export interface ContainerState {
   terminated?: ContainerStateTerminated;
 }
 
+export type ContainerStateValues = Partial<ContainerState[keyof ContainerState]>;
+
 export interface PodContainerStatus {
   name: string;
   state?: ContainerState;
@@ -649,7 +651,7 @@ export class Pod extends KubeObject<
       .filter(({ name }) => runningContainerNames.has(name));
   }
 
-  getContainerStatuses(includeInitContainers = true) {
+  getContainerStatuses(includeInitContainers = true): PodContainerStatus[] {
     const { containerStatuses = [], initContainerStatuses = [] } = this.status ?? {};
 
     if (includeInitContainers) {

packages/core/src/renderer/components/+workloads-pods/pods.tsx

@@ -5,11 +5,11 @@
 
 import "./pods.scss";
 
-import React, { Fragment } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
+import type { ContainerStateValues, NodeApi, Pod } from "../../../common/k8s-api/endpoints";
 import { StatusBrick } from "../status-brick";
 import { cssNames, getConvertedParts, object, stopPropagation } from "@k8slens/utilities";
 import startCase from "lodash/startCase";
@@ -21,8 +21,8 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
-import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
+import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import type { EventStore } from "../+events/store";
 import type { PodStore } from "./store";
 import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.injectable";
@@ -52,8 +52,12 @@ interface Dependencies {
 
 @observer
 class NonInjectedPods extends React.Component<Dependencies> {
-  renderState<T extends string>(name: string, ready: boolean, key: string, data: Partial<Record<T, string | number>> | undefined) {
+  renderState(name: string, ready: boolean, key: string, data?: ContainerStateValues) {
-    return data && (
+    if (!data) {
+      return;
+    }
+
+    return (
       <>
         <div className="title">
           {name}
@@ -64,40 +68,37 @@ class NonInjectedPods extends React.Component<Dependencies> {
           </span>
         </div>
         {object.entries(data).map(([name, value]) => (
-          <div key={name} className="flex gaps align-center">
+          <React.Fragment key={name}>
-            <div className="name">
+            <div className="name">{startCase(name)}</div>
-              {startCase(name)}
+            <div className="value">{value}</div>
-            </div>
+          </React.Fragment>
-            <div className="value">
-              {value}
-            </div>
-          </div>
         ))}
       </>
     );
   }
 
   renderContainersStatus(pod: Pod) {
-    return pod.getContainerStatuses()
+    return pod.getContainerStatuses().map(({ name, state, ready }) => {
-      .map(({ name, state = {}, ready }) => (
+      return (
-        <Fragment key={name}>
+        <StatusBrick
-          <StatusBrick
+          key={name}
-            className={cssNames(state, { ready })}
+          className={cssNames(state, { ready })}
-            tooltip={{
+          tooltip={{
-              formatters: {
+            formatters: {
-                tableView: true,
+              tableView: true,
-              },
+              nowrap: true,
-              children: (
+            },
-                <>
+            children: (
-                  {this.renderState(name, ready, "running", state.running)}
+              <>
-                  {this.renderState(name, ready, "waiting", state.waiting)}
+                {this.renderState(name, ready, "running", state?.running)}
-                  {this.renderState(name, ready, "terminated", state.terminated)}
+                {this.renderState(name, ready, "waiting", state?.waiting)}
-                </>
+                {this.renderState(name, ready, "terminated", state?.terminated)}
-              ),
+              </>
-            }}
+            ),
-          />
+          }}
-        </Fragment>
+        />
-      ));
+      );
+    });
   }
 
   render() {

packages/core/src/renderer/components/tooltip/tooltip.scss

@@ -63,27 +63,36 @@
     }
 
     &.tableView {
-      min-width: 200px;
+      display: grid;
+      gap: var(--padding);
+      grid-template-columns: max-content 1fr;
+      grid-template-rows: repeat(2, 1fr);
 
-      > :not(:last-child) {
+      // backward compatibility: skips element in DOM to consider only children in grid-flow
-        margin-bottom: var(--flex-gap);
+      > .flex {
+        display: contents;
+      }
+
+      > * {
+        white-space: pre-wrap;
+        word-break: break-word;
       }
 
       .title {
+        grid-column: 1 / 3; // merge
         color: var(--textColorAccent);
         text-align: center;
+        font-weight: bold;
       }
 
       .name {
-        color: var(--textColorAccent);
         text-align: right;
-        flex: 0 0 35%;
+        color: var(--textColorAccent);
       }
 
       .value {
         text-align: left;
-        max-width: 300px;
+        color: var(--textColorSecondary);
-        word-break: break-word;
       }
     }
   }