Indicate a build is in progress in Dashboard build page #2562

Yoda-Canada · 2021-12-03T15:23:28Z

Fixes #2542

An animated indication shows a build is happening.
The animated indicator shows the percentage being built.
The indicator shows how long it's been going for.
When it's done, the yellow animated circle becomes a green checkmark or a red ' X'.

Issue This PR Addresses

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

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 · 2021-12-03T15:23:31Z

humphd · 2021-12-03T15:34:24Z

Post a short video of how it looks for reviewers, please.

Yoda-Canada · 2021-12-03T15:36:41Z

https://vimeo.com/652923172/153ee981a9

humphd · 2021-12-03T15:37:59Z

NOTE: you can drag-and-drop video files into this Issue in a comment, and GitHub will host it for you.

We can't use a % since we don't have any concept of where we are in a build.

Yoda-Canada · 2021-12-03T15:43:06Z

issue_2542.mp4

Yoda-Canada · 2021-12-03T15:52:20Z

@humphd Do we have the concept of the time or just our estimate

humphd · 2021-12-03T15:53:28Z

We know when a build started (Datetime) and therefore can calculate how long it's been running, so we could do something like 1m 15s, yes.

HyperTHD · 2021-12-04T23:53:14Z

You need to link the issue you're closing so that github automatically closes it when your PR gets merged.
Please do this ASAP @Yoda-Canada

Yoda-Canada · 2021-12-08T02:47:58Z

Add the datetime calculator function. However it doesn't automatically triggered by build. I will try to do it tomorrow.

calculator.mp4.mp4

Andrewnt219

Can you update the branch? Your changes to build.html should go into builds.hbc

Andrewnt219 · 2021-12-10T16:23:03Z

src/api/status/public/css/animated-indication.css

