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

180
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>
@ -110,8 +110,12 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar"
> >
foobar foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -121,11 +125,15 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar"
> >
default default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -150,8 +158,12 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-failed"
> >
foobar-failed foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -161,11 +173,15 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-failed"
> >
kube-system kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -190,8 +206,12 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-pending"
> >
foobar-pending foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -201,11 +221,15 @@ exports[`<PodDetailsList /> when few pods passed renders table with pods 1`] = `
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-pending"
> >
default 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>
@ -340,8 +364,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-pending"
> >
foobar-pending foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -351,11 +379,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-pending"
> >
default default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -408,8 +440,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-failed"
> >
foobar-failed foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -419,11 +455,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-failed"
> >
kube-system kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -476,8 +516,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar"
> >
foobar foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -487,11 +531,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar"
> >
default 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>
@ -654,8 +702,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-pending"
> >
foobar-pending foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -665,11 +717,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-pending"
> >
default default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -722,8 +778,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-failed"
> >
foobar-failed foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -733,11 +793,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-failed"
> >
kube-system kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -790,8 +854,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar"
> >
foobar foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -801,11 +869,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar"
> >
default 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>
@ -968,8 +1040,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-failed"
> >
foobar-failed foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -979,11 +1055,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-failed"
> >
kube-system kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1036,8 +1116,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-pending"
> >
foobar-pending foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1047,11 +1131,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-pending"
> >
default default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1104,8 +1192,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar"
> >
foobar foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1115,11 +1207,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar"
> >
default 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>
@ -1282,8 +1378,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-pending"
> >
foobar-pending foobar-pending
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1293,11 +1393,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-pending"
> >
default default
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1350,8 +1454,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar-failed"
> >
foobar-failed foobar-failed
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1361,11 +1469,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar-failed"
> >
kube-system kube-system
</span>
</div> </div>
<div <div
class="TableCell ready" class="TableCell"
> >
0 / 0 0 / 0
</div> </div>
@ -1418,8 +1530,12 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
> >
<div <div
class="TableCell name" class="TableCell name"
>
<span
id="pod-list-pod-item-foobar"
> >
foobar foobar
</span>
</div> </div>
<div <div
class="TableCell warning" class="TableCell warning"
@ -1429,11 +1545,15 @@ exports[`<PodDetailsList /> when few pods passed when metrics max values passed
/> />
<div <div
class="TableCell namespace" class="TableCell namespace"
>
<span
id="pod-list-pod-namespace-foobar"
> >
default 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>