unraid-podman/webui/plugins/podman/javascript/dashboard.js

/**
 * javascript/dashboard.js
 *
 * Dashboard panel: plain-count stat tiles (Running/Stopped/Pods/Images/
 * Volumes/Networks) plus a single "Resource Usage" card (CPU/Memory/Swap/
 * Storage as meter rows) — kept as two visually distinct groups rather
 * than forcing bar-and-percentage metrics into the same tile shape as
 * simple counts, which is what produced the awkward spanning-tile/dead-
 * grid-cell layout this replaced. Both fed by ajax/system.php?action=
 * summary, plus the Autostart Queue table fed by action=autostart_queue.
 * A live scrolling event feed is deliberately out of scope here — libpod
 * has no "recent events for a container fleet" convenience endpoint, only
 * raw /events streaming, which is a separate feature (its own connection
 * lifecycle, not a snapshot this summary call can produce) rather than
 * something to fake with sample data.
 */
(function () {
  'use strict';
  const P = window.Podman;

  function render(summary) {
    if (!summary.reachable) {
      P.el('podman-panel-dashboard').innerHTML =
        '<div class="podman-card"><div class="podman-error">' +
        'Cannot reach the Podman API socket (' + P.escapeHtml(summary.socketPath) + '). ' +
        'Is rc.podman running? Try <code>rc.podman status</code> from a terminal.' +
        '</div></div>';
      return;
    }

    P.el('stat-running').textContent = summary.containers.running;
    P.el('stat-running').className = summary.containers.running > 0 ? 'tone-good' : '';
    P.el('stat-running-total').textContent = '/ ' + summary.containers.total;
    P.el('stat-stopped').textContent = summary.containers.stopped;
    P.el('stat-stopped').classList.toggle('tone-bad', summary.containers.stopped > 0);
    P.el('stat-pods').textContent = summary.pods;
    P.el('stat-images').textContent = summary.images;
    P.el('stat-volumes').textContent = summary.volumes;
    P.el('stat-networks').textContent = summary.networks;

    renderResourceUsage(summary.host, summary.storage);

    const meta = P.el('podman-header-meta');
    if (meta) {
      meta.innerHTML =
        '<span class="dot-good">&#9679;</span> podman.sock connected' +
        (summary.podmanVersion ? ' &middot; v' + P.escapeHtml(summary.podmanVersion) : '') +
        ' &middot; ' + summary.containers.running + ' of ' + summary.containers.total + ' containers running';
    }
  }

  // Bars stay accent-colored under normal load and only shift to warn/bad
  // once usage is high enough to actually be worth noticing at a glance —
  // a bar that's always the same color regardless of value doesn't tell
  // you anything a number alone didn't.
  function barSeverityClass(percent) {
    if (percent === null || percent === undefined) {
      return '';
    }
    if (percent >= 90) {
      return 'bad';
    }
    if (percent >= 75) {
      return 'warn';
    }
    return '';
  }

  function resourceRow(label, valueText, percent) {
    const pct = percent === null || percent === undefined ? 0 : percent;
    return (
      '<div class="podman-resource-row">' +
      '<span class="k">' + P.escapeHtml(label) + '</span>' +
      '<div class="podman-usage-mini" style="flex:1;">' +
      '<div class="track"><span class="' + barSeverityClass(percent) + '" style="width:' + pct + '%"></span></div>' +
      '<span class="num">' + pct + '%</span>' +
      '</div>' +
      '<span class="v">' + P.escapeHtml(valueText) + '</span>' +
      '</div>'
    );
  }

  function renderResourceUsage(host, storage) {
    if (!host || !storage) {
      return;
    }
    let html = resourceRow('CPU (' + host.cpuCount + ')', '', host.cpuPercent) +
      resourceRow('Memory', P.formatBytes(host.memUsedBytes) + ' / ' + P.formatBytes(host.memTotalBytes), host.memPercent);
    if (host.swapTotalBytes > 0) {
      html += resourceRow('Swap', P.formatBytes(host.swapUsedBytes) + ' / ' + P.formatBytes(host.swapTotalBytes),
        Math.round(host.swapUsedBytes / host.swapTotalBytes * 100));
    }
    html += resourceRow('Storage',
      storage.graphUsedFormatted + (storage.graphAllocatedBytes ? ' / ' + storage.graphAllocatedFormatted : '') +
      ' (' + storage.imagesSizeFormatted + ' images)',
      storage.graphUsedPercent);
    if (host.uptime) {
      html += '<div class="hint" style="margin-top:10px;">Uptime: ' + P.escapeHtml(host.uptime) + '</div>';
    }
    P.el('dashboard-resource-rows').innerHTML = html;
  }

  const STATUS_CHIP_CLASS = {
    started: 'podman-chip-good',
    stopped: 'podman-chip-neutral',
    failed: 'podman-chip-bad',
    'safe-mode': 'podman-chip-warn',
    unknown: 'podman-chip-neutral',
  };

  function renderAutostartQueue(data) {
    const tbody = P.el('dashboard-autostart-tbody');
    if (!tbody) {
      return;
    }
    const entries = data.entries || [];
    if (!entries.length) {
      tbody.innerHTML = '<tr><td colspan="4" class="podman-empty-note">No containers configured for autostart.</td></tr>';
      return;
    }
    tbody.innerHTML = entries.map(function (e) {
      const chipClass = STATUS_CHIP_CLASS[e.status] || 'podman-chip-neutral';
      return '<tr>' +
        '<td class="tnum">' + e.position + '</td>' +
        '<td>' + P.escapeHtml(e.name) + '</td>' +
        '<td class="tnum">' + (e.delaySeconds > 0 ? e.delaySeconds + 's' : '—') + '</td>' +
        '<td><span class="podman-chip ' + chipClass + '"><span class="d"></span>' + P.escapeHtml(e.statusLabel) + '</span></td>' +
        '</tr>';
    }).join('');
  }

  function load() {
    return P.get('system', 'summary').then(function (summary) {
      render(summary);
      if (summary.reachable) {
        return P.get('system', 'autostart_queue').then(renderAutostartQueue);
      }
    }).catch(function (err) {
      P.el('podman-panel-dashboard').innerHTML = '<div class="podman-card"><div class="podman-error">' + P.escapeHtml(err.message) + '</div></div>';
    });
  }

  P.registerPanel('dashboard', { init: load, refresh: load, autoRefresh: true });
})();