Add ui code to guidellm

.github/workflows/ghpages.yaml

@@ -0,0 +1,49 @@
+name: GH Pages
+
+on:
+  pull_request:
+    branches:
+      - '**'
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+  workflow_dispatch:
+
+jobs:
+  publish-gh-pages:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ui
+
+      - name: Build app to root
+        id: build
+        run: |
+          # Export vars to ensure they are loaded before build
+          export $(grep -v '^#' .env.development | xargs)
+
+          # Set asset prefix and base path
+          ASSET_PREFIX=https://didactic-adventure-rww9l86.pages.github.io
+          BASE_PATH=/
+          GIT_SHA=${{ github.sha }}
+          export ASSET_PREFIX=${ASSET_PREFIX}
+          export BASE_PATH=${BASE_PATH}
+          export GIT_SHA=${GIT_SHA}
+
+          npm run build
+        working-directory: ui
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ui/out
+          publish_branch: gh-pages

.github/workflows/ui-development.yaml

@@ -0,0 +1,84 @@
+name: Development
+
+on:
+  pull_request:
+    branches:
+      - '**'
+    types:
+      - opened
+      - reopened
+      - synchronize
+  workflow_dispatch:
+
+jobs:
+  quality-check:
+    # Permissions needed to get ID token for OIDC auth
+    permissions:
+      contents: 'read'
+      id-token: 'write'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ui
+
+      - name: Run quality and typing checks
+        run: make quality
+        working-directory: ui
+
+  precommit-check:
+    # Permissions needed to get ID token for OIDC auth
+    permissions:
+      contents: 'read'
+      id-token: 'write'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ui
+
+      - name: Run pre-commit checks
+        run: npx husky run pre-commit
+        working-directory: ui
+
+  unit-tests:
+    # Permissions needed to get ID token for OIDC auth
+    permissions:
+      contents: 'read'
+      id-token: 'write'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ui
+
+      - name: Run unit tests
+        run: make test-unit
+        working-directory: ui
+
+  integration-tests:
+    # Permissions needed to get ID token for OIDC auth
+    permissions:
+      contents: 'read'
+      id-token: 'write'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ui
+
+      - name: Run integration tests
+        run: make test-integration
+        working-directory: ui

.gitignore

@@ -174,3 +174,4 @@ cython_debug/
 # Project specific files
 *.json
 *.yaml
+!ui/**/*.json

ui/.env.development

@@ -0,0 +1,4 @@
+ASSET_PREFIX=https://neuralmagic.github.io/guidellm/dev
+BASE_PATH=/dev
+NEXT_PUBLIC_FEATURES={"blocks":{"workloadDetails":false,"costSection":false}}
+NEXT_PUBLIC_USE_MOCK_API=true

ui/.env.production

@@ -0,0 +1,2 @@
+ASSET_PREFIX=https://neuralmagic.github.io/guidellm/prod
+BASE_PATH=/prod

ui/.env.staging

@@ -0,0 +1,2 @@
+ASSET_PREFIX=https://neuralmagic.github.io/guidellm/staging
+BASE_PATH=/staging

ui/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+.vscode
+cypress.config.ts

ui/.eslintrc

@@ -0,0 +1,62 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "next/core-web-vitals"
+  ],
+  "ignorePatterns": [".vscode", "jest.config.js", "__mocks__"],
+  "overrides": [
+    {
+      "files": ["*.mjs"],
+      "parser": "espree", // Use the default JavaScript parser for `.mjs` files
+      "parserOptions": {
+        "sourceType": "module"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "jest", "react", "import", "no-secrets"],
+  "root": true,
+  "rules": {
+    "curly": ["error", "all"],
+    "complexity": ["warn", { "max": 8 }],
+    "import/order": [
+      "error",
+      { "groups": [["builtin", "external", "internal"]], "newlines-between": "always" }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "**/*.d.ts",
+          "**/*.interfaces.ts",
+          "**/*.setup.ts",
+          "**/*.config.js",
+          "**/*.config.mjs"
+        ],
+        "optionalDependencies": false,
+        "peerDependencies": false
+      }
+    ],
+    "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }]
+  }
+}

ui/.gitignore

@@ -0,0 +1,53 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# IDE
+/.idea
+/.vscode
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+.eslintcache
+.npmrc
+.env.development.local
+.env.test.local
+.env.production.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Ignore resources related to yalc temp files
+.yalc
+yalc.lock
+
+# Ignore branch coverage badge
+.meta/badge-branches.svg
+

ui/.husky/.gitignore

@@ -0,0 +1 @@
+_

ui/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

ui/.prettierignore

@@ -0,0 +1,6 @@
+/node_modules
+.vscode
+/bin
+/build
+/public
+/.meta

ui/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

ui/DEVELOPING.md

@@ -0,0 +1,49 @@
+# GuideLLM UI
+
+### Available Scripts
+
+In the project directory, you can run:
+
+#### `npm run dev`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+#### `npm run build`
+
+Builds the app for production to the `out` folder.\
+
+#### `make test-unit`
+
+Run unit test once on your local terminal.
+
+#### `make test-integration`
+
+Run integration test once on your local terminal.
+
+#### `npx cypress run --headless`
+
+Run end to end tests against localhost:3000
+
+##### 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.
+Downside is that we can't distinguish between different types of tests in the same file.
+
+```
+/**
+ * Admin dashboard tests
+ *
+ * @group smoke
+ * @group sanity
+ * @group regression
+ */
+```
+
+#### `make style`
+
+Fix code styling issues.

ui/Makefile

@@ -0,0 +1,26 @@
+CHECKDIRS := src
+
+
+# Run checks on all files for the repo
+quality:
+	@echo "Running quality checks";
+	@# Run eslint checks
+	npx eslint --max-warnings 10 $(CHECKDIRS)
+	@# Run TypeScript checks
+	npx tsc --noEmit
+
+# Style the code according to accepted standards for the repo
+style:
+	@echo "Running styling";
+	@# Auto fix any eslint issues
+	npx eslint --fix $(CHECKDIRS)
+
+test-unit:
+	@echo "Running unit tests";
+	@# Run react tests
+	npm run test:unit
+
+test-integration:
+	@echo "Running integration tests";
+	@# Run react tests
+	npm run test:integration