cleanup Lens repo with tighter linting

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

dashboard/client/components/+network-endpoints/endpoint-details.tsx

@@ -1,10 +1,9 @@
-import "./endpoint-details.scss"
+import "./endpoint-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { DrawerItem, DrawerTitle } from "../drawer";
-import { Badge } from "../badge";
+import { Trans } from "@lingui/macro";
+import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { Endpoint, endpointApi } from "../../api/endpoints";
@@ -18,19 +17,19 @@ interface Props extends KubeObjectDetailsProps<Endpoint> {
 
 @observer
 export class EndpointDetails extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { object: endpoint } = this.props;
-    if (!endpoint) return;
+    if (!endpoint) {
+      return;
+    }
     return (
       <div className="EndpointDetails">
         <KubeObjectMeta object={endpoint}/>
         <DrawerTitle title={<Trans>Subsets</Trans>}/>
         {
-          endpoint.getEndpointSubsets().map((subset) => {
-            return(
-            <EndpointSubsetList subset={subset} endpoint={endpoint}/>
-            )
-          })
+          endpoint.getEndpointSubsets().map((subset, index) => (
+            <EndpointSubsetList key={`${index}`} subset={subset} endpoint={endpoint} />
+          ))
         }
 
         <KubeEventDetails object={endpoint}/>
@@ -41,4 +40,4 @@ export class EndpointDetails extends React.Component<Props> {
 
 apiManager.registerViews(endpointApi, {
   Details: EndpointDetails,
-})
+});

dashboard/client/components/+network-endpoints/endpoint-subset-list.tsx

@@ -1,10 +1,9 @@
-import "./endpoint-subset-list.scss"
+import "./endpoint-subset-list.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
 import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { DrawerItem, DrawerTitle } from "../drawer";
 import { Trans } from "@lingui/macro";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { autobind } from "../../utils";
@@ -20,21 +19,21 @@ interface Props {
 @observer
 export class EndpointSubsetList extends React.Component<Props> {
 
-  getAddressTableRow(ip: string) {
+  getAddressTableRow(ip: string): JSX.Element {
     const { subset } = this.props;
     const address = subset.getAddresses().find(address => address.getId() == ip);
-    return this.renderAddressTableRow(address)
+    return this.renderAddressTableRow(address);
   }
 
   @autobind()
-  getNotReadyAddressTableRow(ip: string) {
+  getNotReadyAddressTableRow(ip: string): JSX.Element {
     const { subset} = this.props;
     const address = subset.getNotReadyAddresses().find(address => address.getId() == ip);
-    return this.renderAddressTableRow(address)
+    return this.renderAddressTableRow(address);
   }
 
   @autobind()
-  renderAddressTable(addresses: EndpointAddress[], virtual: boolean) {
+  renderAddressTable(addresses: EndpointAddress[], virtual: boolean): JSX.Element {
     return (
       <div>
         <div className="title flex gaps"><Trans>Addresses</Trans></div>
@@ -56,11 +55,11 @@ export class EndpointSubsetList extends React.Component<Props> {
           }
         </Table>
       </div>
-    )
+    );
   }
 
   @autobind()
-  renderAddressTableRow(address: EndpointAddress) {
+  renderAddressTableRow(address: EndpointAddress): JSX.Element {
     const { endpoint } = this.props;
     return (
       <TableRow
@@ -71,16 +70,16 @@ export class EndpointSubsetList extends React.Component<Props> {
         <TableCell className="name">{address.hostname}</TableCell>
         <TableCell className="target">
           { address.targetRef && (
-          <Link to={getDetailsUrl(lookupApiLink(address.getTargetRef(), endpoint))}>
-                {address.targetRef.name}
-          </Link>
+            <Link to={getDetailsUrl(lookupApiLink(address.getTargetRef(), endpoint))}>
+              {address.targetRef.name}
+            </Link>
           )}
         </TableCell>
       </TableRow>
     );
   }
 
-  render() {
+  render(): JSX.Element {
     const { subset } = this.props;
     const addresses = subset.getAddresses();
     const notReadyAddresses = subset.getNotReadyAddresses();
@@ -90,45 +89,45 @@ export class EndpointSubsetList extends React.Component<Props> {
     return(
       <div className="EndpointSubsetList flex column">
         {addresses.length > 0 && (
-        <div>
-          <div className="title flex gaps"><Trans>Addresses</Trans></div>
-          <Table
-            items={addresses}
-            selectable={false}
-            virtual={addressesVirtual}
-            scrollable={false}
-            getTableRow={this.getAddressTableRow}
-            className="box grow"
-          >
-            <TableHead>
-              <TableCell className="ip">IP</TableCell>
-              <TableCell className="host"><Trans>Hostname</Trans></TableCell>
-              <TableCell className="target">Target</TableCell>
-            </TableHead>
-            { !addressesVirtual && addresses.map(address => this.getAddressTableRow(address.getId())) }
-          </Table>
-        </div>
+          <div>
+            <div className="title flex gaps"><Trans>Addresses</Trans></div>
+            <Table
+              items={addresses}
+              selectable={false}
+              virtual={addressesVirtual}
+              scrollable={false}
+              getTableRow={this.getAddressTableRow}
+              className="box grow"
+            >
+              <TableHead>
+                <TableCell className="ip">IP</TableCell>
+                <TableCell className="host"><Trans>Hostname</Trans></TableCell>
+                <TableCell className="target">Target</TableCell>
+              </TableHead>
+              { !addressesVirtual && addresses.map(address => this.getAddressTableRow(address.getId())) }
+            </Table>
+          </div>
         )}
 
         {notReadyAddresses.length > 0 && (
-        <div>
-          <div className="title flex gaps"><Trans>Not Ready Addresses</Trans></div>
-          <Table
-            items={notReadyAddresses}
-            selectable
-            virtual={notReadyAddressesVirtual}
-            scrollable={false}
-            getTableRow={this.getNotReadyAddressTableRow}
-            className="box grow"
-          >
-            <TableHead>
-              <TableCell className="ip">IP</TableCell>
-              <TableCell className="host"><Trans>Hostname</Trans></TableCell>
-              <TableCell className="target">Target</TableCell>
-            </TableHead>
-            { !notReadyAddressesVirtual && notReadyAddresses.map(address => this.getNotReadyAddressTableRow(address.getId())) }
-          </Table>
-        </div>
+          <div>
+            <div className="title flex gaps"><Trans>Not Ready Addresses</Trans></div>
+            <Table
+              items={notReadyAddresses}
+              selectable
+              virtual={notReadyAddressesVirtual}
+              scrollable={false}
+              getTableRow={this.getNotReadyAddressTableRow}
+              className="box grow"
+            >
+              <TableHead>
+                <TableCell className="ip">IP</TableCell>
+                <TableCell className="host"><Trans>Hostname</Trans></TableCell>
+                <TableCell className="target">Target</TableCell>
+              </TableHead>
+              { !notReadyAddressesVirtual && notReadyAddresses.map(address => this.getNotReadyAddressTableRow(address.getId())) }
+            </Table>
+          </div>
         )}
 
         <div className="title flex gaps"><Trans>Ports</Trans></div>

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

@@ -1,11 +1,11 @@
-import { RouteProps } from "react-router"
+import { RouteProps } from "react-router";
 import { buildURL } from "../../navigation";
 
 export const endpointRoute: RouteProps = {
   path: "/endpoints"
-}
+};
 
 export interface EndpointRouteParams {
 }
 
-export const endpointURL = buildURL<EndpointRouteParams>(endpointRoute.path)
+export const endpointURL = buildURL<EndpointRouteParams>(endpointRoute.path);

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

@@ -1,10 +1,10 @@
-import "./endpoints.scss"
+import "./endpoints.scss";
 
-import * as React from "react"
+import * as React from "react";
 import { observer } from "mobx-react";
-import { RouteComponentProps } from "react-router-dom"
-import { EndpointRouteParams } from "./endpoints.route"
-import { Endpoint, endpointApi } from "../../api/endpoints/endpoint.api"
+import { RouteComponentProps } from "react-router-dom";
+import { EndpointRouteParams } from "./endpoints.route";
+import { Endpoint, endpointApi } from "../../api/endpoints/endpoint.api";
 import { endpointStore } from "./endpoints.store";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { KubeObjectListLayout } from "../kube-object";
@@ -22,17 +22,17 @@ interface Props extends RouteComponentProps<EndpointRouteParams> {
 
 @observer
 export class Endpoints extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     return (
       <KubeObjectListLayout
         className="Endpoints" store={endpointStore}
         sortingCallbacks={{
-          [sortBy.name]: (endpoint: Endpoint) => endpoint.getName(),
-          [sortBy.namespace]: (endpoint: Endpoint) => endpoint.getNs(),
-          [sortBy.age]: (endpoint: Endpoint) => endpoint.metadata.creationTimestamp,
+          [sortBy.name]: (endpoint: Endpoint): string => endpoint.getName(),
+          [sortBy.namespace]: (endpoint: Endpoint): string => endpoint.getNs(),
+          [sortBy.age]: (endpoint: Endpoint): string => endpoint.metadata.creationTimestamp,
         }}
         searchFilters={[
-          (endpoint: Endpoint) => endpoint.getSearchFields()
+          (endpoint: Endpoint): string[] => endpoint.getSearchFields()
         ]}
         renderHeaderTitle={<Trans>Endpoints</Trans>}
         renderTableHeader={[
@@ -41,32 +41,32 @@ export class Endpoints extends React.Component<Props> {
           { title: <Trans>Endpoints</Trans>, className: "endpoints" },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(endpoint: Endpoint) => [
+        renderTableContents={(endpoint: Endpoint): (string | number)[] => [
           endpoint.getName(),
           endpoint.getNs(),
           endpoint.toString(),
           endpoint.getAge(),
         ]}
-        renderItemMenu={(item: Endpoint) => {
-          return <EndpointMenu object={item}/>
+        renderItemMenu={(item: Endpoint): JSX.Element => {
+          return <EndpointMenu object={item}/>;
         }}
         tableProps={{
-          customRowHeights: (item: Endpoint, lineHeight, paddings) => {
+          customRowHeights: (item: Endpoint, lineHeight, paddings): number => {
             const lines = item.getEndpointSubsets().length || 1;
             return lines * lineHeight + paddings;
           }
         }}
       />
-    )
+    );
   }
 }
 
-export function EndpointMenu(props: KubeObjectMenuProps<Endpoint>) {
+export function EndpointMenu(props: KubeObjectMenuProps<Endpoint>): JSX.Element {
   return (
     <KubeObjectMenu {...props}/>
-  )
+  );
 }
 
 apiManager.registerViews(endpointApi, {
   Menu: EndpointMenu
-})
+});

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

@@ -1,3 +1,3 @@
-export * from "./endpoints.route"
-export * from "./endpoints"
-export * from "./endpoint-details"
+export * from "./endpoints.route";
+export * from "./endpoints";
+export * from "./endpoint-details";