added live build status to Telescope dashboard:

	* added scripts for fetching and rendering build-header
	* added html template for build-header
	* imported build-header to run on load

made adjustments based on feedbacks:

	* removed fetch from build-header
	* moved build-header call to check-for-build so they are in sync
	* added extra return data (githubData, stop date, result code) from API
	* changed auto-deployment url to https://dev.telescope.cdot.systems
	* moved the build-header function call to before the if statement
	* removed the state toggling code
	* moved build-headers into .hbs file
	* changed returning stoppedAt value to use current date
	* removed the line setting innerText for build-header title
	* modified build-header to use card component from material dashboard
	* centered build-header title
	* reverted autodeployment url
	* hid build-header info when in loading state and show when data is fetched
	* removed the use of setAttribute and replaced them with setter on the DOM element API

src/api/status/public/js/build-log/api.js

@@ -15,7 +15,10 @@ export const checkBuildStatus = async () => {
     return {
       building: true,
       title: data.type,
+      githubData: data.current.githubData,
       startedAt: new Date(data.current.startedDate),
+      stoppedAt: new Date(),
+      result: data.code,
     };
   } catch (err) {
     console.error(err);

src/api/status/public/js/build-log/build-header.js

@@ -0,0 +1,41 @@
+const buildHeaderTitle = document.getElementById('build-header-title');
+const buildHeaderInfo = document.getElementById('build-header-info');
+const buildSender = document.getElementById('build-sender');
+const buildSenderName = document.getElementById('build-sender-name');
+const buildSenderImg = document.getElementById('build-sender-img');
+const buildGitSHA = document.getElementById('build-git-sha');
+const buildResult = document.getElementById('build-result');
+const buildStarted = document.getElementById('build-started');
+const buildDuration = document.getElementById('build-duration');
+
+function renderBuildInfo({ githubData, startedAt, stoppedAt, result }) {
+  if (buildHeaderInfo.hidden) {
+    buildHeaderInfo.removeAttribute('hidden');
+  }
+  buildHeaderTitle.innerHTML = '';
+  buildSender.href = githubData.sender.html_url;
+  buildSenderName.innerText = githubData.sender.login;
+  buildSenderImg.src = githubData.sender.avatar_url;
+  buildGitSHA.href = githubData.compare;
+  buildGitSHA.innerText = githubData.after.substring(0, 7);
+  buildResult.innerText = result === 0 ? 'Good' : 'Error';
+  buildStarted.innerText = new Date(startedAt).toUTCString();
+
+  const duration = new Date(stoppedAt).getTime() - new Date(startedAt).getTime();
+  const minutes = Math.floor(duration / 60000);
+  const seconds = ((duration % 60000) / 1000).toFixed(0);
+  buildDuration.innerText = `${minutes}m ${seconds}s`;
+}
+
+export default function buildHeader(data) {
+  if (!data.building) {
+    const icon = document.createElement('i');
+    icon.className = 'fas fa-server px-2';
+    buildHeaderTitle.innerHTML = '';
+    buildHeaderTitle.append(icon);
+    buildHeaderTitle.innerHTML += 'Unable to get build info.';
+    buildHeaderInfo.innerHTML = '';
+    return;
+  }
+  renderBuildInfo(data);
+}

src/api/status/public/js/build-log/check-for-build.js

@@ -1,6 +1,7 @@
 /* eslint-disable consistent-return */
 import { checkBuildStatus, getBuildLog } from './api.js';
 import terminal from './terminal.js';
+import buildHeader from './build-header.js';
 
 let build;
 let reader;
@@ -27,12 +28,14 @@ function processLog({ done, value }) {
 }
 
 export default async function checkForBuild() {
+  const status = await checkBuildStatus();
+  buildHeader(status);
+
   // If we're already building, skip this check
   if (build) {
     return;
   }
 
-  const status = await checkBuildStatus();
   if (status.building) {
     terminal.clear();
     reader = await getBuildLog();

src/api/status/src/views/builds.hbs

@@ -32,6 +32,45 @@
     </div>
   </nav>
   <div class="container-fluid py-2">
+    <div id="build-header" class="card mb-3 bg-white">
+     <div class="card-body">
+        <h6 id="build-header-title" class="mb-0 text-lg text-center">
+          <i class="fa-spin fas fa-hourglass-half px-2"></i>Loading...
+        </h6>
+        <div id="build-header-info" hidden>
+          <div class="row mb-2">
+            <div class="col text-xs">Triggered on <span id="build-started"></span></div>
+            <div class="col col-md-2 text-xs">Result</div>
+            <div class="col col-md-2 text-xs">Total duration</div>
+          </div>
+          <div class="row">
+            <div class="col text-sm">
+              <div class="align-center">
+                <a id="build-sender" class="card-link" href="#">
+                  <img
+                    class="avatar avatar-xs rounded-circle"
+                    alt=""
+                    src=""
+                    id="build-sender-img"
+                  />
+                  <span id="build-sender-name"></span>
+                </a>
+                synchronized
+                <span><a id="build-git-sha" href="#" class="card-link text-decoration-underline"></a></span>
+              </div>
+            </div>
+            <div
+              id="build-result"
+              class="col col-md-2 text-dark text-sm font-weight-bolder"
+            ></div>
+            <div
+              id="build-duration"
+              class="col col-md-2 text-dark text-sm font-weight-bolder"
+            ></div>
+          </div>
+        </div>
+     </div>
+    </div>
     <div id="terminal"></div>
   </div>
 </main>