- {errorText()}
-
- }
- >
+
+
+
+
+ {hasHistoryPoints()
+ ? 'History refresh failed. Showing previously loaded history.'
+ : 'Failed to load history data'}
+
+
+
+
+
3 ? 'xl:grid-cols-4' : 'xl:grid-cols-3'}`}>
{(group) => (
diff --git a/frontend-modern/src/components/Workloads/__tests__/GuestDrawerHistory.refresh.test.tsx b/frontend-modern/src/components/Workloads/__tests__/GuestDrawerHistory.refresh.test.tsx
new file mode 100644
index 0000000000..f6097b4c7a
--- /dev/null
+++ b/frontend-modern/src/components/Workloads/__tests__/GuestDrawerHistory.refresh.test.tsx
@@ -0,0 +1,222 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
+import { createSignal } from 'solid-js';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ChartsAPI, type AllMetricsHistoryResponse, type HistoryTimeRange } from '@/api/charts';
+import { resetCreateNonSuspendingQueryCacheForTest } from '@/hooks/createNonSuspendingQuery';
+import { GuestDrawerHistory } from '../GuestDrawerHistory';
+import type { GuestDrawerHistoryTarget } from '../guestDrawerModel';
+
+vi.mock('@/stores/license', () => ({
+ loadRuntimeCapabilities: vi.fn(async () => undefined),
+ maxHistoryDays: () => 7,
+ isRangeLocked: (range: HistoryTimeRange) => ['14d', '30d', '90d'].includes(range),
+}));
+
+afterEach(() => {
+ cleanup();
+ resetCreateNonSuspendingQueryCacheForTest();
+ vi.restoreAllMocks();
+ vi.useRealTimers();
+});
+
+const target: GuestDrawerHistoryTarget = { resourceType: 'agent', resourceId: 'pbs-host' };
+const response = (value = 42, resourceId = target.resourceId): AllMetricsHistoryResponse => ({
+ resourceType: 'agent',
+ resourceId,
+ range: '24h',
+ start: 1_700_000_000_000,
+ end: 1_700_000_060_000,
+ source: 'store',
+ metrics: {
+ cpu: [
+ { timestamp: 1_700_000_000_000, value: value - 1, min: value - 1, max: value - 1 },
+ { timestamp: 1_700_000_060_000, value, min: value, max: value },
+ ],
+ },
+});
+const paths = (container: HTMLElement) =>
+ container.querySelectorAll('[data-testid="guest-history-plot"] path');
+
+function deferred() {
+ let resolve!: (value: T) => void;
+ let reject!: (error: Error) => void;
+ const promise = new Promise((yes, no) => {
+ resolve = yes;
+ reject = no;
+ });
+ return { promise, resolve, reject };
+}
+
+describe('GuestDrawerHistory refresh recovery', () => {
+ it('offers one scoped retry after initial failure without claiming collection or exposing errors', async () => {
+ const pending = deferred();
+ const fetch = vi
+ .spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockRejectedValueOnce(new Error('private diagnostic detail'))
+ .mockReturnValueOnce(pending.promise);
+ const { container } = render(() => );
+ await screen.findByText('Failed to load history data');
+ const retry = screen.getByRole('button', { name: 'Retry history' });
+ expect(screen.queryByText('Collecting history')).not.toBeInTheDocument();
+ expect(screen.queryByText(/previously loaded/)).not.toBeInTheDocument();
+ expect(container).not.toHaveTextContent('private diagnostic detail');
+ expect(paths(container)).toHaveLength(0);
+ fireEvent.click(retry);
+ fireEvent.click(retry);
+ await waitFor(() => expect(fetch).toHaveBeenCalledTimes(2));
+ expect(retry).toHaveAttribute('aria-disabled', 'true');
+ expect(retry).toHaveAttribute('aria-busy', 'true');
+ expect(fetch.mock.calls[1][0]).toMatchObject({ ...target, range: '24h' });
+ pending.resolve(response());
+ await waitFor(() => expect(paths(container)).toHaveLength(1));
+ expect(retry).toHaveAttribute('aria-disabled', 'false');
+ expect(retry).toHaveAccessibleName('Refresh history');
+ });
+
+ it('retains only the current history on a failed poll and updates its already-mounted status region', async () => {
+ vi.useFakeTimers();
+ vi.spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockResolvedValueOnce(response())
+ .mockRejectedValueOnce(new Error('Unavailable'));
+ const { container } = render(() => );
+ const status = screen.getByRole('status', { name: 'History refresh status' });
+ expect(status).toBeEmptyDOMElement();
+ await vi.advanceTimersByTimeAsync(0);
+ const original = paths(container)[0].getAttribute('d');
+ await vi.advanceTimersByTimeAsync(30_000);
+ expect(paths(container)).toHaveLength(1);
+ expect(paths(container)[0]).toHaveAttribute('d', original);
+ expect(status).toHaveTextContent('History refresh failed. Showing previously loaded history.');
+ expect(status).toHaveAttribute('aria-live', 'polite');
+ expect(status).toHaveAttribute('aria-atomic', 'true');
+ expect(screen.queryByText('Loading history')).not.toBeInTheDocument();
+ });
+
+ it('keeps retry keyboard focus through successful recovery without losing retained points', async () => {
+ vi.useFakeTimers();
+ const pending = deferred();
+ vi.spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockResolvedValueOnce(response())
+ .mockRejectedValueOnce(new Error('Unavailable'))
+ .mockReturnValueOnce(pending.promise);
+ const { container } = render(() => );
+ await vi.advanceTimersByTimeAsync(30_000);
+ const original = paths(container)[0].getAttribute('d');
+ const retry = screen.getByRole('button', { name: 'Retry history' });
+ retry.focus();
+ fireEvent.click(retry);
+ expect(paths(container)[0]).toHaveAttribute('d', original);
+ expect(retry).toHaveFocus();
+ pending.resolve(response(12));
+ await vi.advanceTimersByTimeAsync(0);
+ expect(paths(container)[0]).not.toHaveAttribute('d', original);
+ expect(screen.getByRole('button', { name: 'Refresh history' })).toBe(retry);
+ expect(retry).toHaveFocus();
+ expect(screen.getByRole('status', { name: 'History refresh status' })).toBeEmptyDOMElement();
+ });
+
+ it('settles retry loading when a background poll supersedes a slow manual refresh', async () => {
+ vi.useFakeTimers();
+ const pending = deferred();
+ const fetch = vi
+ .spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockResolvedValueOnce(response())
+ .mockReturnValueOnce(pending.promise)
+ .mockResolvedValueOnce(response(12));
+ const { container } = render(() => );
+ await vi.advanceTimersByTimeAsync(0);
+ const refresh = screen.getByRole('button', { name: 'Refresh history' });
+ fireEvent.click(refresh);
+ expect(refresh).toHaveAttribute('aria-disabled', 'true');
+ await vi.advanceTimersByTimeAsync(30_000);
+ expect(fetch).toHaveBeenCalledTimes(3);
+ expect(fetch.mock.calls[1][0].signal!.aborted).toBe(true);
+ expect(refresh).toHaveAttribute('aria-disabled', 'false');
+ expect(refresh).toHaveAttribute('aria-busy', 'false');
+ const latest = paths(container)[0].getAttribute('d');
+ pending.resolve(response(99));
+ await vi.advanceTimersByTimeAsync(0);
+ expect(paths(container)[0]).toHaveAttribute('d', latest);
+ });
+
+ it('retains the failure after a failed retry and allows another attempt', async () => {
+ vi.spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockRejectedValueOnce(new Error('Unavailable'))
+ .mockRejectedValueOnce(new Error('Still unavailable'))
+ .mockResolvedValueOnce(response());
+ const { container } = render(() => );
+ await screen.findByText('Failed to load history data');
+ const retry = screen.getByRole('button', { name: 'Retry history' });
+ fireEvent.click(retry);
+ await waitFor(() => expect(retry).toHaveAttribute('aria-disabled', 'false'));
+ expect(screen.getByText('Failed to load history data')).toBeInTheDocument();
+ expect(paths(container)).toHaveLength(0);
+ fireEvent.click(retry);
+ await waitFor(() => expect(paths(container)).toHaveLength(1));
+ });
+
+ it.each(['resource', 'range'] as const)(
+ 'does not label a failed replacement %s as retained history',
+ async (change) => {
+ vi.useFakeTimers();
+ const fetch = vi
+ .spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockResolvedValueOnce(response())
+ .mockRejectedValueOnce(new Error('Poll failed'))
+ .mockRejectedValueOnce(new Error('Replacement failed'))
+ .mockResolvedValueOnce(response(12, 'replacement'));
+ const [currentTarget, setTarget] = createSignal(target);
+ const [range, setRange] = createSignal('24h');
+ const { container } = render(() => (
+
+ ));
+ await vi.advanceTimersByTimeAsync(30_000);
+ expect(paths(container)).toHaveLength(1);
+ if (change === 'resource') setTarget({ ...target, resourceId: 'replacement' });
+ else setRange('6h');
+ await vi.advanceTimersByTimeAsync(0);
+ expect(paths(container)).toHaveLength(0);
+ expect(screen.queryByText(/previously loaded/)).not.toBeInTheDocument();
+ expect(screen.getByText('Failed to load history data')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Retry history' }));
+ await vi.advanceTimersByTimeAsync(0);
+ expect(fetch.mock.calls[3][0]).toMatchObject({ ...currentTarget(), range: range() });
+ expect(paths(container)).toHaveLength(1);
+ },
+ );
+
+ it.each(['empty', 'invalid'] as const)(
+ 'does not present %s history or current readings as previously loaded observations',
+ async (observation) => {
+ vi.useFakeTimers();
+ vi.spyOn(ChartsAPI, 'getMetricsHistory')
+ .mockResolvedValueOnce({
+ ...response(),
+ metrics:
+ observation === 'empty'
+ ? {}
+ : { cpu: [{ timestamp: NaN, value: NaN, min: NaN, max: NaN }] },
+ })
+ .mockRejectedValueOnce(new Error('Unavailable'));
+ const { container } = render(() => (
+
+ ));
+ await vi.advanceTimersByTimeAsync(30_000);
+ expect(screen.getByText('Failed to load history data')).toBeInTheDocument();
+ expect(screen.queryByText(/previously loaded/)).not.toBeInTheDocument();
+ expect(screen.queryByText('Collecting history')).not.toBeInTheDocument();
+ expect(paths(container)).toHaveLength(0);
+ },
+ );
+
+ it('offers no refresh when the target is absent or the range is locked', async () => {
+ const fetch = vi.spyOn(ChartsAPI, 'getMetricsHistory');
+ const [currentTarget, setTarget] = createSignal(null);
+ render(() => );
+ expect(screen.queryByRole('button', { name: /history/i })).not.toBeInTheDocument();
+ setTarget(target);
+ await screen.findByText(/14 days history requires a higher license plan/);
+ expect(screen.queryByRole('button', { name: /history/i })).not.toBeInTheDocument();
+ expect(fetch).not.toHaveBeenCalled();
+ });
+});
diff --git a/frontend-modern/src/hooks/__tests__/createNonSuspendingQuery.test.tsx b/frontend-modern/src/hooks/__tests__/createNonSuspendingQuery.test.tsx
index d8442b46de..488876a2c2 100644
--- a/frontend-modern/src/hooks/__tests__/createNonSuspendingQuery.test.tsx
+++ b/frontend-modern/src/hooks/__tests__/createNonSuspendingQuery.test.tsx
@@ -1,5 +1,5 @@
import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, waitFor } from '@solidjs/testing-library';
+import { cleanup, fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
import { createSignal } from 'solid-js';
import {
createNonSuspendingQuery,
@@ -265,3 +265,49 @@ describe('createNonSuspendingQuery', () => {
});
});
});
+
+it.each(['success', 'failure'] as const)(
+ 'settles a foreground loading state when its latest background replacement ends in %s',
+ async (outcome) => {
+ vi.useFakeTimers();
+ let finishManual!: (value: string) => void;
+ const manual = new Promise((resolve) => {
+ finishManual = resolve;
+ });
+ const fetcher = vi
+ .fn()
+ .mockResolvedValueOnce('first')
+ .mockReturnValueOnce(manual)
+ .mockImplementationOnce(() =>
+ outcome === 'success'
+ ? Promise.resolve('latest')
+ : Promise.reject(new Error('Unavailable')),
+ );
+ const Probe = () => {
+ const query = createNonSuspendingQuery({
+ source: () => 'pbs-host',
+ fetcher,
+ initialValue: '',
+ pollMs: 30_000,
+ });
+ return (
+ <>
+
+
+
+ );
+ };
+ render(() => );
+ await vi.advanceTimersByTimeAsync(0);
+ fireEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+ expect(screen.getByTestId('query')).toHaveTextContent('first|loading:true');
+ await vi.advanceTimersByTimeAsync(30_000);
+ expect(fetcher).toHaveBeenCalledTimes(3);
+ expect(fetcher.mock.calls[1][1].aborted).toBe(true);
+ const expected = outcome === 'success' ? 'latest|loading:false' : 'first|loading:false';
+ expect(screen.getByTestId('query')).toHaveTextContent(expected);
+ finishManual('obsolete');
+ await vi.advanceTimersByTimeAsync(0);
+ expect(screen.getByTestId('query')).toHaveTextContent(expected);
+ },
+);
diff --git a/frontend-modern/src/hooks/createNonSuspendingQuery.ts b/frontend-modern/src/hooks/createNonSuspendingQuery.ts
index f1835606bd..39c88f8a79 100644
--- a/frontend-modern/src/hooks/createNonSuspendingQuery.ts
+++ b/frontend-modern/src/hooks/createNonSuspendingQuery.ts
@@ -243,9 +243,9 @@ export function createNonSuspendingQuery(options: CreateNonSuspendingQuery
value: value(),
});
}
- if (!runOptions.background) {
- setLoading(false);
- }
+ // A background poll can replace a pending foreground refresh. The
+ // latest read owns settlement, regardless of how that read started.
+ setLoading(false);
}
}
};