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

Cluster overview css fixes (#4104)

Browse Source
This commit is contained in:
Alex Andreev 2021-10-22 16:13:43 +03:00 committed by GitHub
parent 8fa2adf870
commit e643b37c7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 84 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
integration/__tests__/cluster-pages.tests.ts
View File

@ -74,7 +74,7 @@ const commonPageTests: CommonPageTest[] = [{
page: {
name: "Cluster",
href: "/overview",
expectedSelector: "div.ClusterOverview div.label",
expectedSelector: "div[data-testid='cluster-overview-page'] div.label",
expectedText: "CPU"
}
},

73
src/renderer/components/+cluster/cluster-issues.scss → src/renderer/components/+cluster/cluster-issues.module.css
View File

@ -19,61 +19,56 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.ClusterIssues {
.ClusterIssues {
min-height: 350px;
position: relative;
grid-column-start: 1;
grid-column-end: 3;
grid-area: issues;
padding: calc(var(--margin) * 2) 0;
background: var(--contentColor);
@include media("<1024px") {
grid-column-start: 1!important;
grid-column-end: 1!important;
&:global(.OnlyClusterIssues) {
grid-row: row1-start / row2-end;
}
@media (max-width: 1150px) {
grid-area: unset;
&:global(.OnlyClusterIssues) {
grid-row: auto;
}
}
.SubHeader {
.Icon {
padding-top: 0;
padding-bottom: 0;
:global(.Icon) {
font-size: 130%;
color: $colorError;
color: var(--colorError);
}
}
.Table {
.TableHead {
background-color: transparent;
border-bottom: 1px solid $borderFaintColor;
.TableCell {
padding-top: 0;
}
}
.TableCell {
white-space: nowrap;
text-overflow: ellipsis;
&.message {
flex-grow: 3;
}
&.object {
flex-grow: 2;
}
}
.message {
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 3;
}
.no-issues {
.Icon {
color: white;
}
.object {
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 2;
}
.noIssues {
.ok-title {
font-size: large;
color: $textColorAccent;
color: var(--textColorAccent);
font-weight: bold;
}
.allGood {
color: white;
}
}
}
.OnlyClusterIssues {
grid-row: row1-start / row2-end;
}

14
src/renderer/components/+cluster/cluster-issues.tsx
View File

@ -19,7 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./cluster-issues.scss";
import styles from "./cluster-issues.module.css";
import React from "react";
import { observer } from "mobx-react";
@ -121,10 +121,10 @@ export class ClusterIssues extends React.Component<Props> {
selected={selfLink === kubeSelectedUrlParam.get()}
onClick={prevDefault(() => toggleDetails(selfLink))}
>
<TableCell className="message">
<TableCell className={styles.message}>
{message}
</TableCell>
<TableCell className="object">
<TableCell className={styles.object}>
{getName()}
</TableCell>
<TableCell className="kind">
@ -148,8 +148,8 @@ export class ClusterIssues extends React.Component<Props> {
if (!warnings.length) {
return (
<div className="no-issues flex column box grow gaps align-center justify-center">
<div><Icon material="check" big sticker/></div>
<div className={cssNames(styles.noIssues, "flex column box grow gaps align-center justify-center")}>
<div><Icon className={styles.allGood} material="check" big sticker/></div>
<div className="ok-title">No issues found</div>
<span>Everything is fine in the Cluster</span>
</div>
@ -158,7 +158,7 @@ export class ClusterIssues extends React.Component<Props> {
return (
<>
<SubHeader>
<SubHeader className={styles.SubHeader}>
<Icon material="error_outline"/>{" "}
<>Warnings: {warnings.length}</>
</SubHeader>
@ -186,7 +186,7 @@ export class ClusterIssues extends React.Component<Props> {
render() {
return (
<div className={cssNames("ClusterIssues flex column", this.props.className)}>
<div className={cssNames(styles.ClusterIssues, "flex column", this.props.className)}>
{this.renderContent()}
</div>
);

6
src/renderer/components/+cluster/cluster-metric-switchers.tsx
View File

@ -19,8 +19,6 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./cluster-metric-switchers.scss";
import React from "react";
import { observer } from "mobx-react";
import { nodesStore } from "../+nodes/nodes.store";
@ -36,7 +34,7 @@ export const ClusterMetricSwitchers = observer(() => {
const disableMetrics = !metricsValues.length;
return (
<div className="ClusterMetricSwitchers flex gaps">
<div className="flex gaps" style={{ marginBottom: "calc(var(--margin) * 2)" }}>
<div className="box grow">
<RadioGroup
asButtons
@ -48,7 +46,7 @@ export const ClusterMetricSwitchers = observer(() => {
<Radio label="Worker" value={MetricNodeRole.WORKER}/>
</RadioGroup>
</div>
<div className="box grow metric-switch">
<div className="box grow" style={{ textAlign: "right" }}>
<RadioGroup
asButtons
className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}

8
src/renderer/components/+cluster/cluster-metrics.scss → src/renderer/components/+cluster/cluster-metrics.module.css
View File

@ -19,12 +19,14 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.ClusterMetrics {
.ClusterMetrics {
position: relative;
min-height: 280px;
padding: calc(var(--margin) * 2);
background: var(--contentColor);
.Chart {
.chart-container {
.chart {
:global(.chart-container) {
width: 100%;
height: 100%;
}

9
src/renderer/components/+cluster/cluster-metrics.tsx
View File

@ -19,14 +19,14 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./cluster-metrics.scss";
import styles from "./cluster-metrics.module.css";
import React from "react";
import { observer } from "mobx-react";
import type { ChartOptions, ChartPoint } from "chart.js";
import { clusterOverviewStore, MetricType } from "./cluster-overview.store";
import { BarChart } from "../chart";
import { bytesToUnits } from "../../utils";
import { bytesToUnits, cssNames } from "../../utils";
import { Spinner } from "../spinner";
import { ZebraStripes } from "../chart/zebra-stripes.plugin";
import { ClusterNoMetrics } from "./cluster-no-metrics";
@ -95,7 +95,7 @@ export const ClusterMetrics = observer(() => {
}
if (!memoryCapacity || !cpuCapacity) {
return <ClusterNoMetrics className="empty"/>;
return <ClusterNoMetrics className={styles.empty}/>;
}
return (
@ -106,12 +106,13 @@ export const ClusterMetrics = observer(() => {
timeLabelStep={5}
showLegend={false}
plugins={[ZebraStripes]}
className={styles.chart}
/>
);
};
return (
<div className="ClusterMetrics flex column">
<div className={cssNames(styles.ClusterMetrics, "flex column")}>
<ClusterMetricSwitchers/>
{renderMetrics()}
</div>

24
src/renderer/components/+cluster/cluster-overview.scss → src/renderer/components/+cluster/cluster-overview.module.css
View File

@ -20,28 +20,22 @@
*/
.ClusterOverview {
$gridGap: $margin * 2;
position: relative;
height: 100%;
min-height: 650px;
display: grid;
grid-gap: $gridGap;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
grid-gap: calc(var(--margin) * 2);
grid-template-areas:
"barcharts piechars"
"issues issues";
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows:
[row1-start] 1fr
[row2-start] 1fr;
@include media(">1600px") {
grid-template-columns: 1fr 1fr;
}
> *:not(.Spinner) {
padding: $gridGap;
background: $contentColor;
> .SubHeader {
padding-top: 0;
}
@media (max-width: 1150px) {
grid-template-columns: minmax(500px, 1fr);
grid-template-rows: 1fr;
grid-template-areas: none;
}
}

4
src/renderer/components/+cluster/cluster-overview.tsx
View File

@ -19,7 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./cluster-overview.scss";
import styles from "./cluster-overview.module.css";
import React from "react";
import { reaction } from "mobx";
@ -101,7 +101,7 @@ export class ClusterOverview extends React.Component {
return (
<TabLayout>
<div className="ClusterOverview">
<div className={styles.ClusterOverview} data-testid="cluster-overview-page">
{this.renderClusterOverview(isLoaded, isMetricHidden)}
</div>
</TabLayout>

17
src/renderer/components/+cluster/cluster-metric-switchers.scss → src/renderer/components/+cluster/cluster-pie-charts.module.css
View File

@ -19,10 +19,15 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.ClusterMetricSwitchers {
margin-bottom: $margin * 2;
.metric-switch {
text-align: right;
}
.empty {
background: var(--contentColor);
min-height: 280px;
text-align: center;
padding: calc(var(--padding) * 2) 0;
}
.chart {
--flex-gap: calc(var(--padding) * 2);
background: var(--contentColor);
padding: calc(var(--padding) * 2) var(--padding);
}

50
src/renderer/components/+cluster/cluster-pie-charts.scss
View File

@ -1,50 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.ClusterPieCharts {
background: transparent!important;
padding: 0!important;
.empty {
background: $contentColor;
min-height: 280px;
text-align: center;
padding: $padding * 2;
}
.NodeCharts {
margin-bottom: 0;
}
.chart {
--flex-gap: #{$padding * 2};
background: $contentColor;
padding: $padding * 2 $padding;
.chart-title {
margin-bottom: 0;
}
.legend {
--flex-gap: #{$padding};
}
}
}

18
src/renderer/components/+cluster/cluster-pie-charts.tsx
View File

@ -19,7 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./cluster-pie-charts.scss";
import styles from "./cluster-pie-charts.module.css";
import React from "react";
import { observer } from "mobx-react";
@ -29,7 +29,7 @@ import { Icon } from "../icon";
import { nodesStore } from "../+nodes/nodes.store";
import { ChartData, PieChart } from "../chart";
import { ClusterNoMetrics } from "./cluster-no-metrics";
import { bytesToUnits } from "../../utils";
import { bytesToUnits, cssNames } from "../../utils";
import { ThemeStore } from "../../theme.store";
import { getMetricLastPoints } from "../../../common/k8s-api/endpoints/metrics.api";
@ -173,8 +173,8 @@ export const ClusterPieCharts = observer(() => {
};
return (
<div className="NodeCharts flex justify-center box grow gaps">
<div className="chart flex column align-center box grow">
<div className="flex justify-center box grow gaps">
<div className={cssNames(styles.chart, "flex column align-center box grow")}>
<PieChart
data={cpuData}
title="CPU"
@ -188,7 +188,7 @@ export const ClusterPieCharts = observer(() => {
/>
{cpuLimitsOverload && renderLimitWarning()}
</div>
<div className="chart flex column align-center box grow">
<div className={cssNames(styles.chart, "flex column align-center box grow")}>
<PieChart
data={memoryData}
title="Memory"
@ -202,7 +202,7 @@ export const ClusterPieCharts = observer(() => {
/>
{memoryLimitsOverload && renderLimitWarning()}
</div>
<div className="chart flex column align-center box grow">
<div className={cssNames(styles.chart, "flex column align-center box grow")}>
<PieChart
data={podsData}
title="Pods"
@ -220,7 +220,7 @@ export const ClusterPieCharts = observer(() => {
if (!nodes.length) {
return (
<div className="empty flex column box grow align-center justify-center">
<div className={cssNames(styles.empty, "flex column box grow align-center justify-center")}>
<Icon material="info"/>
No Nodes Available.
</div>
@ -237,14 +237,14 @@ export const ClusterPieCharts = observer(() => {
const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterOverviewStore.metrics);
if (!memoryCapacity || !cpuCapacity || !podCapacity) {
return <ClusterNoMetrics className="empty"/>;
return <ClusterNoMetrics className={styles.empty}/>;
}
return renderCharts();
};
return (
<div className="ClusterPieCharts flex">
<div className="flex">
{renderContent()}
</div>
);