cleanup Lens repo with tighter linting

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

dashboard/client/components/+network-ingresses/index.ts

@@ -1,3 +1,3 @@
-export * from "./ingresses.route"
-export * from "./ingresses"
-export * from "./ingress-details"
+export * from "./ingresses.route";
+export * from "./ingresses";
+export * from "./ingress-details";

dashboard/client/components/+network-ingresses/ingress-charts.tsx

@@ -2,21 +2,25 @@ import React, { useContext } from "react";
 import { t } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { ChartOptions, ChartPoint } from "chart.js";
-import { IIngressMetrics, Ingress } from "../../api/endpoints";
+import { IngressMetrics, Ingress } from "../../api/endpoints";
 import { BarChart, memoryOptions } from "../chart";
 import { normalizeMetrics, isMetricsEmpty } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
-import { ResourceMetricsContext, IResourceMetricsValue } from "../resource-metrics";
+import { ResourceMetricsContext, ResourceMetricsValue } from "../resource-metrics";
 import { _i18n } from "../../i18n";
 
-type IContext = IResourceMetricsValue<Ingress, { metrics: IIngressMetrics }>;
+type IContext = ResourceMetricsValue<Ingress, { metrics: IngressMetrics }>;
 
 export const IngressCharts = observer(() => {
   const { params: { metrics }, tabId, object } = useContext<IContext>(ResourceMetricsContext);
   const id = object.getId();
 
-  if (!metrics) return null;
-  if (isMetricsEmpty(metrics)) return <NoMetrics/>;
+  if (!metrics) {
+    return null;
+  }
+  if (isMetricsEmpty(metrics)) {
+    return <NoMetrics/>;
+  }
 
   const values = Object.values(metrics)
     .map(normalizeMetrics)
@@ -69,13 +73,13 @@ export const IngressCharts = observer(() => {
     scales: {
       yAxes: [{
         ticks: {
-          callback: value => value
+          callback: (value): any => value
         }
       }]
     },
     tooltips: {
       callbacks: {
-        label: ({ datasetIndex, index }, { datasets }) => {
+        label: ({ datasetIndex, index }, { datasets }): string => {
           const { label, data } = datasets[datasetIndex];
           const value = data[index] as ChartPoint;
           const chartTooltipSec = _i18n._(t`sec`);
@@ -94,4 +98,4 @@ export const IngressCharts = observer(() => {
       data={{ datasets: datasets[tabId] }}
     />
   );
-})
+});

dashboard/client/components/+network-ingresses/ingress-details.tsx

@@ -25,13 +25,15 @@ export class IngressDetails extends React.Component<Props> {
     ingressStore.reset();
   });
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     ingressStore.reset();
   }
 
-  renderPaths(ingress: Ingress) {
-    const { spec: { rules } } = ingress
-    if (!rules || !rules.length) return null
+  renderPaths(ingress: Ingress): JSX.Element[] {
+    const { spec: { rules } } = ingress;
+    if (!rules || !rules.length) {
+      return null;
+    }
     return rules.map((rule, index) => {
       return (
         <div className="rules" key={index}>
@@ -48,7 +50,7 @@ export class IngressDetails extends React.Component<Props> {
               </TableHead>
               {
                 rule.http.paths.map((path, index) => {
-                  const backend = `${path.backend.serviceName}:${path.backend.servicePort}`
+                  const backend = `${path.backend.serviceName}:${path.backend.servicePort}`;
                   return (
                     <TableRow key={index}>
                       <TableCell className="path">{path.path || ""}</TableCell>
@@ -56,17 +58,17 @@ export class IngressDetails extends React.Component<Props> {
                         <p key={backend}>{backend}</p>
                       </TableCell>
                     </TableRow>
-                  )
+                  );
                 })
               }
             </Table>
           )}
         </div>
-      )
-    })
+      );
+    });
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: ingress } = this.props;
     if (!ingress) {
       return null;
@@ -74,13 +76,13 @@ export class IngressDetails extends React.Component<Props> {
     const { spec } = ingress;
     const { metrics } = ingressStore;
     const metricTabs = [
-      <Trans>Network</Trans>,
-      <Trans>Duration</Trans>,
+      <Trans key="network">Network</Trans>,
+      <Trans key="duration">Duration</Trans>,
     ];
     return (
       <div className="IngressDetails">
         <ResourceMetrics
-          loader={() => ingressStore.loadMetrics(ingress)}
+          loader={(): Promise<void> => ingressStore.loadMetrics(ingress)}
           tabs={metricTabs} object={ingress} params={{ metrics }}
         >
           <IngressCharts/>
@@ -104,10 +106,10 @@ export class IngressDetails extends React.Component<Props> {
 
         <KubeEventDetails object={ingress}/>
       </div>
-    )
+    );
   }
 }
 
 apiManager.registerViews(ingressApi, {
   Details: IngressDetails,
-})
+});

