cleanup Lens repo with tighter linting

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

dashboard/client/components/+events/event-details.tsx

@@ -19,9 +19,11 @@ interface Props extends KubeObjectDetailsProps<KubeEvent> {
 
 @observer
 export class EventDetails extends React.Component<Props> {
-  render() {
+  render(): JSX.Element {
     const { object: event } = this.props;
-    if (!event) return;
+    if (!event) {
+      return;
+    }
     const { message, reason, count, type, involvedObject } = event;
     const { kind, name, namespace, fieldPath } = involvedObject;
     return (
@@ -70,7 +72,7 @@ export class EventDetails extends React.Component<Props> {
           </TableRow>
         </Table>
       </div>
-    )
+    );
   }
 }
 

dashboard/client/components/+events/event.store.ts

@@ -7,20 +7,21 @@ import { KubeObject } from "../../api/kube-object";
 import { Pod } from "../../api/endpoints/pods.api";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
+import { IReactionDisposer } from "mobx";
 
 @autobind()
 export class EventStore extends KubeObjectStore<KubeEvent> {
   api = eventApi
   limit = 1000
 
-  protected bindWatchEventsUpdater() {
+  protected bindWatchEventsUpdater(): IReactionDisposer {
     return super.bindWatchEventsUpdater(5000);
   }
 
-  protected sortItems(items: KubeEvent[]) {
+  protected sortItems(items: KubeEvent[]): KubeEvent[] {
     return super.sortItems(items, [
-      event => event.metadata.creationTimestamp
-    ], "desc")
+      (event): string => event.metadata.creationTimestamp
+    ], "desc");
   }
 
   getEventsByObject(obj: KubeObject): KubeEvent[] {
@@ -32,7 +33,7 @@ export class EventStore extends KubeObjectStore<KubeEvent> {
     });
   }
 
-  getWarnings() {
+  getWarnings(): KubeEvent[] {
     const warnings = this.items.filter(event => event.type == "Warning");
     const groupsByInvolvedObject = groupBy(warnings, warning => warning.involvedObject.uid);
     const eventsWithError = Object.values(groupsByInvolvedObject).map(events => {
@@ -40,7 +41,9 @@ export class EventStore extends KubeObjectStore<KubeEvent> {
       const { kind, uid } = recent.involvedObject;
       if (kind == Pod.kind) {  // Wipe out running pods
         const pod = podsStore.items.find(pod => pod.getId() == uid);
-        if (!pod || (!pod.hasIssues() && pod.spec.priority < 500000)) return;
+        if (!pod || (!pod.hasIssues() && pod.spec.priority < 500000)) {
+          return;
+        }
       }
       return recent;
     });

dashboard/client/components/+events/events.route.ts

@@ -3,6 +3,6 @@ import { buildURL } from "../../navigation";
 
 export const eventRoute: RouteProps = {
   path: "/events"
-}
+};
 
 export const eventsURL = buildURL(eventRoute.path);

dashboard/client/components/+events/events.tsx

@@ -9,10 +9,11 @@ import { Trans } from "@lingui/macro";
 import { KubeEvent } from "../../api/endpoints/events.api";
 import { Tooltip, TooltipContent } from "../tooltip";
 import { Link } from "react-router-dom";
-import { cssNames, IClassName, stopPropagation } from "../../utils";
+import { cssNames, ClassName, stopPropagation } from "../../utils";
 import { Icon } from "../icon";
 import { getDetailsUrl } from "../../navigation";
 import { lookupApiLink } from "../../api/kube-api";
+import { ItemObject } from "client/item.store";
 
 enum sortBy {
   namespace = "namespace",
@@ -23,7 +24,7 @@ enum sortBy {
 }
 
 interface Props extends Partial<KubeObjectListLayoutProps> {
-  className?: IClassName;
+  className?: ClassName;
   compact?: boolean;
   compactLimit?: number;
 }
@@ -36,7 +37,7 @@ const defaultProps: Partial<Props> = {
 export class Events extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
-  render() {
+  render(): JSX.Element {
     const { compact, compactLimit, className, ...layoutProps } = this.props;
     const events = (
       <KubeObjectListLayout
@@ -45,20 +46,20 @@ export class Events extends React.Component<Props> {
         store={eventStore}
         isSelectable={false}
         sortingCallbacks={{
-          [sortBy.namespace]: (event: KubeEvent) => event.getNs(),
-          [sortBy.type]: (event: KubeEvent) => event.involvedObject.kind,
-          [sortBy.object]: (event: KubeEvent) => event.involvedObject.name,
-          [sortBy.count]: (event: KubeEvent) => event.count,
-          [sortBy.age]: (event: KubeEvent) => event.metadata.creationTimestamp,
+          [sortBy.namespace]: (event: KubeEvent): string => event.getNs(),
+          [sortBy.type]: (event: KubeEvent): string => event.involvedObject.kind,
+          [sortBy.object]: (event: KubeEvent): string => event.involvedObject.name,
+          [sortBy.count]: (event: KubeEvent): number => event.count,
+          [sortBy.age]: (event: KubeEvent): string => event.metadata.creationTimestamp,
         }}
         searchFilters={[
-          (event: KubeEvent) => event.getSearchFields(),
-          (event: KubeEvent) => event.message,
-          (event: KubeEvent) => event.getSource(),
-          (event: KubeEvent) => event.involvedObject.name,
+          (event: KubeEvent): string[] => event.getSearchFields(),
+          (event: KubeEvent): string => event.message,
+          (event: KubeEvent): string => event.getSource(),
+          (event: KubeEvent): string => event.involvedObject.name,
         ]}
         renderHeaderTitle={<Trans>Events</Trans>}
-        customizeHeader={({ title, info }) => (
+        customizeHeader={({ title, info }): React.ReactNode => (
           compact ? title : ({
             info: (
               <>
@@ -82,7 +83,7 @@ export class Events extends React.Component<Props> {
           { title: <Trans>Count</Trans>, className: "count", sortBy: sortBy.count },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
         ]}
-        renderTableContents={(event: KubeEvent) => {
+        renderTableContents={(event: KubeEvent): (string | React.ReactNode | JSX.Element)[] => {
           const { involvedObject, type, message } = event;
           const { kind, name } = involvedObject;
           const tooltipId = `message-${event.getId()}`;
@@ -106,18 +107,18 @@ export class Events extends React.Component<Props> {
             },
             event.getNs(),
             kind,
-            <Link to={detailsUrl} title={name} onClick={stopPropagation}>{name}</Link>,
+            <Link key="name" to={detailsUrl} title={name} onClick={stopPropagation}>{name}</Link>,
             event.getSource(),
             event.count,
             event.getAge(),
-          ]
+          ];
         }}
         virtual={!compact}
         filterItems={[
-          items => compact ? items.slice(0, compactLimit) : items,
+          (items): ItemObject[] => compact ? items.slice(0, compactLimit) : items,
         ]}
       />
-    )
+    );
     if (compact) {
       return events;
     }
@@ -125,6 +126,6 @@ export class Events extends React.Component<Props> {
       <MainLayout>
         {events}
       </MainLayout>
-    )
+    );
   }
 }

dashboard/client/components/+events/kube-event-details.tsx

@@ -6,7 +6,6 @@ import { Trans } from "@lingui/macro";
 import { KubeObject } from "../../api/kube-object";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { cssNames } from "../../utils";
-import { Icon } from "../icon";
 import { eventStore } from "./event.store";
 
 interface Props {
@@ -15,11 +14,11 @@ interface Props {
 
 @observer
 export class KubeEventDetails extends React.Component<Props> {
-  async componentDidMount() {
-    eventStore.loadAll();
+  async componentDidMount(): Promise<void> {
+    await eventStore.loadAll();
   }
 
-  render() {
+  render(): JSX.Element {
     const { object } = this.props;
     const events = eventStore.getEventsByObject(object);
     if (!events.length) {
@@ -27,7 +26,7 @@ export class KubeEventDetails extends React.Component<Props> {
         <DrawerTitle className="flex gaps align-center">
           <span><Trans>Events</Trans></span>
         </DrawerTitle>
-      )
+      );
     }
     return (
       <>
@@ -36,7 +35,7 @@ export class KubeEventDetails extends React.Component<Props> {
         </DrawerTitle>
         <div className="KubeEventDetails">
           {events.map(evt => {
-            const { message, count, lastTimestamp, involvedObject } = evt
+            const { message, count, lastTimestamp, involvedObject } = evt;
             return (
               <div className="event" key={evt.getId()}>
                 <div className={cssNames("title", { warning: evt.isWarning() })}>
@@ -55,10 +54,10 @@ export class KubeEventDetails extends React.Component<Props> {
                   {lastTimestamp}
                 </DrawerItem>
               </div>
-            )
+            );
           })}
         </div>
       </>
-    )
+    );
   }
 }

dashboard/client/components/+events/kube-event-icon.tsx

@@ -21,11 +21,13 @@ const defaultProps: Partial<Props> = {
 export class KubeEventIcon extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
-  render() {
+  render(): JSX.Element {
     const { object, showWarningsOnly, filterEvents } = this.props;
     const events = eventStore.getEventsByObject(object);
     let warnings = events.filter(evt => evt.isWarning());
-    if (filterEvents) warnings = filterEvents(warnings);
+    if (filterEvents) {
+      warnings = filterEvents(warnings);
+    }
     if (!events.length || (showWarningsOnly && !warnings.length)) {
       return null;
     }
@@ -44,6 +46,6 @@ export class KubeEventIcon extends React.Component<Props> {
           </TooltipContent>
         )}
       />
-    )
+    );
   }
 }