CreaRack-SL

Puente rack-real: los stencils de rack crean racks del inventario (F4a v1.48.0)

Vista limpiaEditar
Funcionalidadactivecreado Fri Jul 10#blueprints#maps#racks#dcim#stencils#visual-design#javascript-frontend#django-backend

Descripción general

Los 9 stencils de rack completo (12U–48U de 19” + Rack de Network) del editor de mapas (Map Editor, panel Shapes) ya no insertan un dibujo conectable: crean un rack REAL del inventario que aparece en el dashboard, se renombra con doble clic, acepta cables rack_connection con color de estado de monitorización y abre su Rack Editor con clic derecho.

Impacto de usuario

  • Antes: soltar un stencil de rack = dibujo sin entidad en BD (el “rack no existía”)
  • Ahora: soltar un stencil de rack = Rack real creado en el inventario, con nombre del stencil, visual profesional (imagen SVG tintada por estado de monitorización) y toda la funcionalidad: cables, rename, etiqueta bajo la forma (estilo draw.io), y persistencia tras reload
  • El resto de stencils (servidores 1U–6U, patch panels, UPS APC, mobiliario) siguen siendo dibujos conectables — es lo correcto para ellos

Cómo funciona

Backend: creación del rack real

  1. POST /api/blueprints/{bp_id}/rack (modificado en blueprints/api/racks.py):

    • Parámetros: name, x, y, style_props (JSON con visual de stencil)
    • Crea un Rack real del inventario con Rack.objects.create(name=rack_name, organization=org, height_u=42, status="active")
    • Devuelve { id, name, status, style_props } con el stencil grabado en BlueprintPlacement.style_props

  2. Schema actualizado (blueprints/api/schemas.py):

    • PlacementInputSchema.name (str, opcional): nombre inicial del rack; si no se proporciona, por defecto “New Rack”

Frontend: visual y herramientas

  1. StencilRenderer (helpers/StencilRenderer.js):

    • Método nuevo: buildImage(svg, stroke, w, h) — rasteriza un SVG a Konva.Image tematizado con el color de estado (asincrónico, repinta la capa al cargar la imagen)
    • Método existente buildNode() refactorizado para reutilizar buildImage()
    • Lógica nueva: si shape.materialize === "rack", llama a insertRackStencil() en lugar de crear un dibujo

  2. MapRacks.createRackNode (static/js/blueprints/MapRacks.js):

    • Rama nueva: si rackData.style_props?.stencil?.svg existe, pinta el visual con StencilRenderer.buildImage() + etiqueta debajo (en lugar del rectángulo clásico)
    • Rama antigua (rect clásico) intacta para compatibilidad: los racks antiguos sin stencil siguen viéndose como rectángulos

  3. RackTool (static/js/blueprints/drawing/tools/RackTool.js):

    • Al crear un rack con la tecla K, busca el stencil “42U Rack 19 Standard” del catálogo (DEFAULT_RACK_STENCIL)
    • Si el catálogo carga, inserta con visual de stencil (imagen 40x150px por defecto)
    • Si falla, degrada al rectángulo clásico (sin error)
    • Llama a context.persistRack() con styleProps que contiene el SVG del stencil

  4. StencilPanel.js (modificado):

    • ensureSet() ahora inicializa el índice aunque el panel no esté abierto (necesario para que RackTool cargue el stencil de rack por defecto)

Catálogo: flag materialize: "rack"

El conversor (scripts/stencils/convert_mxgraph_stencils.py) añade la bandera materialize: "rack" a los 9 stencils:

{
  "id": "42u-rack-19-standard",
  "set": "rack-general",
  "name": "42U Rack 19 Standard",
  "svg": "...",
  "w": 60,
  "h": 150,
  "materialize": "rack"  // ← Flag nueva: este stencil crea un rack REAL
}

