Skip to content

Commit 74d9dbd

Browse files
a1icjaa1icja
committed
migration: Move from vanilla JS to Next.JS
This PR reimplements the features found in the dashboard using Next.js, TailwindCSS, and PrimeReact. It is not intended to be used for adding new features or fixing old bugs. Fixes kata-containers#14 Signed-off-by: Alicja Mahr <[email protected]>
1 parent 19ec495 commit 74d9dbd

24 files changed

+6393
-302
lines changed

‎.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "next/typescript"]
3+
}

‎.github/workflows/deploy.yml

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Reference: https://github.com/actions/starter-workflows/blob/main/pages/nextjs.yml
2+
3+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
4+
#
5+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
6+
#
7+
name: Deploy Next.js site to Pages
8+
9+
on:
10+
# When a commit is made to the main branch
11+
push:
12+
branches:
13+
- main
14+
15+
# Allows you to run this workflow manually from the Actions tab
16+
workflow_dispatch:
17+
18+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
19+
permissions:
20+
contents: read
21+
pages: write
22+
id-token: write
23+
24+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
25+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
26+
concurrency:
27+
group: "pages"
28+
cancel-in-progress: false
29+
30+
jobs:
31+
# Build job
32+
build:
33+
runs-on: ubuntu-latest
34+
steps:
35+
- name: Checkout
36+
uses: actions/checkout@v4
37+
38+
- name: Detect package manager
39+
id: detect-package-manager
40+
run: |
41+
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
42+
echo "manager=yarn" >> $GITHUB_OUTPUT
43+
echo "command=install" >> $GITHUB_OUTPUT
44+
echo "runner=yarn" >> $GITHUB_OUTPUT
45+
exit 0
46+
elif [ -f "${{ github.workspace }}/package.json" ]; then
47+
echo "manager=npm" >> $GITHUB_OUTPUT
48+
echo "command=ci" >> $GITHUB_OUTPUT
49+
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
50+
exit 0
51+
else
52+
echo "Unable to determine package manager"
53+
exit 1
54+
fi
55+
56+
- name: Setup Node
57+
uses: actions/setup-node@v4
58+
with:
59+
node-version: "lts/*"
60+
cache: ${{ steps.detect-package-manager.outputs.manager }}
61+
62+
- name: Setup Pages
63+
uses: actions/configure-pages@v4
64+
65+
- name: Restore cache
66+
uses: actions/cache@v4
67+
with:
68+
path: |
69+
.next/cache
70+
# Generate a new cache whenever packages or source files change.
71+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
72+
# If source files changed but packages didn't, rebuild from a prior cache.
73+
restore-keys: |
74+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
75+
76+
- name: Install dependencies
77+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
78+
79+
- name: Build with Next.js
80+
run: ${{ steps.detect-package-manager.outputs.runner }} next build
81+
82+
- name: Add .nojekyll to out directory
83+
run: touch out/.nojekyll
84+
85+
- name: Upload artifact
86+
uses: actions/upload-pages-artifact@v3
87+
with:
88+
path: ./out
89+
90+
# Deployment job
91+
deploy:
92+
environment:
93+
name: github-pages
94+
url: ${{ steps.deployment.outputs.page_url }}
95+
runs-on: ubuntu-latest
96+
needs: build
97+
steps:
98+
- name: Deploy to GitHub Pages
99+
id: deployment
100+
uses: actions/deploy-pages@v4

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ run-name: Fetch CI Nightly Data
33
on:
44
schedule:
55
- cron: '0 4 * * *'
6+
workflow_dispatch:
7+
68
jobs:
79
fetch-and-commit-data:
810
runs-on: ubuntu-22.04
@@ -13,7 +15,7 @@ jobs:
1315
- name: Update dashboard data
1416
run: |
1517
# fetch ci nightly data as temporary file
16-
node js/fetch-ci-nightly-data.js | tee tmp-data.js
18+
node scripts/fetch-ci-nightly-data.js | tee tmp-data.json
1719
# switch to a branch specifically for holding latest data
1820
git config --global user.name "GH Actions Workflow"
1921
git config --global user.email "<gha@runner>"
@@ -23,7 +25,7 @@ jobs:
2325
git reset HEAD~1
2426
# overwrite the old data
2527
mkdir -p data/
26-
mv tmp-data.js data/ci-nightly-data.js
28+
mv tmp-data.json data/job_stats.json
2729
# commit
2830
git add data
2931
git commit -m '[skip ci] latest ci nightly data'

