}.svg){kind=icon}
`;
}
_appIconHtml(app) {
return this._iconImg(String(app || '').toLowerCase());
}
// The app an image belongs to, derived from its repo tag (registry +
// namespace stripped, tag/digest dropped). null for dangling/untagged layers.
_imageAppSlug(im) {
const tag = (im.repo_tags || []).find(t => t && !t.includes('Images
No images on disk.
`;
}
// Clear All / Select all live in the section head (where the count used
// to be), so the list itself is just the rows in a dark container.
const head = `
Images
${this._imageIconHtml(im)}
${fmt.escape(this._imageName(im))}
${fmt.escape(pill.label)}
${fmt.bytes(im.size || 0)}
${im.shared_size ? `${fmt.bytes(im.shared_size)} shared` : ''}
${im.created ? `${fmt.timeAgo(im.created)}` : ''}
${rows}
`;
}
// ---- selection (mirrors TasksManager) -----------------------------------
toggleImageSelection(id, checked) {
if (checked) this._selectedImageIds.add(id);
else this._selectedImageIds.delete(id);
this._updateImageSelectionUI();
}
toggleSelectAllImages(checked) {
const boxes = this.root()?.querySelectorAll('#sys-images-list [data-image-select]') || [];
if (checked) boxes.forEach(cb => { this._selectedImageIds.add(cb.getAttribute('data-image-select')); cb.checked = true; });
else { this._selectedImageIds.clear(); boxes.forEach(cb => { cb.checked = false; }); }
this._updateImageSelectionUI();
}
// Button label morph (Clear All ↔ Delete Selected (N)) + master tri-state.
_updateImageSelectionUI() {
const r = this.root();
if (!r) return;
// Drop ids no longer present (e.g. after a refresh removed them).
const present = new Set(((this.data && this.data.image_list) || []).map(im => im.id));
this._selectedImageIds = new Set([...this._selectedImageIds].filter(id => present.has(id)));
const n = this._selectedImageIds.size;
const label = r.querySelector('#sys-images-clear .clear-btn-label');
if (label) label.textContent = n > 0 ? `Delete Selected (${n})` : 'Clear All';
const master = r.querySelector('#sys-images-select-all');
const visible = r.querySelectorAll('#sys-images-list [data-image-select]');
if (master) {
if (n === 0 || visible.length === 0) { master.checked = false; master.indeterminate = false; }
else if (n >= visible.length) { master.checked = true; master.indeterminate = false; }
else { master.checked = false; master.indeterminate = true; }
}
}
// ---- delete flow (routes through the system_image_rm task) --------------
async _deleteImages(ids) {
const list = (this.data && this.data.image_list) || [];
const byId = new Map(list.map(im => [im.id, im]));
const targetsAll = ids.map(id => byId.get(id)).filter(Boolean);
if (!targetsAll.length) return;
const inUse = targetsAll.filter(im => im.containers > 0);
const decision = await this._showImageDeleteModal(targetsAll, inUse);
if (!decision || !decision.confirmed) return;
// Skip in-use images unless the user forced it.
const targets = decision.force ? targetsAll : targetsAll.filter(im => im.containers === 0);
const targetIds = targets.map(im => im.id);
if (!targetIds.length) {
window.notificationSystem?.show?.('Nothing removed — selected images are in use. Enable force to remove them.', 'info');
return;
}
if (!window.tasksManager?.router?.routeAction) {
window.notificationSystem?.show?.('Task system not ready', 'error');
return;
}
this._deleting = true;
const clearBtn = this.root()?.querySelector('#sys-images-clear');
if (clearBtn) clearBtn.disabled = true;
this.root()?.querySelectorAll('[data-image-delete]').forEach(b => { b.disabled = true; });
const finish = () => {
this._deleting = false;
this._selectedImageIds.clear();
this._load().then(() => this._render());
};
try {
const task = await window.tasksManager.router.routeAction('system_image_rm', { ids: targetIds, force: decision.force });
const taskId = task && task.id;
if (taskId) {
const onDone = (ev) => {
if (ev?.detail?.taskId !== taskId) return;
window.removeEventListener('taskCompleted', onDone);
clearTimeout(fallback);
const failed = ev?.detail?.task?.status === 'failed';
window.notificationSystem?.show?.(
failed ? 'Some images could not be removed (see Tasks)' : 'Images removed',
failed ? 'warning' : 'success');
finish();
};
// Safety net if the completion event is missed.
const fallback = setTimeout(() => { window.removeEventListener('taskCompleted', onDone); finish(); }, 12000);
window.addEventListener('taskCompleted', onDone);
} else {
setTimeout(finish, 4000);
}
} catch (err) {
this._deleting = false;
if (clearBtn) clearBtn.disabled = false;
window.notificationSystem?.show?.(`Could not start image removal: ${err.message || err}`, 'error');
}
}
// Confirmation modal — same eo shell as the Tasks Clear-All modal. Shows a
// force toggle only when in-use images are in the target set. Resolves
// {confirmed, force}.
_showImageDeleteModal(targets, inUse) {
return new Promise((resolve) => {
if (!window.openEoModal) { resolve({ confirmed: confirm(`Remove ${targets.length} image(s)?`), force: false }); return; }
const fmt = window.SystemFmt;
const total = targets.length;
const inUseN = inUse.length;
const freeN = total - inUseN;
const totalSize = targets.reduce((a, im) => a + (im.size || 0), 0);
const badges = window.eoBadgeRow ? window.eoBadgeRow([
{ label: `Images: ${total}`, variant: 'info' },
{ label: `Size: ${fmt.bytes(totalSize)}`, variant: 'info' },
...(inUseN > 0 ? [{ label: `In use: ${inUseN}`, variant: 'warning' }] : []),
]) : '';
const body = `
This cannot be undone
Removed images must be pulled or rebuilt to use again.