Funcionalidadactivecreado Tue Apr 28#workspace #mobile #frontend #hetzner #infra #observability #astro #react

Página /servers — Vista mobile de servidores Hetzner

Qué es

Nueva ruta GET /servers del Workspace que muestra en formato mobile-first la lista de servidores Hetzner gestionados por la organización. Reemplaza el enlace roto del Quick Card “Servidores” en el home mobile, que antes apuntaba a / (recarga del home) y ahora navega a esta página dedicada.

La página usa Astro + React (client:load) con el componente ServersList.tsx y encaja dentro del layout SecondaryLayout.

Archivos clave

Archivo	Rol
`src/pages/servers.astro`	Página Astro — enruta `/servers`, monta `ServersList` con `client:load`
`src/components/servers/ServersList.tsx`	Componente React — fetch, estados y renderizado de cards
`src/components/variants/mobile/V1HomeVivo.tsx`	Quick Card “Servidores” corregido: `href: '/servers'`

Comportamiento

Flujo de datos

ServersList hace fetch('/api/servers', { credentials: 'same-origin' }) en useEffect al montar. El resultado esperado es un objeto ServersResponse:

interface ServersResponse {
  servers: ServerInfo[];
  mock?: boolean;   // true si el token no está configurado
  error?: string;   // mensaje de error del endpoint
}

Estados gestionados

Estado	Trigger	UI
Loading	Inicial	Spinner textual “Cargando servidores…”
fetchError	Error de red / HTTP no-ok	Mensaje rojo con el error
mock / error	`data.mock === true` o `data.error` presente	Banner amarillo “Sin datos en tiempo real” con mensaje del endpoint
0 servidores	`servers.length === 0`	Mensaje neutro “Sin servidores en Hetzner”
Normal	Array con ≥1 servidor	Lista de `ServerCard`

ServerCard — campos mostrados

Bloque principal (siempre visible):

Nombre del servidor + badge de status (UP / STARTING / etc.)
Tipo de instancia + ciudad (ej. CCX32 · Nuremberg)
IP pública, vCPU, RAM (normaliza MB→GB para ≥256 MB), Disco GB

Bloque de métricas (visible solo si cpu_percent != null || net_in_mbps != null):

CPU%, Net in Mb/s, Net out Mb/s, Disk r/w Mb/s

Colores de status

Status Hetzner	Color CSS variable	Label
`running`	`--success`	UP
`starting`	`--warning`	STARTING
`migrating`	`--warning`	MIGRATING
`stopping`	`--warning`	STOPPING
`off`	`--fg-dim`	OFF
cualquier otro	`--danger`	(status en mayúsculas)

Prerequisitos de configuración

Para mostrar métricas en tiempo real el endpoint /api/servers (CF Worker / Pages Function) necesita HETZNER_API_TOKEN como variable de entorno en Cloudflare Pages. Sin él el endpoint devuelve { mock: true, error: "..." } y el componente muestra el banner de aviso sin bloquear la UI.

Corrección incluida: Quick Card “Servidores”

En V1HomeVivo.tsx el array de Quick Cards tenía href: '/' para la entrada “Servidores”, lo que provocaba una recarga inútil del home en lugar de navegar. El commit corrige este valor a href: '/servers'.

-  { icon: '🛰', title: 'Servidores', ..., href: '/' },
+  { icon: '🛰', title: 'Servidores', ..., href: '/servers' },

Decisiones de diseño

Mobile-first vertical: las cards usan flexDirection: column y auto-fit minmax(120px, 1fr) para specs, adaptándose a pantallas estrechas sin media queries explícitas.
CSS variables del design system: todos los colores usan tokens (--bg-raised, --border-soft, --fg-muted, etc.) para coherencia con el resto del workspace.
color-mix(in oklab, ...): la badge de status y el banner de aviso usan color-mix para backgrounds semitransparentes sobre los colores de estado, técnica consistente con el resto de la UI (V1HomeVivo, alertas).
Degradación elegante: si el token Hetzner no está configurado la página sigue siendo funcional y muestra información útil al operador.

Véase también

[[workspace—que-es-workspace]]

Referenciado desde

Features Workspace Index