ui: Format all files using prettier

prettier -w .

Author: metalmatze

ui/.prettierrc

@@ -1,6 +1,10 @@
 {
+  "arrowParens": "always",
+  "bracketSpacing": false,
+  "bracketSameLine": true,
   "printWidth": 100,
+  "semi": false,
   "singleQuote": true,
-  "bracketSpacing": false,
-  "arrowParens": "avoid"
+  "trailingComma": "all",
+  "useTabs": false
 }

ui/src/App.tsx

@@ -1,47 +1,49 @@
-import React from 'react';
-import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import React from 'react'
+import {BrowserRouter, Route, Routes} from 'react-router-dom'
 import List from './pages/List'
 import Detail from './pages/Detail'
 
 // @ts-expect-error - this is passed from the HTML template.
-export const PATH_PREFIX: string = window.PATH_PREFIX;
+export const PATH_PREFIX: string = window.PATH_PREFIX
 // @ts-expect-error - this is passed from the HTML template.
-export const API_BASEPATH: string = window.API_BASEPATH;
+export const API_BASEPATH: string = window.API_BASEPATH
 // @ts-expect-error - this is passed from the HTML template.
-export const PROMETHEUS_URL: string = window.PROMETHEUS_URL;
+export const PROMETHEUS_URL: string = window.PROMETHEUS_URL
 
 const App = () => {
   const basename = `/${PATH_PREFIX.replace(/^\//, '').replace(/\/$/, '')}`
   return (
     <BrowserRouter basename={basename}>
       <Routes>
-        <Route path="/" element={<List/>}/>
-        <Route path="/objectives" element={<Detail/>}/>
+        <Route path="/" element={<List />} />
+        <Route path="/objectives" element={<Detail />} />
       </Routes>
     </BrowserRouter>
   )
 }
 
-export const dateFormatter = (timeRange: number) => (t: number): string => {
-  const date = new Date(t * 1000)
-  const year = date.getUTCFullYear()
-  const month = date.getUTCMonth() + 1
-  const day = date.getUTCDate()
-  const hour = date.getUTCHours()
-  const minute = date.getUTCMinutes()
-
-  const monthLeading = month > 9 ? month : `0${month}`
-  const dayLeading = day > 9 ? day : `0${day}`
-  const hourLeading = hour > 9 ? hour : `0${hour}`
-  const minuteLeading = minute > 9 ? minute : `0${minute}`
+export const dateFormatter =
+  (timeRange: number) =>
+  (t: number): string => {
+    const date = new Date(t * 1000)
+    const year = date.getUTCFullYear()
+    const month = date.getUTCMonth() + 1
+    const day = date.getUTCDate()
+    const hour = date.getUTCHours()
+    const minute = date.getUTCMinutes()
+
+    const monthLeading = month > 9 ? month : `0${month}`
+    const dayLeading = day > 9 ? day : `0${day}`
+    const hourLeading = hour > 9 ? hour : `0${hour}`
+    const minuteLeading = minute > 9 ? minute : `0${minute}`
+
+    if (timeRange >= 24 * 3600 * 1000) {
+      return `${year}-${monthLeading}-${dayLeading} ${hourLeading}:${minuteLeading}`
+    }
 
-  if (timeRange >= 24 * 3600 * 1000) {
-    return `${year}-${monthLeading}-${dayLeading} ${hourLeading}:${minuteLeading}`
+    return `${hourLeading}:${minuteLeading}`
   }
 
-  return `${hourLeading}:${minuteLeading}`
-}
-
 export const dateFormatterFull = (t: number): string => {
   const date = new Date(t * 1000)
   const year = date.getUTCFullYear()
@@ -58,77 +60,77 @@ export const dateFormatterFull = (t: number): string => {
   return `${year}-${monthLeading}-${dayLeading} ${hourLeading}:${minuteLeading}`
 }
 
-export default App;
-
+export default App
 
 // From prometheus/prometheus
 
 export const formatDuration = (d: number): string => {
-  let ms = d;
-  let r = '';
+  let ms = d
+  let r = ''
   if (ms === 0) {
-    return '0s';
+    return '0s'
   }
 
   const f = (unit: string, mult: number, exact: boolean) => {
     if (exact && ms % mult !== 0) {
-      return;
+      return
     }
-    const v = Math.floor(ms / mult);
+    const v = Math.floor(ms / mult)
     if (v > 0) {
-      r += `${v}${unit}`;
-      ms -= v * mult;
+      r += `${v}${unit}`
+      ms -= v * mult
     }
-  };
+  }
 
   // Only format years and weeks if the remainder is zero, as it is often
   // easier to read 90d than 12w6d.
-  f('y', 1000 * 60 * 60 * 24 * 365, true);
-  f('w', 1000 * 60 * 60 * 24 * 7, true);
+  f('y', 1000 * 60 * 60 * 24 * 365, true)
+  f('w', 1000 * 60 * 60 * 24 * 7, true)
 
-  f('d', 1000 * 60 * 60 * 24, false);
-  f('h', 1000 * 60 * 60, false);
-  f('m', 1000 * 60, false);
-  f('s', 1000, false);
-  f('ms', 1, false);
+  f('d', 1000 * 60 * 60 * 24, false)
+  f('h', 1000 * 60 * 60, false)
+  f('m', 1000 * 60, false)
+  f('s', 1000, false)
+  f('ms', 1, false)
 
-  return r;
-};
+  return r
+}
 
 export const parseDuration = (durationStr: string): number | null => {
   if (durationStr === '') {
-    return null;
+    return null
   }
   if (durationStr === '0') {
     // Allow 0 without a unit.
-    return 0;
+    return 0
   }
 
-  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);
+  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 === null) {
-    return null;
+    return null
   }
 
-  let dur = 0;
+  let dur = 0
 
   // Parse the match at pos `pos` in the regex and use `mult` to turn that
   // into ms, then add that value to the total parsed duration.
   const m = (pos: number, mult: number) => {
     if (matches[pos] === undefined) {
-      return;
+      return
     }
-    const n = parseInt(matches[pos]);
-    dur += n * mult;
-  };
-
-  m(2, 1000 * 60 * 60 * 24 * 365); // y
-  m(4, 1000 * 60 * 60 * 24 * 7); // w
-  m(6, 1000 * 60 * 60 * 24); // d
-  m(8, 1000 * 60 * 60); // h
-  m(10, 1000 * 60); // m
-  m(12, 1000); // s
-  m(14, 1); // ms
-
-  return dur;
-};
+    const n = parseInt(matches[pos])
+    dur += n * mult
+  }
+
+  m(2, 1000 * 60 * 60 * 24 * 365) // y
+  m(4, 1000 * 60 * 60 * 24 * 7) // w
+  m(6, 1000 * 60 * 60 * 24) // d
+  m(8, 1000 * 60 * 60) // h
+  m(10, 1000 * 60) // m
+  m(12, 1000) // s
+  m(14, 1) // ms
+
+  return dur
+}