From 08743d8390ba427444175208d68e2e0f4546a72b Mon Sep 17 00:00:00 2001 From: Luke Nguyen Date: Wed, 8 Dec 2021 12:55:23 -0500 Subject: [PATCH] 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 | 3 ++ .../public/js/build-log/build-header.js | 41 +++++++++++++++++++ .../public/js/build-log/check-for-build.js | 5 ++- src/api/status/src/views/builds.hbs | 39 ++++++++++++++++++ 4 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/api/status/public/js/build-log/build-header.js diff --git a/src/api/status/public/js/build-log/api.js b/src/api/status/public/js/build-log/api.js index e6f542a9e0..267555a67e 100644 --- a/src/api/status/public/js/build-log/api.js +++ b/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); diff --git a/src/api/status/public/js/build-log/build-header.js b/src/api/status/public/js/build-log/build-header.js new file mode 100644 index 0000000000..066c9d86fc --- /dev/null +++ b/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); +} diff --git a/src/api/status/public/js/build-log/check-for-build.js b/src/api/status/public/js/build-log/check-for-build.js index a5e4e1de76..9cd9310fb0 100644 --- a/src/api/status/public/js/build-log/check-for-build.js +++ b/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(); diff --git a/src/api/status/src/views/builds.hbs b/src/api/status/src/views/builds.hbs index 5c537a44a2..05ba6669bb 100644 --- a/src/api/status/src/views/builds.hbs +++ b/src/api/status/src/views/builds.hbs @@ -32,6 +32,45 @@
+
+
+
+ Loading... +
+ +
+