cleanup Lens repo with tighter linting

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

dashboard/client/components/+workloads-deployments/deployment-details.tsx

@@ -6,7 +6,7 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { t, Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
-import { Deployment, deploymentApi } from "../../api/endpoints";
+import { Deployment, deploymentApi, PodMetricsData } from "../../api/endpoints";
 import { cssNames } from "../../utils";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
@@ -23,6 +23,7 @@ import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { ReplicaSets } from "../+workloads-replicasets";
 import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { Metrics } from "client/api/endpoints/metrics.api";
 
 interface Props extends KubeObjectDetailsProps<Deployment> {
 }
@@ -34,33 +35,37 @@ export class DeploymentDetails extends React.Component<Props> {
     deploymentStore.reset();
   });
 
-  componentDidMount() {
+  async componentDidMount(): Promise<void> {
+    const promises = [];
     if (!podsStore.isLoaded) {
-      podsStore.loadAll();
+      promises.push(podsStore.loadAll());
     }
     if (!replicaSetStore.isLoaded) {
-      replicaSetStore.loadAll();
+      promises.push(replicaSetStore.loadAll());
     }
+    await Promise.all(promises);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     deploymentStore.reset();
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: deployment } = this.props;
-    if (!deployment) return null
-    const { status, spec } = deployment
-    const nodeSelector = deployment.getNodeSelectors()
+    if (!deployment) {
+      return null;
+    }
+    const { status, spec } = deployment;
+    const nodeSelector = deployment.getNodeSelectors();
     const selectors = deployment.getSelectors();
-    const childPods = deploymentStore.getChildPods(deployment)
-    const replicaSets = replicaSetStore.getReplicaSetsByOwner(deployment)
-    const metrics = deploymentStore.metrics
+    const childPods = deploymentStore.getChildPods(deployment);
+    const replicaSets = replicaSetStore.getReplicaSetsByOwner(deployment);
+    const metrics = deploymentStore.metrics;
     return (
       <div className="DeploymentDetails">
         {podsStore.isLoaded && (
           <ResourceMetrics
-            loader={() => deploymentStore.loadMetrics(deployment)}
+            loader={(): Promise<PodMetricsData<Metrics>> => deploymentStore.loadMetrics(deployment)}
             tabs={podMetricTabs} object={deployment} params={{ metrics }}
           >
             <PodCharts/>
@@ -94,7 +99,7 @@ export class DeploymentDetails extends React.Component<Props> {
         <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
           {
             deployment.getConditions().map(condition => {
-              const { type, message, lastTransitionTime, status } = condition
+              const { type, message, lastTransitionTime, status } = condition;
               return (
                 <Badge
                   key={type}
@@ -118,10 +123,10 @@ export class DeploymentDetails extends React.Component<Props> {
         <PodDetailsList pods={childPods} owner={deployment}/>
         <KubeEventDetails object={deployment}/>
       </div>
-    )
+    );
   }
 }
 
 apiManager.registerViews(deploymentApi, {
   Details: DeploymentDetails
-})
+});

dashboard/client/components/+workloads-deployments/deployment-scale-dialog.tsx

@@ -24,24 +24,24 @@ export class DeploymentScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
-  static open(deployment: Deployment) {
+  static open(deployment: Deployment): void {
     DeploymentScaleDialog.isOpen = true;
     DeploymentScaleDialog.data = deployment;
   }
 
-  static close() {
+  static close(): void {
     DeploymentScaleDialog.isOpen = false;
   }
 
-  get deployment() {
+  get deployment(): Deployment {
     return DeploymentScaleDialog.data;
   }
 
-  close = () => {
+  close = (): void => {
     DeploymentScaleDialog.close();
   }
 
-  @computed get scaleMax() {
+  @computed get scaleMax(): number {
     const { currentReplicas } = this;
     const defaultMax = 50;
     return currentReplicas <= defaultMax
@@ -49,7 +49,7 @@ export class DeploymentScaleDialog extends Component<Props> {
       : currentReplicas * 2;
   }
 
-  onOpen = async () => {
+  onOpen = async (): Promise<void> => {
     const { deployment } = this;
     this.currentReplicas = await deploymentApi.getReplicas({
       namespace: deployment.getNs(),
@@ -59,15 +59,15 @@ export class DeploymentScaleDialog extends Component<Props> {
     this.ready = true;
   }
 
-  onClose = () => {
+  onClose = (): void => {
     this.ready = false;
   }
 
-  onChange = (evt: React.ChangeEvent, value: number) => {
+  onChange = (evt: React.ChangeEvent, value: number): void => {
     this.desiredReplicas = value;
   }
 
-  scale = async () => {
+  scale = async (): Promise<void> => {
     const { deployment } = this;
     const { currentReplicas, desiredReplicas, close } = this;
     try {
@@ -83,7 +83,7 @@ export class DeploymentScaleDialog extends Component<Props> {
     }
   }
 
-  renderContents() {
+  renderContents(): JSX.Element {
     const { currentReplicas, desiredReplicas, onChange, scaleMax } = this;
     const warning = currentReplicas < 10 && desiredReplicas > 90;
     return (
@@ -106,10 +106,10 @@ export class DeploymentScaleDialog extends Component<Props> {
         </div>
         }
       </>
-    )
+    );
   }
 
-  render() {
+  render(): JSX.Element {
     const { className, ...dialogProps } = this.props;
     const deploymentName = this.deployment ? this.deployment.getName() : "";
     const header = (

dashboard/client/components/+workloads-deployments/deployments.store.ts

@@ -1,52 +1,51 @@
 import { observable } from "mobx";
-import { Deployment, deploymentApi, IPodMetrics, podsApi, PodStatus } from "../../api/endpoints";
+import { Deployment, deploymentApi, PodMetricsData, podsApi, PodStatus, Pod } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
+import { Metrics } from "client/api/endpoints/metrics.api";
+import { Dictionary } from "lodash";
 
 @autobind()
 export class DeploymentStore extends KubeObjectStore<Deployment> {
   api = deploymentApi
-  @observable metrics: IPodMetrics = null;
+  @observable metrics: PodMetricsData = null;
 
-  protected sortItems(items: Deployment[]) {
+  protected sortItems(items: Deployment[]): Deployment[] {
     return super.sortItems(items, [
-      item => item.getReplicas(),
+      (item): number => item.getReplicas(),
     ], "desc");
   }
 
-  loadMetrics(deployment: Deployment) {
+  async loadMetrics(deployment: Deployment): Promise<PodMetricsData<Metrics>> {
     const pods = this.getChildPods(deployment);
-    return podsApi.getMetrics(pods, deployment.getNs(), "").then(metrics =>
-      this.metrics = metrics
-    );
+    const metrics = await podsApi.getMetrics(pods, deployment.getNs(), "");
+    return this.metrics = metrics;
   }
 
-  getStatuses(deployments?: Deployment[]) {
-    const status = { failed: 0, pending: 0, running: 0 }
+  getStatuses(deployments?: Deployment[]): Dictionary<number> {
+    const status = { failed: 0, pending: 0, running: 0 };
     deployments.forEach(deployment => {
       const pods = this.getChildPods(deployment);
       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;
   }
 
-  getChildPods(deployment: Deployment) {
+  getChildPods(deployment: Deployment): Pod[] {
     return podsStore
       .getByLabel(deployment.getTemplateLabels())
-      .filter(pod => pod.getNs() === deployment.getNs())
+      .filter(pod => pod.getNs() === deployment.getNs());
   }
 
-  reset() {
+  reset(): void {
     this.metrics = null;
   }
 }

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

@@ -1,4 +1,4 @@
-import "./deployments.scss"
+import "./deployments.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -15,7 +15,7 @@ import { podsStore } from "../+workloads-pods/pods.store";
 import { nodesStore } from "../+nodes/nodes.store";
 import { eventStore } from "../+events/event.store";
 import { KubeObjectListLayout } from "../kube-object";
-import { IDeploymentsRouteParams } from "../+workloads";
+import { DeploymentsRouteParams } from "../+workloads";
 import { _i18n } from "../../i18n";
 import { cssNames } from "../../utils";
 import kebabCase from "lodash/kebabCase";
@@ -31,40 +31,40 @@ enum sortBy {
   condition = "condition",
 }
 
-interface Props extends RouteComponentProps<IDeploymentsRouteParams> {
+interface Props extends RouteComponentProps<DeploymentsRouteParams> {
 }
 
 @observer
 export class Deployments extends React.Component<Props> {
-  renderPods(deployment: Deployment) {
-    const { replicas, availableReplicas } = deployment.status
-    return `${availableReplicas || 0}/${replicas || 0}`
+  renderPods(deployment: Deployment): string {
+    const { replicas, availableReplicas } = deployment.status;
+    return `${availableReplicas || 0}/${replicas || 0}`;
   }
 
-  renderConditions(deployment: Deployment) {
-    const conditions = orderBy(deployment.getConditions(true), "type", "asc")
+  renderConditions(deployment: Deployment): JSX.Element[] {
+    const conditions = orderBy(deployment.getConditions(true), "type", "asc");
     return conditions.map(({ type, message }) => (
       <span key={type} className={cssNames("condition", kebabCase(type))} title={message}>
         {type}
       </span>
-    ))
+    ));
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="Deployments" store={deploymentStore}
         dependentStores={[replicaSetStore, podsStore, nodesStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (deployment: Deployment) => deployment.getName(),
-          [sortBy.namespace]: (deployment: Deployment) => deployment.getNs(),
-          [sortBy.replicas]: (deployment: Deployment) => deployment.getReplicas(),
-          [sortBy.age]: (deployment: Deployment) => deployment.metadata.creationTimestamp,
-          [sortBy.condition]: (deployment: Deployment) => deployment.getConditionsText(),
+          [sortBy.name]: (deployment: Deployment): string => deployment.getName(),
+          [sortBy.namespace]: (deployment: Deployment): string => deployment.getNs(),
+          [sortBy.replicas]: (deployment: Deployment): number => deployment.getReplicas(),
+          [sortBy.age]: (deployment: Deployment): string => deployment.metadata.creationTimestamp,
+          [sortBy.condition]: (deployment: Deployment): string => deployment.getConditionsText(),
         }}
         searchFilters={[
-          (deployment: Deployment) => deployment.getSearchFields(),
-          (deployment: Deployment) => deployment.getConditionsText(),
+          (deployment: Deployment): string[] => deployment.getSearchFields(),
+          (deployment: Deployment): string => deployment.getConditionsText(),
         ]}
         renderHeaderTitle={<Trans>Deployments</Trans>}
         renderTableHeader={[
@@ -76,33 +76,33 @@ export class Deployments extends React.Component<Props> {
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Conditions</Trans>, className: "conditions", sortBy: sortBy.condition },
         ]}
-        renderTableContents={(deployment: Deployment) => [
+        renderTableContents={(deployment: Deployment): (string | number | JSX.Element | JSX.Element[])[] => [
           deployment.getName(),
           deployment.getNs(),
           this.renderPods(deployment),
           deployment.getReplicas(),
-          <KubeEventIcon object={deployment}/>,
+          <KubeEventIcon key="deployment" object={deployment}/>,
           deployment.getAge(),
           this.renderConditions(deployment),
         ]}
-        renderItemMenu={(item: Deployment) => {
-          return <DeploymentMenu object={item}/>
+        renderItemMenu={(item: Deployment): JSX.Element => {
+          return <DeploymentMenu object={item}/>;
         }}
       />
-    )
+    );
   }
 }
 
-export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
+export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>): JSX.Element {
   const { object, toolbar } = props;
   return (
     <KubeObjectMenu {...props}>
-      <MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
+      <MenuItem onClick={(): void => DeploymentScaleDialog.open(object)}>
         <Icon material="control_camera" title={_i18n._(t`Scale`)} interactive={toolbar}/>
         <span className="title"><Trans>Scale</Trans></span>
       </MenuItem>
     </KubeObjectMenu>
-  )
+  );
 }
 
 apiManager.registerViews(deploymentApi, {

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

@@ -1,2 +1,2 @@
-export * from "./deployments"
-export * from "./deployment-details"
+export * from "./deployments";
+export * from "./deployment-details";