From ef578b28544a1f1cca450e9b18c29e2a509ebc26 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 15 Dec 2022 14:02:19 +0300
Subject: [PATCH] Convert styles to modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../pod-details-list.test.tsx.snap            | 240 +++++++++++++-----
 .../pod-details-list.module.scss              |  56 ++++
 .../+workloads-pods/pod-details-list.tsx      |  55 ++--
 3 files changed, 272 insertions(+), 79 deletions(-)
 create mode 100644 src/renderer/components/+workloads-pods/pod-details-list.module.scss

diff --git a/src/renderer/components/+workloads-pods/__tests__/__snapshots__/pod-details-list.test.tsx.snap b/src/renderer/components/+workloads-pods/__tests__/__snapshots__/pod-details-list.test.tsx.snap
index 13abca230d..25c12c1cd2 100644
--- a/src/renderer/components/+workloads-pods/__tests__/__snapshots__/pod-details-list.test.tsx.snap
+++ b/src/renderer/components/+workloads-pods/__tests__/__snapshots__/pod-details-list.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
 <div>
   <div
-    class="PodDetailsList flex column"
+    class="PodDetailsList"
   >
     <div
       class="DrawerTitle title"
@@ -11,7 +11,7 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
       Pods
     </div>
     <div
-      class="Table flex column box grow selectable sortable autoSize"
+      class="Table flex column table selectable sortable autoSize"
     >
       <div
         class="TableHead sticky"
@@ -65,7 +65,7 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
           </i>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           Ready
         </div>
@@ -111,7 +111,11 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
         <div
           class="TableCell name"
         >
-          foobar
+          <span
+            id="pod-list-pod-item-foobar"
+          >
+            foobar
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -122,10 +126,14 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -151,7 +159,11 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
         <div
           class="TableCell name"
         >
-          foobar-failed
+          <span
+            id="pod-list-pod-item-foobar-failed"
+          >
+            foobar-failed
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -162,10 +174,14 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
         <div
           class="TableCell namespace"
         >
-          kube-system
+          <span
+            id="pod-list-pod-namespace-foobar-failed"
+          >
+            kube-system
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -191,7 +207,11 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
         <div
           class="TableCell name"
         >
-          foobar-pending
+          <span
+            id="pod-list-pod-item-foobar-pending"
+          >
+            foobar-pending
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -202,10 +222,14 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar-pending"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -233,7 +257,7 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
 exports[`<PodDetailsList /> when few pods passed when metrics max values passed renders table with metric lines 1`] = `
 <div>
   <div
-    class="PodDetailsList flex column"
+    class="PodDetailsList"
   >
     <div
       class="DrawerTitle title"
@@ -241,7 +265,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
       Pods
     </div>
     <div
-      class="Table flex column box grow selectable sortable autoSize"
+      class="Table flex column table selectable sortable autoSize"
     >
       <div
         class="TableHead sticky"
@@ -295,7 +319,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
           </i>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           Ready
         </div>
@@ -341,7 +365,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-pending
+          <span
+            id="pod-list-pod-item-foobar-pending"
+          >
+            foobar-pending
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -352,10 +380,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar-pending"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -409,7 +441,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-failed
+          <span
+            id="pod-list-pod-item-foobar-failed"
+          >
+            foobar-failed
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -420,10 +456,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          kube-system
+          <span
+            id="pod-list-pod-namespace-foobar-failed"
+          >
+            kube-system
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -477,7 +517,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar
+          <span
+            id="pod-list-pod-item-foobar"
+          >
+            foobar
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -488,10 +532,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -547,7 +595,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
 exports[`<PodDetailsList /> when few pods passed when metrics max values passed sorts table by cpu 1`] = `
 <div>
   <div
-    class="PodDetailsList flex column"
+    class="PodDetailsList"
   >
     <div
       class="DrawerTitle title"
@@ -555,7 +603,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
       Pods
     </div>
     <div
-      class="Table flex column box grow selectable sortable autoSize"
+      class="Table flex column table selectable sortable autoSize"
     >
       <div
         class="TableHead sticky"
@@ -609,7 +657,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
           </i>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           Ready
         </div>
