Development: Migrate admin metrics Angular code to new best practices

[krusche]

Checklist

General

• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• 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 (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• 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 documented the TypeScript code using JSDoc style.

Motivation and Context

This should become an example how modern Angular code with input(), output(), signal() and inject() can look like

Steps for Testing

Prerequisites:

• 1 Admin

1. Open the metrics page and make sure it works properly and displays correct data

Testserver States

Note

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

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Summary by CodeRabbit

• New Features

  • Introduced a new dependency, ngxtension, enhancing application capabilities.

• Enhancements

  • Adjusted access patterns for metrics properties from direct access to function calls, improving data retrieval efficiency.
  • Updated development guidelines to emphasize best practices for Angular migration, including the use of standalone components and the signals feature.

• Bug Fixes

  • Removed the MetricsModule import from the admin module, streamlining dependencies.

• Tests

  • Enhanced test coverage for MetricsComponent with additional mocks and HTTP client testing setup.
  • Improved tests for JvmThreadsComponent and MetricsModalThreadsComponent to align with Angular best practices.

• Chores

  • Cleaned up formatting in tsconfig.json for better readability.

[coderabbitai]

Walkthrough

The changes involve updates to an Angular application, including the addition of the ngxtension dependency in package.json, the removal of the MetricsModule import in the admin.module.ts file, and modifications to HTML templates for accessing metrics data through function calls instead of direct object access. Additionally, the development guidelines document has been updated to reflect best practices for Angular migration and component usage.

Changes

Files	Change Summary
package.json	Added ngxtension dependency.
src/main/webapp/app/admin/admin.module.ts	Removed import of MetricsModule.
src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/*.html	Updated HTML templates to access garbageCollectorMetrics as a function call.
docs/dev/guidelines/client.rst	Enhanced guidelines for Angular migration, including updates on lazy loading and new component practices.

Possibly related PRs

• Integrated code lifecycle: Separate build agent summary and details view #8395: The changes in src/main/webapp/app/admin/admin.module.ts in both the main PR and this retrieved PR involve modifications to module imports, indicating a direct connection in how the Angular modules are structured and utilized.

Suggested labels

component:integrated code lifecycle

Suggested reviewers

• florian-glombik
• laurenzfb
• JohannesWt
• rstief

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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>, please review it.
  • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @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.
  • @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

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.

[coderabbitai]

Actionable comments posted: 3

Outside diff range comments (1)

src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html (1)

Line range hint 53-79: Optimize repeated function calls and confirm correct function usage.

The function garbageCollectorMetrics() is called multiple times for different properties. Consider using a local variable to store the results. Additionally, the update to updating() as a function call is correctly implemented.

[SimonEntholzer]

For some reason deploying to test servers is broken again here, but the page works fine locally

edit: it's because there are merge conflicts

[dmytropolityka]

works locally

[BBesrour]

demonstrated in a testing session, lgtm

[github-actions]

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

[coderabbitai]

Actionable comments posted: 4

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between d2b5fbe and 0c664f9.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• package.json (1 hunks)
• src/main/webapp/app/admin/admin.module.ts (0 hunks)
• src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html (2 hunks)

💤 Files not reviewed due to no reviewable changes (1)

• src/main/webapp/app/admin/admin.module.ts

🧰 Additional context used

📓 Path-based instructions (1)

src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

🔇 Additional comments (3)

src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html (2)

55-55: Approve use of @if and condition.

The use of @if aligns with the new Angular syntax guidelines. The condition correctly checks both the updating status and the existence of garbage collector metrics.

---

Line range hint 1-87: Summary of changes and recommendations

Overall, the changes in this file successfully migrate the template to use modern Angular syntax, particularly with the consistent use of @if instead of *ngIf. This aligns well with the PR objectives and provided coding guidelines.

The main area for improvement is the repeated calls to garbageCollectorMetrics(). To optimize performance, it's recommended to store the result in a local variable at the beginning of each logical block or for the entire template if possible.

These optimizations will help ensure that the UI remains responsive, especially when handling large datasets, which is one of the key objectives mentioned in the PR description.

package.json (1)

158-158: New dependency added: ngxtension

The addition of "ngxtension": "4.0.0" aligns with the PR objective of migrating admin metrics Angular code to new best practices. This library provides utility functions and helpers for Angular applications, which can contribute to improved code quality and developer experience.

However, please consider the following points:

1. Ensure that this dependency is actually used in the updated code. If not, it should be removed to avoid unnecessary bloat.
2. Version 4.0.0 is a major version, which might introduce breaking changes. Verify compatibility with the current Angular version (18.2.6 as per this file).
3. Consider if this library's features are essential or if they can be implemented using native Angular functionalities to minimize external dependencies.

To verify the usage of ngxtension in the codebase, run the following script:

This will help ensure that the new dependency is actually being utilized in the project.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range comments (3)

docs/dev/guidelines/client.rst (3)

Line range hint 15-34: Approved: Comprehensive Angular migration guidelines

The new "Angular Migration" section provides excellent guidance for updating the codebase to modern Angular practices. It covers key aspects such as standalone components, signals, new decorators, and the inject function. The inclusion of links to official documentation and examples is particularly helpful.

Consider adding a brief note about the potential impact of these changes on existing components and any strategies for gradual migration to help developers plan their approach.

---

Line range hint 232-233: Approved: Improved localization guidance

The updated recommendation to prefer the jhiTranslate directive over the artemisTranslate pipe promotes consistency in localization implementation. The provided examples clearly illustrate the preferred approach and acceptable exceptions.

Consider adding a brief explanation of why the directive is preferred over the pipe (e.g., performance benefits, easier maintenance) to help developers understand the rationale behind this recommendation.

---

Line range hint 1-586: Overall: Excellent updates to client-side development guidelines

The changes to this document significantly improve the guidance for client-side development, particularly in relation to Angular migration and modern best practices. The updates align well with the PR objectives and provide clear, actionable advice for developers. The inclusion of examples and links to official documentation enhances the usefulness of these guidelines.

To further enhance the document:

1. Consider adding a section on performance optimization techniques specific to Angular, such as change detection strategies and lazy loading.
2. Include guidance on testing practices for the new Angular features introduced, especially for standalone components and signals.
3. Provide information on how these changes might affect the overall application architecture and any considerations for refactoring existing code.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between 0c664f9 and f13b8e6.

📒 Files selected for processing (1)

• docs/dev/guidelines/client.rst (2 hunks)

🔇 Additional comments (3)

docs/dev/guidelines/client.rst (3)

12-12: Approved: Improved guidance on bundle size optimization

The updated guideline emphasizes keeping the initial bundle size as small as possible, which is a more flexible and maintainable approach compared to specifying a fixed size limit. This aligns well with modern Angular best practices for optimizing application performance.

---

Line range hint 71-79: Approved: Clear guidance on standalone components

The updated "Components" section effectively promotes the use of standalone components and provides valuable guidance on migrating existing components. The emphasis on gradual, careful migration with thorough testing is crucial for maintaining application stability. The inclusion of the Angular CLI command for generating standalone components is a helpful addition for developers.

---

Line range hint 95-95: Approved: Clarified guidance on interface usage

The updated recommendation to choose interface over type whenever possible promotes consistency in the codebase. This aligns well with TypeScript best practices and the provided example clearly illustrates the preferred approach.