vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-13 23:54:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Reduce service card metric label density

Browse source
This commit is contained in:
rcourtman 2026-03-19 23:26:00 +00:00
parent 025208e5e2
commit 4711bd85ad
4 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/release-control/v6/internal/subsystems/unified-resources.md
View file

@ -297,8 +297,10 @@ operations.
That same ownership rule now keeps the service-summary sentence in the
`Service details` disclosure header instead of repeating a second summary box
inside PBS or PMG cards, and the service-local reveal labels stay terse
(`Show jobs`, `Show mail flow`, `Jobs`, `Queue`) so opened cards read like
current state instead of descriptive chrome.
(`Show jobs`, `Show mail flow`, `Jobs`, `Queue`), while the opened accordions
also use shorter section labels (`Types`, `Queue detail`, `Mail detail`) and
count-only summary badges so opened cards read like current state instead of
descriptive chrome.
The Docker service card now follows the same rule: its opened state uses
compact labels (`Docker runtime`, `Updates`, `Checked`, `Show actions`,
`Check now`, `Update all`) and short queued/confirm feedback so action

12
frontend-modern/src/components/Infrastructure/ResourceDetailDrawer.tsx
View file

@ -1388,8 +1388,8 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
</div>
<details class="rounded border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
<summary class="flex cursor-pointer list-none items-center justify-between text-[10px] font-medium text-muted">
<span>Job breakdown</span>
<span class="text-muted">{pbsVisibleJobBreakdown().length} types</span>
<span>Types</span>
<span class="text-muted">{pbsVisibleJobBreakdown().length}</span>
</summary>
<div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 border-t border-indigo-200 pt-2 text-[10px] dark:border-indigo-700">
<For each={pbsVisibleJobBreakdown()}>
@ -1487,8 +1487,8 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
</div>
<details class="rounded border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
<summary class="flex cursor-pointer list-none items-center justify-between text-[10px] font-medium text-muted">
<span>Queue breakdown</span>
<span class="text-muted">{pmgVisibleQueueBreakdown().length} signals</span>
<span>Queue detail</span>
<span class="text-muted">{pmgVisibleQueueBreakdown().length}</span>
</summary>
<div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 border-t border-rose-200 pt-2 text-[10px] dark:border-rose-700">
<For each={pmgVisibleQueueBreakdown()}>
@ -1507,8 +1507,8 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
</details>
<details class="rounded border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
<summary class="flex cursor-pointer list-none items-center justify-between text-[10px] font-medium text-muted">
<span>Mail processing</span>
<span class="text-muted">{pmgVisibleMailBreakdown().length} signals</span>
<span>Mail detail</span>
<span class="text-muted">{pmgVisibleMailBreakdown().length}</span>
</summary>
<div class="mt-2 grid grid-cols-3 gap-x-3 gap-y-1 border-t border-rose-200 pt-2 text-[10px] dark:border-rose-700">
<For each={pmgVisibleMailBreakdown()}>

3
frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
View file

@ -378,9 +378,10 @@ describe('ResourceDetailDrawer change history section', () => {
expect(serviceDetails.queryByText('Connection')).toBeNull();
expect(screen.queryByText('Backup summary')).toBeNull();
expect(screen.queryByText('Job breakdown')).toBeNull();
expect(screen.queryByText('Types')).toBeNull();
expect(screen.queryByText('Show job detail')).toBeNull();
fireEvent.click(screen.getByRole('button', { name: 'Show jobs' }));
expect(screen.getByText('Job breakdown')).toBeInTheDocument();
expect(screen.getByText('Types')).toBeInTheDocument();
});
it('filters timeline entries by kind and source type', async () => {

9
frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.service-cards.test.tsx
View file

@ -101,11 +101,12 @@ describe('ResourceDetailDrawer service cards', () => {
expect(serviceDetails.getAllByText('pbs-main.local').length).toBeGreaterThan(0);
expect(queryByText('Backup summary')).toBeNull();
expect(queryByText('Job breakdown')).toBeNull();
expect(queryByText('Types')).toBeNull();
expect(queryByText('Show job detail')).toBeNull();
fireEvent.click(getByRole('button', { name: 'Show jobs' }));
expect(getByText('Datastores')).toBeInTheDocument();
expect(getByText('Jobs')).toBeInTheDocument();
expect(getByText('Job breakdown')).toBeInTheDocument();
expect(getByText('Types')).toBeInTheDocument();
expect(getByRole('link', { name: /open pbs backups/i })).toHaveAttribute(
'href',
'/recovery?provider=proxmox-pbs&mode=remote',
@ -152,12 +153,14 @@ describe('ResourceDetailDrawer service cards', () => {
expect(queryByText('Mail flow summary')).toBeNull();
expect(queryByText('Queue breakdown')).toBeNull();
expect(queryByText('Mail processing')).toBeNull();
expect(queryByText('Queue detail')).toBeNull();
expect(queryByText('Mail detail')).toBeNull();
expect(queryByText('Show mail flow detail')).toBeNull();
fireEvent.click(getByRole('button', { name: 'Show mail flow' }));
expect(getByText('Queue')).toBeInTheDocument();
expect(getByText('Backlog')).toBeInTheDocument();
expect(getByText('Queue breakdown')).toBeInTheDocument();
expect(getByText('Mail processing')).toBeInTheDocument();
expect(getByText('Queue detail')).toBeInTheDocument();
expect(getByText('Mail detail')).toBeInTheDocument();
expect(getByRole('link', { name: /open pmg thresholds/i })).toHaveAttribute(
'href',
'/alerts/thresholds/mail-gateway',