Use eslint for linting UI code.

Summary: Fix all eslint errors.

Test Plan: typescript compiles

Reviewers: zasgar, michelle, #engineering

Reviewed By: zasgar, #engineering

JIRA Issues: PC-168

Differential Revision: https://phab.corp.pixielabs.ai/D4767

GitOrigin-RevId: 820a0dd488d7b89cc2bda6321a6f854779a79dc3

src/ui/src/types/svg.d.ts

+declare module '*.svg'

src/ui/src/utils/analytics.ts

 /// <reference types="@types/segment-analytics" />
 
-import {SEGMENT_UI_WRITE_KEY} from 'containers/constants';
-import {PIXIE_CLOUD_VERSION} from 'utils/env';
+import { SEGMENT_UI_WRITE_KEY } from 'containers/constants';
+import { PIXIE_CLOUD_VERSION } from 'utils/env';
 
 declare global {
     interface Window {
@@ -25,6 +25,7 @@ class Analytics {
     }
 
     load() {
+        // eslint-disable-next-line @typescript-eslint/camelcase
         window.__pixie_cloud_version__ = PIXIE_CLOUD_VERSION;
         window.analytics.load(SEGMENT_UI_WRITE_KEY);
     }

src/ui/src/utils/autosizer.tsx

 import * as React from 'react';
-import {AutoSizer} from 'react-virtualized';
+import { AutoSizer } from 'react-virtualized';
 
 interface AutoSizerProps {
   width: number;
@@ -9,11 +9,13 @@ interface AutoSizerProps {
 export type WithAutoSizerProps<T> = T & AutoSizerProps;
 
 export default function withAutoSizer<T>(WrappedComponent: React.ComponentType<T & AutoSizerProps>) {
-  return (props: T) => (
-    <AutoSizer>
-      {({ height, width }) => (
-        <WrappedComponent width={Math.max(width, 0)} height={Math.max(height, 0)} {...props} />
-      )}
-    </AutoSizer>
-  );
+  return function AutoSizerWrapper(props: T) {
+    return (
+      <AutoSizer>
+        {({ height, width }) => (
+          <WrappedComponent width={Math.max(width, 0)} height={Math.max(height, 0)} {...props} />
+        )}
+      </AutoSizer>
+    );
+  };
 }

src/ui/src/utils/env.tsx

-import {DOMAIN_NAME} from 'containers/constants';
+import { DOMAIN_NAME } from 'containers/constants';
 import * as moment from 'moment';
 
 const BUILD_NUMBER = process.env.BUILD_NUMBER;
@@ -13,20 +13,16 @@ const parts = [];
 if (typeof BUILD_SCM_REVISION === 'string') {
   parts.push(BUILD_SCM_REVISION.substr(0, 7));
 }
-if (!!BUILD_SCM_STATUS) {
+if (BUILD_SCM_STATUS) {
   parts.push(BUILD_SCM_STATUS);
 }
 parts.push(isNaN(timestampSec) ? Math.floor(date.valueOf() / 1000) : timestampSec);
-if (!!BUILD_NUMBER) {
+if (BUILD_NUMBER) {
   parts.push(BUILD_NUMBER);
 }
 
 export const PIXIE_CLOUD_VERSION = `${dateStr}+${parts.join('.')}`;
 
-export function isProd(): boolean {
-  return !isDev() && !isStaging();
-}
-
 export function isDev(): boolean {
   return DOMAIN_NAME.startsWith('dev');
 }
@@ -34,3 +30,7 @@ export function isDev(): boolean {
 export function isStaging(): boolean {
   return DOMAIN_NAME.startsWith('staging');
 }
+
+export function isProd(): boolean {
+  return !isDev() && !isStaging();
+}

src/ui/src/utils/format-data.tsx

@@ -20,7 +20,7 @@ export function formatInt64Data(val: string): string {
   return numeral(val).format('0,0');
 }
 
-export function formatFloat64Data(val: number, formatStr: string = '0[.]00'): string {
+export function formatFloat64Data(val: number, formatStr = '0[.]00'): string {
   // Numeral.js doesn't actually format NaNs, it ignores them.
   if (isNaN(val)) {
     return 'NaN';
@@ -125,6 +125,7 @@ export const JSONData = React.memo<JSONDataProps>((props) => {
   }
   return <span className={clsx(`formatted_data--json-${cls}`, props.className)}>{String(data)}</span>;
 });
+JSONData.displayName = 'JSONData';
 
 export function LatencyData(data: string) {
   const floatVal = parseFloat(data);

src/ui/src/utils/parse-compiler-errors.tsx

-import {Status} from 'types/generated/vizier_pb';
+import { Status } from 'types/generated/vizier_pb';
 
 interface CompilerError {
   line: number;
@@ -6,6 +6,14 @@ interface CompilerError {
   message: string;
 }
 
+function compare(err1: CompilerError, err2: CompilerError) {
+  const lineDiff = err1.line - err2.line;
+  if (lineDiff !== 0) {
+    return lineDiff;
+  }
+  return err1.column - err2.column;
+}
+
 export function ParseCompilerErrors(status: Status): CompilerError[] {
   const out = [];
   const msg = status.getMessage();
@@ -31,11 +39,3 @@ export function ParseCompilerErrors(status: Status): CompilerError[] {
   out.sort(compare);
   return out;
 }
-
-function compare(err1: CompilerError, err2: CompilerError) {
-  const lineDiff = err1.line - err2.line;
-  if (lineDiff !== 0) {
-    return lineDiff;
-  }
-  return err1.column - err2.column;
-}

src/ui/src/utils/query-params.ts

 import * as QueryString from 'query-string';
 
-export function setQueryParams(params: { [key: string]: string }) {
-  const { protocol, host, pathname } = window.location;
-  const currentParams = getQueryParams();
-  const newQueryString = QueryString.stringify({ ...currentParams, ...params });
-  const search = newQueryString ? `?${newQueryString}` : '';
-  const newurl = `${protocol}//${host}${pathname}${search}`;
-
-  window.history.pushState({ path: newurl }, '', newurl);
-}
-
 export function getQueryParams(): { [key: string]: string } {
   const params = {};
   const parsed = QueryString.parse(location.search);
@@ -20,3 +10,13 @@ export function getQueryParams(): { [key: string]: string } {
   }
   return params;
 }
+
+export function setQueryParams(params: { [key: string]: string }) {
+  const { protocol, host, pathname } = window.location;
+  const currentParams = getQueryParams();
+  const newQueryString = QueryString.stringify({ ...currentParams, ...params });
+  const search = newQueryString ? `?${newQueryString}` : '';
+  const newurl = `${protocol}//${host}${pathname}${search}`;
+
+  window.history.pushState({ path: newurl }, '', newurl);
+}

src/ui/src/utils/redirect-utils.tsx

-import {DOMAIN_NAME} from 'containers/constants';
+import { DOMAIN_NAME } from 'containers/constants';
 import * as _ from 'lodash';
 
 interface StringMap {
   [s: string]: string;
 }
 
-export function redirect(path: string, params: StringMap) {
-  window.location.href = getRedirectPath(path, params);
-}
-
 export function getRedirectPath(path: string, params: StringMap) {
   const port = window.location.port ? ':' + window.location.port : '';
   let queryParams = '';
@@ -23,3 +19,7 @@ export function getRedirectPath(path: string, params: StringMap) {
 
   return window.location.protocol + '//' + DOMAIN_NAME + port + path + queryParams;
 }
+
+export function redirect(path: string, params: StringMap) {
+  window.location.href = getRedirectPath(path, params);
+}

src/ui/stories/.eslintrc.json

+{
+  "env": {
+    "node": true
+  }
+}

src/ui/stories/accordion.tsx

-import {Accordion} from 'components/accordion';
+import { Accordion } from 'components/accordion';
 import * as React from 'react';
 
-import {storiesOf} from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 
 storiesOf('Accordion', module)
   .add('Basic', () => (