dashboard/client/components/+network-ingresses/ingress.store.ts

@@ -1,19 +1,19 @@
 import { observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
-import { IIngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
+import { IngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
 
 @autobind()
 export class IngressStore extends KubeObjectStore<Ingress> {
   api = ingressApi;
-  @observable metrics: IIngressMetrics = null;
+  @observable metrics: IngressMetrics = null;
 
-  async loadMetrics(ingress: Ingress) {
+  async loadMetrics(ingress: Ingress): Promise<void> {
     this.metrics = await this.api.getMetrics(ingress.getName(), ingress.getNs());
   }
 
-  reset() {
+  reset(): void {
     this.metrics = null;
   }
 }

dashboard/client/components/+network-ingresses/ingresses.route.ts

@@ -1,11 +1,11 @@
-import { RouteProps } from "react-router"
+import { RouteProps } from "react-router";
 import { buildURL } from "../../navigation";
 
 export const ingressRoute: RouteProps = {
   path: "/ingresses"
-}
+};
 
 export interface IngressRouteParams {
 }
 
-export const ingressURL = buildURL<IngressRouteParams>(ingressRoute.path)
+export const ingressURL = buildURL<IngressRouteParams>(ingressRoute.path);

dashboard/client/components/+network-ingresses/ingresses.tsx

@@ -1,10 +1,10 @@
-import "./ingresses.scss"
+import "./ingresses.scss";
 
-import * as React from "react"
+import * as React from "react";
 import { observer } from "mobx-react";
-import { RouteComponentProps } from "react-router-dom"
-import { IngressRouteParams } from "./ingresses.route"
-import { Ingress, ingressApi } from "../../api/endpoints/ingress.api"
+import { RouteComponentProps } from "react-router-dom";
+import { IngressRouteParams } from "./ingresses.route";
+import { Ingress, ingressApi } from "../../api/endpoints/ingress.api";
 import { ingressStore } from "./ingress.store";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { KubeObjectListLayout } from "../kube-object";
@@ -22,18 +22,18 @@ interface Props extends RouteComponentProps<IngressRouteParams> {
 
 @observer
 export class Ingresses extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="Ingresses" store={ingressStore}
         sortingCallbacks={{
-          [sortBy.name]: (ingress: Ingress) => ingress.getName(),
-          [sortBy.namespace]: (ingress: Ingress) => ingress.getNs(),
-          [sortBy.age]: (ingress: Ingress) => ingress.metadata.creationTimestamp,
+          [sortBy.name]: (ingress: Ingress): string => ingress.getName(),
+          [sortBy.namespace]: (ingress: Ingress): string => ingress.getNs(),
+          [sortBy.age]: (ingress: Ingress): string => ingress.metadata.creationTimestamp,
         }}
         searchFilters={[
-          (ingress: Ingress) => ingress.getSearchFields(),
-          (ingress: Ingress) => ingress.getPorts(),
+          (ingress: Ingress): string[] => ingress.getSearchFields(),
+          (ingress: Ingress): string => ingress.getPorts(),
         ]}
         renderHeaderTitle={<Trans>Ingresses</Trans>}
         renderTableHeader={[
@@ -42,32 +42,32 @@ export class Ingresses extends React.Component<Props> {
           { title: <Trans>Rules</Trans>, className: "rules" },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(ingress: Ingress) => [
+        renderTableContents={(ingress: Ingress): (string | number | JSX.Element[])[] => [
           ingress.getName(),
           ingress.getNs(),
           ingress.getRoutes().map(route => <p key={route}>{route}</p>),
           ingress.getAge(),
         ]}
-        renderItemMenu={(item: Ingress) => {
-          return <IngressMenu object={item}/>
+        renderItemMenu={(item: Ingress): JSX.Element => {
+          return <IngressMenu object={item}/>;
         }}
         tableProps={{
-          customRowHeights: (item: Ingress, lineHeight, paddings) => {
+          customRowHeights: (item: Ingress, lineHeight, paddings): number => {
             const lines = item.getRoutes().length || 1;
             return lines * lineHeight + paddings;
           }
         }}
       />
-    )
+    );
   }
 }
 
-export function IngressMenu(props: KubeObjectMenuProps<Ingress>) {
+export function IngressMenu(props: KubeObjectMenuProps<Ingress>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(ingressApi, {
   Menu: IngressMenu
-})
+});