hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Convert styles to modules

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-12-15 14:02:19 +03:00
parent 28b84f4cf8
commit ef578b2854
3 changed files with 272 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
src/renderer/components/+workloads-pods/__tests__/__snapshots__/pod-details-list.test.tsx.snap
View File

@ -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>

56
src/renderer/components/+workloads-pods/pod-details-list.module.scss Normal file
View File

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

55
src/renderer/components/+workloads-pods/pod-details-list.tsx
View File

@ -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>