ui: Add eslint and prettier config with fixes

metalmatze · metalmatze · commit 5b4624286c8d · 2022-04-12T15:53:17.000+02:00
diff --git a/ui/.eslintignore b/ui/.eslintignore
@@ -0,0 +1,4 @@
+build/
+node_modules/
+src/client/
+public/
diff --git a/ui/.eslintrc.yml b/ui/.eslintrc.yml
@@ -0,0 +1,41 @@
+# Parse all files with TypeScript.
+extends:
+  - 'standard-with-typescript'
+  - 'prettier'
+
+parserOptions:
+  project: './tsconfig.json'
+  createDefaultProgram: true
+
+plugins:
+  - prettier
+  - react
+  - '@typescript-eslint'
+  - react-hooks
+
+settings:
+  react:
+    version: detect
+
+env:
+  browser: true
+
+rules:
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: error
+
+  no-unused-vars: 0
+  '@typescript-eslint/no-unused-vars':
+    - error
+    - varsIgnorePattern: _
+      argsIgnorePattern: _
+
+  no-labels: [error, {allowLoop: true}]
+  no-void: 0
+  # TODO fix these in follow ups
+  '@typescript-eslint/explicit-function-return-type': 'off'
+  #'@typescript-eslint/member-delimiter-style':
+  #  - error
+  #  - singleline:
+  #      delimiter: 'semi'
+  #      requireLast: false
diff --git a/ui/.prettierignore b/ui/.prettierignore
@@ -0,0 +1,4 @@
+build/
+node_modules/
+src/client/
+public/
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "avoid"
+}
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -104,9 +104,9 @@ export const parseDuration = (durationStr: string): number | null => {
     return 0;
   }
 
-  const durationRE = new RegExp('^(([0-9]+)y)?(([0-9]+)w)?(([0-9]+)d)?(([0-9]+)h)?(([0-9]+)m)?(([0-9]+)s)?(([0-9]+)ms)?$');
+  const durationRE = /^(([0-9]+)y)?(([0-9]+)w)?(([0-9]+)d)?(([0-9]+)h)?(([0-9]+)m)?(([0-9]+)s)?(([0-9]+)ms)?$/
   const matches = durationStr.match(durationRE);
