CreaRack-SL

Descripción

Función en static/js/editor/devices.js que recalcula y repinta los badges de capacidad en la cabecera del editor del rack. Ejecutándose cada vez que se añade, mueve o edita un equipo, y cuando se guarda los límites en el modal “Rack Information”.

Responsabilidad clave: aplicar colores a los badges (verde OK → ámbar ≥90% → rojo si se supera el límite).

Firma

export function updatePowerRollup()

Lógica

1. Cálculo de totales

const totalW = STATE.devices.reduce((s, d) => s + (Number(d.power_w) || 0), 0);
const totalKg = STATE.devices.reduce((s, d) => s + (Number(d.weight_kg) || 0), 0);
const usedU = STATE.devices.reduce((s, d) => s + (d.zero_u ? 0 : (Number(d.u_height) || 0)), 0);
  • totalW (vatios): suma de power_w en todos los equipos.
  • totalKg (kilogramos): suma de weight_kg.
  • usedU (unidades de rack): suma de altura sin contar PDUs de 0U (d.zero_u → 0 altura).

2. Obtención de límites del rack

const maxW = Number(STATE.rackData?.max_power_w) || 0;
const maxKg = Number(STATE.rackData?.max_weight_kg) || 0;
const capacityU = Number(STATE.rackData?.height_u) || 0;
  • Límites de 0 → “sin límite” (los badges no se colorean en ámbar/rojo).

3. Función helper: applyCapacityState(el, used, limit)

Aplica clases CSS según el porcentaje de uso:

  • limit = 0 → no hace nada (sin límite).
  • used / limit > 100% → añade clase .capacity-over (rojo, --danger).
  • used / limit >= 90% → añade clase .capacity-warn (ámbar, --warning).
  • Menos del 90% → solo remueve las clases (verde natural).

4. Actualización de badges

Badge de U (ocupadas/totales)

const uEl = document.querySelector('.rack-u-badge');
if (uEl && capacityU) {
    uEl.textContent = `${usedU}/${capacityU}U`;
    uEl.title = t('Used / total rack units');
    applyCapacityState(uEl, usedU, capacityU);
}

Cambia el texto de 42U a 12/42U (ocupadas/totales) y aplica coloreo.

Badge de potencia

const powerEl = ensureBadge('rack-power-rollup', t('Total power draw of the rack'));
if (powerEl) {
    powerEl.textContent = maxW > 0 ? `${totalW} / ${maxW} W` : `${totalW} W`;
    powerEl.title = maxW > 0 ? t('Power draw vs. rack limit') : t('Total power draw of the rack');
    applyCapacityState(powerEl, totalW, maxW);
}

Muestra 350 / 3500 W si hay límite, solo 350 W si no lo hay.

Badge de peso

let weightEl = document.getElementById('rack-weight-rollup');
if (totalKg > 0 || maxKg > 0) {
    weightEl = ensureBadge('rack-weight-rollup', t('Total weight of the rack'));
    if (weightEl) {
        const kg = Math.round(totalKg * 10) / 10;
        weightEl.textContent = maxKg > 0 ? `${kg} / ${maxKg} kg` : `${kg} kg`;
        weightEl.title = maxKg > 0 ? t('Weight vs. rack limit') : t('Total weight of the rack');
        applyCapacityState(weightEl, totalKg, maxKg);
    }
} else if (weightEl) {
    weightEl.remove();
}

Crea/actualiza el badge de peso solo si hay datos (totalKg > 0) o límite definido (maxKg > 0). Se redondea al 0.1 kg.

Estilos CSS

File: static/css/pages/editor.css

.rack-u-badge.capacity-warn {
    color: var(--warning);           /* ámbar */
    border: 1px solid var(--warning);
    background: color-mix(in oklab, var(--warning) 12%, #333);
}

.rack-u-badge.capacity-over {
    color: var(--danger);            /* rojo */
    border: 1px solid var(--danger);
    background: color-mix(in oklab, var(--danger) 12%, #333);
}

Usa los tokens de diseño del sistema (--warning, --danger) para mantener consistencia visual.

Integración

Cuándo se llama

  1. Al cambiar vista en el editor (línea en applyViewMode()).
  2. Al cargar el rack (en main.js → initEditor()).
  3. Al editar/añadir/mover equipos (handlers en devices.js).
  4. Al guardar el modal “Rack Information” (en ui_panels.js → initRackInfoModal() → guardado exitoso).

STATE global

Lee de:

  • STATE.devices — array de equipos con power_w, weight_kg, u_height, zero_u.
  • STATE.rackData — objeto del rack con max_power_w, max_weight_kg, height_u.

Responsabilidades (DCIM #134)

AspectoDetalle
CálculoSuma correcta de W/kg/U respetando PDUs 0U.
LímitesLee desde STATE.rackData (refrescado en PUT /api/racks/{id}).
ColoreoAplica .capacity-warn / .capacity-over dinámicamente.
UXSolo muestra peso si hay datos o límite (evita “0 kg”).
i18nLos titles de los badges usan t() para traducciones.

Véase también

  • [[feature—racks—capacidad-por-rack]] — feature global (v1.57.0)
  • [[entity—racks—endpoint—patch-rack-limits]] — obtención de límites via API
  • [[entity—racks—model—rack]] — Rack.max_power_w / max_weight_kg