Merge pull request #93 from ISISComputingGroup/add_own_wall_display

render jobs on wall display rather than using an iframe

app/components/JenkinsJobs.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { IfcWallDisplayJob, IfcWallDisplayResponse } from "@/app/types";
+
+const successColour = "[#90EE90]";
+const failureColour = "[#F08080]";
+const abortedColour = "gray-400";
+
+const jenkinsColourToWebDashColour = new Map<string, string>([
+  ["red", `bg-${failureColour}`], // build broken
+  ["blue", `bg-${successColour}`], // build success
+  ["aborted", `bg-${abortedColour}`], // build aborted
+  [
+    "red_anime",
+    `bg-[repeating-linear-gradient(45deg,#F08080_0px,#F08080_20px,#99a1af_20px,#99a1af_40px)]`,
+  ], // build running but was broken
+  [
+    "blue_anime",
+    "bg-[repeating-linear-gradient(45deg,#90EE90_0px,#90EE90_20px,#99a1af_20px,#99a1af_40px)]",
+  ], // build running but was successful
+]);
+
+export default function JenkinsJobIframe() {
+  const [data, setData] = useState<Array<IfcWallDisplayJob>>([]);
+
+  useEffect(() => {
+    async function fetchPosts() {
+      const res = await fetch(
+        "https://epics-jenkins.isis.rl.ac.uk/view/WallDisplay/api/json",
+      );
+      const resData: IfcWallDisplayResponse = await res.json();
+      const jobs: Array<IfcWallDisplayJob> = resData["jobs"].filter(
+        (job) => job["color"] != "disabled",
+      );
+      setData(jobs);
+    }
+    fetchPosts();
+  }, []);
+
+  if (data.length === 0) {
+    return (
+      <div>
+        <h1 className={"dark:text-white"}>
+          Loading jenkins jobs. If this takes a while, check you are connected
+          to the ISIS network.
+        </h1>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={
+        "grid md:grid-rows-8 md:grid-flow-col  md:grid-cols-3 items-center gap-1.5 grid-cols-1"
+      }
+    >
+      {data.map((job) => (
+        <a
+          key={job["name"]}
+          href={job["url"] + "#:~:text=Builds"} // link to text fragment for "builds"
+          className={
+            "text-black h-10 font-bold text-xl capitalize rounded-lg text-center border-2 border-black hover:border-white " +
+            jenkinsColourToWebDashColour.get(job["color"])
+          }
+          target={"_blank"}
+        >
+          {job["name"]}
+        </a>
+      ))}
+    </div>
+  );
+}

app/types.ts

@@ -162,3 +162,19 @@ export interface instListEntry {
 }
 
 export type instList = Array<instListEntry>;
+
+export interface IfcWallDisplayJob {
+  _class: string;
+  color: string;
+  name: string;
+  url: string;
+}
+
+export interface IfcWallDisplayResponse {
+  _class: string;
+  description?: string;
+  name: string;
+  property: Array<string>;
+  url: string;
+  jobs: Array<IfcWallDisplayJob>;
+}

app/wall/page.tsx

@@ -1,5 +1,5 @@
 import ShowHideBeamInfo from "../components/ShowHideBeamInfo";
-import JenkinsJobIframe from "../components/JenkinsJobsIframe";
+import JenkinsJobIframe from "../components/JenkinsJobs";
 import InstrumentsDisplay from "@/app/components/InstrumentsDisplay";
 
 export default function WallDisplay() {
@@ -22,6 +22,9 @@ export default function WallDisplay() {
             </div>
           </div>
           <hr className="h-[2px] rounded my-4 bg-gray-200 border-0 dark:bg-gray-600" />
+          <h1 className="w-full text-left text-black dark:text-white font-semibold text-2xl pb-2 ">
+            Jenkins jobs:
+          </h1>
           <JenkinsJobIframe />
         </div>
       </section>

jest.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
     "app/**/*.{ts,tsx}",
     "!**/*layout.tsx",
     "!app/_app.tsx",
-    "!app/components/JenkinsJobsIframe.tsx", // relies on an external image
+    "!app/components/JenkinsJobs.tsx", // relies on an external fetch
     "!app/components/ShowHideBeamInfo.tsx", // relies on an external image
     "!app/components/InstrumentData.tsx", // relies on websocket
   ],