‎.gitignore

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,39 @@
1-
_site/
2-
*.swp
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
.vscode/*
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
29+
# local env files
30+
.env*.local
31+
32+
# vercel
33+
.vercel
34+
35+
# typescript
36+
*.tsbuildinfo
37+
next-env.d.ts
38+
39+
/job_stats.json

‎README.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# Kata Containers Test Dashboard
2+
3+
This repository contains the **Kata Containers Test Dashboard**, a web application that visualizes data for the nightly tests run by the Kata Containers repository. Built using **Next.js** and styled with **TailwindCSS**, this dashboard provides a simple and efficient interface to monitor test results, leveraging modern frontend technologies to ensure responsive and scalable performance.
4+
5+
## Features
6+
- Fetches nightly CI test data using custom scripts.
7+
- Displays weather-like icons to reflect test statuses (e.g., sunny for success, stormy for failures).
8+
- Utilizes **Next.js** for server-side rendering and optimized builds.
9+
- **TailwindCSS** for responsive, utility-first styling.
10+
- Integration of **PrimeReact** components for UI elements.
11+
12+
---
13+
14+
## Project Structure
15+
16+
```bash
17+
.
18+
├── next.config.js # Next.js configuration
19+
├── package.json # Project dependencies and scripts
20+
├── package-lock.json # Dependency lock file
21+
├── pages
22+
│ ├── _app.js # Application wrapper for global setup
23+
│ └── index.js # Main dashboard page
24+
├── postcss.config.js # PostCSS configuration for TailwindCSS
25+
├── public
26+
│ ├── cloudy.svg # Weather icons for test statuses
27+
│ ├── favicon.ico
28+
│ ├── partially-sunny.svg
29+
│ ├── rainy.svg
30+
│ ├── stormy.svg
31+
│ └── sunny.svg
32+
├── README.md # Project documentation (this file)
33+
├── scripts
34+
│ └── fetch-ci-nightly-data.js # Script to fetch nightly test data
35+
├── styles
36+
│ └── globals.css # Global CSS imports
37+
└── tailwind.config.js # TailwindCSS configuration
38+
```
39+
40+
### Key Files
41+
- **`pages/index.js`**: The main entry point of the dashboard, displaying test results and their statuses.
42+
- **`scripts/fetch-ci-nightly-data.js`**: Custom script to retrieve CI data for the dashboard.
43+
- **`styles/globals.css`**: Custom global styles, mainly extending the TailwindCSS base.
44+
- **`public/`**: Contains static assets like icons representing different test statuses.
45+
46+
---
47+
48+
## Setup Instructions
49+
50+
Follow these steps to set up the development environment for the Kata Containers Test Dashboard:
51+
52+
### Prerequisites
53+
- [**Node.js**](https://nodejs.org/en/download) (version 18.x or later recommended)
54+
- **npm** (comes with Node.js)
55+
56+
### Installation
57+
58+
1. **Clone the repository**:
59+
```bash
60+
git clone https://github.com/kata-containers/kata-containers.github.io.git
61+
cd kata-containers.github.io
62+
```
63+
64+
2. **Install dependencies**:
65+
Run the following command to install both the project dependencies and development dependencies.
66+
```bash
67+
npm install
68+
```
69+
70+
### Development
71+
72+
3. **Run the development server**:
73+
Start the Next.js development server with hot-reloading enabled.
74+
```bash
75+
node scripts/fetch-ci-nightly-data.js > job_stats.json
76+
npm run dev
77+
```
78+
79+
The app will be available at [http://localhost:3000](http://localhost:3000).
80+
81+
### Production
82+
83+
4. **Build for production**:
84+
To create an optimized production build, run:
85+
```bash
86+
npm run build
87+
```
88+
89+
5. **Start the production server**:
90+
After building, you can start the server:
91+
```bash
92+
npm start
93+
```
94+
95+
### Scripts
96+
97+
- **Fetch CI Nightly Data**:
98+
The `fetch-ci-nightly-data.js` script can be executed manually to pull the latest CI test data from the Kata Containers repository:
99+
```bash
100+
node scripts/fetch-ci-nightly-data.js > job_stats.json
101+
```

‎components/weatherTemplate.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Image from "next/image";
2+
import { basePath } from "../next.config.js";
3+
4+
const icons = [
5+
"sunny.svg",
6+
"partially-sunny.svg",
7+
"cloudy.svg",
8+
"rainy.svg",
9+
"stormy.svg",
10+
];
11+
12+
export const getWeatherIndex = (stat) => {
13+
let fail_rate = 0;
14+
fail_rate = (stat["fails"] + stat["skips"]) / stat["runs"];
15+
// e.g. failing 3/9 runs is .33, or idx=1
16+
var idx = Math.floor((fail_rate * 10) / 2);
17+
if (idx == icons.length) {
18+
// edge case: if 100% failures, then we go past the end of icons[]
19+
// back the idx down by 1
20+
console.assert(fail_rate == 1.0);
21+
idx -= 1;
22+
}
23+
24+
// This error checks if there are zero runs.
25+
// Currently, will display stormy weather.
26+
if (isNaN(idx)) {
27+
idx = 4;
28+
}
29+
return idx;
30+
};
31+
32+
const getWeatherIcon = (stat) => {
33+
const idx = getWeatherIndex(stat);
34+
return icons[idx];
35+
};
36+
37+
export const weatherTemplate = (data) => {
38+
const icon = getWeatherIcon(data);
39+
return (
40+
<div>
41+
<Image
42+
src={`${basePath}/${icon}`}
43+
alt="weather"
44+
width={32}
45+
height={32}
46+
// priority
47+
/>
48+
</div>
49+
);
50+
};

‎index.html

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)