Implement guidellm UI (#169)

This PR actually implements the application logic including the
UI/charts and the api setup that retrieves data from the window object.

---------

Co-authored-by: Mark Kurtz <mark.j.kurtz@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.eslintrc.json

@@ -223,8 +223,8 @@ src/ui/next-env.d.ts
 # Root-level UI config files that should be tracked
 !package.json
 !package-lock.json
-!.eslintrc.json
 !tsconfig.json
 !tsconfig.*.json
 !src/ui/lib
 !src/ui/public/manifest.json
+.eslintcache

.gitignore

@@ -0,0 +1 @@
+npx lint-staged

.husky/pre-commit

@@ -12,7 +12,7 @@
 !tests/ui/**/*.json
 
 # Root-level configs to format
-!/.eslintrc.json
+!/.eslint.config.js
 !/tsconfig*.json
 !/*.config.{js,ts}
 !/jest.setup.ts

.prettierignore

@@ -185,7 +185,13 @@ The GuideLLM project includes a frontend UI located in `src/ui`, built using [Ne
 
 ### Getting Started
 
-To start the local development server:
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, start the local development server:
 
 ```bash
 npm run dev
@@ -215,6 +221,12 @@ npm run build
   npm run test:integration
   ```
 
+- **Integration+Unit tests with coverage**:
+
+  ```bash
+  npm run coverage
+  ```
+
 - **End-to-end tests** (using Cypress, ensure live dev server):
 
   ```bash
@@ -241,6 +253,20 @@ npm run build
   npm run type-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
+ */
+```
+
 ## Additional Resources
 
 - [CONTRIBUTING.md](https://github.com/neuralmagic/guidellm/blob/main/CONTRIBUTING.md): Guidelines for contributing to the project.

DEVELOPING.md

@@ -153,6 +153,48 @@ The `guidellm benchmark` command is used to run benchmarks against a generative
 
 - `--output-path`: Defines the path to save the benchmark results. Supports JSON, YAML, or CSV formats. If a directory is provided, the results will be saved as `benchmarks.json` in that directory. If not set, the results will be saved in the current working directory.
 
+### 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.
+
 ## Resources
 
 ### Documentation

README.md

@@ -4,6 +4,6 @@ export default defineConfig({
   e2e: {
     specPattern: 'tests/ui/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'tests/ui/cypress/support/e2e.ts',
-    baseUrl: 'http://localhost:3000', // optional, but good practice
+    baseUrl: 'http://localhost:3000', // optional
   },
 });

cypress.config.ts

@@ -0,0 +1,181 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import typescriptPlugin from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import { FlatCompat } from '@eslint/eslintrc';
+import reactPlugin from 'eslint-plugin-react';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+import jestPlugin from 'eslint-plugin-jest';
+import noSecretsPlugin from 'eslint-plugin-no-secrets';
+import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: eslint.configs.recommended,
+});
+
+export default [
+  // Base configuration
+  eslint.configs.recommended,
+
+  // Next.js configuration using FlatCompat
+  ...compat.extends('next/core-web-vitals'),
+
+  // --- Main Configuration ---
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}', 'tests/**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: typescriptParser,
+      ecmaVersion: 2024,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        project: [
+          './src/ui/tsconfig.json',
+          './tsconfig.test.json',
+          './tsconfig.cypress.json',
+        ],
+        tsconfigRootDir: import.meta.dirname,
+        noWarnOnMultipleProjects: true,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescriptPlugin,
+      react: reactPlugin,
+      'react-hooks': hooksPlugin,
+      import: importPlugin,
+      jest: jestPlugin,
+      'no-secrets': noSecretsPlugin,
+      prettier: prettierPlugin,
+    },
+    rules: {
+      // Ccustom rules
+      complexity: ['warn', { max: 8 }],
+      curly: ['error', 'all'],
+      'no-unused-vars': 'off',
+
+      // TypeScript rules
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      // Next.js overrides
+      '@next/next/no-img-element': 'off', // Allow img tags if needed
+      '@next/next/no-page-custom-font': 'warn',
+
+      // React rules
+      'react/react-in-jsx-scope': 'off', // Not needed in Next.js
+      'react/prop-types': 'off', // Using TypeScript
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      // Import rules
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: [
+            '**/*.test.{js,jsx,ts,tsx}',
+            '**/*.d.ts',
+            '**/*.interfaces.ts',
+            '**/*.setup.{js,ts}',
+            '**/*.config.{js,mjs,ts}',
+            'tests/**/*',
+            'cypress/**/*',
+          ],
+          optionalDependencies: false,
+          peerDependencies: false,
+        },
+      ],
+      'import/order': [
+        'error',
+        {
+          groups: [
+            ['builtin', 'external'],
+            ['internal', 'parent', 'sibling', 'index'],
+          ],
+          'newlines-between': 'always-and-inside-groups',
+          pathGroups: [
+            {
+              pattern:
+                '@{app,assets,classes,components,hooks,lib,pages,store,tests,types,utils}/**',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '{.,..}/**',
+              group: 'internal',
+              position: 'after',
+            },
+          ],
+          pathGroupsExcludedImportTypes: ['builtin'],
+          alphabetize: { order: 'asc', caseInsensitive: true },
+        },
+      ],
+
+      // Security
+      'no-secrets/no-secrets': ['error', { additionalRegexes: {}, ignoreContent: [] }],
+
+      // Prettier
+      'prettier/prettier': 'error',
+    },
+    settings: {
+      next: {
+        rootDir: ['src/ui/', 'tests/ui/'],
+      },
+      'import/resolver': {
+        typescript: {
+          project: [
+            './src/ui/tsconfig.json',
+            './tsconfig.test.json',
+            './tsconfig.cypress.json',
+          ],
+          noWarnOnMultipleProjects: true,
+        },
+      },
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+
+  // Jest-specific rules for test files
+  {
+    files: [
+      'tests/**/*.{js,jsx,ts,tsx}',
+      '**/*.test.{js,jsx,ts,tsx}',
+      '**/*.spec.{js,jsx,ts,tsx}',
+    ],
+    rules: {
+      'jest/expect-expect': 'error',
+      'jest/no-focused-tests': 'error',
+      'jest/no-identical-title': 'error',
+      'jest/prefer-to-have-length': 'warn',
+      'jest/valid-expect': 'error',
+    },
+  },
+
+  // Prettier config (disables conflicting rules)
+  prettierConfig,
+];

eslint.config.js

@@ -6,11 +6,11 @@ const createJestConfig = nextJest({
 });
 
 const customJestConfig = {
-  collectCoverage: true,
+  collectCoverage: false,
   collectCoverageFrom: ['./src/ui/**/*.{ts,tsx}'],
   coverageDirectory: './coverage',
   coverageProvider: 'v8',
-  coverageReporters: ['json', 'text-summary', 'lcov'],
+  coverageReporters: ['text-summary', 'lcov', 'json-summary'],
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   moduleNameMapper: {
     '^.+\\.(svg)$': '<rootDir>/tests/ui/__mocks__/svg.js',