feat(frontend): collapse responding services on the diagnostics page

Failing console services stay visible; responding ones are behind a toggle.

packages/frontend/src/pages/DiagnosticsPage.test.tsx

@@ -49,7 +49,9 @@ test('summarises the runtime and lists failing console services first', async ()
     expect(screen.getByText('1 not running')).toBeInTheDocument()
     expect(screen.getByText('2 / 3')).toBeInTheDocument()
 
-    const rows = within(screen.getByRole('region', {name: 'Console services'})).getAllByRole('row')
+    const consoleServices = screen.getByRole('region', {name: 'Console services'})
+    const rows = within(consoleServices).getAllByRole('row')
+    expect(rows).toHaveLength(2)
     expect(rows[1]).toHaveTextContent('messaging')
     expect(rows[1]).toHaveTextContent('Service is not running (RUNTIME_UNAVAILABLE)')
 
@@ -59,6 +61,25 @@ test('summarises the runtime and lists failing console services first', async ()
     expect(screen.getByText('OIDC single sign-on')).toBeInTheDocument()
 })
 
+test('keeps responding console services behind a toggle', async () => {
+    const user = userEvent.setup()
+    api.getCloudDiagnostics.mockResolvedValue({
+        ...healthy,
+        consoleServices: healthy.consoleServices.map((service) => ({...service, runtime: 'reachable', error: null, errorCode: null})),
+    } satisfies RuntimeDiagnostics)
+    renderPage()
+    const consoleServices = await screen.findByRole('region', {name: 'Console services'})
+
+    expect(within(consoleServices).getByText('All 2 responding')).toBeInTheDocument()
+    expect(within(consoleServices).queryByRole('table')).not.toBeInTheDocument()
+
+    await user.click(within(consoleServices).getByRole('button', {name: 'Show 2 responding'}))
+    expect(within(consoleServices).getAllByRole('row')).toHaveLength(3)
+
+    await user.click(within(consoleServices).getByRole('button', {name: 'Hide responding'}))
+    expect(within(consoleServices).queryByRole('table')).not.toBeInTheDocument()
+})
+
 test('filters emulated services by console coverage and state', async () => {
     const user = userEvent.setup()
     api.getCloudDiagnostics.mockResolvedValue(healthy)

packages/frontend/src/pages/DiagnosticsPage.tsx

@@ -88,17 +88,25 @@ function DiagnosticsReport({report}: {report: RuntimeDiagnostics}) {
 }
 
 function ConsoleServicesTable({services}: {services: CloudServiceStatus[]}) {
+    const [showResponding, setShowResponding] = useState(false)
     const failing = services.filter((service) => service.runtime !== 'reachable')
-    const ordered = [...failing, ...services.filter((service) => service.runtime === 'reachable')]
+    const responding = services.filter((service) => service.runtime === 'reachable')
+    const ordered = showResponding ? [...failing, ...responding] : failing
     return (
         <section className="table-panel" aria-labelledby="diagnostics-console-services">
             <header className="diagnostics-section-header">
                 <h2 id="diagnostics-console-services">Console services</h2>
-                <span className="muted">{failing.length ? `${failing.length} of ${services.length} failing` : `${services.length} responding`}</span>
+                <div className="diagnostics-filters">
+                    <span className="muted">{failing.length ? `${failing.length} of ${services.length} failing` : `All ${services.length} responding`}</span>
+                    {responding.length > 0 && (
+                        <button className="button compact" type="button" aria-expanded={showResponding} onClick={() => setShowResponding((value) => !value)}>
+                            {showResponding ? 'Hide responding' : `Show ${responding.length} responding`}
+                        </button>
+                    )}
+                </div>
             </header>
-            {services.length === 0
+            {services.length === 0 && <p className="muted padded">No console services are registered for this cloud.</p>}
-                ? <p className="muted padded">No console services are registered for this cloud.</p>
+            {ordered.length > 0 && <table className="table">
-                : <table className="table">
                     <thead><tr><th>Service</th><th>Status</th><th>Latency</th><th>Detail</th></tr></thead>
                     <tbody>{ordered.map((service) => (
                         <tr key={service.service}>