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/footer.scss

@@ -0,0 +1,3 @@
+footer {
+  margin: 3em 0;
+}

src/scss/header.scss

@@ -4,12 +4,13 @@ header {
   $logo-size: 100px;
 
   line-height: $logo-size;
+  margin-bottom: 1em;
 
   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 +28,39 @@ header {
 
   div {
     float: right;
-    width: 400px;
+    color: $oc-gray-4;
   }
 
-  #refresh-data {
+  #refresh-data,
+  #request-new-build {
+    color: $oc-gray-7;
+    margin: 0 1.2em;
+
     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 {
+  #refresh-data.active {
+    cursor: wait;
+
+    svg {
       animation-name: spin;
       animation-duration: 4000ms;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
       @keyframes spin {
         from {
-          transform: rotate(0deg);
+          transform: rotate(360deg);
         }
         to {
-          transform: rotate(360deg);
+          transform: rotate(0deg);
         }
       }
     }

src/scss/index.scss

@@ -14,6 +14,13 @@ html {
   margin: 0 auto;
 }
 
+a,
+.clickable {
+  cursor: pointer;
+  text-decoration: underline #88aac9;
+  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

@@ -5,55 +5,87 @@
   position: absolute;
   bottom: 20px;
   right: 20px;
-  width: 150px;
+  width: 350px;
 }
 
 .notification {
-  border-left-width: 2px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  $icon-size: 22px;
+
+  border-style: solid;
+  border-width: 0 0 0 2px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 1em 1em 1em 0.4em;
+  margin-top: 1em;
 
   svg.close {
     float: right;
-    color: $oc-gray-5;
+    color: $oc-gray-6;
+    height: 26px;
+    width: 26px;
   }
 
   h4 {
+    margin-top: 0;
+    margin-bottom: 0.4em;
+
     svg {
-      width: 15px;
-      height: 15px;
-      margin-right: 15px;
+      width: $icon-size;
+      height: $icon-size;
+      margin-right: 0.4em;
     }
   }
 
   p {
-    margin-left: 30px;
+    margin: 0 0 0 calc(0.4em + #{$icon-size});
   }
 
   &.error {
     border-color: $oc-red-7;
-    background: $oc-red-0;
+    background: $oc-red-1;
 
-    h4 svg {
-      color: $oc-red-5;
+    h4 {
+      color: $oc-red-7;
+
+      svg {
+        color: $oc-red-5;
+      }
     }
   }
 
   &.success {
     border-color: $oc-green-5;
-    background: $oc-green-1;
+    background: $oc-green-0;
 
-    h4 svg {
-      color: $oc-green-6;
+    h4 {
+      color: $oc-green-8;
+      svg {
+        color: $oc-green-6;
+      }
     }
   }
 
   &.info {
     border-color: $oc-blue-8;
-    background: $oc-blue-2;
+    background: $oc-blue-0;
+
+    h4 {
+      color: $oc-blue-8;
+      svg {
+        color: $oc-blue-6;
+      }
+    }
+  }
+
+  &.warning {
+    border-color: $oc-orange-6;
+    background: $oc-orange-0;
 
-    h4 svg {
-      color: $oc-blue-6;
+    h4 {
+      color: $oc-orange-8;
+      svg {
+        color: $oc-yellow-6;
+      }
     }
   }
 }

src/ts/api.ts

@@ -1,5 +1,6 @@
 import {Country, repoOwnersToCountries} from "./countries";
 import YAML from 'yaml';
+import {notifySuccess} from "./notification";
 
 const qasFileUrl = 'https://build.fhir.org/ig/qas.json';
 const buildsFileUrl = 'https://build.fhir.org/ig/builds.json';
@@ -174,6 +175,7 @@ export async function requestIgBuild(repoOwner: string, repoName: string, branch
             }
         })
     });
+    notifySuccess('Build requested', `The build for ${repoOwner}/${repoName} on branch ${branch} has been requested.`);
 }
 
 const parseDate = (date: string): Date => {