alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): update sessions page for enhanced health monitoring

Browse Source 
- Add new status badges: starting, probing, unhealthy
- Show tunnel error only when tunnel_status is unreachable
- Show app error badge with status code for error_response
- Add collapsible probe output section for diagnostics
- Update health polling to check all active instances
- Only show Recreate Tunnel button for unreachable tunnels
This commit is contained in:
Fusion
2026-05-22 21:26:05 +02:00
parent 2a9e57ad0d
commit d5f9df33b7
14 changed files with 779 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/api/sessions.ts
+15 -1
View File
@@ -25,6 +25,8 @@ export interface Session {
project_id: string;
status: string;
url: string | null;
container_status?: string;
probe_status?: string;
}
export async function listInstances(
@@ -101,11 +103,23 @@ export async function getUserSessions(): Promise<Session[]> {
return response.data.sessions;
}
export interface InstanceHealth {
healthy: boolean;
container_status: string;
container_health?: string;
container_exit_code?: number | null;
tunnel_status: string;
tunnel_status_code: number | null;
probe_status: string;
last_probe_output?: string;
error?: string;
}
export async function checkInstanceHealth(
projectId: string,
repoId: string,
instanceId: string
): Promise<{ healthy: boolean; status_code: number | null; error?: string }> {
): Promise<InstanceHealth> {
const response = await apiClient.get(
`/projects/${projectId}/repositories/${repoId}/instances/${instanceId}/health`
);
apps/web/src/pages/sessions.tsx
+52 -9
View File
@@ -40,8 +40,18 @@ export const SessionsPage = () => {
const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
const [stopConfirmId, setStopConfirmId] = useState<string | null>(null);
const [tunnelHealth, setTunnelHealth] = useState<Record<string, { healthy: boolean; status_code: number | null; error?: string }>>({});
const [tunnelHealth, setTunnelHealth] = useState<Record<string, {
healthy: boolean;
container_status: string;
container_health: string | null;
tunnel_status: string;
tunnel_status_code: number | null;
probe_status: string;
last_probe_output: string | null;
error: string | null;
}>>({});
const [recreatingId, setRecreatingId] = useState<string | null>(null);
const [expandedProbeId, setExpandedProbeId] = useState<string | null>(null);
const loadSessions = useCallback(async () => {
setStatus("loading");
@@ -86,13 +96,13 @@ export const SessionsPage = () => {
void loadToolTypes();
}, []);
// Poll tunnel health every 30 seconds for running instances
// Poll health every 30 seconds for active instances
useEffect(() => {
const checkHealth = async () => {
const runningSessions = sessions.filter(
(s) => s.status === "running" && s.url
const activeSessions = sessions.filter(
(s) => ["running", "starting", "unhealthy", "probing"].includes(s.status)
);
for (const session of runningSessions) {
for (const session of activeSessions) {
try {
const health = await checkInstanceHealth(
session.project_id,
@@ -106,7 +116,14 @@ export const SessionsPage = () => {
} catch {
setTunnelHealth((prev) => ({
...prev,
[session.id]: { healthy: false, status_code: null, error: "check failed" },
[session.id]: {
healthy: false,
container_status: "unknown",
tunnel_status: "unreachable",
tunnel_status_code: null,
probe_status: "unknown",
error: "check failed",
},
}));
}
}
@@ -135,7 +152,7 @@ export const SessionsPage = () => {
}, [selectedProject]);
const activeSessions = useMemo(
() => sessions.filter((s) => ["running", "building", "pending"].includes(s.status)),
() => sessions.filter((s) => ["running", "building", "pending", "starting", "probing", "unhealthy"].includes(s.status)),
[sessions]
);
@@ -328,9 +345,35 @@ export const SessionsPage = () => {
</p>
)}
<span className={`status-badge ${session.status}`}>{session.status}</span>
{tunnelHealth[session.id] && !tunnelHealth[session.id].healthy && (
{session.status === "starting" && (
<span className="status-badge starting">starting...</span>
)}
{session.status === "probing" && (
<span className="status-badge probing">checking...</span>
)}
{tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
<span className="status-badge error">tunnel error</span>
)}
{tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "error_response" && (
<span className="status-badge warning">app error ({tunnelHealth[session.id].tunnel_status_code})</span>
)}
{tunnelHealth[session.id]?.last_probe_output && (
<div className="probe-output-section">
<button
className="probe-toggle"
onClick={() => setExpandedProbeId(expandedProbeId === session.id ? null : session.id)}
type="button"
>
<Icon name="info" size="sm" />
{expandedProbeId === session.id ? "Hide probe output" : "Show probe output"}
</button>
{expandedProbeId === session.id && (
<pre className="probe-output">
{tunnelHealth[session.id].last_probe_output}
</pre>
)}
</div>
)}
</div>
<div className="session-actions">
{session.url ? (
@@ -353,7 +396,7 @@ export const SessionsPage = () => {
Open
</button>
)}
{tunnelHealth[session.id] && !tunnelHealth[session.id].healthy && (
{tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
<button
className="secondary-button small"
onClick={() => void handleRecreateTunnel(session)}