Cleanup OverviewWorkloadStatus, remove findDOMNode (#4392)

src/renderer/components/+workloads-overview/overview-workload-status.tsx

@@ -23,87 +23,73 @@ import "./overview-workload-status.scss";
 
 import React from "react";
 import capitalize from "lodash/capitalize";
-import { findDOMNode } from "react-dom";
-import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { PieChart } from "../chart";
 import { cssVar } from "../../utils";
-import type { ChartData, ChartDataSets } from "chart.js";
+import type { ChartData } from "chart.js";
 import { ThemeStore } from "../../theme.store";
 
-interface SimpleChartDataSets extends ChartDataSets {
-  backgroundColor?: string[];
-}
-
 interface Props {
-  status: {
-    [key: string]: number;
-  };
+  status: Record<string, number>;
 }
 
 @observer
 export class OverviewWorkloadStatus extends React.Component<Props> {
-  @observable elem: HTMLElement;
-
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
-  componentDidMount() {
-    // eslint-disable-next-line react/no-find-dom-node
-    this.elem = findDOMNode(this) as HTMLElement;
-  }
-
-  getStatusColor(status: string) {
-    return cssVar(this.elem).get(`--workload-status-${status.toLowerCase()}`).toString();
-  }
+  elem?: HTMLElement;
 
   renderChart() {
-    if (!this.elem) return null;
-    const { status } = this.props;
-    const statuses = Object.entries(status);
-    const chartData: Partial<ChartData> = {
-      labels: [] as string[],
-      datasets: [{
+    if (!this.elem) {
+      return null;
+    }
+
+    const cssVars = cssVar(this.elem);
+    const chartData: Required<ChartData> = {
+      labels: [],
+      datasets: [],
+    };
+
+    const statuses = Object.entries(this.props.status).filter(([, val]) => val > 0);
+
+    if (statuses.length === 0) {
+      chartData.datasets.push({
         data: [1],
         backgroundColor: [ThemeStore.getInstance().activeTheme.colors.pieChartDefaultColor],
         label: "Empty",
-      }],
-    };
-
-    if (statuses.some(([, val]) => val > 0)) {
-      const dataset: SimpleChartDataSets = {
-        data: [],
-        backgroundColor: [],
-        label: "Status",
-      };
-
-      statuses.forEach(([key, val]) => {
-        if (val !== 0) {
-          dataset.data.push(val);
-          dataset.backgroundColor.push(this.getStatusColor(key));
-          chartData.labels.push(`${capitalize(key)}: ${val}`);
-        }
       });
-      chartData.datasets[0] = dataset;
+    } else {
+      const data: number[] = [];
+      const backgroundColor: string[] = [];
+
+      for (const [status, value] of statuses) {
+        data.push(value);
+        backgroundColor.push(cssVars.get(`--workload-status-${status.toLowerCase()}`).toString());
+        chartData.labels.push(`${capitalize(status)}: ${value}`);
+      }
+
+      chartData.datasets.push({
+        data,
+        backgroundColor,
+        label: "Status",
+      });
     }
-    const options = {
-      elements: {
-        arc: {
-          borderWidth: 0,
-        },
-      },
-    };
 
     return (
-      <PieChart data={chartData} options={options}/>
+      <PieChart
+        data={chartData}
+        options={{
+          elements: {
+            arc: {
+              borderWidth: 0,
+            },
+          },
+        }}
+      />
     );
   }
 
   render() {
     return (
-      <div className="OverviewWorkloadStatus">
+      <div className="OverviewWorkloadStatus" ref={e => this.elem = e}>
         <div className="flex column align-center box grow">
           {this.renderChart()}
         </div>