`Integrated code lifecycle`: Add duration in build queue view #8608

BBesrour · 2024-05-16T14:12:43Z

Checklist

General

This is a small issue that I tested locally and was confirmed by another developer on a test server.
Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
I chose a title conforming to the naming conventions for pull requests.

Client

Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
I strictly followed the client coding and design guidelines.
Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
I documented the TypeScript code using JSDoc style.
I added multiple screenshots/screencasts of my UI changes.
I translated all newly inserted strings into English and German.

Motivation and Context

This helps improve the time needed for a quick overview of the running build agents and possible problems.

Admins need a way to view the buildjob duration quickly and to be warned when a job lasts longer than 4 min (default timeout time for jobs in the server)

Steps for Testing

Prerequisites:

1 Admin
1 Student
1 Programming Exercise

Create a programming exercise and change the build script to the following

set -e

maven () {
  echo '⚙️ executing maven'
  sleep 200
  mvn clean test
}

main () {
  maven
}

main "${@}"

As student, participate in the exercise and submit
As admin, open the buildqueue view and check the Build Duration. Make sure that its being updated and that the value is correct using the Build Start Date
Row should be highlighted when Build duration > 4 mins (This might not happen since the default timeout is 4min on the server. You can test this locally and increase the timeout)

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked

Review Progress

Performance Review

I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance

Code Review

Code Review 1
Code Review 2

Manual Tests

Test 1
Test 2

Screenshots

(Changed the time to trigger the highlight to 10s for demo)

- add interval which updates the duration

coderabbitai · 2024-05-16T14:12:53Z

Walkthrough

The recent updates to the build queue component enhance the user interface by adding conditional styling and formatting for build durations. Additionally, the component now dynamically updates build job durations every second, ensuring real-time accuracy. These changes improve the visibility and tracking of build processes, providing a more responsive and informative user experience.

Changes

File	Change Summary
`src/.../build-queue/build-queue.component.html`	Updated the template to include conditional styling and formatting for build durations. Added new column definitions for build duration and submission date with enhanced display features.
`src/.../build-queue/build-queue.component.ts`	Introduced an `interval` property to periodically update build job durations. Implemented the `updateBuildJobDuration()` method to handle duration calculations and updates. Set up an interval to refresh durations every second and clear it upon component destruction.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

src/main/webapp/app/localci/build-queue/build-queue.component.ts

JohannesStoehr · 2024-05-16T15:37:19Z

src/main/webapp/app/localci/build-queue/build-queue.component.ts

+            }
+        }
+        // This is necessary to update the view when the build job duration is updated
+        this.runningBuildJobs = JSON.parse(JSON.stringify(this.runningBuildJobs));


I think the proper way would be to trigger the change detection.
Or at least only create a new array instead of parsing it: this.runningBuildJobs = [...this.runningBuildJobs];

These unfortunately didn't work when I tried them

ref.detectChanges() doesn't work due to how ngx-datatable is implemented

this.runningBuildJobs = [...this.runningBuildJobs]; didn't work too (although they say that it should work in their docs)

The spread operator ('...') is a shallow copy method, which means it copies the elements of the array but not the nested objects themselves, they remain referenced to the original objects.
The JSON.parse(...) is a deep copying method and creates entirely new and independent objects.
I did not go into detail on BuildJobs -Class, but this could explain why only the parsing works correctly for your runningBuildJobs array

Since we already use eslint could we not just use the deep copy method of that library?
Also I'm not completely sure but could setting it to an empty array first and then re-setting it work?

…ldjob-duration-in-buildqueue-view

github-actions · 2024-05-17T13:55:34Z

⚠️ Unable to deploy to test servers ⚠️

Testserver "artemis-test3.artemis.cit.tum.de" is already in use by PR #8613.

github-actions · 2024-05-17T18:13:41Z

⚠️ Unable to deploy to test servers ⚠️

Testserver "artemis-test3.artemis.cit.tum.de" is already in use by PR #8613.

Jan-Thurner

Tested locally in a testing session as TS3 is currently in use. Works as expected.

…ldjob-duration-in-buildqueue-view

az108

tested in a testing session locally due to TS3 being currently in use. Works as intended

rstief

Code LGTM overall 👍 Two small notes but those do not need to be addressed right now

rstief · 2024-05-17T19:18:37Z

src/main/webapp/app/localci/build-queue/build-queue.component.ts

+            }
+        }
+        // This is necessary to update the view when the build job duration is updated
+        this.runningBuildJobs = JSON.parse(JSON.stringify(this.runningBuildJobs));


Since we already use eslint could we not just use the deep copy method of that library?
Also I'm not completely sure but could setting it to an empty array first and then re-setting it work?

src/main/webapp/app/localci/build-queue/build-queue.component.html

Bilel Besrour and others added 4 commits May 16, 2024 12:51

- Add buildjob duration to queue view

f66a6c0

- add interval which updates the duration

force duration UI update

a475cac

add highlight when duration longer than 240

a7f075f

reduce interval to 1s

112b831

BBesrour added client Pull requests that update TypeScript code. (Added Automatically!) small component:integrated code lifecycle labels May 16, 2024

BBesrour self-assigned this May 16, 2024

BBesrour requested a review from a team as a code owner May 16, 2024 14:12

coderabbitai bot previously approved these changes May 16, 2024

View reviewed changes

add tests

ee415d5

BBesrour dismissed coderabbitai[bot]’s stale review via ee415d5 May 16, 2024 14:37

github-actions bot added the tests label May 16, 2024

BBesrour added the ready for review label May 16, 2024

coderabbitai bot previously approved these changes May 16, 2024

View reviewed changes

reduce width