Stencils con materialize: "rack" (9 en total):

  • rack-general: 12U, 26U, 36U, 40U, 42U, 44U, 48U Racks 19”
  • rack-general: 47U Rack 19” IBM
  • networks: Rack (Network)

Fix: colores simbólicos de mxGraph (“velo negro”)

El problema

Los stencils de draw.io usan colores simbólicos como frameColor, cabinetColor, stroke, fillColor1. El conversor los copiaba tal cual al SVG, y un navegador los trata como color inválido → pinta negro → el stencil quedaba como una losa oscura sin detalle (el “velo” reportado por Edu en v1.46.0).

La solución

El conversor (scripts/stencils/convert_mxgraph_stencils.py) añade un mapa SYMBOLIC_COLORS:

SYMBOLIC_COLORS = {
    "stroke": "currentColor",       # pinta con el color de trazo actual
    "strokeColor": "currentColor",
    "frameColor": "#9ca3af",        # marco gris de racks 19"
    "cabinetColor": "#374151",      # interior distinguible del fondo
    "fillColor1": "#94a3b8",        # relleno secundario (floorplan)
}

Antes de generar el SVG, resuelve cada color simbólico a su equivalente hexadecimal. El catálogo (static/stencils/floorplan.json + otros) queda regenerado (185/185 stencils, 0 símbolos restantes).

Verificación E2E:

  • Drop de stencil de rack → visual nítido (sin losa negra) ✓
  • Colores ajustados al lienzo oscuro (marco gris, interior distinguible) ✓
  • Catálogo 185/185 regenerado sin símbolos ✓

Cambios de código

Backend

  • blueprints/api/racks.py: create_rack_in_blueprint() usa payload.name or "New Rack" (máx 100 caracteres)
  • blueprints/api/schemas.py: PlacementInputSchema + parámetro name opcional
  • Test nuevo en suite blueprints: 4/4 verde

Frontend

  • static/js/blueprints/MapRacks.js: createRackNode() con rama de visual stencil (tintado + etiqueta debajo) + rama clásica (rect)
  • static/js/blueprints/helpers/StencilRenderer.js: método buildImage() nuevo + insertRackStencil() nuevo (materializa rack real); refactor de buildNode()
  • static/js/blueprints/drawing/tools/RackTool.js: carga stencil 42U por defecto, llama a persistRack() con styleProps
  • static/js/blueprints/helpers/StencilPanel.js: ensureSet() inicializa índice para llamadas externas
  • static/js/blueprints/map_editor.js: persistRack() acepta styleProps
  • Catálogo de stencils regenerado: static/stencils/floorplan.json + otros

Versión

  • config/settings/base.py: APP_VERSION = "1.48.0"
  • README.md: v1.48.0
  • CHANGELOG.md: entrada [1.48.0] con secciones Fixed + Added
  • RELEASE_NOTES.md: entrada nueva con detalle técnico

Testing

  • ✅ Test backend nuevo (blueprints suite 4/4 verde)
  • ✅ E2E verificado en local:
    • Drop de stencil de rack → rack real en BD
    • Visual de stencil + etiqueta debajo
    • Rename con doble clic
    • Drag con cables (rack_connection)
    • Persistencia tras reload

Notas

  • Sin strings i18n nuevos (los stencils ya están en el catálogo)
  • Los racks antiguos con rectángulo NO cambian (rama clásica intacta)
  • Fallback gracioso: si el catálogo de stencils no carga, RackTool crea el rack con rect clásico
  • Futura integración con Rack Editor: cables ya soportan rack_connection con color de estado

Véase también

  • [[concept—blueprints—map-editor]]
  • [[crearack—blueprints—que-es-map-editor]]
  • [[concept—producto—map-editor-autoplan-mas-seguro]]
  • [[entity—blueprints—endpoint—create-rack-in-blueprint]]
  • [[entity—blueprints—model—placement-input-schema]]

Referenciado desde

Inicio
Yo