@@ -655,7 +703,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-pending
+          <span
+            id="pod-list-pod-item-foobar-pending"
+          >
+            foobar-pending
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -666,10 +718,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar-pending"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -723,7 +779,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-failed
+          <span
+            id="pod-list-pod-item-foobar-failed"
+          >
+            foobar-failed
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -734,10 +794,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          kube-system
+          <span
+            id="pod-list-pod-namespace-foobar-failed"
+          >
+            kube-system
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -791,7 +855,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar
+          <span
+            id="pod-list-pod-item-foobar"
+          >
+            foobar
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -802,10 +870,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -861,7 +933,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
 exports[`<PodDetailsList /> when few pods passed when metrics max values passed sorts table by memory 1`] = `
 <div>
   <div
-    class="PodDetailsList flex column"
+    class="PodDetailsList"
   >
     <div
       class="DrawerTitle title"
@@ -869,7 +941,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
       Pods
     </div>
     <div
-      class="Table flex column box grow selectable sortable autoSize"
+      class="Table flex column table selectable sortable autoSize"
     >
       <div
         class="TableHead sticky"
@@ -923,7 +995,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
           </i>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           Ready
         </div>
@@ -969,7 +1041,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-failed
+          <span
+            id="pod-list-pod-item-foobar-failed"
+          >
+            foobar-failed
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -980,10 +1056,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          kube-system
+          <span
+            id="pod-list-pod-namespace-foobar-failed"
+          >
+            kube-system
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -1037,7 +1117,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-pending
+          <span
+            id="pod-list-pod-item-foobar-pending"
+          >
+            foobar-pending
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -1048,10 +1132,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar-pending"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -1105,7 +1193,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar
+          <span
+            id="pod-list-pod-item-foobar"
+          >
+            foobar
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -1116,10 +1208,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -1175,7 +1271,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
 exports[`<PodDetailsList /> when few pods passed when metrics max values passed sorts table by name 1`] = `
 <div>
   <div
-    class="PodDetailsList flex column"
+    class="PodDetailsList"
   >
     <div
       class="DrawerTitle title"
@@ -1183,7 +1279,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
       Pods
     </div>
     <div
-      class="Table flex column box grow selectable sortable autoSize"
+      class="Table flex column table selectable sortable autoSize"
     >
       <div
         class="TableHead sticky"
@@ -1237,7 +1333,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
           </i>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           Ready
         </div>
@@ -1283,7 +1379,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-pending
+          <span
+            id="pod-list-pod-item-foobar-pending"
+          >
+            foobar-pending
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -1294,10 +1394,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar-pending"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -1351,7 +1455,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar-failed
+          <span
+            id="pod-list-pod-item-foobar-failed"
+          >
+            foobar-failed
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -1362,10 +1470,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          kube-system
+          <span
+            id="pod-list-pod-namespace-foobar-failed"
+          >
+            kube-system
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
@@ -1419,7 +1531,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell name"
         >
-          foobar
+          <span
+            id="pod-list-pod-item-foobar"
+          >
+            foobar
+          </span>
         </div>
         <div
           class="TableCell warning"
@@ -1430,10 +1546,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
         <div
           class="TableCell namespace"
         >
-          default
+          <span
+            id="pod-list-pod-namespace-foobar"
+          >
+            default
+          </span>
         </div>
         <div
-          class="TableCell ready"
+          class="TableCell"
         >
           0 / 0
         </div>
diff --git a/src/renderer/components/+workloads-pods/pod-details-list.module.scss b/src/renderer/components/+workloads-pods/pod-details-list.module.scss
new file mode 100644
index 0000000000..53ca8839fe
--- /dev/null
+++ b/src/renderer/components/+workloads-pods/pod-details-list.module.scss
@@ -0,0 +1,56 @@
+.PodDetailsList {
+  @mixin status-colors {
+    @each $status, $color in $pod-status-color-list {
+      &:global(.#{$status}) {
+        color: $color;
+      }
+    }
+  }
+
+  .table {
+    &:global(.virtual) {
+      height: 500px;
+    }
+
+    :global(.TableCell).warning {
+      @include table-cell-warning;
+    }
+
+    :global(.TableCell).status {
+      @include status-colors;
+    }
+  }
+}
+
+.table {
+  margin: 0 (-$margin * 3);
+}
+
+.name {
+  flex-grow: 2;
+  margin-left: $margin;
+}
+
+.node {
+  flex-grow: 2;
+}
+
+.namespace {
+  flex-grow: 1.2;
+}
+
+.cpu {
+  align-self: center;
+
+  .LineProgress {
+    color: var(--blue);
+  }
+}
+
+.memory {
+  align-self: center;
+
+  :global(.LineProgress) {
+    color: var(--magenta);
+  }
+}
diff --git a/src/renderer/components/+workloads-pods/pod-details-list.tsx b/src/renderer/components/+workloads-pods/pod-details-list.tsx
index 9ff03d992c..8ef40c0ed1 100644
--- a/src/renderer/components/+workloads-pods/pod-details-list.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-list.tsx
@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./pod-details-list.scss";
+import styles from "./pod-details-list.module.scss";
 
 import { withInjectables } from "@ogre-tools/injectable-react";
 import kebabCase from "lodash/kebabCase";
