Skip to content

Commit 10b4d54

Browse files
a1icjaa1icja
committed
Convert from base HTML/CSS/JS to Next.js
1 parent 19ec495 commit 10b4d54

23 files changed

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

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ run-name: Fetch CI Nightly Data
33
on:
44
schedule:
55
- cron: '0 4 * * *'
6+
workflow_dispatch:
7+
# push:
8+
# branches:
9+
# - main
10+
611
jobs:
712
fetch-and-commit-data:
813
runs-on: ubuntu-22.04
@@ -13,17 +18,19 @@ jobs:
1318
- name: Update dashboard data
1419
run: |
1520
# fetch ci nightly data as temporary file
16-
node js/fetch-ci-nightly-data.js | tee tmp-data.js
21+
node scripts/fetch-ci-nightly-data.js | tee tmp-data.json
1722
# switch to a branch specifically for holding latest data
1823
git config --global user.name "GH Actions Workflow"
1924
git config --global user.email "<gha@runner>"
2025
git fetch --all
2126
git checkout latest-dashboard-data
22-
# back out whatever data was there
23-
git reset HEAD~1
27+
# pull in the latest changes
28+
git pull
2429
# overwrite the old data
30+
git rm -r --cached data/
31+
rm -rf data/
2532
mkdir -p data/
26-
mv tmp-data.js data/ci-nightly-data.js
33+
mv tmp-data.json data/job_stats.json
2734
# commit
2835
git add data
2936
git commit -m '[skip ci] latest ci nightly data'

‎.gitignore‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,38 @@
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+

‎README.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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** (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+
npm run dev
76+
```
77+
78+
The app will be available at [http://localhost:3000](http://localhost:3000).
79+
80+
### Production
81+
82+
4. **Build for production**:
83+
To create an optimized production build, run:
84+
```bash
85+
npm run build
86+
```
87+
88+
5. **Start the production server**:
89+
After building, you can start the server:
90+
```bash
91+
npm start
92+
```
93+
94+
### Scripts
95+
96+
- **Fetch CI Nightly Data**:
97+
The `fetch-ci-nightly-data.js` script can be executed manually to pull the latest CI test data from the Kata Containers repository:
98+
```bash
99+
node scripts/fetch-ci-nightly-data.js
100+
```

‎index.html‎

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

0 commit comments

Comments
 (0)