Convert ClusterOverview styles to css modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -19,62 +19,51 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.ClusterIssues {
+ .ClusterIssues {
   min-height: 350px;
   position: relative;
   grid-area: issues;
+  padding: calc(var(--margin) * 2) 0;
+  background: var(--contentColor);
 
-  &.OnlyClusterIssues {
+  &:global(.OnlyClusterIssues) {
     grid-row: row1-start / row2-end;
   }
 
   @media (max-width: 1150px) {
     grid-area: unset;
 
-    &.OnlyClusterIssues {
+    &: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;
     }
   }

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 style={{ color: "white" }} 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

@@ -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 {
-    .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,13 +20,11 @@
  */
 
 .ClusterOverview {
-  $gridGap: $margin * 2;
-
   position: relative;
   height: 100%;
   min-height: 650px;
   display: grid;
-  grid-gap: $gridGap;
+  grid-gap: calc(var(--margin) * 2);
   grid-template-areas:
     "barcharts piechars"
     "issues issues";
@@ -40,13 +38,4 @@
     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}>
           {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;
-  .metric-switch {
+  text-align: center;
-    text-align: right;
+  padding: calc(var(--padding) * 2) 0;
-  }
+}
+
+.chart {
+  --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>
   );