From aea669bf676ccf846fa5446973e0e61f75698bfd Mon Sep 17 00:00:00 2001 From: ElwinLiu Date: Fri, 24 Apr 2026 22:22:33 -0400 Subject: [PATCH] revert(status): restore previous status page --- frontend/src/pages/status/StatusPage.tsx | 274 +++++------------------ frontend/tests/e2e/status.spec.ts | 2 +- 2 files changed, 56 insertions(+), 220 deletions(-) diff --git a/frontend/src/pages/status/StatusPage.tsx b/frontend/src/pages/status/StatusPage.tsx index 33b3be0..35fa86d 100644 --- a/frontend/src/pages/status/StatusPage.tsx +++ b/frontend/src/pages/status/StatusPage.tsx @@ -1,19 +1,7 @@ import { useCallback, useEffect, useState } from "react"; import type { ReactNode } from "react"; import { Link } from "react-router-dom"; -import { - Activity, - AlertCircle, - AlertTriangle, - CheckCircle2, - Clock, - Cpu, - HelpCircle, - RefreshCw, - Tag, - Terminal, - XCircle, -} from "lucide-react"; +import { AlertCircle, RefreshCw } from "lucide-react"; import { api } from "@/api/client"; import type { StatusResponse } from "@/api/types"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; @@ -84,46 +72,31 @@ export function StatusPage() { return (
-
-
-
- -
+
+
+
-
-

UmpleOnline Status

+
+

UmpleOnline Status

{status ? : null}
-

- UmpleOnline Backend • Compiler • Collaboration • LSP • Execution +

+ Developer monitoring for the backend, compiler, collaboration, LSP, and execution services.

{status ? ( -
- - - Last update: {formatDate(status.generatedAt)} - - - Refreshes every 30s -
+

+ Last refresh {formatDate(status.generatedAt)}. Auto-refreshes every 30 seconds. +

) : null}
-
- -
@@ -151,83 +124,18 @@ function StatusContent({ status }: { status: StatusResponse }) { const releaseDetail = shortCommit(release.sourceCommit) || shortCommit(status.build?.sourceCommit) || formatValue(status.build?.sourceRefName); const compilerState = formatValue(status.umplesync?.alive) === "true" ? "Running" : "Not running"; const healthRecords = buildHealthRecords(status); - const dockerStats = asRecordArray(legacyDocker.stats); return (
, - }, - { - label: "Release", - value: releaseLabel, - detail: releaseDetail || "No release metadata", - icon: , - }, - { - label: "Compiler", - value: compilerState, - detail: `Port ${formatValue(status.umplesync?.port) || "unknown"}`, - icon: , - }, - { - label: "Health rows", - value: String(healthRecords.length), - detail: "Services, checks, dependencies", - icon: , - }, + { label: "Backend uptime", value: formatDuration(status.uptimeSeconds), detail: "Since this process started" }, + { label: "Release", value: releaseLabel, detail: releaseDetail || "No release metadata" }, + { label: "Compiler", value: compilerState, detail: `Port ${formatValue(status.umplesync?.port) || "unknown"}` }, + { label: "Health rows", value: String(healthRecords.length), detail: "Services, checks, dependencies" }, ]} /> - {dockerStats.length > 0 && ( - -
- {dockerStats.map((stat, index) => ( -
-
- {labelize(String(stat.name))} - -
-
-
- CPU Usage - {formatValue(stat.CPUPerc)} -
-
-
-
-
- Memory - {formatValue(stat.MemUsage)} -
-
- Net I/O - - {formatValue(stat.NetIO)} - -
-
-
- ))} -
- - )} -
} testId="status-umplesync" > -
-
- - - - {formatValue(status.umplesync?.errors) ? ( - -
- {formatValue(status.umplesync.errors)} -
- - ) : null} -
-
-
-

- - Compiler logs -

-
-
-
-
-
-
-
-
- - umplesync.log - -
- 
-                  {formatValue(status.umplesync?.log) || (
-                    No log output returned.
-                  )}
-
-
-
-
-
+ + + 
+          {formatValue(status.umplesync?.log) || "No log output returned."}
+
+ + @@ -338,7 +213,7 @@ function StatusContent({ status }: { status: StatusResponse }) { function OverviewStrip({ items, }: { - items: Array<{ label: string; value: string; detail: string; icon?: ReactNode }>; + items: Array<{ label: string; value: string; detail: string }>; }) { return (
@@ -346,23 +221,14 @@ function OverviewStrip({
0 && "border-t border-border sm:border-l sm:border-t-0", index === 2 && "sm:border-l-0 xl:border-l", )} > - {item.icon && ( -
- {item.icon} -
- )} -
-

- {item.label} -

-

{item.value}

-

{item.detail}

-
+

{item.label}

+

{item.value}

+

{item.detail}

))}
@@ -568,34 +434,19 @@ function FormattedValue({ value }: { value: unknown }) { } function StatusBadge({ value }: { value: string }) { - const normalized = (value || "unknown").toLowerCase(); - - let icon = ; - let className = "border-muted-foreground/30 bg-muted/50 text-muted-foreground"; - - if (normalized === "ok" || normalized === "running") { - icon = ; - className = - "border-status-success/30 bg-status-success text-white dark:text-status-success dark:bg-status-success/10"; - } else if (["degraded", "unparsed", "not_tracked"].includes(normalized)) { - icon = ; - className = - "border-status-warning/30 bg-status-warning text-white dark:text-status-warning dark:bg-status-warning/10"; - } else if (["unreachable", "unavailable", "error"].includes(normalized)) { - icon = ; - className = - "border-status-error/30 bg-status-error text-white dark:text-status-error dark:bg-status-error/10"; - } + const normalized = value.toLowerCase(); + const className = cn( + "border font-semibold", + (normalized === "ok" || normalized === "running") && + "border-status-success/30 bg-status-success/10 text-status-success", + (normalized === "degraded" || normalized === "unparsed" || normalized === "not_tracked") && + "border-status-warning/30 bg-status-warning/10 text-status-warning", + (normalized === "unreachable" || normalized === "unavailable") && + "border-status-error/30 bg-status-error/10 text-status-error", + ); return ( - - {icon} + {value || "unknown"} ); @@ -603,33 +454,18 @@ function StatusBadge({ value }: { value: string }) { function StatusSkeleton() { return ( -
-
- {Array.from({ length: 4 }).map((_, index) => ( - -
- -
- - -
-
- - ))} -
-
- {Array.from({ length: 3 }).map((_, index) => ( - - - - - - - - - - ))} -
+
+ {Array.from({ length: 6 }).map((_, index) => ( + + + + + + + + + + ))}
); } diff --git a/frontend/tests/e2e/status.spec.ts b/frontend/tests/e2e/status.spec.ts index fabc5bd..ecaca25 100644 --- a/frontend/tests/e2e/status.spec.ts +++ b/frontend/tests/e2e/status.spec.ts @@ -70,7 +70,7 @@ test.describe('Status dashboard', () => { await expect(page.getByTestId('status-release-runtime')).toContainText('http://code-exec:3000') await expect(page.getByTestId('status-umplesync')).toContainText('Umple compiler listener ready') await expect(page.getByTestId('status-diagnostics')).toContainText('Legacy software') - await expect(page.getByTestId('status-system-resources')).toContainText('Umpleonline backend') + await expect(page.getByTestId('status-diagnostics')).toContainText('umpleonline-backend') await expect(page.locator('.react-resizable-handle')).toHaveCount(0) await expect(page.locator('.status-widget-drag-handle')).toHaveCount(0) })