Add Github Action workflow for the UI code (#476)

* Enable prettier autoformat

* Add new Github Action for the UI

* Workflow fixes

.github/workflows/check_js.yml

@@ -0,0 +1,46 @@
+name: Check JS Code
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+    - 'ui/**'
+  pull_request:
+    branches: [ main ]
+    paths:
+    - 'ui/**'
+  workflow_dispatch: {}
+
+jobs:
+  build:
+    name: Check JS Code
+    timeout-minutes: 30
+
+    runs-on: ubuntu-22.04
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set Up Node 20
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Install Dependencies
+      working-directory: ui
+      run: npm install
+
+    - name: Check Formatting (prettier)
+      working-directory: ui
+      run: npm run fcheck
+      if: success() || failure()
+
+    - name: Lint (eslint)
+      working-directory: ui
+      run: npm run lint
+      if: success() || failure()
+
+    - name: Run Build (vite)
+      working-directory: ui
+      run: npm run build
+      if: success() || failure()

ui/.eslintignore

@@ -0,0 +1 @@
+dist/**

ui/.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: {},
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

ui/.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+__pycache__

ui/package.json

@@ -6,9 +6,12 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint .",
     "preview": "vite preview",
-    "watch": "vite build --watch"
+    "watch": "vite build --watch",
+    "format": "prettier --write .",
+    "check": "prettier --check . ; eslint .",
+    "fcheck": "prettier --check ."
   },
   "dependencies": {
     "axios": "^1.6.7",
@@ -22,7 +25,7 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "3.2.5",

ui/src/components/PerfView.jsx

@@ -36,7 +36,7 @@ function PerfView({ metricsData }) {
             yLabel="p90 Latency (s)"
           />
         </div>
-        <div style={{"marginTop": "30px"}}>
+        <div style={{ marginTop: "30px" }}>
           <h2>Transaction Latency</h2>
           <LatencyPlot
             seriesName="Transaction Latency"

ui/src/components/TableView.jsx

@@ -1,6 +1,6 @@
 import "./styles/TableView.css";
 
-function WriterMarker({color}) {
+function WriterMarker({ color }) {
   return <div class={`db-table-view-writer ${color}`}>W</div>;
 }