mirror of
https://github.com/RGJorge/ContainerFlow.git
synced 2026-08-03 07:21:42 +02:00
22 lines
816 B
Markdown
22 lines
816 B
Markdown
# 04 — ServiceNode (nodo visual de container)
|
|
|
|
## Objetivo
|
|
Crear el componente visual que representa cada container en el grafo.
|
|
|
|
## Tareas
|
|
- [ ] `src/client/nodes/ServiceNode.tsx`:
|
|
- Status dot con animate-pulse (running = verde, stopped = rojo, paused = amarillo)
|
|
- Icono auto-detectado por imagen (postgres=🐘, redis=⚡, nginx=🔀, node=💚, python=🐍, etc.)
|
|
- Nombre del servicio
|
|
- Imagen (truncada)
|
|
- Puertos como badges cyan
|
|
- Barras de CPU/MEM con porcentaje
|
|
- Badge del proyecto (compose project name)
|
|
- Handles top/bottom para edges
|
|
- Dark theme: bg slate-900, bordes según estado, backdrop-blur
|
|
- [ ] Registrar nodeTypes en React Flow
|
|
- [ ] Probar con datos mock primero
|
|
|
|
## Criterio de completado
|
|
Se ven nodos bonitos con toda la info, pulso verde en running, rojo en stopped.
|