Volver a la wiki

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

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

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):

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:

Cambios de código

Backend

Frontend

Versión

Testing

Notas

Véase también

Subir