cleanup Lens repo with tighter linting

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

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

@@ -1,3 +1,3 @@
-export * from "./services.route"
-export * from "./services"
-export * from "./service-details"
+export * from "./services.route";
+export * from "./services";
+export * from "./service-details";

dashboard/client/components/+network-services/service-details-endpoint.tsx

@@ -14,36 +14,38 @@ interface Props {
 
 @observer
 export class ServiceDetailsEndpoint extends React.Component<Props> {
-  render() {
-    const { endpoint } = this.props
-    if (!endpoint && !endpointStore.isLoaded) return (
-      <div className="PodDetailsList flex justify-center"><Spinner/></div>
-    );
+  render(): JSX.Element {
+    const { endpoint } = this.props;
+    if (!endpoint && !endpointStore.isLoaded) {
+      return (
+        <div className="PodDetailsList flex justify-center"><Spinner/></div>
+      );
+    }
     if (!endpoint) {
-      return null
+      return null;
     }
     return (
-        <div className="EndpointList flex column">
+      <div className="EndpointList flex column">
         <Table
-        selectable
-        virtual={false}
-        scrollable={false}
-        className="box grow"
+          selectable
+          virtual={false}
+          scrollable={false}
+          className="box grow"
         >
-        <TableHead>
-          <TableCell className="name" ><Trans>Name</Trans></TableCell>
-          <TableCell className="endpoints"><Trans>Endpoints</Trans></TableCell>
-        </TableHead>
-        <TableRow
-        key={endpoint.getId()}
-        nowrap
-        onClick={prevDefault(() => showDetails(endpoint.selfLink, false))}
-        >
-        <TableCell className="name">{endpoint.getName()}</TableCell>
-        <TableCell className="endpoints">{ endpoint.toString()}</TableCell>
-        </TableRow>
+          <TableHead>
+            <TableCell className="name" ><Trans>Name</Trans></TableCell>
+            <TableCell className="endpoints"><Trans>Endpoints</Trans></TableCell>
+          </TableHead>
+          <TableRow
+            key={endpoint.getId()}
+            nowrap
+            onClick={prevDefault(() => showDetails(endpoint.selfLink, false))}
+          >
+            <TableCell className="name">{endpoint.getName()}</TableCell>
+            <TableCell className="endpoints">{ endpoint.toString()}</TableCell>
+          </TableRow>
         </Table>
       </div>
-    )
+    );
   }
 }

dashboard/client/components/+network-services/service-details.tsx

@@ -1,4 +1,4 @@
-import "./service-details.scss"
+import "./service-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -20,18 +20,20 @@ interface Props extends KubeObjectDetailsProps<Service> {
 
 @observer
 export class ServiceDetails extends React.Component<Props> {
-  componentDidMount() {
+  async componentDidMount(): Promise<void> {
     if (!endpointStore.isLoaded) {
-      endpointStore.loadAll();
+      await endpointStore.loadAll();
     }
-    endpointApi.watch()
+    endpointApi.watch();
   }
 
-  render() {
+  render(): JSX.Element {
     const { object: service } = this.props;
-    if (!service) return;
+    if (!service) {
+      return;
+    }
     const { spec } = service;
-    const endpoint = endpointStore.getByName(service.getName(), service.getNs())
+    const endpoint = endpointStore.getByName(service.getName(), service.getNs());
     return (
       <div className="ServicesDetails">
         <KubeObjectMeta object={service}/>
@@ -81,4 +83,4 @@ export class ServiceDetails extends React.Component<Props> {
 
 apiManager.registerViews(serviceApi, {
   Details: ServiceDetails,
-})
+});

dashboard/client/components/+network-services/service-ports.tsx

@@ -1,15 +1,15 @@
-import "./service-ports.scss"
+import "./service-ports.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
 import { t } from "@lingui/macro";
 import { Service, ServicePort } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { apiBase } from "../../api"
+import { apiBase } from "../../api";
 import { observable } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
-import { Spinner } from "../spinner"
+import { Spinner } from "../spinner";
 
 interface Props {
   service: Service;
@@ -19,19 +19,20 @@ interface Props {
 export class ServicePorts extends React.Component<Props> {
   @observable waiting = false;
 
-  async portForward(port: ServicePort) {
+  async portForward(port: ServicePort): Promise<void> {
     const { service } = this.props;
-    this.waiting = true;
-    apiBase.post(`/services/${service.getNs()}/${service.getName()}/port-forward/${port.port}`, {})
-      .catch(error => {
-        Notifications.error(error);
-      })
-      .finally(() => {
-        this.waiting = false;
-      });
+    
+    try {
+      this.waiting = true;
+      await apiBase.post(`/services/${service.getNs()}/${service.getName()}/port-forward/${port.port}`, {});
+    } catch (error) {
+      Notifications.error(error);
+    } finally {
+      this.waiting = false;
+    }
   }
 
-  render() {
+  render(): JSX.Element {
     const { service } = this.props;
     return (
       <div className={cssNames("ServicePorts", { waiting: this.waiting })}>
@@ -39,7 +40,10 @@ export class ServicePorts extends React.Component<Props> {
           service.getPorts().map((port) => {
             return(
               <p key={port.toString()}>
-                <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward(port) }>
+                <span 
+                  title={_i18n._(t`Open in a browser`)} 
+                  onClick={(): Promise<void> => this.portForward(port) }
+                >
                   {port.toString()}
                   {this.waiting && (
                     <Spinner />

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

@@ -1,11 +1,11 @@
-import { RouteProps } from "react-router"
+import { RouteProps } from "react-router";
 import { buildURL } from "../../navigation";
 
 export const servicesRoute: RouteProps = {
   path: "/services"
+};
+
+export interface ServicesRouteParams {
 }
 
-export interface IServicesRouteParams {
-}
-
-export const servicesURL = buildURL<IServicesRouteParams>(servicesRoute.path);
+export const servicesURL = buildURL<ServicesRouteParams>(servicesRoute.path);

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

@@ -1,10 +1,10 @@
-import "./services.scss"
+import "./services.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
-import { IServicesRouteParams } from "./services.route";
+import { ServicesRouteParams } from "./services.route";
 import { Service, serviceApi } from "../../api/endpoints/service.api";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { KubeObjectListLayout } from "../kube-object";
@@ -23,29 +23,29 @@ enum sortBy {
   status = "status",
 }
 
-interface Props extends RouteComponentProps<IServicesRouteParams> {
+interface Props extends RouteComponentProps<ServicesRouteParams> {
 }
 
 @observer
 export class Services extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="Services" store={serviceStore}
         sortingCallbacks={{
-          [sortBy.name]: (service: Service) => service.getName(),
-          [sortBy.namespace]: (service: Service) => service.getNs(),
-          [sortBy.selector]: (service: Service) => service.getSelector(),
-          [sortBy.ports]: (service: Service) => (service.spec.ports || []).map(({ port }) => port)[0],
-          [sortBy.clusterIp]: (service: Service) => service.getClusterIp(),
-          [sortBy.type]: (service: Service) => service.getType(),
-          [sortBy.age]: (service: Service) => service.metadata.creationTimestamp,
-          [sortBy.status]: (service: Service) => service.getStatus(),
+          [sortBy.name]: (service: Service): string => service.getName(),
+          [sortBy.namespace]: (service: Service): string => service.getNs(),
+          [sortBy.selector]: (service: Service): string[] => service.getSelector(),
+          [sortBy.ports]: (service: Service): number => (service.spec.ports || []).map(({ port }) => port)[0],
+          [sortBy.clusterIp]: (service: Service): string => service.getClusterIp(),
+          [sortBy.type]: (service: Service): string => service.getType(),
+          [sortBy.age]: (service: Service): string => service.metadata.creationTimestamp,
+          [sortBy.status]: (service: Service): string => service.getStatus(),
         }}
         searchFilters={[
-          (service: Service) => service.getSearchFields(),
-          (service: Service) => service.getSelector().join(" "),
-          (service: Service) => service.getPorts().join(" "),
+          (service: Service): string[] => service.getSearchFields(),
+          (service: Service): string => service.getSelector().join(" "),
+          (service: Service): string => service.getPorts().join(" "),
         ]}
         renderHeaderTitle={<Trans>Services</Trans>}
         renderTableHeader={[
@@ -59,31 +59,31 @@ export class Services extends React.Component<Props> {
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
         ]}
-        renderTableContents={(service: Service) => [
+        renderTableContents={(service: Service): (string | number | JSX.Element[] | React.ReactNode)[] => [
           service.getName(),
           service.getNs(),
           service.getType(),
-          service.getClusterIp(),
+          service.spec.clusterIP,
           service.getPorts().join(", "),
           service.getExternalIps().join(", ") || "-",
           service.getSelector().map(label => <Badge key={label} label={label}/>),
           service.getAge(),
           { title: service.getStatus(), className: service.getStatus().toLowerCase() },
         ]}
-        renderItemMenu={(item: Service) => {
-          return <ServiceMenu object={item}/>
+        renderItemMenu={(item: Service): JSX.Element => {
+          return <ServiceMenu object={item}/>;
         }}
       />
-    )
+    );
   }
 }
 
-export function ServiceMenu(props: KubeObjectMenuProps<Service>) {
+export function ServiceMenu(props: KubeObjectMenuProps<Service>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(serviceApi, {
   Menu: ServiceMenu
-})
+});