Update usage dashboard UI to match official dotCMS UI #34168

fmontes · 2025-12-24T18:41:33Z

Redesigned Usage Dashboard UI: Updated layout with card-based design, improved spacing, and added "Last Updated" timestamp with development mode indicator
Refactored DotUsageService: Moved service from portlets to data-access library for better reusability and added comprehensive unit tests
Implemented local state management: Replaced service-level signals with component-level state for better encapsulation
Enhanced loading and error states: Added skeleton loaders and improved error handling UI with retry functionality
Added "Refresh Data" button: New refresh functionality with localization support for last updated timestamp

Before

After

- Replaced the usage header with a PrimeNG toolbar for better action handling. - Enhanced loading state with a more structured skeleton layout for site metrics, system configuration, and user activity. - Updated error handling to use PrimeNG card components for a cleaner presentation. - Refactored dashboard content layout to utilize flexbox for better responsiveness. - Adjusted SCSS styles to align with new component structure and improve overall styling consistency. This update enhances the user experience and maintains a modern design approach.

…yling - Adjusted skeleton component heights for better visual consistency. - Added margin utility class to paragraph elements within skeleton templates. - Enhanced SCSS styles for skeleton display and h3 elements to improve layout and readability. These changes aim to refine the user interface and enhance the loading experience in the dot-usage-shell component.

…ttpClient providers

- Introduced DotUsageService to fetch usage summary metrics from the backend API. - Implemented error handling for various HTTP status codes. - Added unit tests for DotUsageService to validate summary retrieval and error handling. - Updated dot-usage-shell component to manage loading and error states using signals. - Refactored component tests to utilize the new service structure. These changes enhance the functionality and reliability of the dot-usage feature, ensuring accurate data retrieval and user-friendly error messages.

…ading state management

…ates

Copilot

Pull request overview

This PR redesigns the Usage Dashboard UI to align with the official dotCMS design system, transitioning from service-level to component-level state management and relocating the DotUsageService to the data-access library for better reusability.

Key Changes:

Moved DotUsageService from portlets library to data-access library with simplified state management
Redesigned UI with card-based layout, improved spacing, and PrimeNG Toolbar component
Implemented component-level signal-based state management replacing service-level signals
Enhanced UX with skeleton loaders, error handling UI, and "Last Updated" timestamp with localization

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`dotCMS/src/main/webapp/WEB-INF/messages/Language.properties`	Added translation key for "Last Updated" label
`core-web/libs/portlets/dot-usage/src/lib/services/dot-usage.service.spec.ts`	Removed old service tests (service moved to data-access)
`core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.ts`	Refactored to use component-level signals instead of service signals, added lastUpdated tracking
`core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.spec.ts`	Updated tests to reflect component-level state management and new UI structure
`core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.scss`	Simplified styles using design tokens, removed extensive custom styling
`core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.html`	Complete UI redesign with PrimeNG Toolbar, improved skeleton loaders, and card-based layout
`core-web/libs/portlets/dot-usage/src/index.ts`	Removed service export (now exported from data-access)
`core-web/libs/data-access/src/lib/dot-usage/dot-usage.service.ts`	Relocated service with removed signal-based state, made getErrorMessage public
`core-web/libs/data-access/src/lib/dot-usage/dot-usage.service.spec.ts`	New comprehensive test suite for relocated service
`core-web/libs/data-access/src/index.ts`	Added export for DotUsageService

core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.html

core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.scss

Copilot · 2025-12-24T19:03:12Z

core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.html

+        <p-card>
+            <ng-template pTemplate="header">
+                <h3 class="flex align-items-center gap-2">
+                    <i class="pi pi-exclamation-triangle"></i>


The error icon lacks an accessible label. Screen reader users won't know what the icon represents. Add an aria-label attribute to the icon element to describe its purpose, such as aria-label="Error".

Suggested change

<i class="pi pi-exclamation-triangle"></i>

<i

class="pi pi-exclamation-triangle"

role="img"

[attr.aria-label]="'usage.dashboard.error.title' | dm"></i>

Copilot · 2025-12-24T19:03:12Z

core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.html

