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

/**
 * javascript/settings.js
 *
 * Settings panel: reads/writes unraid-podman's own configuration via
 * ajax/settings.php (podman.cfg + the autostart list) — not a
 * PodmanClient/libpod concern, see that file's header comment.
 */
(function () {
  'use strict';
  const P = window.Podman;
  let autostartNames = [];
  let allContainerNames = [];

  function renderAutostart() {
    const tbody = P.el('autostart-tbody');
    tbody.innerHTML = autostartNames.length
      ? autostartNames.map(function (name, i) {
        return '<tr data-index="' + i + '">' +
          '<td class="tnum">' + (i + 1) + '</td>' +
          '<td>' + P.escapeHtml(name) + '</td>' +
          '<td class="podman-actions"><div class="podman-actions-row">' +
          '<button class="podman-btn podman-btn-icon" data-action="up"' + (i === 0 ? ' disabled' : '') + ' title="Move up">&#8593;</button>' +
          '<button class="podman-btn podman-btn-icon" data-action="down"' + (i === autostartNames.length - 1 ? ' disabled' : '') + ' title="Move down">&#8595;</button>' +
          '<button class="podman-btn podman-btn-icon" data-action="remove" title="Remove from autostart">&#128465;</button>' +
          '</div></td></tr>';
      }).join('')
      : '<tr><td colspan="3" class="podman-empty-note">No containers in the autostart chain.</td></tr>';
    renderAddOptions();
  }

  // Repopulated after every add/remove so it only ever offers containers
  // that exist and aren't already in the chain — avoids duplicate entries
  // and offering a container name that no longer exists.
  function renderAddOptions() {
    const select = P.el('autostart-add-select');
    const available = allContainerNames.filter(function (name) { return autostartNames.indexOf(name) === -1; });
    select.innerHTML = available.length
      ? available.map(function (name) { return '<option value="' + P.escapeHtml(name) + '">' + P.escapeHtml(name) + '</option>'; }).join('')
      : '<option value="">All containers already added</option>';
    P.el('autostart-add-btn').disabled = !available.length;
  }

  function saveAutostart() {
    return P.post('settings', 'autostart_save', { names: autostartNames }).catch(function (err) {
      P.toast('Could not save autostart order: ' + err.message, 'error');
    });
  }

  function fillForm(settings) {
    P.el('settings-storage-path').value = settings.storagePath;
    P.el('settings-storage-size').value = settings.storageImageSizeGb;
    P.el('settings-enabled').checked = settings.enabled;
    P.el('settings-stop-timeout').value = settings.stopTimeoutSeconds;

    autostartNames = settings.autostart.slice();
    renderAutostart();

    const versions = settings.packageVersions || {};
    const order = ['PODMAN', 'CONMON', 'CRUN', 'NETAVARK', 'AARDVARK_DNS', 'PASST', 'FUSE_OVERLAYFS'];
    const chipsHtml = order.map(function (k) {
      const name = k.toLowerCase().replace(/_/g, '-');
      const version = versions[k + '_INSTALLED_VERSION'];
      return '<span class="podman-version-chip">' + P.escapeHtml(name) + ' <b>' + P.escapeHtml(version || '?') + '</b></span>';
    }).join('');
    P.el('settings-package-versions').innerHTML = chipsHtml || '<span class="podman-empty-note">No version manifest found.</span>';
  }

  function load() {
    return Promise.all([
      P.get('settings', 'get').then(fillForm),
      // Needed for the "Add container" dropdown — a separate, tolerant
      // fetch so a containers.php hiccup doesn't also break the rest of
      // Settings (autostart reorder/remove don't need this list at all).
      P.get('containers', 'list').then(function (containers) {
        allContainerNames = containers.map(function (c) { return c.name; }).sort();
        renderAddOptions();
      }).catch(function () {
        allContainerNames = [];
      }),
    ]).catch(function (err) {
      P.toast('Could not load settings: ' + err.message, 'error');
    });
  }

  // --- Podman service status/start/stop/restart ------------------------------

  function renderServiceChip(data) {
    const chip = P.el('settings-service-chip');
    chip.className = 'podman-chip ' + (data.running ? 'podman-chip-good' : 'podman-chip-bad');
    chip.innerHTML = '<span class="d"></span>' + (data.running ? 'Running' : 'Not running');
  }

  function serviceButtons() {
    return ['settings-service-status-btn', 'settings-service-start-btn', 'settings-service-stop-btn', 'settings-service-restart-btn']
      .map(function (id) { return P.el(id); });
  }

  // "Refresh Status" is quick and read-only — shown inline, no modal needed.
  function refreshServiceStatus() {
    const buttons = serviceButtons();
    buttons.forEach(function (b) { b.disabled = true; });
    return P.get('settings', 'service_status').then(function (data) {
      renderServiceChip(data);
      const log = P.el('settings-service-log');
      log.style.display = '';
      log.textContent = data.output || '';
      log.scrollTop = log.scrollHeight;
    }).catch(function (err) {
      P.el('settings-service-chip').className = 'podman-chip podman-chip-bad';
      P.el('settings-service-chip').innerHTML = '<span class="d"></span>Unknown';
      P.el('settings-service-log').style.display = '';
      P.el('settings-service-log').textContent = err.message;
    }).finally(function () {
      buttons.forEach(function (b) { b.disabled = false; });
    });
  }

  // Start/Stop/Restart can take a while (storage checks, container
  // stop grace periods, ...) and are exactly the actions someone reaches
  // for when something's actually wrong — a small log modal (same pattern
  // as container update checking) shows what's happening instead of
  // leaving the button just spinning with no feedback.
  function runServiceAction(action, title) {
    const buttons = serviceButtons();
    buttons.forEach(function (b) { b.disabled = true; });
    const modal = P.openLogModal(title);
    return P.post('settings', action, {}).then(function (data) {
      renderServiceChip(data);
      (data.output || '').split('\n').forEach(function (line) { modal.log(line); });
      modal.done();
    }).catch(function (err) {
      modal.log('Error: ' + err.message);
      modal.done('Close');
    }).finally(function () {
      buttons.forEach(function (b) { b.disabled = false; });
    });
  }

  // --- Format a disk for podman storage --------------------------------------

  function openFormatDiskModal() {
    const backdrop = document.createElement('div');
    backdrop.className = 'podman-modal-backdrop';
    backdrop.innerHTML = '' +
      '<div class="podman-modal" role="dialog" aria-modal="true">' +
      '<div class="podman-modal-head"><h3>Format a Disk for Podman Storage</h3></div>' +
      '<div class="podman-modal-body">' +
      '<div class="podman-modal-field"><label>Disk</label><select id="fd-device"><option value="">Loading…</option></select>' +
      '<div class="hint" id="fd-warning">Only disks with no existing partitions or filesystem are listed — anything already in use, part of the array/cache, or the boot flash is never shown here.</div></div>' +
      '<div class="podman-modal-field">' +
      '<label style="display:flex; align-items:flex-start; gap:8px; font-weight:400;">' +
      '<input type="checkbox" id="fd-confirm" style="margin-top:3px;">' +
      '<span>I understand this permanently erases all data on this disk, with no undo.</span>' +
      '</label></div>' +
      '</div>' +
      '<div class="podman-modal-actions">' +
      '<button type="button" class="podman-btn podman-btn-ghost" data-role="cancel">Cancel</button>' +
      '<button type="button" class="podman-btn podman-btn-ghost podman-btn-danger" data-role="submit" disabled>Format Disk</button>' +
      '</div></div>';

    (document.querySelector('.podman-plugin') || document.body).appendChild(backdrop);

    const select = backdrop.querySelector('#fd-device');
    const warning = backdrop.querySelector('#fd-warning');
    const confirmBox = backdrop.querySelector('#fd-confirm');
    const submitBtn = backdrop.querySelector('[data-role="submit"]');

    function updateSubmitEnabled() {
      submitBtn.disabled = !(select.value && confirmBox.checked);
    }

    P.get('disks', 'list_candidates').then(function (list) {
      select.innerHTML = list.length
        ? list.map(function (d) {
          return '<option value="' + P.escapeHtml(d.device) + '">' + P.escapeHtml(d.device) +
            ' — ' + P.escapeHtml(d.sizeFormatted) + (d.model ? ' (' + P.escapeHtml(d.model) + ')' : '') + '</option>';
        }).join('')
        : '<option value="">No eligible blank disks found</option>';
      updateSubmitEnabled();
    }).catch(function (err) {
      select.innerHTML = '<option value="">Error loading disks</option>';
      warning.textContent = err.message;
    });

    select.addEventListener('change', updateSubmitEnabled);
    confirmBox.addEventListener('change', updateSubmitEnabled);

    function close() { backdrop.remove(); }

    submitBtn.addEventListener('click', function () {
      if (!select.value || !confirmBox.checked) return;
      P.confirm('Format ' + select.value + '? This cannot be undone.', { danger: true, confirmLabel: 'Format' }).then(function (ok) {
        if (!ok) return;
        submitBtn.disabled = true;
        submitBtn.textContent = 'Formatting…';
        P.post('disks', 'format', { device: select.value }).then(function (data) {
          close();
          P.el('settings-storage-path').value = data.mountPath;
          P.toast('Formatted and mounted at ' + data.mountPath + '. Click "Save Settings" below, then Restart Podman.', 'warn');
        }).catch(function (err) {
          submitBtn.disabled = false;
          submitBtn.textContent = 'Format Disk';
          P.toast('Format failed: ' + err.message, 'error');
        });
      });
    });

    backdrop.querySelector('[data-role="cancel"]').addEventListener('click', close);
    backdrop.addEventListener('click', function (e) { if (e.target === backdrop) close(); });
  }

  function save() {
    const body = {
      storagePath: P.el('settings-storage-path').value.trim(),
      storageImageSizeGb: parseInt(P.el('settings-storage-size').value, 10) || 20,
      enabled: P.el('settings-enabled').checked,
      stopTimeoutSeconds: parseInt(P.el('settings-stop-timeout').value, 10) || 10,
    };
    return P.post('settings', 'save', body).then(function () {
      P.toast('Saved. Restart podman (rc.podman restart) to apply storage/enabled changes.', 'warn');
    }).catch(function (err) {
      P.toast('Save failed: ' + err.message, 'error');
    });
  }

  function init() {
    P.el('settings-save-btn').addEventListener('click', save);

    P.el('autostart-add-btn').addEventListener('click', function () {
      const select = P.el('autostart-add-select');
      const name = select.value;
      if (!name) return;
      autostartNames.push(name);
      renderAutostart();
      saveAutostart();
    });

    P.el('autostart-tbody').addEventListener('click', function (e) {
      const btn = e.target.closest('button[data-action]');
      if (!btn) return;
      const i = parseInt(btn.closest('tr').dataset.index, 10);
      const action = btn.dataset.action;

      if (action === 'remove') {
        autostartNames.splice(i, 1);
      } else if (action === 'up' && i > 0) {
        [autostartNames[i - 1], autostartNames[i]] = [autostartNames[i], autostartNames[i - 1]];
      } else if (action === 'down' && i < autostartNames.length - 1) {
        [autostartNames[i + 1], autostartNames[i]] = [autostartNames[i], autostartNames[i + 1]];
      }
      renderAutostart();
      saveAutostart();
    });

    P.el('settings-service-status-btn').addEventListener('click', refreshServiceStatus);
    P.el('settings-service-start-btn').addEventListener('click', function () { runServiceAction('service_start', 'Starting Podman'); });
    P.el('settings-service-stop-btn').addEventListener('click', function () {
      P.confirm('Stop podman? All running containers will be stopped first (each with its own configured grace period).', { confirmLabel: 'Stop' }).then(function (ok) {
        if (ok) runServiceAction('service_stop', 'Stopping Podman');
      });
    });
    P.el('settings-service-restart-btn').addEventListener('click', function () {
      P.confirm('Restart podman? All running containers will be stopped and podman.sock will be unavailable until it comes back up.', { confirmLabel: 'Restart' }).then(function (ok) {
        if (ok) runServiceAction('service_restart', 'Restarting Podman');
      });
    });
    P.el('settings-format-disk-btn').addEventListener('click', openFormatDiskModal);

    refreshServiceStatus();
    return load();
  }

  P.registerPanel('settings', { init: init, refresh: load });
})();