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/+workloads-pods/container-charts.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 import { t } from "@lingui/macro";
+import { observer } from "mobx-react";
 import { IPodMetrics } from "../../api/endpoints";
 import { BarChart, cpuOptions, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
@@ -10,7 +11,7 @@ import { themeStore } from "../../theme.store";
 
 type IContext = IResourceMetricsValue<any, { metrics: IPodMetrics }>;
 
-export const ContainerCharts = () => {
+export const ContainerCharts = observer(() => {
   const { params: { metrics }, tabId } = useContext<IContext>(ResourceMetricsContext);
   const { chartCapacityColor } = themeStore.activeTheme.colors;
 
@@ -100,4 +101,4 @@ export const ContainerCharts = () => {
       data={{ datasets: datasets[tabId] }}
     />
   );
-}
+})

src/renderer/components/+workloads-pods/pod-logs-dialog.tsx

@@ -226,7 +226,7 @@ export class PodLogsDialog extends React.Component<Props> {
             tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
           />
           <Icon
-            material="save_alt"
+            material="get_app"
             onClick={this.downloadLogs}
             tooltip={_i18n._(t`Save`)}
           />

src/renderer/components/+workloads-pods/pods.tsx

@@ -14,7 +14,6 @@ import { Pod, podsApi } from "../../api/endpoints";
 import { PodMenu } from "./pod-menu";
 import { StatusBrick } from "../status-brick";
 import { cssNames, stopPropagation } from "../../utils";
-import { TooltipContent } from "../tooltip";
 import { KubeEventIcon } from "../+events/kube-event-icon";
 import { getDetailsUrl } from "../../navigation";
 import toPairs from "lodash/toPairs";
@@ -42,26 +41,29 @@ export class Pods extends React.Component<Props> {
   renderContainersStatus(pod: Pod) {
     return pod.getContainerStatuses().map(containerStatus => {
       const { name, state, ready } = containerStatus;
-      const tooltip = (
-        <TooltipContent tableView>
-          {Object.keys(state).map(status => (
-            <Fragment key={status}>
-              <div className="title">
-                {name} <span className="text-secondary">({status}{ready ? ", ready" : ""})</span>
-              </div>
-              {toPairs(state[status]).map(([name, value]) => (
-                <div key={name} className="flex gaps align-center">
-                  <div className="name">{startCase(name)}</div>
-                  <div className="value">{value}</div>
-                </div>
-              ))}
-            </Fragment>
-          ))}
-        </TooltipContent>
-      );
       return (
         <Fragment key={name}>
-          <StatusBrick className={cssNames(state, { ready })} tooltip={tooltip}/>
+          <StatusBrick
+            className={cssNames(state, { ready })}
+            tooltip={{
+              formatters: {
+                tableView: true
+              },
+              children: Object.keys(state).map(status => (
+                <Fragment key={status}>
+                  <div className="title">
+                    {name} <span className="text-secondary">({status}{ready ? ", ready" : ""})</span>
+                  </div>
+                  {toPairs(state[status]).map(([name, value]) => (
+                    <div key={name} className="flex gaps align-center">
+                      <div className="name">{startCase(name)}</div>
+                      <div className="value">{value}</div>
+                    </div>
+                  ))}
+                </Fragment>
+              ))
+            }}
+          />
         </Fragment>
       )
     });