-                    </p-card>
-                }
+    @if (loading()) {
+        <div class="flex flex-column gap-6">


Loading state lacks ARIA live region announcement. Screen reader users won't be notified when data is loading or when loading completes. Consider adding an aria-live region to announce loading state changes, or use aria-busy attribute on the container.

Suggested change

<div class="flex flex-column gap-6">

<div

class="flex flex-column gap-6"

role="status"

aria-live="polite"

[attr.aria-busy]="loading()">

<span class="visually-hidden">

{{ 'usage.dashboard.loading' | dm }}

</span>

Copilot · 2025-12-24T19:03:13Z

core-web/libs/data-access/src/lib/dot-usage/dot-usage.service.spec.ts

+    it('should handle HTTP errors', (done) => {
+        service.getSummary().subscribe({
+            next: () => fail('Should have failed'),
+            error: (error) => {
+                expect(error.status).toBe(401);
+                done();
+            }
+        });
+
+        const req = httpMock.expectOne('/api/v1/usage/summary');
+        req.flush('Unauthorized', { status: 401, statusText: 'Unauthorized' });
+    });
+
+    it('should handle server errors', (done) => {
+        service.getSummary().subscribe({
+            next: () => fail('Should have failed'),
+            error: (error) => {
+                expect(error.status).toBe(500);
+                done();
+            }
+        });
+
+        const req = httpMock.expectOne('/api/v1/usage/summary');
+        req.flush('Internal Server Error', { status: 500, statusText: 'Internal Server Error' });
+    });


Tests that trigger error paths don't mock console.error, which will pollute test output with expected error messages. Consider adding a spy on console.error at the beginning of these tests to suppress expected error logging during test execution.

Copilot · 2025-12-24T19:03:13Z

core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.ts

        this.usageService.getSummary().subscribe({
-            next: () => {
-                // Data is automatically updated via signals
+            next: (summary) => {
+                this.summary.set(summary);
+                this.loading.set(false);
+                this.lastUpdated.set(new Date());
            },
            error: (error) => {
+                const errorMessage = this.usageService.getErrorMessage(error);
+                this.error.set(errorMessage);
+                this.errorStatus.set(error.status || null);
+                this.loading.set(false);
                console.error('Failed to load usage data:', error);
            }
        });


The subscription in loadData() is not managed and could cause memory leaks. Since this component implements OnInit but not OnDestroy, and the component can be destroyed while requests are pending, you should either use the async pipe in the template or implement proper subscription cleanup using takeUntilDestroyed() from @angular/core/rxjs-interop or similar pattern.

core-web/libs/portlets/dot-usage/src/lib/dot-usage-shell/dot-usage-shell.component.html

…ror handling

fmontes added 7 commits December 24, 2025 11:53

Enhance dot-usage-shell component with last updated timestamp

81bd166

Refactor dot-usage component tests to use structured metrics format

66503e6

Refactor dot-usage service and shell component tests to utilize new H…

879ce37

…ttpClient providers

Enhance DotUsageShellComponent tests to improve error handling and lo…

317f1ad

…ading state management

github-actions bot mentioned this pull request Dec 24, 2025

[TASK] Update usage dashboard UI to match official dotCMS UI #34166

Open

6 tasks

Add informational message to DotUsageShellComponent for analytics upd…

daa6ae1

…ates

fmontes linked an issue Dec 24, 2025 that may be closed by this pull request

[TASK] Update usage dashboard UI to match official dotCMS UI #34166

Open

6 tasks

fmontes changed the title ~~Issue #34166 usage UI~~ Update usage dashboard UI to match official dotCMS UI Dec 24, 2025

fmontes requested review from a team, KevinDavilaDotCMS, Copilot, dario-daza, rjvelazco and spbolton and removed request for a team December 24, 2025 18:52

Copilot started reviewing on behalf of fmontes December 24, 2025 18:53 View session

Copilot AI reviewed Dec 24, 2025

View reviewed changes

Enhance DotUsageShellComponent with accessibility improvements and er…

625dde3

…ror handling

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update usage dashboard UI to match official dotCMS UI #34168

Update usage dashboard UI to match official dotCMS UI #34168

fmontes commented Dec 24, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 24, 2025

Uh oh!

Copilot AI Dec 24, 2025

Uh oh!

Copilot AI Dec 24, 2025

Uh oh!

Copilot AI Dec 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-        <div class="flex flex-column gap-6">
+        <div
+            class="flex flex-column gap-6"
+            role="status"
+            aria-live="polite"
+            [attr.aria-busy]="loading()">
+            <span class="visually-hidden">
+                {{ 'usage.dashboard.loading' | dm }}
+            </span>

Update usage dashboard UI to match official dotCMS UI #34168

Are you sure you want to change the base?

Update usage dashboard UI to match official dotCMS UI #34168

Conversation

fmontes commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fmontes commented Dec 24, 2025 •

edited

Loading