cleanup Lens repo with tighter linting

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

dashboard/client/components/+workloads-statefulsets/index.ts

@@ -1,2 +1,2 @@
-export * from "./statefulsets"
-export * from "./statefulset-details"
+export * from "./statefulsets";
+export * from "./statefulset-details";

dashboard/client/components/+workloads-statefulsets/statefulset-details.tsx

@@ -13,7 +13,7 @@ import { KubeEventDetails } from "../+events/kube-event-details";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { statefulSetStore } from "./statefulset.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { StatefulSet, statefulSetApi } from "../../api/endpoints";
+import { StatefulSet, statefulSetApi, PodMetricsData } from "../../api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
@@ -30,29 +30,31 @@ export class StatefulSetDetails extends React.Component<Props> {
     statefulSetStore.reset();
   });
 
-  componentDidMount() {
+  async componentDidMount(): Promise<void> {
     if (!podsStore.isLoaded) {
-      podsStore.loadAll();
+      return podsStore.loadAll();
     }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     statefulSetStore.reset();
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: statefulSet } = this.props;
-    if (!statefulSet) return null
-    const images = statefulSet.getImages()
-    const selectors = statefulSet.getSelectors()
-    const nodeSelector = statefulSet.getNodeSelectors()
-    const childPods = statefulSetStore.getChildPods(statefulSet)
-    const metrics = statefulSetStore.metrics
+    if (!statefulSet) {
+      return null;
+    }
+    const images = statefulSet.getImages();
+    const selectors = statefulSet.getSelectors();
+    const nodeSelector = statefulSet.getNodeSelectors();
+    const childPods = statefulSetStore.getChildPods(statefulSet);
+    const metrics = statefulSetStore.metrics;
     return (
       <div className="StatefulSetDetails">
         {podsStore.isLoaded && (
           <ResourceMetrics
-            loader={() => statefulSetStore.loadMetrics(statefulSet)}
+            loader={(): Promise<PodMetricsData> => statefulSetStore.loadMetrics(statefulSet)}
             tabs={podMetricTabs} object={statefulSet} params={{ metrics }}
           >
             <PodCharts/>
@@ -91,10 +93,10 @@ export class StatefulSetDetails extends React.Component<Props> {
         <PodDetailsList pods={childPods} owner={statefulSet}/>
         <KubeEventDetails object={statefulSet}/>
       </div>
-    )
+    );
   }
 }
 
 apiManager.registerViews(statefulSetApi, {
   Details: StatefulSetDetails
-})
+});

dashboard/client/components/+workloads-statefulsets/statefulset.store.ts

@@ -1,44 +1,42 @@
 import { observable } from "mobx";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
-import { IPodMetrics, podsApi, PodStatus, StatefulSet, statefulSetApi } from "../../api/endpoints";
+import { PodMetricsData, podsApi, PodStatus, StatefulSet, statefulSetApi, Pod } from "../../api/endpoints";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
+import { Dictionary } from "lodash";
 
 @autobind()
 export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
   api = statefulSetApi
-  @observable metrics: IPodMetrics = null;
+  @observable metrics: PodMetricsData = null;
 
-  loadMetrics(statefulSet: StatefulSet) {
+  async loadMetrics(statefulSet: StatefulSet): Promise<PodMetricsData> {
     const pods = this.getChildPods(statefulSet);
-    return podsApi.getMetrics(pods, statefulSet.getNs(), "").then(metrics =>
-      this.metrics = metrics
-    );
+    const metrics = await podsApi.getMetrics(pods, statefulSet.getNs(), "");
+    return this.metrics = metrics;
   }
 
-  getChildPods(statefulSet: StatefulSet) {
-    return podsStore.getPodsByOwner(statefulSet)
+  getChildPods(statefulSet: StatefulSet): Pod[] {
+    return podsStore.getPodsByOwner(statefulSet);
   }
 
-  getStatuses(statefulSets: StatefulSet[]) {
-    const status = { failed: 0, pending: 0, running: 0 }
+  getStatuses(statefulSets: StatefulSet[]): Dictionary<number> {
+    const status = { failed: 0, pending: 0, running: 0 };
     statefulSets.forEach(statefulSet => {
-      const pods = this.getChildPods(statefulSet)
+      const pods = this.getChildPods(statefulSet);
       if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
-        status.failed++
+        status.failed++;
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+        status.pending++;
+      } else {
+        status.running++;
       }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
-        status.pending++
-      }
-      else {
-        status.running++
-      }
-    })
-    return status
+    });
+    return status;
   }
 
-  reset() {
+  reset(): void {
     this.metrics = null;
   }
 }

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

@@ -11,7 +11,7 @@ import { nodesStore } from "../+nodes/nodes.store";
 import { eventStore } from "../+events/event.store";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { KubeObjectListLayout } from "../kube-object";
-import { IStatefulSetsRouteParams } from "../+workloads";
+import { StatefulSetsRouteParams } from "../+workloads";
 import { KubeEventIcon } from "../+events/kube-event-icon";
 import { apiManager } from "../../api/api-manager";
 
@@ -22,28 +22,24 @@ enum sortBy {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IStatefulSetsRouteParams> {
+interface Props extends RouteComponentProps<StatefulSetsRouteParams> {
 }
 
 @observer
 export class StatefulSets extends React.Component<Props> {
-  getPodsLength(statefulSet: StatefulSet) {
-    return statefulSetStore.getChildPods(statefulSet).length;
-  }
-
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="StatefulSets" store={statefulSetStore}
         dependentStores={[podsStore, nodesStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (statefulSet: StatefulSet) => statefulSet.getName(),
-          [sortBy.namespace]: (statefulSet: StatefulSet) => statefulSet.getNs(),
-          [sortBy.age]: (statefulSet: StatefulSet) => statefulSet.metadata.creationTimestamp,
-          [sortBy.pods]: (statefulSet: StatefulSet) => this.getPodsLength(statefulSet),
+          [sortBy.name]: (statefulSet: StatefulSet): string => statefulSet.getName(),
+          [sortBy.namespace]: (statefulSet: StatefulSet): string => statefulSet.getNs(),
+          [sortBy.age]: (statefulSet: StatefulSet): string => statefulSet.metadata.creationTimestamp,
+          [sortBy.pods]: (statefulSet: StatefulSet): number => statefulSetStore.getChildPods(statefulSet).length,
         }}
         searchFilters={[
-          (statefulSet: StatefulSet) => statefulSet.getSearchFields(),
+          (statefulSet: StatefulSet): string[] => statefulSet.getSearchFields(),
         ]}
         renderHeaderTitle={<Trans>Stateful Sets</Trans>}
         renderTableHeader={[
@@ -53,27 +49,27 @@ export class StatefulSets extends React.Component<Props> {
           { className: "warning" },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(statefulSet: StatefulSet) => [
+        renderTableContents={(statefulSet: StatefulSet): (string | number | JSX.Element)[] => [
           statefulSet.getName(),
           statefulSet.getNs(),
-          this.getPodsLength(statefulSet),
-          <KubeEventIcon object={statefulSet}/>,
+          statefulSetStore.getChildPods(statefulSet).length,
+          <KubeEventIcon key="statefulSet" object={statefulSet}/>,
           statefulSet.getAge(),
         ]}
-        renderItemMenu={(item: StatefulSet) => {
-          return <StatefulSetMenu object={item}/>
+        renderItemMenu={(item: StatefulSet): JSX.Element => {
+          return <StatefulSetMenu object={item}/>;
         }}
       />
-    )
+    );
   }
 }
 
-export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>) {
+export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(statefulSetApi, {
   Menu: StatefulSetMenu,
-})
+});