@@ -21,6 +21,7 @@ import { Spinner } from "../spinner";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import type { PodStore } from "./store";
 import podStoreInjectable from "./store.injectable";
+import { Tooltip, TooltipPosition } from "../tooltip";
 
 enum sortBy {
   name = "name",
@@ -124,16 +125,32 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
         nowrap
         onClick={prevDefault(() => showDetails(pod.selfLink, false))}
       >
-        <TableCell className="name">{pod.getName()}</TableCell>
-        <TableCell className="warning"><KubeObjectStatusIcon key="icon" object={pod}/></TableCell>
-        <TableCell className="node">{pod.getNodeName()}</TableCell>
-        <TableCell className="namespace">{pod.getNs()}</TableCell>
-        <TableCell className="ready">
+        <TableCell className={styles.name}>
+          <span id={`pod-list-pod-item-${pod.getId()}`}>{pod.getName()}</span>
+          <Tooltip
+            targetId={`pod-list-pod-item-${pod.getId()}`}
+            preferredPositions={[TooltipPosition.TOP, TooltipPosition.TOP_LEFT]}
+          >
+            {pod.getName()}
+          </Tooltip>
+        </TableCell>
+        <TableCell className={styles.warning}><KubeObjectStatusIcon key="icon" object={pod}/></TableCell>
+        <TableCell className={styles.node}>{pod.getNodeName()}</TableCell>
+        <TableCell className={styles.namespace}>
+          <span id={`pod-list-pod-namespace-${pod.getId()}`}>{pod.getNs()}</span>
+          <Tooltip
+            targetId={`pod-list-pod-namespace-${pod.getId()}`}
+            preferredPositions={[TooltipPosition.TOP, TooltipPosition.TOP_LEFT]}
+          >
+            {pod.getNs()}
+          </Tooltip>
+        </TableCell>
+        <TableCell>
           {`${pod.getRunningContainers().length} / ${pod.getContainers().length}`}
         </TableCell>
-        <TableCell className="cpu">{this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}</TableCell>
-        <TableCell className="memory">{this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}</TableCell>
-        <TableCell className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell>
+        <TableCell className={styles.cpu}>{this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}</TableCell>
+        <TableCell className={styles.memory}>{this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}</TableCell>
+        <TableCell className={cssNames(styles.status, kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell>
       </TableRow>
     );
   }
@@ -160,7 +177,7 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
     const virtual = pods.length > 20;
 
     return (
-      <div className="PodDetailsList flex column">
+      <div className={styles.PodDetailsList}>
         <DrawerTitle>Pods</DrawerTitle>
         <Table
           tableId="workloads_pod_details_list"
@@ -185,17 +202,17 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
               ? undefined
               : (pod => this.getTableRow(pod.getId()))
           )}
-          className="box grow"
+          className={styles.table}
         >
           <TableHead>
-            <TableCell className="name" sortBy={sortBy.name}>Name</TableCell>
-            <TableCell className="warning"/>
-            <TableCell className="node" sortBy={sortBy.node}>Node</TableCell>
-            <TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell>
-            <TableCell className="ready">Ready</TableCell>
-            <TableCell className="cpu" sortBy={sortBy.cpu}>CPU</TableCell>
-            <TableCell className="memory" sortBy={sortBy.memory}>Memory</TableCell>
-            <TableCell className="status">Status</TableCell>
+            <TableCell className={styles.name} sortBy={sortBy.name}>Name</TableCell>
+            <TableCell className={styles.warning}/>
+            <TableCell className={styles.node} sortBy={sortBy.node}>Node</TableCell>
+            <TableCell className={styles.namespace} sortBy={sortBy.namespace}>Namespace</TableCell>
+            <TableCell>Ready</TableCell>
+            <TableCell className={styles.cpu} sortBy={sortBy.cpu}>CPU</TableCell>
+            <TableCell className={styles.memory} sortBy={sortBy.memory}>Memory</TableCell>
+            <TableCell className={styles.status}>Status</TableCell>
           </TableHead>
         </Table>
       </div>