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

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

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

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

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

…ror handling

Copilot

Pull request overview

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

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

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

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.ts

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

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.ts

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

cursor · 2025-12-29T19:21:39Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

fmontes · 2025-12-29T19:26:36Z

@sfreudenthaler that cursor change of line-height will potentially make a layout shift from loading state to loaded... but is not a big deal.

sfreudenthaler · 2025-12-29T19:31:15Z

@sfreudenthaler that cursor change of line-height will potentially make a layout shift from loading state to loaded... but is not a big deal.

I'll revert it. I'd rather not have a wobble

sfreudenthaler · 2025-12-29T19:37:47Z

probably should have done a cleaner revert but 🤷 it's done now.

sfreudenthaler · 2025-12-29T20:12:54Z

@freddyDOTCMS does this mean that we can resolve the conversation from @KevinDavilaDotCMS on. Merge was blocked on unresolved convos, I closed the rest that were copilot and outdated.

@sfreudenthaler that cursor change of line-height will potentially make a layout shift from loading state to loaded... but is not a big deal.

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

fmontes added 2 commits December 24, 2025 15:14

Enhance DotUsageShellComponent with accessibility improvements and er…

625dde3

…ror handling

Merge branch 'main' into issue-34166-usage-ui

d9eada7

nicobytes requested a review from Copilot December 26, 2025 19:25

Copilot started reviewing on behalf of nicobytes December 26, 2025 19:26 View session

adrianjm-dotCMS approved these changes Dec 26, 2025

View reviewed changes

Copilot AI reviewed Dec 26, 2025

View reviewed changes

KevinDavilaDotCMS reviewed Dec 26, 2025

View reviewed changes

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

KevinDavilaDotCMS reviewed Dec 26, 2025

View reviewed changes

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

KevinDavilaDotCMS approved these changes Dec 26, 2025

View reviewed changes

fix build

1211afb

fmontes and others added 2 commits December 27, 2025 09:50

chore: clean up

6d8a1ca

Merge branch 'main' into issue-34166-usage-ui

d3b0590

dario-daza approved these changes Dec 29, 2025

View reviewed changes

fmontes added 2 commits December 29, 2025 10:52

chore: fix lint

dbac361

chore: format

2603b96

sfreudenthaler enabled auto-merge December 29, 2025 19:00

sfreudenthaler force-pushed the issue-34166-usage-ui branch from 53e6cf9 to 2603b96 Compare December 29, 2025 19:35

sfreudenthaler and others added 3 commits December 29, 2025 18:37

Merge branch 'main' into issue-34166-usage-ui

9b2f2b7

Merge branch 'main' into issue-34166-usage-ui

aa6b778

Merge branch 'main' into issue-34166-usage-ui

c8fbcce

spbolton mentioned this pull request Jan 2, 2026

Frontend test cancellations caused by nx parallel: 3 change exposing uncleaned test resources #34194

Closed

Merge branch 'main' into issue-34166-usage-ui

dfb8d81

sfreudenthaler disabled auto-merge January 2, 2026 18:37

chore: trigger CI with timeout fixes from main

8ae2666

sfreudenthaler added this pull request to the merge queue Jan 2, 2026

Any commits made after this event will not be merged.

Update usage dashboard UI to match official dotCMS UI #34168

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot commented Dec 29, 2025

Uh oh!

fmontes commented Dec 29, 2025

Uh oh!

sfreudenthaler commented Dec 29, 2025

Uh oh!

sfreudenthaler commented Dec 29, 2025

Uh oh!

sfreudenthaler commented Dec 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

fmontes commented Dec 24, 2025 •

edited

Loading