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.

• Fetches nightly CI test data using custom scripts.
• Displays weather-like icons to reflect test statuses (e.g., sunny for success, stormy for failures).
• Utilizes Next.js for server-side rendering and optimized builds.
• TailwindCSS for responsive, utility-first styling.
• Integration of PrimeReact components for UI elements.

.
├── next.config.js              # Next.js configuration
├── package.json                # Project dependencies and scripts
├── package-lock.json           # Dependency lock file
├── pages
│   ├── _app.js                 # Application wrapper for global setup
│   └── index.js                # Main dashboard page
├── postcss.config.js           # PostCSS configuration for TailwindCSS
├── public
│   ├── cloudy.svg              # Weather icons for test statuses
│   ├── favicon.ico
│   ├── partially-sunny.svg
│   ├── rainy.svg
│   ├── stormy.svg
│   └── sunny.svg
├── README.md                   # Project documentation (this file)
├── scripts
│   └── fetch-ci-nightly-data.js # Script to fetch nightly test data
├── styles
│   └── globals.css             # Global CSS imports
└── tailwind.config.js          # TailwindCSS configuration

• pages/index.js: The main entry point of the dashboard, displaying test results and their statuses.
• scripts/fetch-ci-nightly-data.js: Custom script to retrieve CI data for the dashboard.
• styles/globals.css: Custom global styles, mainly extending the TailwindCSS base.
• public/: Contains static assets like icons representing different test statuses.

Follow these steps to set up the development environment for the Kata Containers Test Dashboard:

• Node.js (version 18.x or later recommended)
• npm (comes with Node.js)

1. Clone the repository:

   git clone https://github.com/kata-containers/kata-containers.github.io.git
   cd kata-containers.github.io

2. Install dependencies: Run the following command to install both the project dependencies and development dependencies.

   npm install

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

   Create the .env file:

    NODE_ENV=development
    TOKEN=<GITHUB_PAT_OR_OTHER_VALID_TOKEN>

   Create the folder /localData. Then, run:

   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.

4. Build for production: To create an optimized production build, run:

   npm run build

5. Start the production server: After building, you can start the server:

   npm start

In deploy.yml:

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.