Implement guidellm UI

ui/.eslintrc.json

@@ -76,6 +76,15 @@
         "peerDependencies": false
       }
     ],
-    "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }]
+    "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn", // or "error"
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
   }
 }

ui/DEVELOPING.md

@@ -1,12 +1,20 @@
 ## Getting Started
 
-First, run the development server:
+The GuideLLM UI is built with Next.js
+
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, run the development server:
 
 ```bash
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
 
 #### `npm run build`
 
@@ -31,3 +39,19 @@ Fix code styling issues.
 #### `make quality`
 
 Run quality eslint quality checks.
+
+##### Tagging Tests
+
+Reference [https://www.npmjs.com/package/jest-runner-groups](jest-runner-groups)
+Add @group with the tag in a docblock at the top of the test file to indicate which types of tests are contained within.
+Can't distinguish between different types of tests in the same file.
+
+```
+/**
+ * Admin dashboard tests
+ *
+ * @group smoke
+ * @group sanity
+ * @group regression
+ */
+```

ui/README.md

@@ -1 +1,52 @@
-# GuideLLM UI
+### GuideLLM UI
+
+GuideLLM UI is a companion frontend for visualizing the results of a GuideLLM benchmark run.
+
+### 🛠 Running the UI
+
+1. Use the Hosted Build (Recommended for Most Users)
+
+After running a benchmark with GuideLLM, a report.html file will be generated (by default at guidellm_report/report.html). This file references the latest stable version of the UI hosted at:
+
+```
+https://neuralmagic.github.io/guidellm/ui/dev/
+```
+
+Open the file in your browser and you're done—no setup required.
+
+2. Build and Serve the UI Locally (For Development)
+   This option is useful if:
+
+- You are actively developing the UI
+
+- You want to test changes to the UI before publishing
+
+- You want full control over how the report is displayed
+
+```bash
+npm install
+npm run build
+npx serve out
+```
+
+This will start a local server (e.g., at http://localhost:3000). Then, in your GuideLLM config or CLI flags, point to this local server as the asset base for report generation.
+
+### 🧪 Development Notes
+
+During UI development, it can be helpful to view sample data. We include a sample benchmark run wired into the Redux store under:
+
+```
+src/lib/store/[runInfo/workloadDetails/benchmarks]WindowData.ts
+```
+
+In the future this will be replaced by a configurable untracked file for dev use.
+
+### 🚧 Future Possibilities
+
+We're evaluating options for hosting dev/staging/prod builds on GitHub Pages. For now, production builds will be published at:
+
+```
+https://neuralmagic.github.io/guidellm/ui/dev/
+```
+
+If needed, alternative hosting (e.g., Vercel, Netlify) may be explored, but simplicity and transparency remain key priorities for this open-source tool.

ui/__mocks__/@nivo/bar.tsx

@@ -0,0 +1,2 @@
+export const ResponsiveBar = () => null;
+export const BarCustomLayerProps = () => null;

ui/__mocks__/@nivo/core.tsx

@@ -0,0 +1 @@
+export const Point = () => null;

ui/__mocks__/@nivo/line.tsx

@@ -0,0 +1 @@
+export const ResponsiveLine = () => null;

ui/jest.config.js

@@ -22,6 +22,9 @@ const customJestConfig = {
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@nivo|d3|d3-.*|internmap|delaunator|robust-predicates)/)',
+  ],
 };
 
 module.exports = createJestConfig(customJestConfig);

ui/jest.setup.ts

@@ -1 +1,17 @@
 import '@testing-library/jest-dom';
+
+jest.mock('@nivo/bar');
+jest.mock('@nivo/line');
+jest.mock('@nivo/core');
+
+jest.mock('next/dynamic', () => ({
+  __esModule: true,
+  default: (...props: any[]) => {
+    const dynamicModule = jest.requireActual('next/dynamic');
+    const dynamicActualComp = dynamicModule.default;
+    const RequiredComponent = dynamicActualComp(props[0]);
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    RequiredComponent.preload ? RequiredComponent.preload() : RequiredComponent.render.preload();
+    return RequiredComponent;
+  },
+}));