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

/**
 * javascript/volumes.js
 *
 * Volumes panel: named-volume table + create/remove, backed by
 * ajax/volumes.php. Container-level bind mounts (e.g. appdata under
 * /mnt/user/appdata/...) are deliberately not shown here, since they
 * aren't a libpod-managed resource at all — see that file's header
 * comment. A named volume created here WITH a host path (v.hostPath) IS
 * still a real, listed podman volume, just backed by that path instead
 * of podman's own internal storage — see PodmanClient::createVolume().
 */
(function () {
  'use strict';
  const P = window.Podman;
  let volumes = [];

  function rowHtml(v) {
    const pathCell = v.hostPath
      ? P.escapeHtml(v.hostPath) + ' <span class="podman-chip podman-chip-neutral" title="Bind-mounted to this host path">bind</span>'
      : P.escapeHtml(v.mountpoint);
    return '' +
      '<tr data-name="' + P.escapeHtml(v.name) + '">' +
      '<td>' + P.escapeHtml(v.name) + '</td>' +
      '<td><span class="podman-chip podman-chip-neutral">' + P.escapeHtml(v.driver) + '</span></td>' +
      '<td class="mono podman-row-sub">' + pathCell + '</td>' +
      '<td class="tnum">' + v.usedBy + '</td>' +
      '<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon podman-btn-danger" data-action="remove"' +
      (v.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></div></td>' +
      '</tr>';
  }

  function render() {
    const tbody = P.el('volumes-tbody');
    tbody.innerHTML = volumes.length
      ? volumes.map(rowHtml).join('')
      : '<tr><td colspan="5" class="podman-empty-note">No named volumes.</td></tr>';
  }

  function load() {
    const tbody = P.el('volumes-tbody');
    tbody.innerHTML = P.loadingRow(5);
    return P.get('volumes', 'list').then(function (data) {
      volumes = data;
      render();
    }).catch(function (err) {
      tbody.innerHTML = P.errorRow(5, err.message);
    });
  }

  function init() {
    P.el('volumes-create-btn').addEventListener('click', function () {
      P.openFormModal({
        title: 'New Volume',
        submitLabel: 'Create',
        fields: [
          { name: 'name', label: 'Volume name', required: true, placeholder: 'my-volume' },
          {
            name: 'path', label: 'Host path (optional)', placeholder: '/mnt/cache/appdata/my-volume',
            hint: 'Leave empty for a podman-managed volume. Set this to bind the volume ' +
              'directly to an existing directory on disk (e.g. a cache pool path) instead.',
          },
        ],
        onSubmit: function (values) {
          return P.post('volumes', 'create', { name: values.name, path: values.path || undefined }).then(load);
        },
      });
    });

    P.el('volumes-tbody').addEventListener('click', function (e) {
      const btn = e.target.closest('button[data-action="remove"]');
      if (!btn || btn.disabled) return;
      const name = btn.closest('tr').dataset.name;
      if (!confirm('Remove volume "' + name + '"? This deletes its data.')) return;
      btn.disabled = true;
      P.post('volumes', 'remove', { name: name }).then(load).catch(function (err) {
        P.toast('Remove failed: ' + err.message, 'error');
        btn.disabled = false;
      });
    });

    return load();
  }

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