Work

build.js

@@ -2,28 +2,30 @@ import {spawn} from 'child_process';
 import fs from 'fs';
 
 const spawnProcess = (command, args) => {
-    return new Promise((resolve, reject) => {
-        const process = spawn(command, args, { stdio: 'inherit', shell: true });
-        process.on('exit', (code) => {
-            if (code === 0) {
-                resolve();
-            } else {
-                reject(new Error(`Process exited with code ${code}`));
-            }
-        });
+  return new Promise((resolve, reject) => {
+    const process = spawn(command, args, {stdio: 'inherit', shell: true});
+    process.on('exit', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Process exited with code ${code}`));
+      }
     });
+  });
 }
 
 // 1. Prepare the 'dist' directory
 if (fs.existsSync('./dist')) {
-    fs.rmSync('./dist', { recursive: true, force: true });
+  fs.rmSync('./dist', {recursive: true, force: true});
 }
 fs.mkdirSync('./dist');
 
 // 2. Run the build steps
-const npmCommand = /^win/.test(process.platform) ? 'npm.cmd' : 'npm';
+const isWindows = /^win/.test(process.platform);
+const npmCommand = isWindows ? 'npm.cmd' : 'npm';
 const cssBuildPromise = spawnProcess(npmCommand, ['run', 'build-css']);
 const jsBuildPromise = spawnProcess(npmCommand, ['run', 'build-js']);
-const jsCopyStatic = spawnProcess(npmCommand, ['run', 'build-static']);
+const jsCopyStatic = spawnProcess(npmCommand, ['run', isWindows ? 'build-static:windows' : 'build-static']);
 
-Promise.all([cssBuildPromise, jsBuildPromise, jsCopyStatic]).then(() => {});
+Promise.all([cssBuildPromise, jsBuildPromise, jsCopyStatic]).then(() => {
+});

package.json

@@ -11,7 +11,8 @@
     "build": "node ./build.js",
     "build-js": "tsc -noEmit && esbuild src/ts/app.ts --bundle --minify --tree-shaking=true --target=es2022 --outfile=dist/app.js",
     "build-css": "sass --no-source-map --style=compressed --color src/scss/index.scss dist/style.css",
-    "build-static": "cp -R ./static/* ./dist"
+    "build-static": "cp -R ./static/* ./dist",
+    "build-static:windows": "xcopy /E /Y /I static dist"
   },
   "author": {
     "name": "Quentin Ligier",

src/scss/header.scss

@@ -8,8 +8,8 @@ header {
   img {
     width: $logo-size;
     height: $logo-size;
-    border: 1px solid #ccc;
     display: inline-block;
+    filter: drop-shadow(3px 4px 0px rgba(0, 0, 0, 0.1));
   }
 
   h1 {
@@ -27,27 +27,36 @@ header {
 
   div {
     float: right;
-    width: 400px;
   }
 
   #refresh-data {
+    color: $oc-gray-7;
+
     svg {
-      width: 24px;
-      height: 24px;
+      width: 26px;
+      height: 26px;
       color: $oc-gray-5;
+      margin-right: 5px;
+      position: relative;
+      top: -1px;
+      stroke-width: 1.3px;
     }
 
-    &.active svg {
-      animation-name: spin;
-      animation-duration: 4000ms;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
+    &.active {
+      cursor: wait;
+
+      svg {
+        animation-name: spin;
+        animation-duration: 4000ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        @keyframes spin {
+          from {
+            transform: rotate(360deg);
+          }
+          to {
+            transform: rotate(0deg);
+          }
         }
       }
     }

src/scss/index.scss

@@ -14,6 +14,13 @@ html {
   margin: 0 auto;
 }
 
+a,
+.clickable {
+  cursor: pointer;
+  text-decoration: underline $oc-gray-2;
+  text-decoration-skip: leading-spaces trailing-spaces objects;
+}
+
 @import "header";
 @import "logs";
 @import "footer";

src/scss/logs.scss

@@ -19,6 +19,7 @@ $block-border-radius: 10px;
       font-weight: 500;
       line-height: 1;
     }
+
     .day-name {
       color: $oc-gray-5;
       font-size: 1.2rem;
@@ -44,8 +45,10 @@ $block-border-radius: 10px;
   &:last-child {
     margin-bottom: 0;
   }
+
   &:hover {
     border-color: $oc-indigo-2;
+
     .switchy {
       color: $oc-blue-5;
       background: $oc-gray-1;
@@ -67,15 +70,18 @@ $block-border-radius: 10px;
       width: 5px;
       margin-right: $intercol-space;
       user-select: none;
+
       &.success {
         background: $oc-green-7;
       }
+
       &.error {
         background: $oc-red-7;
       }
     }
+
     .time {
-      width: 100px;
+      width: 120px;
       margin-right: $intercol-space;
       text-align: center;
       font-weight: 800;
@@ -84,11 +90,13 @@ $block-border-radius: 10px;
       line-height: $summary-height;
       letter-spacing: 1px;
     }
+
     .col2 {
       flex: 3;
       margin-right: $intercol-space;
       line-height: 1.7;
     }
+
     .col3 {
       width: 270px;
       line-height: 1.7;
@@ -99,15 +107,18 @@ $block-border-radius: 10px;
         vertical-align: text-bottom;
       }
     }
+
     .col4 {
       width: 120px;
       line-height: 1.7;
       color: $oc-gray-8;
+
       .icon {
         margin-right: 5px;
         vertical-align: text-bottom;
       }
     }
+
     .actions {
       width: $summary-height;
 
@@ -123,7 +134,6 @@ $block-border-radius: 10px;
 
     .repository {
       color: $oc-gray-7;
-      text-decoration: none;
 
       .country {
         width: 20px;
@@ -136,24 +146,39 @@ $block-border-radius: 10px;
         vertical-align: middle;
         position: relative;
         top: -2px;
+
         img {
           vertical-align: top;
+          border: 1px solid $oc-gray-4;
+          border-radius: 2px;
         }
       }
+
       span:nth-child(2) {
         margin-right: 4px;
       }
+
       span:nth-child(3) {
         font-weight: 600;
         margin-left: 4px;
       }
     }
+
     .branch {
       max-width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
     }
+
+    .request-rebuild {
+      cursor: pointer;
+    }
+
+    .link-preview,
+    .link-failure-logs {
+      display: block;
+    }
   }
 
   .details {
@@ -176,6 +201,7 @@ $block-border-radius: 10px;
     .switchy {
       rotate: 90deg;
     }
+
     .details {
       display: block;
     }

src/scss/notifications.scss

@@ -56,4 +56,13 @@
       color: $oc-blue-6;
     }
   }
+
+  &.warning {
+    border-color: $oc-orange-8;
+    background: $oc-orange-2;
+
+    h4 svg {
+      color: $oc-yellow-6;
+    }
+  }
 }

src/ts/app.ts

@@ -25,13 +25,15 @@ const refreshLogs: () => Promise<void> = async () => {
         // Sort and filter if necessary
         rebuildLogsInDom(allIgBuildLogs);
     } catch (e: unknown) {
-        setFetchingData(false);
         if (e instanceof Error) {
             notifyError('Failed to fetch logs', e);
         }
         console.error(e);
+    } finally {
+        setFetchingData(false);
     }
 }
 
 refreshLogs().then(() => {
-});
+});
+document.getElementById('refresh-data')!.addEventListener('click', refreshLogs);

src/ts/countries.ts

@@ -7,6 +7,7 @@ export enum Country {
     Czechia = 'cz',
     Denmark = 'dk',
     Estonia = 'ee',
+    Europe = 'eu',
     Finland = 'fi',
     France = 'fr',
     Italy = 'it',
@@ -16,6 +17,7 @@ export enum Country {
     SriLanka = 'lk',
     Sweden = 'se',
     Switzerland = 'ch',
+    UnitedNations = 'un',
     Vietnam = 'vn',
 }
 
@@ -41,6 +43,8 @@ export const repoOwnersToCountries: { [key: string]: Country } = {
 
     'TEHIK-EE': Country.Estonia,
 
+    'hl7-eu': Country.Europe,
+
     'fhir-fi': Country.Finland,
 
     'ansforge': Country.France,
@@ -63,5 +67,7 @@ export const repoOwnersToCountries: { [key: string]: Country } = {
     'hl7ch': Country.Switzerland,
     'ehealthsuisse': Country.Switzerland,
 
+    'PanAmericanHealthOrganization': Country.UnitedNations,
+
     'hl7vn': Country.Vietnam,
 }

src/ts/dom.ts

@@ -31,6 +31,7 @@ const requestRebuild = (targetLog: HTMLElement): void => {
 }
 
 domNodeLogWrapper.addEventListener('click', (event: MouseEvent) => {
+    console.log(event.target);
     if (event.target instanceof SVGElement) {
         if (event.target.matches('.switchy')) {
             // Toggle the details
@@ -48,14 +49,18 @@ domNodeLogWrapper.addEventListener('click', (event: MouseEvent) => {
     }
 });
 
+document.getElementById("refresh-data")!.addEventListener('click', () => {
+
+});
+
 export const rebuildLogsInDom = (logs: Array<IgBuildLog>) => {
     const fragment = document.createDocumentFragment();
 
     let currentDay: CurrentDay | null = null;
     for (const log of logs) {
         // Initialize the current day wrapper, if needed
         const logDay = mediumDateFormatter.format(log.date);
-        if (!currentDay?.equals(logDay)) {
+        if (currentDay === null || !currentDay.equals(logDay)) {
             if (currentDay !== null) {
                 fragment.appendChild(currentDay.fragment);
             }
@@ -84,12 +89,12 @@ export const rebuildLogsInDom = (logs: Array<IgBuildLog>) => {
 
         if (log.buildStatus === 'error') {
             template.content.querySelector('.status')!.setAttribute('title', 'The build has failed');
-            template.content.querySelector('.link-failure-logs a')!.setAttribute('href', log.failureLogsUrl);
+            template.content.querySelector('.link-failure-logs')!.setAttribute('href', log.failureLogsUrl);
             template.content.querySelector('.link-preview')!.remove();
         } else {
             template.content.querySelector('.status')!.setAttribute('title', 'The build has succeeded');
             template.content.querySelector('.link-failure-logs')!.remove();
-            template.content.querySelector('.link-preview a')!.setAttribute('href', log.baseBuildUrl);
+            template.content.querySelector('.link-preview')!.setAttribute('href', log.baseBuildUrl);
         }
 
         if (log.country) {

src/ts/notification.ts

@@ -6,7 +6,9 @@ export function notifyError(title: string, error: Error): void {
     buildNotification(title, error.message, 'error');
 }
 
-function buildNotification(title: string, message: string | undefined, type: string): void {
+type NotificationType = 'error' | 'warning' | 'info' | 'success';
+
+function buildNotification(title: string, message: string | undefined, type: NotificationType): void {
     const template = domTemplateNotification.cloneNode(true) as HTMLTemplateElement;
     template.content.querySelector('.title')!.textContent += title;
     if (message) {