Volver a la wiki

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

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;

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

Aplica clases CSS según el porcentaje de uso:

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:

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

Subir