Skip to content

Commit 9b993f0

Browse files
sprtsprt
authored
Merge pull request #16 from a1icja/main
migration: Move from vanilla JS to Next.JS
2 parents 19ec495 + 74d9dbd commit 9b993f0

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)