cleanup Lens repo with tighter linting

Signed-off-by: Sebastian Malton <smalton@mirantis.com>

dashboard/client/components/+workloads-overview/overview-statuses.tsx

@@ -1,4 +1,4 @@
-import "./overview-statuses.scss"
+import "./overview-statuses.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -15,13 +15,11 @@ import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { PageFiltersList } from "../item-object-list/page-filters-list";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select";
-import { configStore } from "../../config.store";
 import { isAllowedResource } from "../../api/rbac";
 
 @observer
 export class OverviewStatuses extends React.Component {
-  render() {
-    const { allowedResources } = configStore;
+  render(): JSX.Element {
     const { contextNs } = namespaceStore;
     const pods = isAllowedResource("pods") ? podsStore.getAllByNs(contextNs) : [];
     const deployments = isAllowedResource("deployments") ? deploymentStore.getAllByNs(contextNs) : [];
@@ -75,6 +73,6 @@ export class OverviewStatuses extends React.Component {
           }
         </div>
       </div>
-    )
+    );
   }
 }

dashboard/client/components/+workloads-overview/overview-workload-status.tsx

@@ -20,18 +20,21 @@ interface Props {
 export class OverviewWorkloadStatus extends React.Component<Props> {
   @observable elem: HTMLElement
 
-  componentDidMount() {
-    this.elem = findDOMNode(this) as HTMLElement
+  componentDidMount(): void {
+    // eslint-disable-next-line react/no-find-dom-node
+    this.elem = findDOMNode(this) as HTMLElement;
   }
 
-  getStatusColor(status: string) {
+  getStatusColor(status: string): string {
     return cssVar(this.elem).get(`--workload-status-${status.toLowerCase()}`).toString();
   }
 
-  renderChart() {
-    if (!this.elem) return null
-    const { status } = this.props
-    const statuses = Object.entries(status)
+  renderChart(): JSX.Element {
+    if (!this.elem) {
+      return null;
+    }
+    const { status } = this.props;
+    const statuses = Object.entries(status);
     const chartData: Partial<ChartData> = {
       labels: [] as string[],
       datasets: [{
@@ -39,21 +42,21 @@ export class OverviewWorkloadStatus extends React.Component<Props> {
         backgroundColor: [themeStore.activeTheme.colors.pieChartDefaultColor],
         label: "Empty"
       }]
-    }
-    if (statuses.some(([key, val]) => val > 0)) {
+    };
+    if (statuses.some(([_key, val]) => val > 0)) {
       const dataset: any = {
         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)
+          dataset.data.push(val);
+          dataset.backgroundColor.push(this.getStatusColor(key));
+          chartData.labels.push(capitalize(key) + ": " + val);
         }
-      })
-      chartData.datasets[0] = dataset
+      });
+      chartData.datasets[0] = dataset;
     }
     const options = {
       elements: {
@@ -61,19 +64,19 @@ export class OverviewWorkloadStatus extends React.Component<Props> {
           borderWidth: 0,
         },
       },
-    }
+    };
     return (
       <PieChart data={chartData} options={options}/>
-    )
+    );
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <div className="OverviewWorkloadStatus">
         <div className="flex column align-center box grow">
           {this.renderChart()}
         </div>
       </div>
-    )
+    );
   }
 }

dashboard/client/components/+workloads-overview/overview.tsx

@@ -1,11 +1,11 @@
-import "./overview.scss"
+import "./overview.scss";
 
 import React from "react";
 import { observable, when } from "mobx";
 import { observer } from "mobx-react";
 import { OverviewStatuses } from "./overview-statuses";
 import { RouteComponentProps } from "react-router";
-import { IWorkloadsOverviewRouteParams } from "../+workloads";
+import { WorkloadsOverviewRouteParams } from "../+workloads";
 import { eventStore } from "../+events/event.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { deploymentStore } from "../+workloads-deployments/deployments.store";
@@ -17,9 +17,9 @@ import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
 import { Spinner } from "../spinner";
 import { Events } from "../+events";
 import { KubeObjectStore } from "../../kube-object.store";
-import { isAllowedResource } from "../../api/rbac"
+import { isAllowedResource } from "../../api/rbac";
 
-interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> {
+interface Props extends RouteComponentProps<WorkloadsOverviewRouteParams> {
 }
 
 @observer
@@ -27,7 +27,7 @@ export class WorkloadsOverview extends React.Component<Props> {
   @observable isReady = false;
   @observable isUnmounting = false;
 
-  async componentDidMount() {
+  async componentDidMount(): Promise<void> {
     const stores: KubeObjectStore[] = [];
     if (isAllowedResource("pods")) {
       stores.push(podsStore);
@@ -61,13 +61,13 @@ export class WorkloadsOverview extends React.Component<Props> {
     unsubscribeList.forEach(dispose => dispose());
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.isUnmounting = true;
   }
 
-  renderContents() {
+  renderContents(): JSX.Element {
     if (!this.isReady) {
-      return <Spinner center/>
+      return <Spinner center/>;
     }
     return (
       <>
@@ -78,14 +78,14 @@ export class WorkloadsOverview extends React.Component<Props> {
           className="box grow"
         /> }
       </>
-    )
+    );
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <div className="WorkloadsOverview flex column gaps">
         {this.renderContents()}
       </div>
-    )
+    );
   }
 }