dashboard: small enhancements

.github/workflows/deploy.yml

@@ -15,6 +15,9 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+env:
+  NEXT_PUBLIC_BASE_PATH: ${{ vars.NEXT_PUBLIC_BASE_PATH }}
+
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
@@ -76,9 +79,14 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
 
-      - name: Build with Next.js
+      - name: Build with Next.js (No base path)
+        if: ${{ env.NEXT_PUBLIC_BASE_PATH == '' }}
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
 
+      - name: Build with Next.js (With base path)
+        if: ${{ env.NEXT_PUBLIC_BASE_PATH != '' }}
+        run: NEXT_PUBLIC_BASE_PATH=${{ env.NEXT_PUBLIC_BASE_PATH }} ${{ steps.detect-package-manager.outputs.runner }} next build
+
       - name: Add .nojekyll to out directory
         run: touch out/.nojekyll
 

.github/workflows/fetch-ci-nightly-data.yaml

@@ -19,6 +19,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Update dashboard data
+        env:
+          TOKEN: ${{ secrets.GITHUB_TOKEN }}
         # Use bash to fail fast:
         # https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsshell
         shell: bash

.gitignore

@@ -26,8 +26,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
-.env*.local
+# env files
+.env*
 
 # vercel
 .vercel
@@ -36,4 +36,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-/job_stats.json
+# local dev data
+/localData/

README.md

@@ -71,11 +71,21 @@ Follow these steps to set up the development environment for the Kata Containers
 
 3. **Run the development server**:
    Start the Next.js development server with hot-reloading enabled.
+
+   To run the script to fetch the data, a .env file must be created with an access token. This is required to authenticate our calls and increase the rate limit. To get the token, click [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
+
+   Create the .env file:
    ```bash
-   node scripts/fetch-ci-nightly-data.js > job_stats.json
-   npm run dev
+    NODE_ENV=development
+    TOKEN=<GITHUB_PAT_OR_OTHER_VALID_TOKEN>
    ```
 
+   Create the folder /localData. Then, run:
+
+   ```bash
+   node scripts/fetch-ci-nightly-data.js > localData/job_stats.json
+   npm run dev    # On Windows, run `npm run win-dev` instead.
+   ```
    The app will be available at [http://localhost:3000](http://localhost:3000).
 
 ### Production
@@ -92,10 +102,11 @@ Follow these steps to set up the development environment for the Kata Containers
    npm start
    ```
 
-### Scripts
-
-- **Fetch CI Nightly Data**: 
-  The `fetch-ci-nightly-data.js` script can be executed manually to pull the latest CI test data from the Kata Containers repository:
-   ```bash
-   node scripts/fetch-ci-nightly-data.js > job_stats.json
-   ```
+### Notes
+In deploy.yml: 
+ ```bash
+env:
+   NEXT_PUBLIC_BASE_PATH: ${{ vars.NEXT_PUBLIC_BASE_PATH }}
+```
+If the variable is undefined, it will use "" for the basePath and assume the site is being served at root.
+This makes it easier for people to fork the repo and deploy with GitHub pages such that they can have a preview for their PR.

components/weatherTemplate.js

@@ -11,35 +11,28 @@ const icons = [
 
 export const getWeatherIndex = (stat) => {
   let fail_rate = 0;
-  fail_rate = (stat["fails"] + stat["skips"]) / stat["runs"];
+  fail_rate = (stat["fails"]) / stat["runs"];
   // e.g. failing 3/9 runs is .33, or idx=1
   var idx = Math.floor((fail_rate * 10) / 2);
   if (idx == icons.length) {
     // edge case: if 100% failures, then we go past the end of icons[]
     // back the idx down by 1
-    console.assert(fail_rate == 1.0);
     idx -= 1;
   }
 
   // This error checks if there are zero runs.
   // Currently, will display stormy weather.
-  if (isNaN(idx)) {
+  if (isNaN(idx) || idx > icons.length) {
     idx = 4;
   }
   return idx;
 };
 
-const getWeatherIcon = (stat) => {
-  const idx = getWeatherIndex(stat);
-  return icons[idx];
-};
-
 export const weatherTemplate = (data) => {
-  const icon = getWeatherIcon(data);
   return (
     <div>
       <Image
-        src={`${basePath}/${icon}`}
+        src={`${basePath}/${icons[getWeatherIndex(data)]}`}
         alt="weather"
         width={32}
         height={32}

next.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   reactStrictMode: true,
   output: 'export',
-  basePath: "",
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
   images: {
     unoptimized: true,
   },