dashboard: Add view for PR runs

Author: afinn12

.github/workflows/fetch-ci-nightly-data.yaml renamed to .github/workflows/fectch-ci-data.yml

@@ -1,8 +1,8 @@
-name: Fetch CI Nightly Data
-run-name: Fetch CI Nightly Data
+name: Fetch CI Data
+run-name: Fetch CI Data
 on:
   schedule:
-    - cron: '0 4 * * *'
+    - cron: '0 * * * *'
   workflow_dispatch:
 
 jobs:
@@ -15,18 +15,24 @@ jobs:
       - name: Update dashboard data
         run: |
           # fetch ci nightly data as temporary file
-          node scripts/fetch-ci-nightly-data.js | tee tmp-data.json
+          TOKEN=${{ secrets.GITHUB_TOKEN }} node scripts/fetch-ci-nightly-data.js | tee tmp-data.json
+          TOKEN=${{ secrets.GITHUB_TOKEN }} node scripts/fetch-ci-pr-data.js | tee tmp-data2.json
+
           # switch to a branch specifically for holding latest data
           git config --global user.name "GH Actions Workflow"
           git config --global user.email "<gha@runner>"
           git fetch --all
           git checkout latest-dashboard-data
+
           # back out whatever data was there
           git reset HEAD~1
+
           # overwrite the old data
           mkdir -p data/
           mv tmp-data.json data/job_stats.json
+          mv tmp-data2.json data/check_stats.json
+          
           # commit
           git add data
           git commit -m '[skip ci] latest ci nightly data'
-          git push --force
+          git push --force

package-lock.json

@@ -8,6 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "dotenv": "^16.4.5",
     "next": "^14.2.13",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",

package.json

@@ -1,3 +1,4 @@
+
 import { useEffect, useState } from "react";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
