fix: e2e QA hardening — honest runtime URLs, health, and read-only anon UI

Backend: - managed DB provisioning: attach DB containers to the platform network and probe the container IP, fixing the 127.0.0.1 reachability failure inside the backend container; log provisioning failures - stop fabricating connection URLs when provisioning produced none - template deploys now carry port + health_check into service runtime fields - service health probed over the project network (backend joins it) instead of an in-container wget that fails on shell-less images - runtime/public/connection URLs rewrite loopback to the request Host so links are usable for LAN/remote clients Frontend: - service Networking panel shows real runtime URLs/ports/health instead of hardcoded containr.dev + 8080->443 - anonymous views hide all mutation controls (new project, add service, group, context menu) - project cards: remove decorative svcN labels; badge says DOWN only when zero services run, IDLE when empty, DEGRADED for partial - mobile projects header no longer clips (fluid search width) - unknown routes render a not-found page instead of silently redirecting Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-10-28 15:51:26 +00:00 · 2026-10-03 20:02:51 +02:00
1 parent d968eb2315
commit 9f5dcc7296
@@ -1,6 +1,6 @@
 import { Link, Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
-import { ShieldCheck } from 'lucide-react';
+import { Compass, ShieldCheck } from 'lucide-react';
 import { PlatformShell } from './layout/PlatformShell';
 import { ProjectsPage } from '@/features/projects/pages/ProjectsPage';
 import { ProjectWorkspacePage } from '@/features/workspace/pages/ProjectWorkspacePage';
@@ -103,6 +103,26 @@ function AdminRequired() {
  return <Outlet />;
 }

+function NotFoundPage() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 px-6 text-center">
+      <Compass size={32} className="text-[var(--text-tertiary)]" />
+      <div>
+        <h1 className="text-lg font-semibold text-[var(--text-primary)]">Page not found</h1>
+        <p className="mt-1 max-w-sm text-sm text-[var(--text-secondary)]">
+          The page you are looking for does not exist or was moved.
+        </p>
+      </div>
+      <Link
+        to="/"
+        className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-4 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+      >
+        Back to home
+      </Link>
+    </div>
+  );
+}
+
 export default function App() {
  return (
    <ErrorBoundary>
@@ -138,14 +158,14 @@ export default function App() {
          <Route element={<AdminRequired />}>
            <Route path="/admin" element={<AdminPage />} />
          </Route>
+
+          <Route path="*" element={<NotFoundPage />} />
        </Route>

        {/* Full-bleed design demo — renders its own chrome, no app shell */}
        <Route element={<AuthRequired />}>
          <Route path="/metrics-demo" element={<ServiceMetricsDashboard />} />
        </Route>
-
-        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </ErrorBoundary>
  );
@@ -25,10 +25,10 @@ const demoDeploys = [
  { id: 'd4', name: 'Marketing Site', project: 'Growth Surface', status: 'DEPLOYED', when: '2h' },
 ];

-function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critical' {
-  if (stats.service_count === 0) return 'healthy';
+function getHealthStatus(stats: ProjectStats): 'healthy' | 'idle' | 'degraded' | 'critical' {
+  if (stats.service_count === 0) return 'idle';
  if (stats.running_services === stats.service_count) return 'healthy';
-  if (stats.running_services >= stats.service_count / 2) return 'degraded';
+  if (stats.running_services > 0) return 'degraded';
  return 'critical';
 }

@@ -36,6 +36,8 @@ function healthBadge(health: ReturnType<typeof getHealthStatus>) {
  switch (health) {
    case 'healthy':
      return { label: 'RUNNING', cls: 'v-st-ok' };
+    case 'idle':
+      return { label: 'IDLE', cls: '' };
    case 'degraded':
      return { label: 'DEGRADED', cls: 'v-st-warn' };
    case 'critical':
@@ -70,7 +72,6 @@ function MiniCanvas({ project }: { project: ProjectEntity }) {
      {Array.from({ length: shown }).map((_, i) => (
        <div key={i} className="v-node" style={positions[i]}>
          <b className={`v-nd ${i < running ? '' : 'r'}`} />
-          svc{i + 1}
        </div>
      ))}
      {extra > 0 ? (
@@ -85,6 +86,7 @@ function ProjectCard({ project, href }: { project: ProjectEntity; href: string }
  const health = getHealthStatus(project.stats);
  const badge = healthBadge(health);
  const envOk = health === 'healthy';
+  const envLabel = envOk ? 'production' : health === 'idle' ? 'idle' : health === 'critical' ? 'down' : 'degraded';

  return (
    <article
@@ -101,10 +103,10 @@ function ProjectCard({ project, href }: { project: ProjectEntity; href: string }
      <div className="v-mono mt-3 flex items-center gap-2 text-[10.5px] text-[var(--text-tertiary)]">
        <i
          className="inline-block h-1.5 w-1.5 rounded-full"
-          style={{ background: envOk ? 'var(--success)' : 'var(--warning)' }}
+          style={{ background: envOk ? 'var(--success)' : health === 'idle' ? 'var(--text-tertiary)' : health === 'critical' ? 'var(--error)' : 'var(--warning)' }}
        />
        <span className="text-[var(--text-secondary)]">
-          {envOk ? 'production' : 'degraded'}
+          {envLabel}
        </span>
        <span>·</span>
        <span>
@@ -220,7 +222,7 @@ export function ProjectsPage() {
            </p>
          </div>
          <div className="flex items-center gap-2.5">
-            <div className="search-box" style={{ width: 240 }}>
+            <div className="search-box" style={{ width: 'min(240px, 42vw)' }}>
              <Search size={13} />
              <input
                value={search}
@@ -230,9 +232,11 @@ export function ProjectsPage() {
                style={{ fontSize: 11.5 }}
              />
            </div>
-            <button onClick={openCreate} className="v-btn">
-              + new project
-            </button>
+            {signedIn && (
+              <button onClick={openCreate} className="v-btn">
+                + new project
+              </button>
+            )}
          </div>
        </div>

@@ -972,31 +972,60 @@ export function ServiceDetailPage() {
                    <p className="text-sm font-medium text-[var(--text-primary)]">Networking</p>
                    <p className="text-xs text-[var(--text-tertiary)]">Public endpoints and ports</p>
                  </div>
+                  {runtimeQuery.data?.health === 'healthy' && (
+                    <span className="ml-auto v-st v-st-ok">HEALTHY</span>
+                  )}
+                  {runtimeQuery.data?.health === 'unhealthy' && (
+                    <span className="ml-auto v-st v-st-fail">UNHEALTHY</span>
+                  )}
                </div>
-                
+
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
-                    <div className="flex items-center gap-2">
-                      <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
-                      <span className="text-xs text-[var(--text-secondary)]">HTTPS</span>
+                  {service.domain && (
+                    <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
+                        <span className="text-xs text-[var(--text-secondary)]">Domain</span>
+                      </div>
+                      <a
+                        href={`https://${service.domain}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                      >
+                        {service.domain}
+                      </a>
                    </div>
-                    <a 
-                      href={`https://${service.name}.containr.dev`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="mono text-xs text-[var(--accent-primary)] hover:underline"
-                    >
-                      {service.name}.containr.dev
-                    </a>
-                  </div>
+                  )}
+                  {(runtimeQuery.data?.urls ?? []).map((url) => (
+                    <div key={url} className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
+                        <span className="text-xs text-[var(--text-secondary)]">HTTP</span>
+                      </div>
+                      <a
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                      >
+                        {url.replace(/^https?:\/\//, '')}
+                      </a>
+                    </div>
+                  ))}
                  <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
                    <div className="flex items-center gap-2">
                      <div className="w-2 h-2 rounded-full bg-[var(--accent-secondary)]" />
-                      <span className="text-xs text-[var(--text-secondary)]">Port</span>
+                      <span className="text-xs text-[var(--text-secondary)]">Internal</span>
                    </div>
-                    <span className="mono text-xs text-[var(--text-primary)]">8080 → 443</span>
+                    <span className="mono text-xs text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
                  </div>
                </div>
+                {!service.domain && (runtimeQuery.data?.urls ?? []).length === 0 && (
+                  <p className="mt-3 text-xs text-[var(--text-tertiary)]">
+                    No public endpoint. Publish a port or set a domain in Settings → Networking to expose this service.
+                  </p>
+                )}
              </div>
            )}
          </div>
@@ -1099,15 +1099,17 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
            ))}
          </div>
        )}
-        <button
-          type="button"
-          onClick={() => addGroup()}
-          className="canvas-pill canvas-pill-btn h-8 px-3 flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-          title="Add group"
-        >
-          <Layers size={13} />
-          Group
-        </button>
+        {!readOnly && (
+          <button
+            type="button"
+            onClick={() => addGroup()}
+            className="canvas-pill canvas-pill-btn h-8 px-3 flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            title="Add group"
+          >
+            <Layers size={13} />
+            Group
+          </button>
+        )}
      </div>

      {/* Floating: zoom controls (bottom-left) */}
@@ -1170,15 +1172,17 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
              Add a service from a git repo or Docker image - it runs on a private network with the rest of this
              project.
            </p>
-            <button
-              type="button"
-              onClick={onAddService}
-              className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
-              style={{ background: 'var(--accent-primary)' }}
-            >
-              <Plus size={15} />
-              Add Service
-            </button>
+            {!readOnly && (
+              <button
+                type="button"
+                onClick={onAddService}
+                className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
+                style={{ background: 'var(--accent-primary)' }}
+              >
+                <Plus size={15} />
+                Add Service
+              </button>
+            )}
          </div>
        </div>
      )}
@@ -1191,32 +1195,36 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
        >
          {contextMenu.kind === 'pane' && (
            <>
-              <button
-                type="button"
-                onClick={() => {
-                  setContextMenu(null);
-                  onAddService();
-                }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
-              >
-                <Plus size={13} />
-                Add service
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  const at =
-                    contextMenu.flowX !== undefined && contextMenu.flowY !== undefined
-                      ? { x: contextMenu.flowX, y: contextMenu.flowY }
-                      : undefined;
-                  setContextMenu(null);
-                  addGroup(at);
-                }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
-              >
-                <Layers size={13} />
-                Add group here
-              </button>
+              {!readOnly && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setContextMenu(null);
+                      onAddService();
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
+                  >
+                    <Plus size={13} />
+                    Add service
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const at =
+                        contextMenu.flowX !== undefined && contextMenu.flowY !== undefined
+                          ? { x: contextMenu.flowX, y: contextMenu.flowY }
+                          : undefined;
+                      setContextMenu(null);
+                      addGroup(at);
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
+                  >
+                    <Layers size={13} />
+                    Add group here
+                  </button>
+                </>
+              )}
              <div className="border-t border-[var(--border-subtle)] mt-1 pt-1">
                <button
                  type="button"
@@ -719,7 +719,7 @@ export function ProjectWorkspacePage() {
            <Search size={12} />
            <kbd className="px-1 py-0.5 rounded bg-[var(--surface-card)] text-[10px] font-mono">⌘K</kbd>
          </button>
-          {!isDemoMode && (
+          {!isDemoMode && signedIn && (
            <button
              onClick={openAddService}
              className="flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] text-[var(--accent-on)] text-xs font-semibold shadow-lg hover:shadow-xl transition-all"
@@ -742,7 +742,7 @@ export function ProjectWorkspacePage() {
            onAddService={openAddService}
            onOpenService={(serviceId) => navigate(serviceHref(serviceId))}
            onOpenSection={(serviceId, section) => navigate(serviceSectionHref(serviceId, section))}
-            readOnly={isDemoMode}
+            readOnly={isDemoMode || !signedIn}
          />
          {isDemoMode && (
            <div className="absolute top-4 left-1/2 -translate-x-1/2 pointer-events-none">
@@ -68,6 +68,8 @@ export type ServiceRuntime = {
  desired: number;
  status: 'running' | 'degraded' | 'stopped';
  urls: string[];
+  ports: number[];
+  health?: 'healthy' | 'unhealthy' | 'unreachable' | '';
  containers: RuntimeContainer[];
 };

@@ -1080,16 +1082,15 @@ export async function deleteService(serviceId: string): Promise<void> {
  });
 }

+function normalizeRuntime(runtime?: ServiceRuntime): ServiceRuntime {
+  const state = runtime ?? { desired: 0, status: 'stopped' as const, urls: [], ports: [], containers: [] };
+  // The API emits null (not []) for empty collections — coerce at the boundary.
+  return { ...state, urls: state.urls ?? [], ports: state.ports ?? [], containers: state.containers ?? [] };
+}
+
 export async function getServiceRuntime(serviceId: string): Promise<ServiceRuntime> {
  const payload = await requestJson<{ runtime?: ServiceRuntime }>(`/services/${serviceId}/runtime`);
-  return (
-    payload.runtime ?? {
-      desired: 0,
-      status: 'stopped',
-      urls: [],
-      containers: [],
-    }
-  );
+  return normalizeRuntime(payload.runtime);
 }

 async function serviceAction(serviceId: string, action: 'start' | 'stop' | 'restart'): Promise<void> {
@@ -1104,7 +1105,7 @@ export async function redeployService(serviceId: string): Promise<ServiceRuntime
  const payload = await requestJson<{ runtime?: ServiceRuntime }>(`/services/${serviceId}/redeploy`, {
    method: 'POST',
  });
-  return payload.runtime ?? { desired: 0, status: 'stopped', urls: [], containers: [] };
+  return normalizeRuntime(payload.runtime);
 }

 function normalizeServiceVariables(rows: RawServiceVariable[] | undefined): ServiceVariable[] {