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`] = ` exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div> <div>
<div <div
class="PodDetailsList flex column" class="PodDetailsList"
> >
<div <div
class="DrawerTitle title" class="DrawerTitle title"
@ -11,7 +11,7 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
Pods Pods
</div> </div>
<div <div
class="Table flex column box grow selectable sortable autoSize" class="Table flex column table selectable sortable autoSize"
> >
<div <div
class="TableHead sticky" class="TableHead sticky"
@ -65,7 +65,7 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
</i> </i>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
Ready Ready
</div> </div>
@ -111,7 +111,11 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div <div
class="TableCell name" class="TableCell name"
> >
foobar <span
id="pod-list-pod-item-foobar"
>
foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -122,10 +126,14 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -151,7 +159,11 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-failed <span
id="pod-list-pod-item-foobar-failed"
>
foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -162,10 +174,14 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
kube-system <span
id="pod-list-pod-namespace-foobar-failed"
>
kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -191,7 +207,11 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-pending <span
id="pod-list-pod-item-foobar-pending"
>
foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -202,10 +222,14 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar-pending"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </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`] = ` exports[`<PodDetailsList /> when few pods passed when metrics max values passed renders table with metric lines 1`] = `
<div> <div>
<div <div
class="PodDetailsList flex column" class="PodDetailsList"
> >
<div <div
class="DrawerTitle title" class="DrawerTitle title"
@ -241,7 +265,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
Pods Pods
</div> </div>
<div <div
class="Table flex column box grow selectable sortable autoSize" class="Table flex column table selectable sortable autoSize"
> >
<div <div
class="TableHead sticky" class="TableHead sticky"
@ -295,7 +319,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
</i> </i>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
Ready Ready
</div> </div>
@ -341,7 +365,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-pending <span
id="pod-list-pod-item-foobar-pending"
>
foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -352,10 +380,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar-pending"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -409,7 +441,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-failed <span
id="pod-list-pod-item-foobar-failed"
>
foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -420,10 +456,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
kube-system <span
id="pod-list-pod-namespace-foobar-failed"
>
kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -477,7 +517,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar <span
id="pod-list-pod-item-foobar"
>
foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -488,10 +532,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </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`] = ` exports[`<PodDetailsList /> when few pods passed when metrics max values passed sorts table by cpu 1`] = `
<div> <div>
<div <div
class="PodDetailsList flex column" class="PodDetailsList"
> >
<div <div
class="DrawerTitle title" class="DrawerTitle title"
@ -555,7 +603,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
Pods Pods
</div> </div>
<div <div
class="Table flex column box grow selectable sortable autoSize" class="Table flex column table selectable sortable autoSize"
> >
<div <div
class="TableHead sticky" class="TableHead sticky"
@ -609,7 +657,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
</i> </i>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
Ready Ready
</div> </div>
@ -655,7 +703,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-pending <span
id="pod-list-pod-item-foobar-pending"
>
foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -666,10 +718,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar-pending"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -723,7 +779,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-failed <span
id="pod-list-pod-item-foobar-failed"
>
foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -734,10 +794,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
kube-system <span
id="pod-list-pod-namespace-foobar-failed"
>
kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -791,7 +855,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar <span
id="pod-list-pod-item-foobar"
>
foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -802,10 +870,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </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`] = ` exports[`<PodDetailsList /> when few pods passed when metrics max values passed sorts table by memory 1`] = `
<div> <div>
<div <div
class="PodDetailsList flex column" class="PodDetailsList"
> >
<div <div
class="DrawerTitle title" class="DrawerTitle title"
@ -869,7 +941,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
Pods Pods
</div> </div>
<div <div
class="Table flex column box grow selectable sortable autoSize" class="Table flex column table selectable sortable autoSize"
> >
<div <div
class="TableHead sticky" class="TableHead sticky"
@ -923,7 +995,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
</i> </i>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
Ready Ready
</div> </div>
@ -969,7 +1041,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-failed <span
id="pod-list-pod-item-foobar-failed"
>
foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -980,10 +1056,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
kube-system <span
id="pod-list-pod-namespace-foobar-failed"
>
kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1037,7 +1117,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-pending <span
id="pod-list-pod-item-foobar-pending"
>
foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1048,10 +1132,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar-pending"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1105,7 +1193,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar <span
id="pod-list-pod-item-foobar"
>
foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1116,10 +1208,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </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`] = ` exports[`<PodDetailsList /> when few pods passed when metrics max values passed sorts table by name 1`] = `
<div> <div>
<div <div
class="PodDetailsList flex column" class="PodDetailsList"
> >
<div <div
class="DrawerTitle title" class="DrawerTitle title"
@ -1183,7 +1279,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
Pods Pods
</div> </div>
<div <div
class="Table flex column box grow selectable sortable autoSize" class="Table flex column table selectable sortable autoSize"
> >
<div <div
class="TableHead sticky" class="TableHead sticky"
@ -1237,7 +1333,7 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
</i> </i>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
Ready Ready
</div> </div>
@ -1283,7 +1379,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-pending <span
id="pod-list-pod-item-foobar-pending"
>
foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1294,10 +1394,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar-pending"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1351,7 +1455,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar-failed <span
id="pod-list-pod-item-foobar-failed"
>
foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1362,10 +1470,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
kube-system <span
id="pod-list-pod-namespace-foobar-failed"
>
kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1419,7 +1531,11 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell name" class="TableCell name"
> >
foobar <span
id="pod-list-pod-item-foobar"
>
foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1430,10 +1546,14 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
default <span
id="pod-list-pod-namespace-foobar"
>
default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </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. * 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 { withInjectables } from "@ogre-tools/injectable-react";
import kebabCase from "lodash/kebabCase"; import kebabCase from "lodash/kebabCase";
@ -21,6 +21,7 @@ import { Spinner } from "../spinner";
import { Table, TableCell, TableHead, TableRow } from "../table"; import { Table, TableCell, TableHead, TableRow } from "../table";
import type { PodStore } from "./store"; import type { PodStore } from "./store";
import podStoreInjectable from "./store.injectable"; import podStoreInjectable from "./store.injectable";
import { Tooltip, TooltipPosition } from "../tooltip";
enum sortBy { enum sortBy {
name = "name", name = "name",
@ -124,16 +125,32 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
nowrap nowrap
onClick={prevDefault(() => showDetails(pod.selfLink, false))} onClick={prevDefault(() => showDetails(pod.selfLink, false))}
> >
<TableCell className="name">{pod.getName()}</TableCell> <TableCell className={styles.name}>
<TableCell className="warning"><KubeObjectStatusIcon key="icon" object={pod}/></TableCell> <span id={`pod-list-pod-item-${pod.getId()}`}>{pod.getName()}</span>
<TableCell className="node">{pod.getNodeName()}</TableCell> <Tooltip
<TableCell className="namespace">{pod.getNs()}</TableCell> targetId={`pod-list-pod-item-${pod.getId()}`}
<TableCell className="ready"> 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}`} {`${pod.getRunningContainers().length} / ${pod.getContainers().length}`}
</TableCell> </TableCell>
<TableCell className="cpu">{this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}</TableCell> <TableCell className={styles.cpu}>{this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}</TableCell>
<TableCell className="memory">{this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}</TableCell> <TableCell className={styles.memory}>{this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}</TableCell>
<TableCell className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell> <TableCell className={cssNames(styles.status, kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell>
</TableRow> </TableRow>
); );
} }
@ -160,7 +177,7 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
const virtual = pods.length > 20; const virtual = pods.length > 20;
return ( return (
<div className="PodDetailsList flex column"> <div className={styles.PodDetailsList}>
<DrawerTitle>Pods</DrawerTitle> <DrawerTitle>Pods</DrawerTitle>
<Table <Table
tableId="workloads_pod_details_list" tableId="workloads_pod_details_list"
@ -185,17 +202,17 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
? undefined ? undefined
: (pod => this.getTableRow(pod.getId())) : (pod => this.getTableRow(pod.getId()))
)} )}
className="box grow" className={styles.table}
> >
<TableHead> <TableHead>
<TableCell className="name" sortBy={sortBy.name}>Name</TableCell> <TableCell className={styles.name} sortBy={sortBy.name}>Name</TableCell>
<TableCell className="warning"/> <TableCell className={styles.warning}/>
<TableCell className="node" sortBy={sortBy.node}>Node</TableCell> <TableCell className={styles.node} sortBy={sortBy.node}>Node</TableCell>
<TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell> <TableCell className={styles.namespace} sortBy={sortBy.namespace}>Namespace</TableCell>
<TableCell className="ready">Ready</TableCell> <TableCell>Ready</TableCell>
<TableCell className="cpu" sortBy={sortBy.cpu}>CPU</TableCell> <TableCell className={styles.cpu} sortBy={sortBy.cpu}>CPU</TableCell>
<TableCell className="memory" sortBy={sortBy.memory}>Memory</TableCell> <TableCell className={styles.memory} sortBy={sortBy.memory}>Memory</TableCell>
<TableCell className="status">Status</TableCell> <TableCell className={styles.status}>Status</TableCell>
</TableHead> </TableHead>
</Table> </Table>
</div> </div>