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

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

@@ -1,5 +1,6 @@
 // http://localhost:1111/pages/build.html -> http://localhost:4000/:path
-const autodeploymentUrl = (path) => `//${window.location.hostname}:4000/${path}`;
+// const autodeploymentUrl = (path) => `//${window.location.hostname}:4000/${path}`;
+const autodeploymentUrl = (path) => `//dev.api.telescope.cdot.systems:4000/${path}`;
 
 export const checkBuildStatus = async () => {
   try {
@@ -15,7 +16,10 @@ export const checkBuildStatus = async () => {
     return {
       building: true,
       title: data.type,
+      githubData: data.current.githubData,
       startedAt: new Date(data.current.startedDate),
+      stoppedAt: new Date(data.current.stopDate),
+      result: data.code,
     };
   } catch (err) {
     console.error(err);

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

@@ -1,6 +1,4 @@
-const autodeploymentUrl = (path) => `//dev.api.telescope.cdot.systems:4000/${path}`;
-
-const resMsg = document.getElementById('response-msg');
+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');
@@ -10,38 +8,32 @@ const buildResult = document.getElementById('build-result');
 const buildStarted = document.getElementById('build-started');
 const buildDuration = document.getElementById('build-duration');
 
-function renderBuildInfo({ githubData, startedDate, stopDate, code }) {
-  resMsg.toggleAttribute('hidden');
-  buildHeaderInfo.toggleAttribute('hidden');
+function renderBuildInfo({ githubData, startedAt, stoppedAt, result }) {
+  buildHeaderTitle.innerHTML = '';
+  buildHeaderTitle.innerText = 'Build Status';
   buildSender.setAttribute('href', githubData.sender.html_url);
   buildSenderName.innerText = githubData.sender.login;
   buildSenderImg.src = githubData.sender.avatar_url;
   buildGitSHA.setAttribute('href', githubData.compare);
   buildGitSHA.innerText = githubData.after.substring(0, 7);
-  buildResult.innerText = code === 0 ? 'Good' : 'Error';
-  buildStarted.innerText = new Date(startedDate).toUTCString();
+  buildResult.innerText = result === 0 ? 'Good' : 'Error';
+  buildStarted.innerText = new Date(startedAt).toUTCString();
 
-  const duration = new Date(stopDate).getTime() - new Date(startedDate).getTime();
+  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 async function buildHeader() {
-  try {
-    const res = await fetch(autodeploymentUrl('status'));
-    if (!res.ok) {
-      const icon = document.createElement('i');
-      icon.className = 'fas fa-server px-2';
-      resMsg.innerHTML = '';
-      resMsg.append(icon);
-      resMsg.innerHTML += 'Unable to get build info.';
-
-      throw new Error('Unable to get build info');
-    }
-    const { previous } = await res.json();
-    renderBuildInfo(previous);
-  } catch (err) {
-    console.error(err);
+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/public/js/pages/build.js

@@ -1,8 +1,6 @@
 import checkForBuild from '../build-log/check-for-build.js';
-import buildHeader from '../build-log/build-header.js';
 
 window.addEventListener('load', () => {
   checkForBuild();
-  buildHeader();
   setInterval(checkForBuild, 5000);
 });

src/api/status/public/pages/build.html

@@ -167,12 +167,11 @@ <h6 class="font-weight-bolder mb-0">Build Log</h6>
         </div>
       </nav>
       <div class="container-fluid py-2">
-        <h6 class="font-weight-bolder mb-0">Build Status</h6>
         <div id="build-header" class="border rounded p-2 mb-3 bg-white">
-          <h6 id="response-msg" class="mb-0 text-lg text-center">
+          <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 id="build-header-info">
             <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>
@@ -184,14 +183,14 @@ <h6 id="response-msg" class="mb-0 text-lg text-center">
                   <a id="build-sender" href="#">
                     <img
                       class="avatar avatar-xs rounded-circle"
-                      alt="GitHub user's avatar"
+                      alt=""
                       src=""
                       id="build-sender-img"
                     />
                     <span id="build-sender-name"></span>
                   </a>
                   synchronized
-                  <span><a id="build-git-sha" href="#"></a></span>
+                  <span><a id="build-git-sha" href="#" class="text-decoration-underline"></a></span>
                 </div>
               </div>
               <div