UI for VictoriaTraces

app/vmui/Dockerfile-build

@@ -3,6 +3,12 @@ FROM node:20-alpine3.19
 # Sets a custom location for the npm cache, preventing access errors in system directories
 ENV NPM_CONFIG_CACHE=/build/.npm
 
+# Enable pnpm via Corepack (Node 20 ships with it) and pin a pnpm version for stability
+RUN corepack enable && corepack prepare pnpm@9.15.4 --activate
+
+# Put pnpm store under /build (bind-mounted), so it is writable even when running as host uid:gid
+ENV PNPM_STORE_DIR=/build/.pnpm-store
+
 RUN apk update && \
     apk upgrade && \
     apk add --no-cache bash bash-doc bash-completion libtool autoconf automake nasm pkgconfig libpng gcc make g++ zlib-dev gawk && \

app/vmui/Makefile

@@ -9,7 +9,7 @@ vmui-build: vmui-package-base-image
 		--mount type=bind,src="$(shell pwd)/app/vmui",dst=/build \
 		-w /build/packages/vmui \
 		--entrypoint=/bin/bash \
-		vmui-builder-image -c "npm install && npm run build"
+		vmui-builder-image -c "corepack enable && pnpm install --frozen-lockfile && pnpm run build"
 
 vmui-update: vmui-build
 	rm -rf app/vtselect/vmui/* && mv app/vmui/packages/vmui/build/* app/vtselect/vmui && rm -rf app/vtselect/vmui/dashboards

app/vmui/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "vmui-workspace",
+  "private": true,
+  "packageManager": "pnpm@9.15.0",
+  "devDependencies": {}
+}

app/vmui/packages/jaeger-ui-lite/.babelrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "production": {
+      "plugins": [
+        [
+          "babel-plugin-react-remove-properties",
+          {
+            "properties": [
+              "data-testid"
+            ]
+          }
+        ]
+      ]
+    }
+  }
+}

app/vmui/packages/jaeger-ui-lite/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  // Let ESLint know about constants injected by the build system.
+  // These aren't technically globals (in that they are replaced by literals at build time),
+  // but from a linter perspective, they are globals and so need to be explicitly listed.
+  // https://vitejs.dev/config/shared-options.html#define
+  globals: {
+    __REACT_APP_GA_DEBUG__: false,
+    __REACT_APP_VSN_STATE__: false,
+    __APP_ENVIRONMENT__: false,
+  },
+  overrides: [
+    {
+      // Instruct ESLint not to lint build tooling files as part of the project.
+      files: ['vite.config.ts', 'src/vite-env.d.ts'],
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
+};

app/vmui/packages/jaeger-ui-lite/.gitignore

@@ -0,0 +1,9 @@
+*.tsbuildinfo
+index.d.ts
+
+# Bundle size breakdown generated by rollup-plugin-visualizer
+stats.html
+
+# Local UI config files for development (see README.md for details)
+jaeger-ui.config.js
+jaeger-ui.config.json

app/vmui/packages/jaeger-ui-lite/.stylelintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": "stylelint-config-recommended",
+  "plugins": ["stylelint-value-no-unknown-custom-properties"],
+  "rules": {
+    "csstools/value-no-unknown-custom-properties": [
+      true,
+      {
+        "importFrom": ["src/components/common/vars.css"]
+      }
+    ],
+    "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "property-no-deprecated": null,
+    "declaration-block-no-duplicate-properties": null,
+    "declaration-property-value-no-unknown": null,
+    "no-duplicate-selectors": null,
+    "shorthand-property-no-redundant-values": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "declaration-property-value-keyword-no-deprecated": null
+  }
+}

app/vmui/packages/jaeger-ui-lite/package.json

@@ -0,0 +1,118 @@
+{
+  "private": true,
+  "name": "jaeger-ui-lite",
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "license": "Apache-2.0",
+  "homepage": ".",
+  "devDependencies": {
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/deep-freeze": "0.1.5",
+    "@types/history": "4.7.11",
+    "@types/jest": "30.0.0",
+    "@types/lodash": "4.17.21",
+    "@types/object-hash": "3.0.6",
+    "@types/react": "19.2.7",
+    "@types/react-router-dom": "5.3.3",
+    "@types/redux-actions": "2.2.1",
+    "@vitejs/plugin-legacy": "7.2.1",
+    "@vitejs/plugin-react": "5.1.1",
+    "babel-jest": "30.2.0",
+    "babel-plugin-inline-react-svg": "2.0.2",
+    "babel-plugin-react-remove-properties": "0.3.1",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "jest-junit": "16.0.0",
+    "less": "4.5.1",
+    "terser": "5.44.1",
+    "vite": "7.3.0"
+  },
+  "dependencies": {
+    "@pyroscope/flamegraph": "0.21.4",
+    "@sentry/browser": "10.32.0",
+    "antd": "6.1.1",
+    "chance": "1.1.13",
+    "classnames": "2.5.1",
+    "combokeys": "3.0.1",
+    "copy-to-clipboard": "3.3.3",
+    "dayjs": "1.11.19",
+    "deep-freeze": "0.0.1",
+    "drange": "2.0.1",
+    "history": "4.10.1",
+    "isomorphic-fetch": "3.0.0",
+    "lodash": "4.17.21",
+    "logfmt": "1.4.0",
+    "lru-memoize": "1.1.0",
+    "match-sorter": "8.2.0",
+    "memoize-one": "6.0.0",
+    "object-hash": "3.0.0",
+    "query-string": "9.3.1",
+    "react": "19.2.0",
+    "react-circular-progressbar": "2.2.0",
+    "react-dom": "19.2.0",
+    "react-icons": "5.5.0",
+    "react-is": "19.2.0",
+    "react-json-view-lite": "2.5.0",
+    "react-redux": "9.2.0",
+    "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "6.30.0",
+    "@tanstack/react-virtual": "3.13.12",
+    "recharts": "3.6.0",
+    "redux": "5.0.1",
+    "redux-actions": "3.0.3",
+    "redux-first-history": "5.2.0",
+    "redux-promise-middleware": "6.2.0",
+    "store": "2.0.12",
+    "tween-functions": "1.2.0",
+    "u-basscss": "2.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "react-redux": "^9"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) vite build",
+    "coverage": "npm run test-ci -- --coverage",
+    "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) vite",
+    "start": "vite",
+    "test": "jest --silent --color --maxWorkers=50%",
+    "test-ci": "CI=1 jest --silent --color --maxWorkers=4"
+  },
+  "jest": {
+    "globalSetup": "./test/jest.global-setup.js",
+    "setupFilesAfterEnv": [
+      "./test/jest-per-test-setup.js"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts",
+      "!src/setup*.js",
+      "!src/utils/DraggableManager/demo/*.tsx",
+      "!src/utils/test/**/*.js",
+      "!src/demo/**/*.js",
+      "!src/types/*"
+    ],
+    "reporters": [
+      "default",
+      "jest-junit"
+    ],
+    "transform": {
+      "\\.(css|png)$": "./test/generic-file-transform.js",
+      "\\.([jt]sx?|svg)$": "./test/babel-transform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\\\\\]node_modules[/\\\\\\\\](?!redux-actions).+\\\\.(js|jsx|mjs|cjs|ts|tsx)$"
+    ],
+    "testEnvironment": "jsdom",
+    "snapshotFormat": {
+      "escapeString": true,
+      "printBasicPrototype": true
+    }
+  }
+}

