cybertec-postgresql · pashagolub · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -49,11 +49,14 @@ jobs:
         restore-keys: |
           ${{ runner.os }}-npm-        
 
-    - name: Build
+    - name: WebUI Build
       run: |
         cd internal/webui
-        yarn install --network-timeout 100000 && yarn build
-        cd -
+        yarn install --network-timeout 100000
+        yarn build
+
+    - name: Go Build
+      run: |
         go generate ./api/pb/
         go build ./cmd/pgwatch
 

diff --git a/internal/webui/index.html b/internal/webui/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>{{if .BasePath}}
+  <base href="/{{.BasePath}}/">{{end}}
+  <meta charset="utf-8" />
+  <link rel="icon" href="./favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="./logo192.png" />
+  <link rel="manifest" href="./manifest.json" />
+  <title>pgwatch dashboard</title>
+  <script>window.__PGWATCH_BASE_PATH__ = '{{if .BasePath}}/{{.BasePath}}{{end}}';</script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/internal/webui/package.json b/internal/webui/package.json
@@ -1,17 +1,46 @@
 {
   "name": "web-gui",
   "version": "0.1.0",
-  "homepage": ".",
   "private": true,
+  "homepage": ".",
+  "license": "MIT",
+  "main": "index.js",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "cross-env BUILD_PATH=../webserver/build react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint:ts": "eslint --ext=jsx,ts,tsx src",
-    "lint:fix": "eslint --ext=jsx,ts,tsx src --fix",
+    "build": "vite build",
     "lint:cypress": "eslint --no-eslintrc --ext=ts -c cypress/.eslintrc cypress/e2e",
-    "lint:quick": "yarn lint:ts --cache"
+    "lint:fix": "eslint --ext=jsx,ts,tsx src --fix",
+    "lint:quick": "yarn lint:ts --cache",
+    "lint:ts": "eslint --ext=jsx,ts,tsx src",
+    "preview": "vite preview",
+    "start": "vite"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended"
+    ]
+  },
+  "resolutions": {
+    "brace-expansion": "^2.0.2",
+    "cookie": "^0.7.0",
+    "form-data": "^4.0.0",
+    "on-headers": "^1.1.0",
+    "path-to-regexp": "^0.1.12",
+    "postcss": "^8.4.31",
+    "serialize-javascript": "^6.0.2",
+    "webpack-dev-server": "^5.2.1"
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
@@ -23,9 +52,6 @@
     "@mui/system": "^5.16.7",
     "@mui/x-data-grid": "^7.29.8",
     "@tanstack/react-query": "^4.24.4",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.4.3",
     "axios": "^1.12.0",
     "classnames": "^2.5.1",
     "form-data": "^4.0.4",
@@ -35,58 +61,33 @@
     "react-hook-form": "^7.43.1",
     "react-markdown": "^10.1.0",
     "react-router-dom": "6.8.1",
-    "react-scripts": "5.0.1",
     "react-use-websocket": "^4.5.0",
     "tss-react": "^4.9.6",
     "typescript": "^4.9.5",
-    "web-vitals": "^3.1.1",
     "yaml": "^2.4.1",
     "yup": "^1.4.0"
   },
   "devDependencies": {
     "@types/eslint": "^8.21.0",
-    "@types/jest": "^29.4.0",
     "@types/node": "^18.13.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "@vitejs/plugin-react": "^5.1.3",
     "cross-env": "^10.1.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "2.8.4"
-  },
-  "resolutions": {
-    "react-scripts/@svgr/webpack/@svgr/plugin-svgo/svgo/css-select": ">=5.1.0",
-    "form-data": "^4.0.0",
-    "postcss": "^8.4.31",
-    "serialize-javascript": "^6.0.2",
-    "webpack-dev-server": "^5.2.1",
-    "brace-expansion": "^2.0.2",
-    "path-to-regexp": "^0.1.12",
-    "cookie": "^0.7.0",
-    "on-headers": "^1.1.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "2.8.4",
+    "vite": "^7.3.1",
+    "vite-plugin-svgr": "^4.5.0",
+    "vite-tsconfig-paths": "^6.0.5"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "main": "index.js",
-  "license": "MIT",
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",
   "engines": {
     "node": ">=22.0.0",

diff --git a/internal/webui/public/index.html b/internal/webui/public/index.html
diff --git a/internal/webui/public/logo.svg b/internal/webui/public/logo.svg
diff --git a/internal/webui/src/App.test.tsx b/internal/webui/src/App.test.tsx
diff --git a/.../containers/MetricFormDialog/components/MetricForm/components/StepButtons/StepButtons.tsx b/.../containers/MetricFormDialog/components/MetricForm/components/StepButtons/StepButtons.tsx
@@ -15,7 +15,9 @@ export const StepButtons = (props: Props) => {
   const { formState: { errors } } = useFormContext<MetricFormValues>();
 
   const handleStepChange = (_e: any, value?: MetricFormStep) => {
-    value && setCurrentStep(value);
+    if (value) {
+      setCurrentStep(value);
+    }
   };
 
   const isStepError = (step: MetricFormStep) => {

diff --git a/.../containers/PresetFormDialog/components/PresetForm/components/StepButtons/StepButtons.tsx b/.../containers/PresetFormDialog/components/PresetForm/components/StepButtons/StepButtons.tsx
@@ -15,7 +15,9 @@ export const StepButtons = (props: Props) => {
   const { formState: { errors } } = useFormContext<PresetFormValues>();
 
   const handleStepChange = (_e: any, value?: PresetFormStep) => {
-    value && setCurrentStep(value);
+    if (value) {
+      setCurrentStep(value);
+    }
   };
 
   const isStepError = (step: PresetFormStep) => {
@@ -37,7 +39,7 @@ export const StepButtons = (props: Props) => {
     </ToggleButton>
   ));
 
-  return(
+  return (
     <ToggleButtonGroup
       color="primary"
       value={currentStep}

diff --git a/internal/webui/src/index.tsx b/internal/webui/src/index.tsx
@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { AlertProvider } from "utils/AlertContext";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 
 // Read base path from backend-injected configuration
 declare global {
@@ -27,7 +26,3 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();