Implement UI build pipeline

.github/workflows/development-cleanup.yml

@@ -0,0 +1,87 @@
+name: Cleanup Dev
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  cleanup-ui-pr-preview:
+    permissions:
+      contents: write
+      id-token: 'write'
+      issues: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out gh-pages branch
+        uses: actions/checkout@v3
+        with:
+          ref: gh-pages
+          fetch-depth: 1
+
+      - name: Check if preview directory exists
+        id: check-preview
+        run: |
+          if [ -d "ui/pr/${{ github.event.pull_request.number }}" ]; then
+            echo "preview_exists=true" >> $GITHUB_OUTPUT
+            echo "Preview directory exists for PR #${{ github.event.pull_request.number }}"
+          else
+            echo "preview_exists=false" >> $GITHUB_OUTPUT
+            echo "No preview directory found for PR #${{ github.event.pull_request.number }}"
+          fi
+
+      - name: Create an empty directory for cleanup
+        if: steps.check-preview.outputs.preview_exists == 'true'
+        run: mkdir -p empty
+
+      - name: Remove GitHub Pages Build
+        if: steps.check-preview.outputs.preview_exists == 'true'
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./empty
+          destination_dir: ui/pr/${{ github.event.pull_request.number }}
+          keep_files: false
+          user_name: ${{ github.actor }}
+          user_email: ${{ github.actor }}@users.noreply.github.com
+          publish_branch: gh-pages
+          commit_message: 'chore: Clean up preview for PR #${{ github.event.pull_request.number }}'
+
+      - name: Log Cleanup Completion
+        run: echo "Cleanup completed for PR \#${{ github.event.pull_request.number }}"
+
+  update-preview-comment:
+    needs: [cleanup-ui-pr-preview]
+    name: Update PR Comment
+    permissions:
+      pull-requests: write
+      issues: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Update PR comment to reflect cleanup
+        uses: peter-evans/find-comment@v2
+        id: find-comment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- pr-preview-comment -->'
+
+      - name: Update PR comment to reflect cleanup
+        if: steps.find-comment.outputs.comment-id != ''
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          comment-id: ${{ steps.find-comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          edit-mode: replace
+          body: |
+            <!-- pr-preview-comment -->
+            🧹 The live preview for this PR has been removed.
+
+      - name: Log comment update status
+        run: |
+          if [ "${{ steps.find-comment.outputs.comment-id }}" != "" ]; then
+            echo "Updated existing preview comment"
+          else
+            echo "No preview comment found to update"
+          fi

.github/workflows/development.yml

@@ -81,7 +81,7 @@ jobs:
       - name: Run pre-commit checks
         run: SKIP=ruff-format pre-commit run --all-files
 
-  ui-precommit-check:
+  ui-precommit-checks:
     permissions:
       contents: "read"
     runs-on: ubuntu-latest
@@ -205,3 +205,120 @@ jobs:
               They will be retained for **up to 30 days**.
               `
             })
+
+  ui-pr-preview:
+    needs: [ui-quality-checks, ui-precommit-checks, ui-unit-tests, ui-integration-tests]
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Check if UI-related files changed
+        id: check-changes
+        run: |
+          # Get the base branch
+          BASE_BRANCH=${{ github.event.pull_request.base.ref }}
+
+          # Get list of changed files
+          CHANGED_FILES=$(git diff --name-only origin/$BASE_BRANCH...HEAD)
+
+          # Define the files we care about in root
+          ROOT_FILES="package.json package-lock.json jest.config.cjs jest.setup.ts eslint.config.js cypress.config.ts .prettierrc .prettierignore tsconfig.json tsconfig.base.json tsconfig.test.json tsconfig.cypress.json"
+
+          # Check if src/ui directory changed or any of the root files changed
+          SHOULD_BUILD=false
+
+          # Check if any file in src/ui changed
+          if echo "$CHANGED_FILES" | grep -q -E "^(src/ui|tests/ui)/"; then
+            echo "UI source files changed"
+            SHOULD_BUILD=true
+          fi
+
+          # Check if any of the root configuration files changed
+          for file in $ROOT_FILES; do
+            if echo "$CHANGED_FILES" | grep -q "^${file}$"; then
+              echo "Root config file changed: $file"
+              SHOULD_BUILD=true
+              break
+            fi
+          done
+
+          echo "should_build=$SHOULD_BUILD" >> $GITHUB_OUTPUT
+          echo "Should build: $SHOULD_BUILD"
+
+      - name: Install dependencies
+        if: steps.check-changes.outputs.should_build == 'true'
+        run: npm ci
+
+      - name: Build app to root
+        if: steps.check-changes.outputs.should_build == 'true'
+        id: build
+        run: |
+          # Export vars to ensure they are loaded before build
+          export $(grep -v '^#' .env.development | xargs)
+
+          PR_NUMBER=${{ github.event.pull_request.number }}
+          echo "pr_number=${PR_NUMBER}" >> $GITHUB_OUTPUT
+
+          # Set asset prefix and base path with PR number
+          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/pr/${PR_NUMBER}
+          USE_MOCK_DATA=true
+          BASE_PATH=/ui/pr/${PR_NUMBER}
+          GIT_SHA=${{ github.sha }}
+          export ASSET_PREFIX=${ASSET_PREFIX}
+          export BASE_PATH=${BASE_PATH}
+          export GIT_SHA=${GIT_SHA}
+          export USE_MOCK_DATA=${USE_MOCK_DATA}
+          npm run build
+
+      - name: Deploy to GitHub Pages
+        if: steps.check-changes.outputs.should_build == 'true'
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./ui/out
+          destination_dir: ui/pr/${{ steps.build.outputs.pr_number }}
+          keep_files: false
+          user_name: ${{ github.actor }}
+          user_email: ${{ github.actor }}@users.noreply.github.com
+          publish_branch: gh-pages
+          commit_message: 'build: Deploy preview build for PR #${{ github.event.pull_request.number }}'
+
+      - name: Set deployment url
+        if: steps.check-changes.outputs.should_build == 'true'
+        id: deploy
+        run: |
+          DEPLOY_URL=https://neuralmagic.github.io/guidellm/ui/pr/${{ steps.build.outputs.pr_number }}
+          echo "url=${DEPLOY_URL}" >> $GITHUB_OUTPUT
+
+      - name: Find PR comment
+        if: steps.check-changes.outputs.should_build == 'true'
+        uses: peter-evans/find-comment@v2
+        id: find-comment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- pr-preview-comment -->'
+
+      - name: Post Deployment URL to PR
+        if: steps.check-changes.outputs.should_build == 'true'
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          comment-id: ${{ steps.find-comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          edit-mode: replace
+          body: |
+            <!-- pr-preview-comment -->
+            🎉 **Live Preview:** [Click here to view the live version](${{ steps.deploy.outputs.url }})
+            *Last updated: ${{ github.sha }}*
+
+      - name: Skip build notification
+        if: steps.check-changes.outputs.should_build == 'false'
+        run: echo "Skipping UI preview build - no relevant files changed"

.github/workflows/main.yml

@@ -22,6 +22,20 @@ jobs:
       - name: Run quality checks
         run: tox -e quality
 
+  ui-quality-checks:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run quality and typing checks
+        run: npm run lint
+
   type-checks:
     runs-on: ubuntu-latest
     strategy:
@@ -38,6 +52,20 @@ jobs:
       - name: Run quality checks
         run: tox -e types
 
+  ui-type-checks:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run quality and typing checks
+        run: npm run type-check
+
   precommit-checks:
     runs-on: ubuntu-latest
     strategy:
@@ -54,6 +82,20 @@ jobs:
       - name: Run pre-commit checks
         run: SKIP=ruff-format pre-commit run --all-files
 
+  ui-precommit-checks:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run pre-commit checks
+        run: npx husky run pre-commit
+
   unit-tests:
     runs-on: ubuntu-latest
     strategy:
@@ -70,6 +112,20 @@ jobs:
       - name: Run unit tests
         run: tox -e test-unit -- -m "smoke or sanity"
 
+  ui-unit-tests:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test:unit
+
   integration-tests:
     runs-on: ubuntu-latest
     strategy:
@@ -85,3 +141,55 @@ jobs:
         run: pip install tox
       - name: Run integration tests
         run: tox -e test-integration -- -m smoke
+
+  ui-integration-tests:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run integration tests
+        run: npm run test:integration
+
+  deploy-ui-build:
+    needs: [ui-quality-checks, ui-precommit-checks, ui-unit-tests, ui-integration-tests]
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - 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 with PR number
+          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/dev
+          BASE_PATH=/ui/dev
+          GIT_SHA=${{ github.sha }}
+          export ASSET_PREFIX=${ASSET_PREFIX}
+          export BASE_PATH=${BASE_PATH}
+          export GIT_SHA=${GIT_SHA}
+          npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./ui/out
+          destination_dir: ui/dev
+          keep_files: false
+          user_name: ${{ github.actor }}
+          user_email: ${{ github.actor }}@users.noreply.github.com
+          publish_branch: gh-pages