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

Prioritize drawer change history layout

Browse source
This commit is contained in:
rcourtman 2026-03-23 14:35:24 +00:00
parent 4ffe025f6c
commit 44a58a183f
4 changed files with 31 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -463,6 +463,10 @@ The overview keeps access, host, service, and investigation detail as
collapsed sibling disclosures under the primary card pair, so the drawer keeps
the top-level shape to current-state/identity plus `Change history` before any
secondary operational context appears.
That secondary hierarchy now renders in two layers: a full-width `Change
history` surface first, followed by a separate support-disclosure grid for
access, host, service, and context, so timeline inspection stays visually
primary instead of competing with the support cards for equal width.
Inside `Change history`, the event list now renders directly in the parent
section instead of inside a second bordered `Event log` card, so the timeline
reads like one inspection surface rather than a card nested under its own

19
frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
View file

@ -262,11 +262,11 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
<div
data-testid="resource-secondary-sections"
class="flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(50%-0.375rem)] [&>*]:min-w-[260px] [&>*]:max-w-full [&>*]:overflow-hidden"
class="space-y-3"
>
<div
data-testid="resource-change-history-section"
class="h-full rounded border border-border bg-surface p-3 shadow-sm"
class="w-full rounded border border-border bg-surface p-3 shadow-sm"
>
<div class="flex items-center justify-between gap-3">
<div>
@ -507,6 +507,19 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
</Show>
</div>
<Show
when={
drawer.hasServiceDetails() ||
drawer.hasHostDetails() ||
drawer.hasAccessContext() ||
drawer.hasInvestigationContext()
}
>
<div
data-testid="resource-support-sections"
class="flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(50%-0.375rem)] [&>*]:min-w-[260px] [&>*]:max-w-full [&>*]:overflow-hidden"
>
<Show when={drawer.hasServiceDetails()}>
<SupportDisclosure
title="Service"
@ -1140,6 +1153,8 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
</Show>
</SupportDisclosure>
</Show>
</div>
</Show>
</div>
</div>
);

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

@ -302,8 +302,11 @@ describe('ResourceDetailDrawer change history section', () => {
expect(screen.getByText('Current state')).toBeInTheDocument();
expect(screen.queryByText('Runtime')).toBeNull();
expect(screen.getByText('Change history')).toBeInTheDocument();
expect(screen.getByTestId('resource-secondary-sections').classList.contains('flex')).toBe(true);
expect(screen.getByTestId('resource-secondary-sections').classList.contains('flex-wrap')).toBe(
expect(screen.getByTestId('resource-secondary-sections').classList.contains('space-y-3')).toBe(
true,
);
expect(screen.getByTestId('resource-support-sections').classList.contains('flex')).toBe(true);
expect(screen.getByTestId('resource-support-sections').classList.contains('flex-wrap')).toBe(
true,
);
expect(

7
frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
View file

@ -228,9 +228,12 @@ describe('ResourceDetailDrawer runtime and identity cards', () => {
await waitFor(() => {
expect(getByText('Hardware')).toBeInTheDocument();
});
expect(getByTestId('resource-secondary-sections').classList.contains('flex')).toBe(true);
expect(getByTestId('resource-secondary-sections').classList.contains('space-y-3')).toBe(true);
expect(
getByTestId('resource-secondary-sections').classList.contains('flex-wrap'),
getByTestId('resource-support-sections').classList.contains('flex'),
).toBe(true);
expect(
getByTestId('resource-support-sections').classList.contains('flex-wrap'),
).toBe(true);
expect(getByTestId('resource-host-details-section').querySelector('.mt-3.flex.flex-wrap')).toBeTruthy();
expect(