-  if (!matches) {
+  if (matches === null) {
     return null;
   }
 
diff --git a/ui/src/components/AlertsTable.tsx b/ui/src/components/AlertsTable.tsx
@@ -20,7 +20,7 @@ const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element =>
   useEffect(() => {
     const controller = new AbortController()
 
-    api.getMultiBurnrateAlerts({
+    void api.getMultiBurnrateAlerts({
       expr: labelsString(objective.labels),
       grouping: labelsString(grouping),
       inactive: true
diff --git a/ui/src/components/graphs/ErrorBudgetGraph.tsx b/ui/src/components/graphs/ErrorBudgetGraph.tsx
@@ -29,7 +29,7 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
   const [width, setWidth] = useState<number>(1000)
 
   const setWidthFromContainer = () => {
-    if (targetRef !== undefined && targetRef.current) {
+    if (targetRef !== undefined) {
       setWidth(targetRef.current.offsetWidth)
     }
   }
@@ -82,8 +82,8 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
   const budgetGradient = (u: uPlot) => {
     const width = u.ctx.canvas.width
     const height = u.ctx.canvas.height
-    const min = u.scales['y'].min
-    const max = u.scales['y'].max
+    const min = u.scales.y.min
+    const max = u.scales.y.max
 
     if (min == null || max == null) {
       return '#fff'
diff --git a/ui/src/components/graphs/ErrorsGraph.tsx b/ui/src/components/graphs/ErrorsGraph.tsx
@@ -30,7 +30,7 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
   const [width, setWidth] = useState<number>(500)
 
   const setWidthFromContainer = () => {
-    if (targetRef !== undefined && targetRef.current) {
+    if (targetRef !== undefined) {
       setWidth(targetRef.current.offsetWidth)
     }
   }
diff --git a/ui/src/components/graphs/RequestsGraph.tsx b/ui/src/components/graphs/RequestsGraph.tsx
@@ -30,7 +30,7 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
   const [width, setWidth] = useState<number>(500)
 
   const setWidthFromContainer = () => {
-    if (targetRef !== undefined && targetRef.current) {
+    if (targetRef !== undefined) {
       setWidth(targetRef.current.offsetWidth)
     }
   }
@@ -49,7 +49,7 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
     api.getREDRequests({ expr: labelsString(labels), grouping: labelsString(grouping), start, end })
       .then((r: QueryRange) => {
         const [x, ...ys] = r.values
-        let data: AlignedData = [x, ...ys] // explicitly give it the x then the rest of ys
+        const data: AlignedData = [x, ...ys] // explicitly give it the x then the rest of ys
 
         setRequestsLabels(r.labels)
         setRequestsQuery(r.query)
@@ -66,7 +66,7 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
   }, [api, labels, grouping, timeRange])
 
   // small state used while picking colors to reuse as little as possible
-  let pickedColors = {
+  const pickedColors = {
     'greens': 0,
     'yellows': 0,
     'blues': 0,
@@ -144,24 +144,24 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
 const labelColor = (picked: { [color: string]: number }, label: string): string => {
   let color = ''
   if (label === '{}') {
-    color = greens[picked['greens'] % greens.length]
-    picked['greens']++
+    color = greens[picked.greens % greens.length]
+    picked.greens++
   }
   if (label.match(/"(2\d{2}|OK)"/) != null) {
-    color = greens[picked['greens'] % greens.length]
-    picked['greens']++
+    color = greens[picked.greens % greens.length]
+    picked.greens++
   }
   if (label.match(/"(3\d{2})"/) != null) {
-    color = yellows[picked['yellows'] % yellows.length]
-    picked['yellows']++
+    color = yellows[picked.yellows % yellows.length]
+    picked.yellows++
   }
   if (label.match(/"(4\d{2}|Canceled|InvalidArgument|NotFound|AlreadyExists|PermissionDenied|Unauthenticated|ResourceExhausted|FailedPrecondition|Aborted|OutOfRange)"/) != null) {
-    color = blues[picked['blues'] % blues.length]
-    picked['blues']++
+    color = blues[picked.blues % blues.length]
+    picked.blues++
   }
   if (label.match(/"(5\d{2}|Unknown|DeadlineExceeded|Unimplemented|Internal|Unavailable|DataLoss)"/) != null) {
-    color = reds[picked['reds'] % reds.length]
-    picked['reds']++
+    color = reds[picked.reds % reds.length]
+    picked.reds++
   }
   return color
 }
diff --git a/ui/src/components/graphs/gaps.tsx b/ui/src/components/graphs/gaps.tsx
@@ -7,9 +7,9 @@ export const seriesGaps = (start: number, end: number) => (u: uPlot, seriesID: n
     delta = (2 * (end - start) / 1000)
   }
 
-  let gaps: uPlot.Series.Gaps = []
+  const gaps: uPlot.Series.Gaps = []
 
-  let xData = u.data[0]
+  const xData = u.data[0]
   for (let i = startIdx + 1; i <= endIdx; i++) {
     if (xData[i] - xData[i - 1] > delta) {
       uPlot.addGap(
diff --git a/ui/src/labels.tsx b/ui/src/labels.tsx
@@ -1,4 +1,8 @@
-export type Labels = { [key: string]: string }
+export interface Labels {
+  [key: string]: string
+}
+
+export const MetricName = '__name__'
 
 export const labelsString = (lset: { [key: string]: string; } | undefined): string => {
   if (lset === undefined) {
@@ -19,9 +23,9 @@ export const parseLabels = (expr: string | null): Labels => {
     return {}
   }
   expr = expr.replace(/^{+|}+$/gm, '')
-  let lset: { [key: string]: string; } = {}
+  const lset: { [key: string]: string; } = {}
   expr.split(',').forEach((s: string) => {
-    let pair = s.split('=')
+    const pair = s.split('=')
     if (pair.length !== 2) {
       throw new Error('pair does not have key and value')
     }
diff --git a/ui/src/pages/Detail.tsx b/ui/src/pages/Detail.tsx
@@ -11,7 +11,7 @@ import {
 } from '../client'
 import { API_BASEPATH, formatDuration, parseDuration } from '../App'
 import Navbar from '../components/Navbar'
-import { parseLabels } from "../labels";
+import {MetricName, parseLabels} from "../labels";
 import ErrorBudgetGraph from "../components/graphs/ErrorBudgetGraph";
 import RequestsGraph from "../components/graphs/RequestsGraph";
 import ErrorsGraph from "../components/graphs/ErrorsGraph";
@@ -44,7 +44,7 @@ const Detail = () => {
     const grouping = groupingExpr == null ? '' : groupingExpr
     const groupingLabels = parseLabels(grouping)
 
-    const name: string = labels['__name__']
+    const name: string = labels[MetricName]
 
     const timeRangeQuery = query.get('timerange')
     const timeRangeParsed = timeRangeQuery != null ? parseDuration(timeRangeQuery) : null
@@ -159,7 +159,7 @@ const Detail = () => {
   ]
 
   const handleTimeRangeClick = (t: number) => () => {
-    navigate(`/objectives?expr=${expr}&grouping=${groupingExpr}&timerange=${formatDuration(t)}`)
+    navigate(`/objectives?expr=${expr}&grouping=${groupingExpr ?? ''}&timerange=${formatDuration(t)}`)
   }
 
   const renderAvailability = () => {
@@ -251,7 +251,7 @@ const Detail = () => {
   }
 
   const labelBadges = Object.entries({ ...objective.labels, ...groupingLabels })
-    .filter((l: [string, string]) => l[0] !== '__name__')
+    .filter((l: [string, string]) => l[0] !== MetricName)
     .map((l: [string, string]) => (
       <Badge key={l[1]} bg='light' text='dark' className="fw-normal">{l[0]}={l[1]}</Badge>
     ))
diff --git a/ui/src/pages/List.tsx b/ui/src/pages/List.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +build/
 +node_modules/
 +src/client/
 +public/
Original file line number	Diff line number	Diff line change
`@@ -104,9 +104,9 @@ export const parseDuration = (durationStr: string): number \| null => {`
`104`	`104`	`return 0;`
`105`	`105`	`}`
`106`	`106`
`107`		`- const durationRE = new RegExp('^(([0-9]+)y)?(([0-9]+)w)?(([0-9]+)d)?(([0-9]+)h)?(([0-9]+)m)?(([0-9]+)s)?(([0-9]+)ms)?$');`
	`107`	`+ const durationRE = /^(([0-9]+)y)?(([0-9]+)w)?(([0-9]+)d)?(([0-9]+)h)?(([0-9]+)m)?(([0-9]+)s)?(([0-9]+)ms)?$/`
`108`	`108`	`const matches = durationStr.match(durationRE);`
`109`		`- if (!matches) {`
	`109`	`+ if (matches === null) {`
`110`	`110`	`return null;`
`111`	`111`	`}`
`112`	`112`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr`
`30`	`30`	`const [width, setWidth] = useState<number>(500)`
`31`	`31`
`32`	`32`	`const setWidthFromContainer = () => {`
`33`		`- if (targetRef !== undefined && targetRef.current) {`
	`33`	`+ if (targetRef !== undefined) {`
`34`	`34`	`setWidth(targetRef.current.offsetWidth)`
`35`	`35`	`}`
`36`	`36`	`}`