+.box {
+  position: relative;
+  height: 50px;
+  width: 250px;
+  background: transparent;
+  border-radius: 5px;
+}
+.box svg {
+  position: absolute;
+  height: 160px;
+  width: 160px;
+  left: 25%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+.box svg circle {
+  fill: transparent;
+  stroke: rgb(252, 206, 3);
+  stroke-width: 3;
+  stroke-dasharray: 3;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: rotate 1s linear infinite, stroke 3.9s linear infinite;
+}
+
+.box .counter {
+  position: absolute;
+  top: 60%;
+  left: 25%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+  height: 30px;
+  color: #e6b800;
+  text-align: center;
+  overflow: hidden;
+}
+.box .counter span {
+  font-size: 10px;
+  line-height: 25px;
+  font-weight: bold;
+}


Use an icon from google material icons. Don't have to make your own.

Andrewnt219 · 2021-12-10T16:23:33Z

src/api/status/public/css/animated-indication.css

+h8 {
+  color: #000;
+  position: absolute;
+  width: 100%;
+  text-align: right;
+  top: 25%;
+  right: 2%;
+  letter-spacing: 1px;
+}


I believe this HTML tag doesn't exist.

it set the 'Staging' position.

What is h8 tag? Can you provide a link to its documentation?

src/api/status/public/css/animated-indication.css

Andrewnt219 · 2021-12-10T16:25:48Z

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

+
+  document.getElementById(
+    'calculatorData'
+  ).innerHTML = `${days} days, ${hours} h ${minutes} m ${seconds} s`;


A build is several hours at most, skip the day. Additionally, can you make it so that the units are only shown when it is > 0? For example, 3s instead of 0h 0m 3s. 1h 0m 0s should also be valid.

src/web/src/components/Posts/GitHubInfo.tsx

src/web/src/student-quotes.js

Yoda-Canada · 2021-12-10T17:00:35Z

Can you update the branch? Your changes to build.html should go into builds.hbc
DO you mean I need to merge master? Is it correct to use the following command?

git pull upstream master
git checkout issue-2542
git merge master

Andrewnt219 · 2021-12-10T17:13:13Z

@Yoda-Canada

git checkout your-branch-name
git pull --rebase upstream master

Then solve all the conflict during the rebase.

AmasiaNalbandian · 2021-12-10T17:36:57Z

You need to link the issue you're closing so that github automatically closes it when your PR gets merged. Please do this ASAP @Yoda-Canada

I added the issue in the side manually, sorry about this. To correctly link an issue, please use one of the keywords from GitHub to link the issue to the PR. Can you please adjust the PR for this?

Yoda-Canada · 2021-12-14T05:03:53Z

Can you update the branch? Your changes to build.html should go into builds.hbc
@Andrewnt219 when I change build.html into builds.hbc, webpage can't display the data time calculator. Could you help me to find the issue:
step 1: in the src/api/status/public/js/pages/build.js file add the following code

           import datetimeCalculator from '../build-log/datetime-calculator.js';
                window.addEventListener('load', () => {
                datetimeCalculator();
               setInterval(datetimeCalculator, 1000);
              }

step 2: in the src/api/status/src/views/builds.hbs file add the follwing code

        <div id="calculatorData" style="float: right"></div>

Andrewnt219 · 2021-12-14T06:25:45Z

Can you update your branch first?

when I change build.html into builds.hbc, webpage can't display the data time calculator. Could you help me to find the issue

Any screenshot for errors or any error messages will be helpful.

EDIT: Sorry, I made a typo there, you should look for builds.hbs not builds.hbc.

Yoda-Canada · 2021-12-15T05:25:02Z

@humphd I have almost finished this issue, but when I want to commit my code, it displays an error. Could you help me?

Yoda-Canada · 2021-12-15T05:26:55Z

Andrewnt219 · 2021-12-15T14:49:46Z

Try rebasing your branch and run pnpm i again.

Yoda-Canada · 2021-12-15T15:08:35Z

I followed the instruction of https://dev.to/menghif/transition-to-pnpm-4alf and when I execute the pnpm install, there is an error

Andrewnt219 · 2021-12-15T15:35:10Z

On Window, you should open Powershell and run this script first.

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

See: https://stackoverflow.com/questions/41117421/ps1-cannot-be-loaded-because-running-scripts-is-disabled-on-this-system

Yoda-Canada · 2021-12-15T15:56:59Z

@Andrewnt219 can I delete the src/api/status/public/css/animated-indication.css directly in PR 2562? I have deleted this file in local, but it still displays in github

Andrewnt219 · 2021-12-15T16:35:40Z

You have to add the deleted file to the commit as well.

ESLint test failed. You should run pnpm lint and fix those errors locally. Can you also update the PR description with a new video of the feature, and add how to test it locally as well?

Andrewnt219 · 2021-12-15T18:02:39Z

@Andrewnt219 I can't find the already deleted file -src/api/status/public/css/animated-indication.css. Can I create a new one, then delete and commit?

Deleting from the PR is fine too I guess.

how to fix the End-to-EndN Tests error? It looks like the npm error, and I have deleted the npm before installed pnpm

Not sure why it failed either. Just fix ESLint and push again.

Yoda-Canada · 2021-12-16T04:27:24Z

In the file src\api\status\public\js\build-log\datetime-calculator.js , add the following test data in Line7-11:

  data = {
    "startedAt": "2021-12-16T01:45:57.509Z",
    "stoppedAt": "null",
    "code": 0
  }

New Recording - 12/15/2021, 11:21:59 PM

Yoda-Canada · 2021-12-16T04:30:00Z

In the file src\api\status\public\js\build-log\datetime-calculator.js , add the following test data in Line7-11:

  data = {
    "startedAt": "2021-12-16T01:45:57.509Z",
    "stoppedAt": "2021-12-16T01:50:59.509Z",
    "code": 1
  }

Yoda-Canada · 2021-12-16T04:40:13Z

In the file src\api\status\public\js\build-log\datetime-calculator.js , add the following test data in Line7-11:

  data = {
    "startedAt": "2021-12-16T01:45:57.509Z",
    "stoppedAt": "2021-12-16T01:50:59.509Z",
    "code": 0
  }

Andrewnt219

Glad to see this is taking shape. There is still room for improvement.

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

Andrewnt219 · 2021-12-16T15:46:51Z

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

@@ -31,6 +31,24 @@
      </div>
    </div>
  </nav>
+  <div class="container-fluid py-2">


Can we move this into the build header? There are two columns for "result" and "total duration".

In the beginning, I want to move this into the build header. But after I studied issue #2416, I think they are different functions, maybe it's better to separate these two items

Are they? Your result and total duration are for current build, and they're the same as those two columns in build-header. Data is from the same source, too.

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

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

humphd · 2021-12-16T22:07:25Z

I was just watching a build on Vercel, and this is how they do it, with a spinner that flips to a check-mark or 'x', and a pretty-printed time value:

Andrewnt219 · 2022-01-13T03:04:16Z

@Yoda-Canada any updates on the current state of this PR?

Yoda-Canada · 2022-01-14T04:27:36Z

@Andrewnt219 I haven't updated the current state yet. I will review it again.

tpmai22 · 2022-01-15T03:05:16Z

@Yoda-Canada how is everything for this PR, would you need some help rebasing it ?

Yoda-Canada · 2022-01-15T15:08:43Z

@tpmai22 Most of the issues has been solved, except for the following issue. Could you help me solve this problem? I really appreciate your assistance.

tpmai22 · 2022-01-15T15:24:25Z

I would love to take a look and see

Andrewnt219 · 2022-01-15T15:46:34Z

@tpmai22 you may want to wait for #2653 to merge.

tpmai22 · 2022-01-15T17:32:08Z

@Andrewnt219 for this issue I try to catch up with the conversation between you and @Yoda-Canada but I'm still a bit lost. Would you mind to shred some light ?

Andrewnt219 · 2022-01-15T18:48:03Z

@tpmai22 in #2582, a build header was added to show the info of the ongoing build (see screenshots). At the moment, the header just shows the result "Error" or "Good". It is missing an "In progress" state.

The current PR is also showing animation/loading indicators of the 3 statuses in addition to just plain text.

tpmai22 · 2022-01-27T00:39:29Z

We can close this now refer to #2665

vercel bot deployed to Preview December 3, 2021 15:23 View deployment

vercel bot deployed to Preview December 8, 2021 02:42 View deployment

humphd requested review from Andrewnt219, menghif and AmasiaNalbandian December 10, 2021 14:08

Andrewnt219 suggested changes Dec 10, 2021

View reviewed changes

AmasiaNalbandian linked an issue Dec 10, 2021 that may be closed by this pull request

Indicate a build is in progress in Dashboard build page #2542

Closed

Yoda-Canada force-pushed the issue-2542 branch from 7af1764 to cdda0c0 Compare December 15, 2021 15:53

Yoda-Canada marked this pull request as ready for review December 15, 2021 15:59

vercel bot deployed to Preview December 15, 2021 18:39 View deployment

Yoda-Canada force-pushed the issue-2542 branch from a780cae to 3e3b6b3 Compare December 16, 2021 04:45

vercel bot deployed to Preview December 16, 2021 04:45 View deployment

vercel bot deployed to Preview December 16, 2021 04:47 View deployment

Andrewnt219 suggested changes Dec 16, 2021

View reviewed changes

edit some files according the reviews

b13955b

Yoda-Canada force-pushed the issue-2542 branch from 87b0eea to b13955b Compare December 20, 2021 03:44

vercel bot deployed to Preview December 20, 2021 03:45 View deployment

Delete animated-indication.css

247817d

vercel bot deployed to Preview December 20, 2021 03:48 View deployment

humphd assigned tpmai22 Jan 13, 2022

humphd added this to the 2.5 Release milestone Jan 13, 2022

TDDR modified the milestones: 2.5 Release, 2.6 Release Jan 20, 2022

tpmai22 mentioned this pull request Jan 26, 2022

Rendering build duration #2665

Merged

8 tasks

tpmai22 closed this Jan 27, 2022

Indicate a build is in progress in Dashboard build page #2562

Indicate a build is in progress in Dashboard build page #2562

Conversation

Yoda-Canada commented Dec 3, 2021 • edited by Andrewnt219 Loading

Issue This PR Addresses

Type of Change

Description

Checklist

gitpod-io bot commented Dec 3, 2021

humphd commented Dec 3, 2021

Yoda-Canada commented Dec 3, 2021

humphd commented Dec 3, 2021

Yoda-Canada commented Dec 3, 2021

Yoda-Canada commented Dec 3, 2021

humphd commented Dec 3, 2021

HyperTHD commented Dec 4, 2021

Yoda-Canada commented Dec 8, 2021 • edited Loading

Andrewnt219 left a comment

Choose a reason for hiding this comment

Andrewnt219 Dec 10, 2021

Choose a reason for hiding this comment

Andrewnt219 Dec 10, 2021

Choose a reason for hiding this comment

Yoda-Canada Dec 10, 2021

Choose a reason for hiding this comment

Andrewnt219 Dec 13, 2021

Choose a reason for hiding this comment

Andrewnt219 Dec 10, 2021 • edited Loading

Choose a reason for hiding this comment

Yoda-Canada commented Dec 10, 2021

Andrewnt219 commented Dec 10, 2021

AmasiaNalbandian commented Dec 10, 2021 • edited Loading

Yoda-Canada commented Dec 14, 2021

Andrewnt219 commented Dec 14, 2021 • edited Loading

Yoda-Canada commented Dec 15, 2021

Yoda-Canada commented Dec 15, 2021

Andrewnt219 commented Dec 15, 2021

Yoda-Canada commented Dec 15, 2021

Andrewnt219 commented Dec 15, 2021

Yoda-Canada commented Dec 15, 2021

Andrewnt219 commented Dec 15, 2021

Andrewnt219 commented Dec 15, 2021

Yoda-Canada commented Dec 16, 2021

Yoda-Canada commented Dec 16, 2021

Yoda-Canada commented Dec 16, 2021

Andrewnt219 left a comment

Choose a reason for hiding this comment

Andrewnt219 Dec 16, 2021

Choose a reason for hiding this comment

Yoda-Canada Dec 17, 2021

Choose a reason for hiding this comment

Andrewnt219 Dec 17, 2021

Choose a reason for hiding this comment

humphd commented Dec 16, 2021

Andrewnt219 commented Jan 13, 2022

Yoda-Canada commented Jan 14, 2022

tpmai22 commented Jan 15, 2022

Yoda-Canada commented Jan 15, 2022

tpmai22 commented Jan 15, 2022

Andrewnt219 commented Jan 15, 2022

tpmai22 commented Jan 15, 2022

Andrewnt219 commented Jan 15, 2022

tpmai22 commented Jan 27, 2022

Yoda-Canada commented Dec 3, 2021 •

edited by Andrewnt219

Loading

Yoda-Canada commented Dec 8, 2021 •

edited

Loading

Andrewnt219 Dec 10, 2021 •

edited

Loading

AmasiaNalbandian commented Dec 10, 2021 •

edited

Loading

Andrewnt219 commented Dec 14, 2021 •

edited

Loading