app/vmui/packages/jaeger-ui-lite/src/actions/jaeger-api.ts

@@ -0,0 +1,56 @@
+import { createAction } from 'redux-actions';
+import JaegerAPI from '../api/jaeger';
+
+const metricType: Record<string, string> = {
+  latencies: 'latencies',
+  calls: 'calls',
+  errors: 'errors',
+};
+
+export const fetchTrace = createAction(
+  '@JAEGER_API/FETCH_TRACE',
+  (id: string) => JaegerAPI.fetchTrace(id),
+  (id: string) => ({ id })
+);
+
+export const fetchMultipleTraces = createAction(
+  '@JAEGER_API/FETCH_MULTIPLE_TRACES',
+  (ids: string[]) => JaegerAPI.searchTraces({ traceID: ids }),
+  (ids: string[]) => ({ ids })
+);
+
+export const archiveTrace = createAction(
+  '@JAEGER_API/ARCHIVE_TRACE',
+  (id: string) => JaegerAPI.archiveTrace(id),
+  (id: string) => ({ id })
+);
+
+export const searchTraces = createAction(
+  '@JAEGER_API/SEARCH_TRACES',
+  (query: Record<string, any>) => JaegerAPI.searchTraces(query),
+  (query: Record<string, any>) => ({ query })
+);
+
+export const fetchServices = createAction('@JAEGER_API/FETCH_SERVICES', () => JaegerAPI.fetchServices());
+
+export const fetchServiceOperations = createAction(
+  '@JAEGER_API/FETCH_SERVICE_OPERATIONS',
+  (serviceName: string) => JaegerAPI.fetchServiceOperations(serviceName),
+  (serviceName: string) => ({ serviceName })
+);
+
+export const fetchServiceServerOps = createAction(
+  '@JAEGER_API/FETCH_SERVICE_SERVER_OP',
+  (serviceName: string) => JaegerAPI.fetchServiceServerOps(serviceName),
+  (serviceName: string) => ({ serviceName })
+);
+
+export const fetchDeepDependencyGraph = createAction(
+  '@JAEGER_API/FETCH_DEEP_DEPENDENCY_GRAPH',
+  (query: Record<string, any>) => JaegerAPI.fetchDeepDependencyGraph(query),
+  (query: Record<string, any>) => ({ query })
+);
+
+export const fetchDependencies = createAction('@JAEGER_API/FETCH_DEPENDENCIES', () =>
+  JaegerAPI.fetchDependencies()
+);