Migrating Vue components to React and stores refactoring (#585)

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/chart/bar-chart.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import merge from "lodash/merge";
 import moment from "moment";
 import Color from "color";
+import { observer } from "mobx-react";
 import { ChartData, ChartOptions, ChartPoint, Scriptable } from "chart.js";
 import { Chart, ChartKind, ChartProps } from "./chart";
 import { bytesToUnits, cssNames } from "../../utils";
@@ -19,139 +20,136 @@ const defaultProps: Partial<Props> = {
   plugins: [ZebraStripes]
 };
 
-BarChart.defaultProps = defaultProps;
+@observer
+export class BarChart extends React.Component<Props> {
+  static defaultProps = defaultProps as object;
 
-export function BarChart(props: Props) {
-  const { name, data, className, timeLabelStep, plugins, options: customOptions, ...settings } = props;
-  const { textColorPrimary, borderFaintColor, chartStripesColor } = themeStore.activeTheme.colors;
+  render() {
+    const { name, data, className, timeLabelStep, plugins, options: customOptions, ...settings } = this.props;
+    const { textColorPrimary, borderFaintColor, chartStripesColor } = themeStore.activeTheme.colors;
 
-  const savedName = useRef<string>();
+    const getBarColor: Scriptable<string> = ({ dataset }) => {
+      const color = dataset.borderColor;
+      return Color(color).alpha(0.2).string();
+    }
 
-  useEffect(() => {
-    savedName.current = props.name;
-  });
-
-  const getBarColor: Scriptable<string> = ({ dataset }) => {
-    const color = dataset.borderColor;
-    return Color(color).alpha(0.2).string();
-  }
-
-  // Remove empty sets and insert default data
-  const chartData: ChartData = {
-    ...data,
-    datasets: data.datasets
-      .filter(set => set.data.length)
-      .map(item => {
-        return {
-          type: ChartKind.BAR,
-          borderWidth: { top: 3 },
-          barPercentage: 1,
-          categoryPercentage: 1,
-          ...item
-        }
-      })
-  };
-
-  const formatTimeLabels = (timestamp: string, index: number) => {
-    const label = moment(parseInt(timestamp)).format("HH:mm");
-    const offset = "     ";
-    if (index == 0) return offset + label;
-    if (index == 60) return label + offset;
-    return index % timeLabelStep == 0 ? label : "";
-  };
-
-  const barOptions: ChartOptions = {
-    maintainAspectRatio: false,
-    responsive: true,
-    scales: {
-      xAxes: [{
-        type: "time",
-        offset: true,
-        gridLines: {
-          display: false,
-        },
-        stacked: true,
-        ticks: {
-          callback: formatTimeLabels,
-          autoSkip: false,
-          source: "data",
-          backdropColor: "white",
-          fontColor: textColorPrimary,
-          fontSize: 11,
-          maxRotation: 0,
-          minRotation: 0
-        },
-        bounds: "data",
-        time: {
-          unit: "minute",
-          displayFormats: {
-            minute: "x"
-          },
-          parser: timestamp => moment.unix(parseInt(timestamp))
-        }
-      }],
-      yAxes: [{
-        position: "right",
-        gridLines: {
-          color: borderFaintColor,
-          drawBorder: false,
-          tickMarkLength: 0,
-          zeroLineWidth: 0
-        },
-        ticks: {
-          maxTicksLimit: 6,
-          fontColor: textColorPrimary,
-          fontSize: 11,
-          padding: 8,
-          min: 0
-        }
-      }]
-    },
-    tooltips: {
-      mode: "index",
-      position: "cursor",
-      callbacks: {
-        title: tooltipItems => {
-          const now = new Date().getTime()
-          if (new Date(tooltipItems[0].xLabel).getTime() > now) return "";
-          return `${tooltipItems[0].xLabel}`
-        },
-        labelColor: ({ datasetIndex }) => {
+    // Remove empty sets and insert default data
+    const chartData: ChartData = {
+      ...data,
+      datasets: data.datasets
+        .filter(set => set.data.length)
+        .map(item => {
           return {
-            borderColor: "darkgray",
-            backgroundColor: chartData.datasets[datasetIndex].borderColor as string
+            type: ChartKind.BAR,
+            borderWidth: { top: 3 },
+            barPercentage: 1,
+            categoryPercentage: 1,
+            ...item
+          }
+        })
+    };
+
+    const formatTimeLabels = (timestamp: string, index: number) => {
+      const label = moment(parseInt(timestamp)).format("HH:mm");
+      const offset = "     ";
+      if (index == 0) return offset + label;
+      if (index == 60) return label + offset;
+      return index % timeLabelStep == 0 ? label : "";
+    };
+
+    const barOptions: ChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      scales: {
+        xAxes: [{
+          type: "time",
+          offset: true,
+          gridLines: {
+            display: false,
+          },
+          stacked: true,
+          ticks: {
+            callback: formatTimeLabels,
+            autoSkip: false,
+            source: "data",
+            backdropColor: "white",
+            fontColor: textColorPrimary,
+            fontSize: 11,
+            maxRotation: 0,
+            minRotation: 0
+          },
+          bounds: "data",
+          time: {
+            unit: "minute",
+            displayFormats: {
+              minute: "x"
+            },
+            parser: timestamp => moment.unix(parseInt(timestamp))
+          }
+        }],
+        yAxes: [{
+          position: "right",
+          gridLines: {
+            color: borderFaintColor,
+            drawBorder: false,
+            tickMarkLength: 0,
+            zeroLineWidth: 0
+          },
+          ticks: {
+            maxTicksLimit: 6,
+            fontColor: textColorPrimary,
+            fontSize: 11,
+            padding: 8,
+            min: 0
+          }
+        }]
+      },
+      tooltips: {
+        mode: "index",
+        position: "cursor",
+        callbacks: {
+          title: tooltipItems => {
+            const now = new Date().getTime()
+            if (new Date(tooltipItems[0].xLabel).getTime() > now) return "";
+            return `${tooltipItems[0].xLabel}`
+          },
+          labelColor: ({ datasetIndex }) => {
+            return {
+              borderColor: "darkgray",
+              backgroundColor: chartData.datasets[datasetIndex].borderColor as string
+            }
           }
         }
+      },
+      animation: {
+        duration: 0
+      },
+      elements: {
+        rectangle: {
+          backgroundColor: getBarColor.bind(null)
+        }
+      },
+      plugins: {
+        ZebraStripes: {
+          stripeColor: chartStripesColor
+        }
       }
-    },
-    animation: {
-      duration: 0
-    },
-    elements: {
-      rectangle: {
-        backgroundColor: getBarColor.bind(null)
-      }
-    },
-    plugins: {
-      ZebraStripes: {
-        stripeColor: chartStripesColor
-      }
+    };
+    const options = merge(barOptions, customOptions);
+    if (chartData.datasets.length == 0) {
+      return <NoMetrics/>
     }
-  };
-  const options = merge(barOptions, customOptions);
-  if (chartData.datasets.length == 0) {
-    return <NoMetrics/>
+    return (
+      <Chart
+        className={cssNames("BarChart flex box grow column", className)}
+        type={ChartKind.BAR}
+        data={chartData}
+        options={options}
+        plugins={plugins}
+        {...settings}
+      />
+    )
   }
-  return (
-    <Chart
-      className={cssNames("BarChart flex box grow column", className)}
-      type={ChartKind.BAR}
-      data={chartData}
-      options={options}
-      plugins={plugins}
-      {...settings}
-    />
-  )
 }
 
 // Default options for all charts containing memory units (network, disk, memory, etc)

src/renderer/components/chart/pie-chart.tsx

@@ -1,5 +1,6 @@
 import "./pie-chart.scss";
 import React from "react";
+import { observer } from "mobx-react";
 import ChartJS, { ChartOptions } from "chart.js";
 import { Chart, ChartProps } from "./chart";
 import { cssNames } from "../../utils";
@@ -8,6 +9,7 @@ import { themeStore } from "../../theme.store";
 interface Props extends ChartProps {
 }
 
+@observer
 export class PieChart extends React.Component<Props> {
   render() {
     const { data, className, options, ...chartProps } = this.props