Skip to content

Implement guidellm UI #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 108 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
108 commits
Select commit Hold shift + click to select a range
f5fde81
set up next.js app and static build
DaltheCow May 9, 2025
fa5db74
convert to .eslintrc to match current state of project
DaltheCow May 9, 2025
8b16db5
update .eslintrc, tsconfig.json
DaltheCow May 9, 2025
15e867d
update eslint, tsconfig, husky, and dependencies
DaltheCow May 12, 2025
f7837ca
update file type
DaltheCow May 12, 2025
59ff861
merge
DaltheCow May 12, 2025
834cc1a
remove .eslintrc
DaltheCow May 12, 2025
3ae85e2
final updates
DaltheCow May 12, 2025
50a39ec
sort eslintrc
DaltheCow May 13, 2025
e1fd9ed
merge base
DaltheCow May 13, 2025
119f05a
sort extensions
DaltheCow May 13, 2025
56f89e2
merge base
DaltheCow May 13, 2025
d923f4a
sort
DaltheCow May 13, 2025
a515e12
resort
DaltheCow May 13, 2025
ded66cd
add extension
DaltheCow May 13, 2025
fe4d91a
merge base
DaltheCow May 13, 2025
544899a
add dev workflow
DaltheCow May 13, 2025
026a13f
remove testing pieces
DaltheCow May 13, 2025
fca89c5
navigate to ui directory for operations
DaltheCow May 13, 2025
b276f17
navigate to directory
DaltheCow May 13, 2025
32e95e9
add makefile
DaltheCow May 13, 2025
9faebcf
upgrade eslint-plugin-prettier, run make style
DaltheCow May 13, 2025
d69dc95
add unit/integration/e2e testing
DaltheCow May 13, 2025
f876edb
get testing set up fully functional
DaltheCow May 14, 2025
472141b
get things working
DaltheCow May 14, 2025
d98b411
remove e2e testing from dev workflow since it is confirmed to work
DaltheCow May 14, 2025
23ce95f
clean readme, add developing doc
DaltheCow May 15, 2025
a7b89f1
add initial app state for development with redux/theming set up
DaltheCow May 19, 2025
699eb9b
add test mocks
DaltheCow May 19, 2025
41345f4
move svg typing
DaltheCow May 19, 2025
0e688da
implement guidellm ui app
DaltheCow May 19, 2025
f92a82e
update ui to pass integration test
DaltheCow May 19, 2025
4461583
Update Readme towards desired usage pathway
DaltheCow May 19, 2025
fe7fdc6
update readme
DaltheCow May 19, 2025
35a0726
Merge branch 'main' into implement-base-ui-app
DaltheCow May 20, 2025
8413655
run linting
DaltheCow May 20, 2025
c23c674
replace speculators with GuideLLM
DaltheCow May 21, 2025
1d5bd73
remove speculators from docs
DaltheCow May 21, 2025
43fdeb0
update tox.ini to exclude github view files (blobs) that break the li…
DaltheCow May 21, 2025
1e29968
not to ignore more than markdown for rich display mode
DaltheCow May 21, 2025
d09f685
Merge branch 'update-docs' into implement-base-ui-app
DaltheCow May 21, 2025
328b872
Merge branch 'implement-base-ui-app' into core-framework-setup
DaltheCow May 21, 2025
1fc4d40
merge core-framework-setup
DaltheCow May 21, 2025
fbc8821
merge testing-tooling
DaltheCow May 21, 2025
3d028a6
Merge branch 'implement-app-tooling' into implement-guidellm-ui
DaltheCow May 21, 2025
32cbe07
run precommit check
DaltheCow May 21, 2025
4b8b65a
run precommit
DaltheCow May 22, 2025
8d10bd5
precommit check
DaltheCow May 22, 2025
5043cdb
precommit check
DaltheCow May 22, 2025
247d1cf
undo alteration of link checks, instead remove from workflows tempora…
DaltheCow May 22, 2025
4de602a
Merge branch 'update-docs' into implement-base-ui-app
DaltheCow May 22, 2025
bf52aa0
Merge branch 'implement-base-ui-app' into core-framework-setup
DaltheCow May 22, 2025
20fba13
merge core-framework-setup
DaltheCow May 22, 2025
4057c9c
Merge branch 'testing-tooling' into implement-app-tooling
DaltheCow May 22, 2025
dc2bc80
Merge branch 'implement-app-tooling' into implement-guidellm-ui
DaltheCow May 22, 2025
57e5c0a
Merge branch 'main' into implement-base-ui-app
DaltheCow May 27, 2025
aece79d
Merge branch 'main' into implement-base-ui-app
markurtz May 29, 2025
fd473fb
Merge branch 'implement-base-ui-app' into core-framework-setup
DaltheCow May 29, 2025
af1a0eb
Merge branch 'core-framework-setup' into testing-tooling
DaltheCow May 29, 2025
fa46413
Merge branch 'testing-tooling' into implement-app-tooling
DaltheCow May 29, 2025
502025e
Merge branch 'implement-app-tooling' into implement-guidellm-ui
DaltheCow May 29, 2025
cde932f
merge main
DaltheCow Jun 2, 2025
c7d115d
fix all the configs and get things working again
DaltheCow Jun 3, 2025
9441f7f
update workflow, DEVELOPING.md, add cypress to scripts
DaltheCow Jun 3, 2025
798c37d
remove .eslintignore
DaltheCow Jun 3, 2025
bdef8dc
correct script usage in workflow
DaltheCow Jun 3, 2025
b805721
move code to prep for merge with base
DaltheCow Jun 3, 2025
cc99e3f
merge updated base
DaltheCow Jun 3, 2025
46e5cad
remove unwanted files
DaltheCow Jun 3, 2025
db6ab10
remove merge conflict remnant
DaltheCow Jun 3, 2025
a90b430
get everything working
DaltheCow Jun 5, 2025
aaa6aeb
change working directory for ui workflows
DaltheCow Jun 5, 2025
83d6f44
add test coverage setup
DaltheCow Jun 5, 2025
1f27e59
Merge branch 'main' into testing-tooling
DaltheCow Jun 5, 2025
313ca9f
move code in prep of merging the base
DaltheCow Jun 5, 2025
1308ea3
merge base into branch, fix new issues
DaltheCow Jun 6, 2025
88509a1
Update src/ui/app/layout.tsx
DaltheCow Jun 6, 2025
002f926
push up simple requested changes
DaltheCow Jun 6, 2025
1b04fb0
Merge branch 'implement-app-tooling' of github.com:neuralmagic/guidel…
DaltheCow Jun 6, 2025
f29d89b
push up fixed to layout component
DaltheCow Jun 7, 2025
33375fc
fix accidentally broken test running, remove uneeded type
DaltheCow Jun 7, 2025
43c7163
add some basic generated documentation for some util methods
DaltheCow Jun 7, 2025
ec10b92
add any type to next config
DaltheCow Jun 7, 2025
9261c01
merge base, fix some issues, but not all
DaltheCow Jun 9, 2025
aa5273d
get tests working, integration and unit are the same though, need to …
DaltheCow Jun 10, 2025
058fb6a
merge main and fix conflicts
DaltheCow Jun 10, 2025
eeafc1e
remove ts-jest again since it snuck back in
DaltheCow Jun 10, 2025
2f72e78
update test coverage to be joint
DaltheCow Jun 10, 2025
7a0f64e
update to use guidellm logo and icon
DaltheCow Jun 10, 2025
1405011
fix bugs
DaltheCow Jun 10, 2025
7ade7c7
run precommit fixes
DaltheCow Jun 10, 2025
d786477
try to fix gh action type error
DaltheCow Jun 10, 2025
9a29fb8
run styling
DaltheCow Jun 10, 2025
220e627
add next to types in tsconfig
DaltheCow Jun 10, 2025
4230108
remove what is causing the issue
DaltheCow Jun 10, 2025
8de645d
try something else
DaltheCow Jun 10, 2025
c5c165f
Merge branch 'implement-app-tooling' into implement-guidellm-ui
DaltheCow Jun 10, 2025
ad3623a
remove copied file
DaltheCow Jun 10, 2025
6bb9524
update husky setup, migrate to eslint flat config
DaltheCow Jun 10, 2025
609349c
update jest config to cjs, fix typing error
DaltheCow Jun 10, 2025
ca7dab3
try to fix type issue
DaltheCow Jun 10, 2025
42bf248
try some stuff that won't work
DaltheCow Jun 10, 2025
956ab9f
try something else that won't work
DaltheCow Jun 10, 2025
a554685
change up types in tsconfig
DaltheCow Jun 11, 2025
2d8f6ed
merge main
DaltheCow Jun 11, 2025
2c24164
add weird dependencies to try and fix CI test failure
DaltheCow Jun 11, 2025
64b2938
update eslint config comments
DaltheCow Jun 11, 2025
c02f701
update config comments
DaltheCow Jun 11, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 0 additions & 69 deletions .eslintrc.json

This file was deleted.

2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,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
1 change: 1 addition & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx lint-staged
2 changes: 1 addition & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
28 changes: 27 additions & 1 deletion DEVELOPING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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.
Expand Down
42 changes: 42 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion cypress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
});
181 changes: 181 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -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,
];
4 changes: 2 additions & 2 deletions jest.config.js → jest.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading