cleanup Lens repo with tighter linting

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

dashboard/client/components/+storage-volume-claims/index.ts

@@ -1,4 +1,4 @@
-export * from "./volume-claims.route"
-export * from "./volume-claims"
-export * from "./volume-claim-details"
+export * from "./volume-claims.route";
+export * from "./volume-claims";
+export * from "./volume-claim-details";
 

dashboard/client/components/+storage-volume-claims/volume-claim-details.tsx

@@ -1,4 +1,4 @@
-import "./volume-claim-details.scss"
+import "./volume-claim-details.scss";
 
 import React, { Fragment } from "react";
 import { reaction } from "mobx";
@@ -29,11 +29,11 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
     volumeClaimStore.reset();
   });
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     volumeClaimStore.reset();
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: volumeClaim } = this.props;
     if (!volumeClaim) {
       return null;
@@ -42,12 +42,12 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
     const { metrics } = volumeClaimStore;
     const pods = volumeClaim.getPods(podsStore.items);
     const metricTabs = [
-      <Trans>Disk</Trans>
+      <Trans key="disk">Disk</Trans>
     ];
     return (
       <div className="PersistentVolumeClaimDetails">
         <ResourceMetrics
-          loader={() => volumeClaimStore.loadMetrics(volumeClaim)}
+          loader={(): Promise<void> => volumeClaimStore.loadMetrics(volumeClaim)}
           tabs={metricTabs} object={volumeClaim} params={{ metrics }}
         >
           <VolumeClaimDiskChart/>
@@ -97,4 +97,4 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
 
 apiManager.registerViews(pvcApi, {
   Details: PersistentVolumeClaimDetails,
-})
+});

dashboard/client/components/+storage-volume-claims/volume-claim-disk-chart.tsx

@@ -1,23 +1,27 @@
 import React, { useContext } from "react";
 import { observer } from "mobx-react";
 import { t } from "@lingui/macro";
