added live build status to Telescope dashboard:

[mqnguyen5]

Issue This PR Addresses

Fixes #2416

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

• Added scripts for fetching and rendering build-header
• Added html template for build-header
• Imported build-header to run on load

To test the feature locally, do the following:

• Change autodeploymentUrl in public/js/buildl-log/api.js

const autodeploymentUrl = (path) => `//dev.api.telescope.cdot.systems:4000/${path}`;  

• Allow all connectSrc in src/server.js

connectSrc: ["'self'", "*"]

• Change current to previous inside src/api/status/public/js/build-log/api.js

export const checkBuildStatus = async () => {
  try {
    const res = await fetch(autodeploymentUrl('status'));
    if (!res.ok) {
      throw new Error('unable to get build info');
    }
    const data = await res.json();
    if (!data.current) {
      return { building: false };
    }
    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);
    return { building: false };
  }
};

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[Andrewnt219]

Can you update the branch and add an instruction for testing this feature?

[Andrewnt219]

@humphd Since there's no way to run the autodeployment locally, maybe it's easier to point this to the stagging or prod autodployment?

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

Line 2 in 38d74be

const autodeploymentUrl = (path) => `//${window.location.hostname}:4000/${path}`;

[humphd]

@Andrewnt219 great suggestion. For reviewing this, that works, and we can change it back before we merge. @mqnguyen5 can you point it at https://dev.telescope.cdot.systems for now?

[mqnguyen5]

Will do

[Andrewnt219]

This makes the build header switch between loading state and info state every 5s. Like, 5s of info and 5s of loading.

[mqnguyen5]

You have any suggestions on how to fix it? I've tried using setAttribute and removeAttribute here but it doesn't seems to do the trick

[Andrewnt219]

Maybe the function should only render the build info, not toggling between two states (i.e. only render info state)? I don't think there's a case where toggling between those two is necessary.

[Yoda-Canada]

I have changed current to previous inside src/api/status/public/js/build-log/api.js, but can't get the result which have the data. It only display loading status. How to get the previous information?

[mqnguyen5]

change inside the if statement as well

[manekenpix]

We really need to get better at rebasing instead of merging master into our branches

[Yoda-Canada]

@mqnguyen5 I changed, but the result is still display loading status. Do I need to add a specific address?

[mqnguyen5]

@Yoda-Canada sorry, I just updated the instruction to test this feature. You mind trying it again?

[mqnguyen5]

We really need to get better at rebasing instead of merging master into our branches

@manekenpix Sorry about that, you mind showing me a better way to do it instead of git pull upstream master?

[Andrewnt219]

you mind showing me a better way to do it instead of git pull upstream master?

Use git pull --rebase upstream master

[Yoda-Canada]

@mqnguyen5 I followed your new steps, and it only displayed the loading page. Do you use a specific address to get the following data?

[Andrewnt219]

@mqnguyen5 Handlebars PR is merged, can you rebase this? The changes in build.html go into builds.hbs

[mqnguyen5]

Will do, I'll try to get it done soon.

[humphd]

https://en.wikipedia.org/wiki/Exit_status

In Unix, a zero exit code means it worked, anything else is an error.

[Yoda-Canada]

@mqnguyen5 your code buildResult.innerText = result != 0 ? 'Good' : 'Error'; is correct. My point of view is wrong, sorry for that.

[humphd]

Good to clarify, there are lots of moving pieces here.

[Andrewnt219]

LGTM. Can you rebase and revert the change to autodeploymentUrl?

Still need to rebase

[humphd]

Two small things, looks good otherwise.

Fix and rebase please.

[Kevan-Y]

Not sure if it looks good this way

Maybe you can hide the part below on loading

You can add hidden in element of id="build-header-info"
and have a quick check if elem build-header-info is hidden or not after line 12 in src/api/status/public/js/build-log/build-header.js

if (buildHeaderInfo.hidden) {
    buildHeaderInfo.removeAttribute('hidden');
}

[mqnguyen5]

Changes have been made in response to @humphd and @Kevan-Y reviews. Sorry for not able to complete this PR sooner, I should've schedule my time better.

[Andrewnt219]

Looks great. Well done 👍.

[Yoda-Canada]

Great！You've really done hard work.

[Kevan-Y]

LGTM!