0e9aae7

BBesrour dismissed coderabbitai[bot]’s stale review via 0e9aae7 May 16, 2024 14:45

coderabbitai bot previously approved these changes May 16, 2024

View reviewed changes

fix name and reduce build duration width

633d776

BBesrour dismissed coderabbitai[bot]’s stale review via 633d776 May 16, 2024 14:50

improve readability

16e186e

JohannesStoehr requested changes May 16, 2024

View reviewed changes

coderabbitai bot previously approved these changes May 16, 2024

View reviewed changes

change requests

515c87e

BBesrour dismissed coderabbitai[bot]’s stale review via 515c87e May 16, 2024 16:08

coderabbitai bot approved these changes May 16, 2024

View reviewed changes

BBesrour requested a review from JohannesStoehr May 16, 2024 16:15

BBesrour changed the title ~~Integrated code lifecycle: add buildjob duration in buildqueue view~~ Integrated code lifecycle: Add buildjob duration in buildqueue view May 16, 2024

Merge branch 'develop' into feature/integrated-code-lifecycle/add-bui…

5a161cb

…ldjob-duration-in-buildqueue-view

github-actions bot added the deployment-error Added by deployment workflows if an error occured label May 17, 2024

beyzaaltuntas added the deploy:artemis-test1 label May 17, 2024

github-actions bot removed the deployment-error Added by deployment workflows if an error occured label May 17, 2024

beyzaaltuntas temporarily deployed to artemis-test1.artemis.cit.tum.de May 17, 2024 13:57 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test1 and removed deploy:artemis-test1 labels May 17, 2024

beyzaaltuntas removed the lock:artemis-test1 label May 17, 2024

krusche added this to the 7.1.0 milestone May 17, 2024

Jan-Thurner added the deploy:artemis-test2 label May 17, 2024

Jan-Thurner temporarily deployed to artemis-test2.artemis.cit.tum.de May 17, 2024 17:39 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test2 and removed deploy:artemis-test2 labels May 17, 2024

az108 added deploy:artemis-test3 and removed lock:artemis-test2 deploy:artemis-test3 labels May 17, 2024

az108 had a problem deploying to artemis-test3.artemis.cit.tum.de May 17, 2024 18:13 — with GitHub Actions Failure

github-actions bot added the deployment-error Added by deployment workflows if an error occured label May 17, 2024

Jan-Thurner approved these changes May 17, 2024

View reviewed changes

Merge branch 'develop' into feature/integrated-code-lifecycle/add-bui…

ec2ae86

…ldjob-duration-in-buildqueue-view

az108 approved these changes May 17, 2024

View reviewed changes

rstief approved these changes May 17, 2024

View reviewed changes

krusche added the ready to merge label May 18, 2024

krusche changed the title ~~Integrated code lifecycle: Add buildjob duration in buildqueue view~~ Integrated code lifecycle: Add duration in build queue view May 18, 2024

krusche merged commit d9143b9 into develop May 18, 2024
30 of 34 checks passed

krusche deleted the feature/integrated-code-lifecycle/add-buildjob-duration-in-buildqueue-view branch May 18, 2024 07:59

coderabbitai bot mentioned this pull request Sep 22, 2024

Integrated code lifecycle: Allow admins to pause build agents #9348

Merged

27 tasks

coderabbitai bot mentioned this pull request Oct 28, 2024

Integrated code lifecycle: Allow admins to set build timeout options via application properties #9603

Merged

27 tasks

coderabbitai bot mentioned this pull request Nov 18, 2024

Integrated code lifecycle: Improve build status updates for users #9818

Open

30 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Integrated code lifecycle`: Add duration in build queue view #8608

`Integrated code lifecycle`: Add duration in build queue view #8608

BBesrour commented May 16, 2024 •

edited by rstief

Loading

coderabbitai bot commented May 16, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

JohannesStoehr May 16, 2024

BBesrour May 16, 2024 •

edited

Loading

rabeatwork May 17, 2024

rstief May 17, 2024

github-actions bot commented May 17, 2024

github-actions bot commented May 17, 2024

Jan-Thurner left a comment •

edited

Loading

az108 left a comment

rstief left a comment

rstief May 17, 2024

Integrated code lifecycle: Add duration in build queue view #8608

Integrated code lifecycle: Add duration in build queue view #8608

Conversation

BBesrour commented May 16, 2024 • edited by rstief Loading

Checklist

General

Client

Motivation and Context

Steps for Testing

Testserver States

Review Progress

Performance Review

Code Review

Manual Tests

Screenshots

coderabbitai bot commented May 16, 2024 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

JohannesStoehr May 16, 2024

Choose a reason for hiding this comment

BBesrour May 16, 2024 • edited Loading

Choose a reason for hiding this comment

rabeatwork May 17, 2024

Choose a reason for hiding this comment

rstief May 17, 2024

Choose a reason for hiding this comment

github-actions bot commented May 17, 2024

⚠️ Unable to deploy to test servers ⚠️

github-actions bot commented May 17, 2024

⚠️ Unable to deploy to test servers ⚠️

Jan-Thurner left a comment • edited Loading

Choose a reason for hiding this comment

az108 left a comment

Choose a reason for hiding this comment

rstief left a comment

Choose a reason for hiding this comment

rstief May 17, 2024

Choose a reason for hiding this comment

`Integrated code lifecycle`: Add duration in build queue view #8608

`Integrated code lifecycle`: Add duration in build queue view #8608

BBesrour commented May 16, 2024 •

edited by rstief

Loading

coderabbitai bot commented May 16, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

BBesrour May 16, 2024 •

edited

Loading

Jan-Thurner left a comment •

edited

Loading