-import { IPvcMetrics, PersistentVolumeClaim } from "../../api/endpoints";
+import { PvcMetrics, PersistentVolumeClaim } from "../../api/endpoints";
 import { BarChart, ChartDataSet, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
-import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
+import { ResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
 import { _i18n } from "../../i18n";
 import { themeStore } from "../../theme.store";
 
-type IContext = IResourceMetricsValue<PersistentVolumeClaim, { metrics: IPvcMetrics }>;
+type IContext = ResourceMetricsValue<PersistentVolumeClaim, { metrics: PvcMetrics }>;
 
 export const VolumeClaimDiskChart = observer(() => {
   const { params: { metrics }, object } = useContext<IContext>(ResourceMetricsContext);
   const { chartCapacityColor } = themeStore.activeTheme.colors;
   const id = object.getId();
 
-  if (!metrics) return null;
-  if (isMetricsEmpty(metrics)) return <NoMetrics/>;
+  if (!metrics) {
+    return null;
+  }
+  if (isMetricsEmpty(metrics)) {
+    return <NoMetrics/>;
+  }
 
   const { diskUsage, diskCapacity } = metrics;
   const usage = normalizeMetrics(diskUsage).data.result[0].values;
@@ -38,7 +42,7 @@ export const VolumeClaimDiskChart = observer(() => {
       borderColor: chartCapacityColor,
       data: capacity.map(([x, y]) => ({ x, y }))
     }
-  ]
+  ];
 
   return (
     <BarChart

dashboard/client/components/+storage-volume-claims/volume-claim.store.ts

@@ -1,20 +1,20 @@
 import { action, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
-import { IPvcMetrics, PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
+import { PvcMetrics, PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
 
 @autobind()
 export class VolumeClaimStore extends KubeObjectStore<PersistentVolumeClaim> {
   api = pvcApi
-  @observable metrics: IPvcMetrics = null;
+  @observable metrics: PvcMetrics = null;
 
   @action
-  async loadMetrics(pvc: PersistentVolumeClaim) {
+  async loadMetrics(pvc: PersistentVolumeClaim): Promise<void> {
     this.metrics = await pvcApi.getMetrics(pvc.getName(), pvc.getNs());
   }
 
-  reset() {
+  reset(): void {
     this.metrics = null;
   }
 }

dashboard/client/components/+storage-volume-claims/volume-claims.route.ts

@@ -1,11 +1,11 @@
-import { RouteProps } from "react-router"
+import { RouteProps } from "react-router";
 import { buildURL } from "../../navigation";
 
 export const volumeClaimsRoute: RouteProps = {
   path: "/persistent-volume-claims"
+};
+
+export interface VolumeClaimsRouteParams {
 }
 
-export interface IVolumeClaimsRouteParams {
-}
-
-export const volumeClaimsURL = buildURL<IVolumeClaimsRouteParams>(volumeClaimsRoute.path)
+export const volumeClaimsURL = buildURL<VolumeClaimsRouteParams>(volumeClaimsRoute.path);

dashboard/client/components/+storage-volume-claims/volume-claims.tsx

@@ -1,4 +1,4 @@
-import "./volume-claims.scss"
+import "./volume-claims.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
@@ -9,7 +9,7 @@ import { PersistentVolumeClaim, pvcApi } from "../../api/endpoints/persistent-vo
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectListLayout } from "../kube-object";
-import { IVolumeClaimsRouteParams } from "./volume-claims.route";
+import { VolumeClaimsRouteParams } from "./volume-claims.route";
 import { unitsToBytes } from "../../utils/convertMemory";
 import { stopPropagation } from "../../utils";
 import { getDetailsUrl } from "../../navigation";
@@ -26,29 +26,29 @@ enum sortBy {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IVolumeClaimsRouteParams> {
+interface Props extends RouteComponentProps<VolumeClaimsRouteParams> {
 }
 
 @observer
 export class PersistentVolumeClaims extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="PersistentVolumeClaims"
         store={volumeClaimStore}
         dependentStores={[podsStore]}
         sortingCallbacks={{
-          [sortBy.name]: (pvc: PersistentVolumeClaim) => pvc.getName(),
-          [sortBy.namespace]: (pvc: PersistentVolumeClaim) => pvc.getNs(),
-          [sortBy.pods]: (pvc: PersistentVolumeClaim) => pvc.getPods(podsStore.items).map(pod => pod.getName()),
-          [sortBy.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(),
-          [sortBy.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()),
-          [sortBy.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName,
-          [sortBy.age]: (pvc: PersistentVolumeClaim) => pvc.metadata.creationTimestamp,
+          [sortBy.name]: (pvc: PersistentVolumeClaim): string => pvc.getName(),
+          [sortBy.namespace]: (pvc: PersistentVolumeClaim): string => pvc.getNs(),
+          [sortBy.pods]: (pvc: PersistentVolumeClaim): string[] => pvc.getPods(podsStore.items).map(pod => pod.getName()),
+          [sortBy.status]: (pvc: PersistentVolumeClaim): string => pvc.getStatus(),
+          [sortBy.size]: (pvc: PersistentVolumeClaim): number => unitsToBytes(pvc.getStorage()),
+          [sortBy.storageClass]: (pvc: PersistentVolumeClaim): string => pvc.spec.storageClassName,
+          [sortBy.age]: (pvc: PersistentVolumeClaim): string => pvc.metadata.creationTimestamp,
         }}
         searchFilters={[
-          (item: PersistentVolumeClaim) => item.getSearchFields(),
-          (item: PersistentVolumeClaim) => item.getPods(podsStore.items).map(pod => pod.getName()),
+          (item: PersistentVolumeClaim): string[] => item.getSearchFields(),
+          (item: PersistentVolumeClaim): string[] => item.getPods(podsStore.items).map(pod => pod.getName()),
         ]}
         renderHeaderTitle={<Trans>Persistent Volume Claims</Trans>}
         renderTableHeader={[
@@ -60,7 +60,7 @@ export class PersistentVolumeClaims extends React.Component<Props> {
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
         ]}
-        renderTableContents={(pvc: PersistentVolumeClaim) => {
+        renderTableContents={(pvc: PersistentVolumeClaim): (string | number | JSX.Element | JSX.Element[] | React.ReactNode)[] => {
           const pods = pvc.getPods(podsStore.items);
           const { storageClassName } = pvc.spec;
           const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
@@ -69,7 +69,7 @@ export class PersistentVolumeClaims extends React.Component<Props> {
           return [
             pvc.getName(),
             pvc.getNs(),
-            <Link to={storageClassDetailsUrl} onClick={stopPropagation}>
+            <Link key="storageClass" to={storageClassDetailsUrl} onClick={stopPropagation}>
               {storageClassName}
             </Link>,
             pvc.getStorage(),
@@ -80,22 +80,22 @@ export class PersistentVolumeClaims extends React.Component<Props> {
             )),
             pvc.getAge(),
             { title: pvc.getStatus(), className: pvc.getStatus().toLowerCase() },
-          ]
+          ];
         }}
-        renderItemMenu={(item: PersistentVolumeClaim) => {
-          return <PersistentVolumeClaimMenu object={item}/>
+        renderItemMenu={(item: PersistentVolumeClaim): JSX.Element => {
+          return <PersistentVolumeClaimMenu object={item}/>;
         }}
       />
-    )
+    );
   }
 }
 
-export function PersistentVolumeClaimMenu(props: KubeObjectMenuProps<PersistentVolumeClaim>) {
+export function PersistentVolumeClaimMenu(props: KubeObjectMenuProps<PersistentVolumeClaim>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(pvcApi, {
   Menu: PersistentVolumeClaimMenu,
-})
+});