diff --git a/frontend/app/ops-redesign.css b/frontend/app/ops-redesign.css index d961152..b1d5f72 100644 --- a/frontend/app/ops-redesign.css +++ b/frontend/app/ops-redesign.css @@ -4987,3 +4987,29 @@ textarea:focus { mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 38%, transparent 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; } + +/* Diagnostics: scan each service from identity to result to action. */ +.diagnostics-page .diagnostics-grid { grid-template-columns: minmax(0, 1fr); } +.diagnostics-page .diagnostic-card { display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(280px, 1.65fr) minmax(160px, 1fr) auto; align-items: center; gap: 20px; } +.diagnostics-page .diagnostic-card-top { display: contents; } +.diagnostics-page .diagnostic-card-copy { grid-column: 1; grid-row: 1; } +.diagnostics-page .diagnostic-card .system-test { grid-column: 4; grid-row: 1; white-space: nowrap; } +.diagnostics-page .diagnostic-meta-grid { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } +.diagnostics-page .diagnostic-message { grid-column: 3; grid-row: 1; margin: 0; } +.diagnostics-page .diagnostic-detail-panel { grid-column: 1 / -1; border-top: 1px solid var(--ops-line-soft); padding-top: 14px; } +.diagnostic-detail-panel > summary { cursor: pointer; font-weight: 600; padding: 6px 0; } +.diagnostics-page .diagnostic-detail-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } +.diagnostics-notification-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding: 16px; border: 1px solid var(--ops-line-soft); border-radius: 10px; } +.diagnostics-notification-controls .diagnostics-email-recipient { flex: 1 1 280px; } +.diagnostics-notification-controls p { flex: 1 1 220px; margin: 0; color: var(--ops-muted); font-size: .85rem; } +@media (max-width: 1050px) { + .diagnostics-page .diagnostic-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 14px; } + .diagnostics-page .diagnostic-card .system-test { grid-column: 3; } + .diagnostics-page .diagnostic-message { grid-column: 1 / -1; grid-row: 2; } +} +@media (max-width: 640px) { + .diagnostics-page .diagnostic-card { grid-template-columns: minmax(0, 1fr) auto; } + .diagnostics-page .diagnostic-card .system-test { grid-column: 2; } + .diagnostics-page .diagnostic-meta-grid { grid-column: 1 / -1; grid-row: 2; } + .diagnostics-page .diagnostic-message { grid-row: 3; } +} diff --git a/frontend/app/ui/AdminDiagnosticsPanel.tsx b/frontend/app/ui/AdminDiagnosticsPanel.tsx index 25b8f36..63e4394 100644 --- a/frontend/app/ui/AdminDiagnosticsPanel.tsx +++ b/frontend/app/ui/AdminDiagnosticsPanel.tsx @@ -330,20 +330,12 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos

{embedded ? 'Connectivity diagnostics' : 'Control center'}

- Use live checks for Magent and service connectivity. Use run all when you want outbound notification - channels to send a real ping through the configured provider. + Check Magent and your connected services. Automatic refresh runs health checks only. + Test messages are managed in Notifications below.

- + - + {autoRefresh ? 'Auto refresh on' : 'Auto refresh off'} @@ -420,6 +404,25 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos {categoryChecks.length} checks
+ {category === 'Notifications' && ( +
+ +

Choose where the test email goes. Other channels use their configured destinations.

+ +
+ )} +
{categoryChecks.map((check) => { const isRunning = runningKeys.includes(check.key) @@ -476,7 +479,8 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos return null } return ( -
+
+ Database storage, tables and timings {renderDatabaseMetricGroup('Storage', [ ['Database file', formatBytes(detail.database_size_bytes)], ['WAL file', formatBytes(detail.wal_size_bytes)], @@ -501,7 +505,7 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos `${value.toFixed(1)} ms`, ]), )} -
+ ) })() : null}