when few pods passed when metrics max values passed sorts table by memory 1`] = `
when few pods passed when metrics max values passed
Pods
when few pods passed when metrics max values passed
Ready
@@ -969,7 +1041,11 @@ exports[`
when few pods passed when metrics max values passed
- foobar-failed
+
+ foobar-failed
+
when few pods passed when metrics max values passed
- kube-system
+
+ kube-system
+
0 / 0
@@ -1037,7 +1117,11 @@ exports[`
when few pods passed when metrics max values passed
- foobar-pending
+
+ foobar-pending
+
when few pods passed when metrics max values passed
- default
+
+ default
+
0 / 0
@@ -1105,7 +1193,11 @@ exports[`
when few pods passed when metrics max values passed
- foobar
+
+ foobar
+
when few pods passed when metrics max values passed
- default
+
+ default
+
0 / 0
@@ -1175,7 +1271,7 @@ exports[`
when few pods passed when metrics max values passed
exports[`
when few pods passed when metrics max values passed sorts table by name 1`] = `
when few pods passed when metrics max values passed
Pods
when few pods passed when metrics max values passed
Ready
@@ -1283,7 +1379,11 @@ exports[`
when few pods passed when metrics max values passed
- foobar-pending
+
+ foobar-pending
+
when few pods passed when metrics max values passed
- default
+
+ default
+
0 / 0
@@ -1351,7 +1455,11 @@ exports[`
when few pods passed when metrics max values passed
- foobar-failed
+
+ foobar-failed
+
when few pods passed when metrics max values passed
- kube-system
+
+ kube-system
+
0 / 0
@@ -1419,7 +1531,11 @@ exports[`
when few pods passed when metrics max values passed
- foobar
+
+ foobar
+
when few pods passed when metrics max values passed
- default
+
+ default
+
0 / 0
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
showDetails(pod.selfLink, false))}
>
- {pod.getName()}
-
- {pod.getNodeName()}
- {pod.getNs()}
-
+
+ {pod.getName()}
+
+ {pod.getName()}
+
+
+
+ {pod.getNodeName()}
+
+ {pod.getNs()}
+
+ {pod.getNs()}
+
+
+
{`${pod.getRunningContainers().length} / ${pod.getContainers().length}`}
- {this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}
- {this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}
- {pod.getStatusMessage()}
+ {this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}
+ {this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}
+ {pod.getStatusMessage()}
);
}
@@ -160,7 +177,7 @@ export class NonInjectedPodDetailsList extends React.Component 20;
return (
-
+
Pods
this.getTableRow(pod.getId()))
)}
- className="box grow"
+ className={styles.table}
>
- Name
-
- Node
- Namespace
- Ready
- CPU
- Memory
- Status
+ Name
+
+ Node
+ Namespace
+ Ready
+ CPU
+ Memory
+ Status