From 8b166d86d48a493af892076b05a295e3b5723fcc Mon Sep 17 00:00:00 2001
From: Zakaria <zbenmo1@wgu.edu>
Date: Fri, 23 Oct 2026 12:00:10 -0400
Subject: [PATCH] feat(frontend): collapse responding services on the
 diagnostics page

Failing console services stay visible; responding ones are behind a toggle.
---
 .../src/pages/DiagnosticsPage.test.tsx        | 23 ++++++++++++++++++-
 .../frontend/src/pages/DiagnosticsPage.tsx    | 18 +++++++++++----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/DiagnosticsPage.test.tsx b/packages/frontend/src/pages/DiagnosticsPage.test.tsx
index 2f74ea2..1041d22 100644
--- a/packages/frontend/src/pages/DiagnosticsPage.test.tsx
+++ b/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)
diff --git a/packages/frontend/src/pages/DiagnosticsPage.tsx b/packages/frontend/src/pages/DiagnosticsPage.tsx
index 4fddce8..f0a9a3f 100644
--- a/packages/frontend/src/pages/DiagnosticsPage.tsx
+++ b/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
-                ? <p className="muted padded">No console services are registered for this cloud.</p>
-                : <table className="table">
+            {services.length === 0 && <p className="muted padded">No console services are registered for this cloud.</p>}
+            {ordered.length > 0 && <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}>