Cluster overview css fixes (#4104)

integration/__tests__/cluster-pages.tests.ts

@@ -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"
   }
 },

src/renderer/components/+cluster/cluster-issues.module.css

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

src/renderer/components/+cluster/cluster-issues.tsx

@@ -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 className={cssNames(styles.noIssues, "flex column box grow gaps align-center justify-center")}>
-          <div><Icon material="check" big sticker/></div>
+          <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>
     );

src/renderer/components/+cluster/cluster-metric-switchers.tsx

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

src/renderer/components/+cluster/cluster-metrics.module.css

@@ -22,9 +22,11 @@
  .ClusterMetrics {
   position: relative;
   min-height: 280px;
+  padding: calc(var(--margin) * 2);
+  background: var(--contentColor);
 
-  .Chart {
+  .chart {
-    .chart-container {
+    :global(.chart-container) {
       width: 100%;
       height: 100%;
     }

src/renderer/components/+cluster/cluster-metrics.tsx

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

src/renderer/components/+cluster/cluster-overview.module.css

@@ -20,28 +20,22 @@
  */
 
 .ClusterOverview {
-  $gridGap: $margin * 2;
-
   position: relative;
   height: 100%;
   min-height: 650px;
   display: grid;
-  grid-gap: $gridGap;
+  grid-gap: calc(var(--margin) * 2);
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  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") {
+  @media (max-width: 1150px) {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(500px, 1fr);
-  }
+    grid-template-rows: 1fr;
-
+    grid-template-areas: none;
-  > *:not(.Spinner) {
-    padding: $gridGap;
-    background: $contentColor;
-
-    > .SubHeader {
-      padding-top: 0;
-    }
   }
 }

src/renderer/components/+cluster/cluster-overview.tsx

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

src/renderer/components/+cluster/cluster-pie-charts.module.css

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

src/renderer/components/+cluster/cluster-pie-charts.scss

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

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -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="flex justify-center box grow gaps">
-        <div className="chart flex column align-center box grow">
+        <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>
   );