@@ -7,29 +8,36 @@ import { weatherTemplate, getWeatherIndex } from "../components/weatherTemplate"
 export default function Home() {
   const [loading, setLoading] = useState(true);
   const [jobs, setJobs] = useState([]);
-  const [rows, setRows] = useState([]);
-  const [expandedRows, setExpandedRows] = useState([]);
+  const [checks,         setChecks]         = useState([]);
+  const [rowsPR,     setRowsPR]     = useState([]);
+  const [rowsNightly,    setRowsNightly]    = useState([]);
+  const [expandedRows, setExpandedRows]     = useState([]);
+  const [display,        setDisplay]        = useState("nightly");
+
 
   useEffect(() => {
     const fetchData = async () => {
-      let data = {};
+      let nightlyData = {};
+      let prData = {};
 
       if (process.env.NODE_ENV === "development") {
-        data = (await import("../job_stats.json")).default;
+        nightlyData = (await import("../data/job_stats.json")).default;
+        prData = (await import("../data/check_stats.json")).default;
       } else {
-        const response = await fetch(
+        nightlyData = await fetch(
           "https://raw.githubusercontent.com/kata-containers/kata-containers.github.io" +
             "/refs/heads/latest-dashboard-data/data/job_stats.json"
-        );
-        data = await response.json();
+        ).then((res) => res.json());
+        prData = await fetch(
+          "https://raw.githubusercontent.com/kata-containers/kata-containers.github.io" +
+            "/refs/heads/latest-dashboard-data/data/check_stats.json"
+        ).then((res) => res.json());
       }
 
       try {
-        const jobData = Object.keys(data).map((key) => {
-          const job = data[key];
-          return { name: key, ...job };
-        });
-        setJobs(jobData);
+        const mapData = (data) => Object.keys(data).map((key) => ({ name: key, ...data[key] }));
+        setJobs(mapData(nightlyData));
+        setChecks(mapData(prData));
       } catch (error) {
         // TODO: Add pop-up/toast message for error
         console.error("Error fetching data:", error);
@@ -41,17 +49,50 @@ export default function Home() {
     fetchData();
   }, []);
 
+// Filter and set the rows for Nightly view. 
+useEffect(() => {
+  setLoading(true);
+  let filteredJobs = jobs;
+  //Set the rows for the table.
+  setRowsNightly(
+    filteredJobs.map((job) => ({
+      name          : job.name,
+      runs          : job.runs,
+      fails         : job.fails,
+      skips         : job.skips,
+      required      : job.required,
+      weather       : getWeatherIndex(job),
+    }))
+  );
+  setLoading(false);
+}, [jobs]);
+
+// Filter and set the rows for PR Checks view. 
+useEffect(() => {
+  setLoading(true);
+  let filteredChecks = checks
+
+  //Set the rows for the table.
+  setRowsPR(
+    filteredChecks.map((check) => ({
+      name          : check.name,
+      runs          : check.runs,
+      fails         : check.fails,
+      skips         : check.skips,
+      required      : check.required,
+      weather       : getWeatherIndex(check),
+    }))
+  );
+  setLoading(false);
+}, [checks]);
+
+  // Close all rows on view switch. 
+  // Needed because if view is switched, breaks expanded row toggling.
   useEffect(() => {
-    setLoading(true);
+    setExpandedRows([])
+  }, [display]); 
+
 
-    // Create rows to set into table.
-    const rows = jobs.map((job) => ({
-      ...job,
-      weather: getWeatherIndex(job),
-    }));
-    setRows(rows);
-    setLoading(false);
-  }, [jobs]);
 
   const toggleRow = (rowData) => {
     const isRowExpanded = expandedRows.includes(rowData);
@@ -66,6 +107,11 @@ export default function Home() {
     setExpandedRows(updatedExpandedRows);
   };
 
+  const tabClass = (active) => `tab md:px-4 px-2 py-2 border-b-2 focus:outline-none
+    ${active ? "border-blue-500 bg-gray-300" 
+      : "border-gray-300 bg-white hover:bg-gray-100"}`;
+
+
   // Template for rendering the Name column as a clickable item
   const nameTemplate = (rowData) => {
     return (
@@ -76,7 +122,10 @@ export default function Home() {
   };
 
   const rowExpansionTemplate = (data) => {
-    const job = jobs.find((job) => job.name === data.name);
+    const job = (display === "nightly" 
+      ? jobs 
+      : checks).find((job) => job.name === data.name);
+
 
     // Prepare run data
     const runs = [];
@@ -120,67 +169,126 @@ export default function Home() {
     );
   };
 
-  const renderTable = () => (
+  // Render table for nightly view.
+  const renderNightlyTable = () => (
     <DataTable
-      value={rows}
+      value={rowsNightly}
       expandedRows={expandedRows}
       stripedRows
       rowExpansionTemplate={rowExpansionTemplate}
       onRowToggle={(e) => setExpandedRows(e.data)}
       loading={loading}
       emptyMessage="No results found."
     >
-      <Column expander style={{ width: "5rem" }} />
+      <Column expander/>
       <Column
         field="name"
         header="Name"
         body={nameTemplate}
+        className="select-all"
         filter
         sortable
-        maxConstraints={4}
-        filterHeader="Filter by Name"
-        filterPlaceholder="Search..."
       />
-      <Column field="required" header="Required" sortable />
-      <Column field="runs" header="Runs" sortable />
-      <Column field="fails" header="Fails" sortable />
-      <Column field="skips" header="Skips" sortable />
+      <Column field = "required"      header = "Required" sortable/>
+      <Column 
+        field = "runs"   
+        header = "Runs"
+        className="whitespace-nowrap px-2"
+        sortable />
+      <Column field = "fails"         header = "Fails"   sortable/>
+      <Column field = "skips"         header = "Skips"   sortable/>
+      <Column 
+        field = "weather"  
+        header = "Weather"  
+        body = {weatherTemplate} 
+        sortable />
+    </DataTable>
+  );
+
+  const renderPRTable = () => (
+    <DataTable
+      value={rowsPR}
+      expandedRows={expandedRows}
+      stripedRows
+      rowExpansionTemplate={rowExpansionTemplate}
+      onRowToggle={(e) => setExpandedRows(e.data)}
+      loading={loading}
+      emptyMessage="No results found."
+    >
+      <Column expander/>
       <Column
-        field="weather"
-        header="Weather"
-        body={weatherTemplate}
+        field="name"
+        header="Name"
+        body={nameTemplate}
+        className="select-all"
+        filter
         sortable
       />
+      <Column field = "required"      header = "Required" sortable/>
+      <Column 
+        field = "runs"   
+        header = "Runs"
+        className="whitespace-nowrap px-2"
+        sortable />
+      <Column field = "fails"         header = "Fails"   sortable/>
+      <Column field = "skips"         header = "Skips"   sortable/>
+      <Column 
+        field = "weather"  
+        header = "Weather"  
+        body = {weatherTemplate} 
+        sortable />
     </DataTable>
   );
 
+
   return (
-    <div className="text-center">
-      <h1
-        className={
-          "text-4xl mt-4 mb-0 underline text-inherit hover:text-blue-500"
-        }
-      >
-        <a
-          href={
-            "https://github.com/kata-containers/kata-containers/" +
-            "actions/workflows/ci-nightly.yaml"
-          }
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Kata CI Dashboard
-        </a>
-      </h1>
-
-      <main
-        className={
-          "m-0 h-full p-4 overflow-x-hidden overflow-y-auto bg-surface-ground font-normal text-text-color antialiased select-text"
-        }
-      >
-        <div>{renderTable()}</div>
-        <div className="mt-4 text-lg">Total Rows: {rows.length}</div>
-      </main>
-    </div>
+    <>
+      
+      <title>Kata CI Dashboard</title>
+      <div className="text-center text-xs md:text-base">
+        <h1 className={"text-4xl mt-4 ml-4 mb-6 underline text-inherit \
+                        hover:text-blue-500"}>
+          <a
+            href={display === 'nightly' 
+              ? "https://github.com/kata-containers/kata-containers/" +
+                "actions/workflows/ci-nightly.yaml"
+              : "https://github.com/kata-containers/kata-containers/" +
+                "actions/workflows/ci-on-push.yaml"}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Kata CI Dashboard
+          </a>
+        </h1>
+
+        <div className="flex flex-wrap mt-2 p-4 md:text-base text-xs">
+          <div className="space-x-2 pb-2 pr-3 mx-auto flex">
+            <button 
+              className={tabClass(display === "nightly")}
+              onClick={() => {
+                setDisplay("nightly");
+              }}>
+              Nightly Jobs
+            </button>
+            <button 
+              className={tabClass(display === "prchecks")}
+              onClick={() => {
+                setDisplay("prchecks");
+              }}>
+              PR Checks
+            </button>
+            </div>
+        </div>
+        
+        <div className="mt-1 text-center md:text-lg text-base">
+          Total Rows: {display === "prchecks" ? rowsPR.length : rowsNightly.length}
+        </div>
+
+        <main className={"m-0 h-full px-4 overflow-x-hidden overflow-y-auto \
+                          bg-surface-ground antialiased select-text"}>
+          <div>{display === "prchecks" ? renderPRTable() : renderNightlyTable()}</div>
+        </main>
+      </div>
+    </>
   );
-}
+  }