CreaRack-SL

Toggle Stencils/Descriptions en la vista de Fila

Qué es

Un selector (toggle) que permite alternar entre dos modos de visualización en la página de una Fila (/rows/<id>):

  • Stencils: cada equipo se dibuja con la imagen real de su stencil (la misma fuente que usa el editor de racks: model_data.original_image)
  • Descriptions: renderizado original, caja con el nombre del equipo

La elección se recuerda por navegador (localStorage) y el modo por defecto es Stencils.

Por qué

Hasta la v1.66.13, la página de una Fila solo mostraba equipos como cajas con su nombre — útil para navegar, pero sin el aspecto real del rack. Los stencils visualizan mejor el contexto físico de los equipos en el centro de datos, facilitando la comunicación entre equipos operativos.

Cómo funciona

Interfaz

  • Control flotante en la esquina superior izquierda del lienzo, espejo del control de zoom
  • Dos botones: “Stencils” y “Descriptions”
  • Estado activo se marca con clase btn-action; inactivo con btn-neutral

Lógica

  1. Inicialización: al cargar la página, consulta localStorage['crearack-row-view-mode']

    • Si no existe o es inválido → modo Stencils (fallback por defecto)
    • Si es 'descriptions' → modo Descriptions
  2. Carga de imagen: cuando se construye cada equipo en el canvas (Konva.js):

    • Se extrae model_data.original_image (ya viajaba en el payload, cambio 100% frontend)
    • Se normaliza la ruta (prefijo /static/ si no comienza con http o /)
    • Se crea un Konva.Image async; hasta que cargue (o si falla), se muestra la caja
  3. Aplicación de modo: función applyDevViewMode(dev) aplica la vista a cada equipo:

    • Si Stencils + imagen cargada: muestra imagen (opacidad 1), caja de marco (stroke solo, sin fill), nombre oculto
    • Si Descriptions o sin imagen: muestra caja rellena, nombre visible
  4. Persistencia: al hacer clic en un botón, se actualiza localStorage y se recalcula toda la capa

Fallbacks y robustez

  • Un equipo sin imagen (model_data.original_image vacío, None o falta): siempre se muestra como caja
  • Si la imagen falla al cargar: se vuelve a caja (mismo patrón que en el editor de racks)
  • Drag & drop, clic-al-editor, PDUs 0U: intactos en ambos modos

Traducción

4 strings nuevos al catálogo español (locale/es/LC_MESSAGES/django.po), validado con check_po.py:

msgid "Stencils"
msgstr "Stencils"

msgid "Descriptions"
msgstr "Descripciones"

msgid "Show devices as stencil images"
msgstr "Mostrar los equipos como imágenes de stencil"

msgid "Show devices as boxes with their names"
msgstr "Mostrar los equipos como cajas con su nombre"

Cambios en detalle

ArchivoCambio
static/js/rows/row_view.jsConstantes VIEW_MODE_KEY, viewMode; funciones applyDevViewMode(), applyViewMode(); listeners de botones; carga async de imagen en placeDeviceNode()
static/css/pages/row.cssNuevo selector .row-view-ctrl (posicionamiento 14px arriba-izquierda, espejo del zoom)
templates/row.htmlDos botones #row-view-stencils e #row-view-descriptions dentro de .row-view-ctrl
locale/es/LC_MESSAGES/django.po4 strings + validación
CHANGELOG.md / RELEASE_NOTES.mdDocumentación de la feature
config/settings/base.pyAPP_VERSION → 1.66.14

Impacto en usuario

  • La página de Fila se abre en modo Stencils por defecto (si no tiene preferencia guardada)
  • Si una conexión lenta o hay equipos sin stencil, se ve caja (sin errores)
  • Flujos de trabajo (arrastrar, clic-al-editor) sin cambios

Véase también

  • [[entity—racks—model—device]]
  • [[entity—racks—model—stencil]]
  • [[entity—racks—model—rack]]
  • [[concept—racks—editor]]
  • [[concept—racks—dcim-core]]