sbwml
725 lines
22 KiB
JavaScript
725 lines
22 KiB
JavaScript
'use strict';
|
|
'require form';
|
|
'require fs';
|
|
'require poll';
|
|
'require ui';
|
|
'require dockerman.common as dm2';
|
|
|
|
/*
|
|
Copyright 2026
|
|
Docker manager JS for Luci by Paul Donald <newtwen+github@gmail.com>
|
|
Based on Docker Lua by lisaac <https://github.com/lisaac/luci-app-dockerman>
|
|
LICENSE: GPLv2.0
|
|
*/
|
|
|
|
|
|
return dm2.dv.extend({
|
|
load() {
|
|
return Promise.all([
|
|
dm2.image_list(),
|
|
dm2.container_list({query: {all: true}}),
|
|
])
|
|
},
|
|
|
|
render([images, containers]) {
|
|
if (images?.code !== 200) {
|
|
return E('div', {}, [ images.body.message ]);
|
|
}
|
|
|
|
let image_list = this.getImagesTable(images.body);
|
|
let container_list = containers.body;
|
|
const view = this; // Capture the view context
|
|
view.selectedImages = {};
|
|
|
|
let s, o;
|
|
const m = new form.JSONMap({image: image_list, pull: {}, push: {}, build: {}, import: {}, prune: {}},
|
|
_('Docker - Images'),
|
|
_('On this page all images are displayed that are available on the system and with which a container can be created.'));
|
|
m.submit = false;
|
|
m.reset = false;
|
|
|
|
let pollPending = null;
|
|
let imgSec = null;
|
|
const calculateSizeTotal = () => {
|
|
return Array.isArray(image_list) ? image_list.map(c => c?.Size).reduce((acc, e) => acc + e, 0) : 0;
|
|
};
|
|
|
|
const refresh = () => {
|
|
if (pollPending) return pollPending;
|
|
pollPending = view.load().then(([images2, containers2]) => {
|
|
image_list = view.getImagesTable(images2.body);
|
|
container_list = containers2.body;
|
|
m.data = new m.data.constructor({ image: image_list, pull: {}, push: {}, build: {}, import: {}, prune: {} });
|
|
|
|
const size_total = calculateSizeTotal();
|
|
if (imgSec) {
|
|
imgSec.footer = [
|
|
'',
|
|
`${_('Total')} ${image_list.length}`,
|
|
'',
|
|
`${'%1024mB'.format(size_total)}`,
|
|
];
|
|
}
|
|
|
|
return m.render();
|
|
}).catch((err) => { console.warn(err) }).finally(() => { pollPending = null });
|
|
return pollPending;
|
|
};
|
|
|
|
// Pull image
|
|
|
|
s = m.section(form.TableSection, 'pull', dm2.Types['image'].sub['pull'].i18n,
|
|
_('By entering a valid image name with the corresponding version, the docker image can be downloaded from the configured registry.'));
|
|
s.anonymous = true;
|
|
s.addremove = false;
|
|
|
|
const splitImageTag = (value) => {
|
|
const input = String(value || '').trim();
|
|
if (!input || input.includes(' ')) return { name: '', tag: 'latest' };
|
|
|
|
const lastSlash = input.lastIndexOf('/');
|
|
const lastColon = input.lastIndexOf(':');
|
|
if (lastColon > lastSlash) {
|
|
return {
|
|
name: input.slice(0, lastColon) || input,
|
|
tag: input.slice(lastColon + 1) || 'latest'
|
|
};
|
|
}
|
|
|
|
return { name: input, tag: 'latest' };
|
|
};
|
|
|
|
let tagOpt = s.option(form.Value, '_image_tag_name');
|
|
tagOpt.placeholder = "[registry.io[:443]/]foobar/product:latest";
|
|
|
|
o = s.option(form.Button, '_pull');
|
|
o.inputtitle = `${dm2.Types['image'].sub['pull'].i18n} ${dm2.Types['image'].sub['pull'].e}`; // _('Pull') + ' ☁️⬇️'
|
|
o.inputstyle = 'add';
|
|
o.onclick = L.bind(function(ev, btn) {
|
|
const raw = tagOpt.formvalue('pull') || '';
|
|
const input = String(raw).trim();
|
|
if (!input) {
|
|
ui.addTimeLimitedNotification(dm2.Types['image'].sub['pull'].i18n, _('Please enter an image tag'), 4000, 'warning');
|
|
return false;
|
|
}
|
|
|
|
const { name, tag: ver } = splitImageTag(input);
|
|
|
|
return this.super('handleXHRTransfer', [{
|
|
q_params: { query: { fromImage: name, tag: ver } },
|
|
commandCPath: `/images/create`,
|
|
commandDPath: `/images/create`,
|
|
commandTitle: dm2.Types['image'].sub['pull'].i18n,
|
|
successMessage: _('Image create completed'),
|
|
onUpdate: (msg) => {
|
|
try {
|
|
if(msg.error)
|
|
ui.addTimeLimitedNotification(dm2.ActionTypes['build'].i18n, msg.error, 7000, 'error');
|
|
|
|
const output = JSON.stringify(msg, null, 2) + '\n';
|
|
view.insertOutput(output);
|
|
} catch {
|
|
|
|
}
|
|
},
|
|
onSuccess: () => refresh(),
|
|
noFileUpload: true,
|
|
}]);
|
|
|
|
// return view.executeDockerAction(
|
|
// dm2.image_create,
|
|
// { query: { fromImage: name, tag: ver } },
|
|
// dm2.Types['image'].sub['pull'].i18n,
|
|
// {
|
|
// showOutput: true,
|
|
// successMessage: _('Image create completed')
|
|
// }
|
|
// );
|
|
}, this);
|
|
|
|
// Push image
|
|
|
|
s = m.section(form.TableSection, 'push', dm2.Types['image'].sub['push'].i18n,
|
|
_('Push an image to a registry. Select an image tag from all available tags on the system.'));
|
|
s.anonymous = true;
|
|
s.addremove = false;
|
|
|
|
// Build a list of all available tags across all images
|
|
const allImageTags = [];
|
|
for (const image of image_list) {
|
|
const tags = Array.isArray(image.RepoTags) ? image.RepoTags : [];
|
|
for (const tag of tags) {
|
|
if (tag && tag !== '<none>:<none>') {
|
|
allImageTags.push(tag);
|
|
}
|
|
}
|
|
}
|
|
|
|
let pushTagOpt = s.option(form.Value, '_image_tag_push');
|
|
pushTagOpt.placeholder = _('Select image tag');
|
|
if (allImageTags.length === 0) {
|
|
pushTagOpt.value('', _('No image tags available'));
|
|
} else {
|
|
// Add all unique tags to the dropdown
|
|
const uniqueTags = [...new Set(allImageTags)].sort();
|
|
for (const tag of uniqueTags) {
|
|
pushTagOpt.value(tag, tag);
|
|
}
|
|
}
|
|
|
|
o = s.option(form.Button, '_push');
|
|
o.inputtitle = `${dm2.Types['image'].sub['push'].i18n} ${dm2.Types['image'].sub['push'].e}`; // _('Push') + ' ☁️⬆️'
|
|
o.inputstyle = 'add';
|
|
o.onclick = L.bind(function(ev, btn) {
|
|
const selected = pushTagOpt.formvalue('push') || '';
|
|
if (!selected) {
|
|
ui.addTimeLimitedNotification(dm2.Types['image'].sub['push'].i18n, _('Please select an image tag to push'), 4000, 'warning');
|
|
return false;
|
|
}
|
|
|
|
const { name, tag: ver } = splitImageTag(selected);
|
|
|
|
return this.super('handleXHRTransfer', [{
|
|
// Pass name in q_params to trigger building X-Registry-Auth header
|
|
q_params: { name: name, query: { tag: ver } },
|
|
commandCPath: `/images/push/${name}`,
|
|
commandDPath: `/images/${name}/push`,
|
|
commandTitle: dm2.Types['image'].sub['push'].i18n,
|
|
successMessage: _('Image push completed'),
|
|
onSuccess: () => refresh(),
|
|
noFileUpload: true,
|
|
}]);
|
|
|
|
// return view.executeDockerAction(
|
|
// dm2.image_push,
|
|
// { name: name, query: { tag: ver} },
|
|
// dm2.Types['image'].sub['push'].i18n,
|
|
// {
|
|
// showOutput: true,
|
|
// successMessage: _('Image push completed')
|
|
// }
|
|
// );
|
|
}, this);
|
|
|
|
|
|
s = m.section(form.TableSection, 'build', dm2.ActionTypes['build'].i18n,
|
|
_('Build an image.') + ' ' + _('git repositories require git installed on the docker host.'));
|
|
s.anonymous = true;
|
|
s.addremove = false;
|
|
|
|
let buildOpt = s.option(form.Value, '_image_build_uri');
|
|
buildOpt.placeholder = "https://host/foo/bar.git | https://host/foobar.tar";
|
|
|
|
let buildTagOpt = s.option(form.Value, '_image_build_tag');
|
|
buildTagOpt.placeholder = 'repository:tag';
|
|
|
|
o = s.option(form.Button, '_build');
|
|
o.inputtitle = `${dm2.ActionTypes['build'].i18n} ${dm2.ActionTypes['build'].e}`; // _('Build') + ' 🏗️'
|
|
o.inputstyle = 'add';
|
|
o.onclick = L.bind(function(ev, btn) {
|
|
const uri = buildOpt.formvalue('build') || '';
|
|
const t = buildTagOpt.formvalue('build') || '';
|
|
|
|
const q_params = { q: encodeURIComponent('false'), t: t };
|
|
if (uri) q_params.remote = encodeURIComponent(uri);
|
|
|
|
return this.super('handleXHRTransfer', [{
|
|
q_params: { query: q_params },
|
|
commandCPath: '/images/build',
|
|
commandDPath: '/build',
|
|
commandTitle: dm2.ActionTypes['build'].i18n,
|
|
successMessage: _('Image loaded successfully'),
|
|
onUpdate: (msg) => {
|
|
try {
|
|
if(msg.error)
|
|
ui.addTimeLimitedNotification(dm2.ActionTypes['build'].i18n, msg.error, 7000, 'error');
|
|
|
|
const output = JSON.stringify(msg, null, 2) + '\n';
|
|
view.insertOutput(output);
|
|
} catch {
|
|
|
|
}
|
|
},
|
|
onSuccess: () => refresh(),
|
|
noFileUpload: !!uri,
|
|
}]);
|
|
}, this);
|
|
|
|
o = s.option(form.Button, '_delete_cache', null);
|
|
o.inputtitle = `${dm2.ActionTypes['clean'].i18n} ${dm2.ActionTypes['clean'].e}`;
|
|
o.inputstyle = 'negative';
|
|
o.onclick = L.bind(function(ev, btn) {
|
|
return this.super('handleXHRTransfer', [{
|
|
q_params: { query: { all: 'true' } },
|
|
commandCPath: '/images/build/prune',
|
|
commandDPath: '/build/prune',
|
|
commandTitle: dm2.Types['builder'].sub['prune'].i18n,
|
|
successMessage: _('Cleaned build cache'),
|
|
onUpdate: (msg) => {
|
|
try {
|
|
if(msg.error)
|
|
ui.addTimeLimitedNotification(dm2.ActionTypes['clean'].i18n, msg.error, 7000, 'error');
|
|
|
|
const output = JSON.stringify(msg, null, 2) + '\n';
|
|
view.insertOutput(output);
|
|
} catch {
|
|
|
|
}
|
|
},
|
|
noFileUpload: true,
|
|
}]);
|
|
}, this);
|
|
|
|
// Import image
|
|
|
|
s = m.section(form.TableSection, 'import', dm2.Types['image'].sub['import'].i18n,
|
|
_('Download a valid remote image tar.'));
|
|
s.addremove = false;
|
|
s.anonymous = true;
|
|
|
|
let imgsrc = s.option(form.Value, '_image_source');
|
|
imgsrc.placeholder = 'https://host/image.tar';
|
|
|
|
let tagimpOpt = s.option(form.Value, '_import_image_tag_name');
|
|
tagimpOpt.placeholder = 'repository:tag';
|
|
|
|
let importBtn = s.option(form.Button, '_import');
|
|
importBtn.inputtitle = `${dm2.Types['image'].sub['import'].i18n} ${dm2.Types['image'].sub['import'].e}` //_('Import') + ' ➡️';
|
|
importBtn.inputstyle = 'add';
|
|
importBtn.onclick = L.bind(function(ev, btn) {
|
|
const rawtag = tagimpOpt.formvalue('import') || '';
|
|
const input = String(rawtag).trim();
|
|
if (!input) {
|
|
ui.addTimeLimitedNotification(dm2.Types['image'].sub['import'].i18n, _('Please enter an image repo tag'), 4000, 'warning');
|
|
return false;
|
|
}
|
|
const rawremote = imgsrc.formvalue('import') || '';
|
|
let remote = String(rawremote).trim();
|
|
if (!remote) {
|
|
ui.addTimeLimitedNotification(dm2.Types['image'].sub['import'].i18n, _('Please enter an image source'), 4000, 'warning');
|
|
return false;
|
|
}
|
|
|
|
const { name, tag: ver } = splitImageTag(input);
|
|
|
|
return this.super('handleXHRTransfer', [{
|
|
q_params: { query: { fromSrc: remote, repo: ver } },
|
|
commandCPath: '/images/create',
|
|
commandDPath: '/images/create',
|
|
commandTitle: dm2.Types['image'].sub['create'].i18n,
|
|
onUpdate: (msg) => {
|
|
try {
|
|
if(msg.error)
|
|
ui.addTimeLimitedNotification(dm2.Types['image'].sub['create'].i18n, msg.error, 7000, 'error');
|
|
|
|
const output = JSON.stringify(msg, null, 2) + '\n';
|
|
view.insertOutput(output);
|
|
} catch {
|
|
|
|
}
|
|
},
|
|
onSuccess: () => refresh(),
|
|
noFileUpload: true,
|
|
}]);
|
|
|
|
// return view.executeDockerAction(
|
|
// dm2.image_create,
|
|
// { query: { fromSrc: remote, repo: ver } },
|
|
// dm2.Types['image'].sub['import'].i18n,
|
|
// {
|
|
// showOutput: true,
|
|
// successMessage: _('Image create started/completed')
|
|
// }
|
|
// );
|
|
}, this);
|
|
|
|
|
|
s = m.section(form.TableSection, 'prune', _('Images overview'), );
|
|
s.addremove = false;
|
|
s.anonymous = true;
|
|
|
|
const prune = s.option(form.Button, '_prune', null);
|
|
prune.inputtitle = `${dm2.ActionTypes['prune'].i18n} ${dm2.ActionTypes['prune'].e}`;
|
|
prune.inputstyle = 'negative';
|
|
prune.onclick = L.bind(function(ev, btn) {
|
|
|
|
return this.super('handleXHRTransfer', [{
|
|
q_params: { },
|
|
commandCPath: '/images/prune',
|
|
commandDPath: '/images/prune',
|
|
commandTitle: dm2.ActionTypes['prune'].i18n,
|
|
onUpdate: (msg) => {
|
|
try {
|
|
if(msg.error)
|
|
ui.addTimeLimitedNotification(dm2.ActionTypes['prune'].i18n, msg.error, 7000, 'error');
|
|
|
|
const output = JSON.stringify(msg, null, 2) + '\n';
|
|
view.insertOutput(output);
|
|
} catch {
|
|
|
|
}
|
|
},
|
|
onSuccess: () => refresh(),
|
|
noFileUpload: true,
|
|
}]);
|
|
|
|
// return view.executeDockerAction(
|
|
// dm2.image_prune,
|
|
// { query: { filters: '' } },
|
|
// dm2.ActionTypes['prune'].i18n,
|
|
// {
|
|
// showOutput: true,
|
|
// successMessage: _('started/completed'),
|
|
// onSuccess: () => refresh(),
|
|
// }
|
|
// );
|
|
}, this);
|
|
|
|
o = s.option(form.Button, '_export', null);
|
|
o.inputtitle = `${dm2.ActionTypes['save'].i18n} ${dm2.ActionTypes['save'].e}`;
|
|
o.inputstyle = 'cbi-button-positive';
|
|
o.onclick = L.bind(function(ev, btn) {
|
|
ev.preventDefault();
|
|
|
|
const selected = Object.keys(view.selectedImages).filter(k => view.selectedImages[k]);
|
|
if (!selected.length) {
|
|
ui.addTimeLimitedNotification(_('Export'), _('No images selected'), 3000, 'warning');
|
|
return;
|
|
}
|
|
|
|
// Get tags or IDs for selected images
|
|
const names = selected.map(sid => {
|
|
const image = s.map.data.data[sid];
|
|
const tag = image?.RepoTags?.[0];
|
|
return tag || image?.Id?.substr(12);
|
|
});
|
|
|
|
// http.uc does not yet handle parameter arrays, so /images/get needs access to the URL params
|
|
window.location.href = `${view.dockerman_url}/images/get?${names.map(e => `names=${e}`).join('&')}`;
|
|
|
|
}, this);
|
|
|
|
const size_total = calculateSizeTotal();
|
|
|
|
imgSec = m.section(form.TableSection, 'image');
|
|
imgSec.anonymous = true;
|
|
imgSec.nodescriptions = true;
|
|
imgSec.addremove = true;
|
|
imgSec.sortable = true;
|
|
imgSec.filterrow = true;
|
|
imgSec.addbtntitle = `${dm2.ActionTypes['upload'].i18n} ${dm2.ActionTypes['upload'].e}`;
|
|
imgSec.footer = [
|
|
'',
|
|
`${_('Total')} ${image_list.length}`,
|
|
'',
|
|
`${'%1024mB'.format(size_total)}`,
|
|
];
|
|
|
|
imgSec.handleAdd = function(sid, ev) {
|
|
return view.handleFileUpload();
|
|
};
|
|
|
|
imgSec.handleGet = function(image, ev) {
|
|
const tag = image.RepoTags?.[0];
|
|
const name = tag || image.Id.substr(12);
|
|
|
|
// Direct HTTP download - avoid RPC
|
|
window.location.href = `${view.dockerman_url}/images/get/${name}`;
|
|
return true;
|
|
};
|
|
|
|
imgSec.handleRemove = function(sid, image, force=false, ev) {
|
|
return view.executeDockerAction(
|
|
dm2.image_remove,
|
|
{ id: image.Id, query: { force: force } },
|
|
dm2.ActionTypes['remove'].i18n,
|
|
{
|
|
showOutput: true,
|
|
onSuccess: () => {
|
|
delete this.map.data.data[sid];
|
|
return this.super('handleRemove', [ev]);
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
imgSec.handleInspect = function(image, ev) {
|
|
return view.executeDockerAction(
|
|
dm2.image_inspect,
|
|
{ id: image.Id },
|
|
dm2.ActionTypes['inspect'].i18n,
|
|
{ showOutput: true, showSuccess: false }
|
|
);
|
|
};
|
|
|
|
imgSec.handleHistory = function(image, ev) {
|
|
return view.executeDockerAction(
|
|
dm2.image_history,
|
|
{ id: image.Id },
|
|
dm2.ActionTypes['history'].i18n,
|
|
{ showOutput: true, showSuccess: false }
|
|
);
|
|
};
|
|
|
|
imgSec.renderRowActions = function (sid) {
|
|
const image = this.map.data.data[sid];
|
|
const btns = [
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-neutral',
|
|
'title': dm2.ActionTypes['inspect'].i18n,
|
|
'click': ui.createHandlerFn(this, this.handleInspect, image),
|
|
}, [dm2.ActionTypes['inspect'].e]),
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-neutral',
|
|
'title': dm2.ActionTypes['history'].i18n,
|
|
'click': ui.createHandlerFn(this, this.handleHistory, image),
|
|
}, [dm2.ActionTypes['history'].e]),
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-positive save',
|
|
'title': dm2.ActionTypes['save'].i18n,
|
|
'click': ui.createHandlerFn(this, this.handleGet, image),
|
|
}, [dm2.ActionTypes['save'].e]),
|
|
E('div', {
|
|
'style': 'width: 20px',
|
|
// Some safety margin for mis-clicks
|
|
}, [' ']),
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-negative remove',
|
|
'title': dm2.ActionTypes['remove'].i18n,
|
|
'click': ui.createHandlerFn(this, this.handleRemove, sid, image, false),
|
|
'disabled': image?._disable_delete,
|
|
}, [dm2.ActionTypes['remove'].e]),
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-negative important remove',
|
|
'title': dm2.ActionTypes['force_remove'].i18n,
|
|
'click': ui.createHandlerFn(this, this.handleRemove, sid, image, true),
|
|
'disabled': image?._disable_delete,
|
|
}, [dm2.ActionTypes['force_remove'].e]),
|
|
];
|
|
return E('td', { 'class': 'td middle cbi-section-actions' }, E('div', btns));
|
|
};
|
|
|
|
o = imgSec.option(form.Flag, '_selected');
|
|
o.onchange = function(ev, sid, value) {
|
|
if (value == 1) {
|
|
view.selectedImages[sid] = value;
|
|
}
|
|
else {
|
|
delete view.selectedImages[sid];
|
|
}
|
|
return;
|
|
}
|
|
|
|
o = imgSec.option(form.DummyValue, 'RepoTags', dm2.Types['image'].sub['tag'].e);
|
|
o.cfgvalue = function(sid) {
|
|
const image = this.map.data.data[sid];
|
|
const tags = Array.isArray(image?.RepoTags) ? image.RepoTags : [];
|
|
|
|
if (tags.length === 0 || (tags.length === 1 && tags[0] === '<none>:<none>'))
|
|
return '<none>';
|
|
|
|
const tagLinks = tags.map(tag => {
|
|
if (tag === '<none>:<none>')
|
|
return E('span', {}, tag);
|
|
|
|
/* last tag - don't link it - last tag removal == delete */
|
|
if (tags.length === 1)
|
|
return tag;
|
|
|
|
return E('a', {
|
|
'href': '#',
|
|
'title': _('Click to remove this tag'),
|
|
'click': ui.createHandlerFn(view, (tag, imageId, ev) => {
|
|
|
|
ev.preventDefault();
|
|
ui.showModal(_('Remove tag'), [
|
|
E('p', {}, _('Do you want to remove the tag "%s"?').format(tag)),
|
|
E('div', { 'class': 'right' }, [
|
|
E('button', {
|
|
'class': 'cbi-button',
|
|
'click': ui.hideModal
|
|
}, '↩'),
|
|
' ',
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-negative',
|
|
'click': ui.createHandlerFn(view, () => {
|
|
ui.hideModal();
|
|
|
|
return view.executeDockerAction(
|
|
dm2.image_remove,
|
|
{ id: tag, query: { noprune: 'true' } },
|
|
dm2.Types['image'].sub['untag'].i18n,
|
|
{
|
|
showOutput: true,
|
|
successMessage: _('Tag removed successfully'),
|
|
successDuration: 4000,
|
|
onSuccess: () => refresh(),
|
|
}
|
|
);
|
|
})
|
|
}, dm2.Types['image'].sub['untag'].e)
|
|
])
|
|
]);
|
|
}, tag, image.Id)
|
|
}, tag);
|
|
});
|
|
|
|
// Join with commas and spaces
|
|
const content = [];
|
|
for (const [i, tag] of tagLinks.entries()) {
|
|
if (i > 0) content.push(', ');
|
|
content.push(tag);
|
|
}
|
|
|
|
return E('span', {}, content);
|
|
};
|
|
|
|
o = imgSec.option(form.DummyValue, 'Containers', _('Containers'));
|
|
o.cfgvalue = function(sid) {
|
|
const imageId = this.map.data.data[sid].Id;
|
|
// Collect all matching container name links for this image
|
|
const anchors = container_list.reduce((acc, container) => {
|
|
if (container?.ImageID !== imageId) return acc;
|
|
for (const name of container?.Names || [])
|
|
acc.push(E('a', { href: `container/${container.Id}` }, [ name.substring(1) ]));
|
|
return acc;
|
|
}, []);
|
|
|
|
// Interleave separators
|
|
if (!anchors.length) return E('div', {});
|
|
const content = [];
|
|
for (let i = 0; i < anchors.length; i++) {
|
|
if (i) content.push(' | ');
|
|
content.push(anchors[i]);
|
|
}
|
|
|
|
return E('div', {}, content);
|
|
};
|
|
|
|
o = imgSec.option(form.DummyValue, 'Size', _('Size'));
|
|
o.cfgvalue = function(sid) {
|
|
const s = this.map.data.data[sid].Size;
|
|
return '%1024mB'.format(s);
|
|
};
|
|
imgSec.option(form.DummyValue, 'Created', _('Created'));
|
|
o = imgSec.option(form.DummyValue, '_id', _('ID'));
|
|
|
|
/* Remember: we load a JSONMap - so uci config is non-existent for these
|
|
elements, so we must pull from this.map.data, otherwise o.load returns nothing */
|
|
o.cfgvalue = function(sid) {
|
|
const image = this.map.data.data[sid];
|
|
const shortId = image?._id || '';
|
|
const fullId = image?.Id || '';
|
|
|
|
return E('a', {
|
|
'href': '#',
|
|
'style': 'font-family: monospace',
|
|
'title': _('Click to add a new tag to this image'),
|
|
'click': ui.createHandlerFn(view, function(imageId, ev) {
|
|
ev.preventDefault();
|
|
|
|
let repoInput, tagInput;
|
|
ui.showModal(_('New tag'), [
|
|
E('p', {}, _('Enter a new tag for image %s:').format(imageId.slice(7, 19))),
|
|
E('div', { 'class': 'cbi-value' }, [
|
|
E('label', { 'class': 'cbi-value-title' }, _('Repository')),
|
|
E('div', { 'class': 'cbi-value-field' }, [
|
|
repoInput = E('input', {
|
|
'type': 'text',
|
|
'class': 'cbi-input-text',
|
|
'placeholder': '[registry.io[:443]/]myrepo/myimage'
|
|
})
|
|
])
|
|
]),
|
|
E('div', { 'class': 'cbi-value' }, [
|
|
E('label', { 'class': 'cbi-value-title' }, _('Tag')),
|
|
E('div', { 'class': 'cbi-value-field' }, [
|
|
tagInput = E('input', {
|
|
'type': 'text',
|
|
'class': 'cbi-input-text',
|
|
'placeholder': 'latest',
|
|
'value': 'latest'
|
|
})
|
|
])
|
|
]),
|
|
E('div', { 'class': 'right' }, [
|
|
E('button', {
|
|
'class': 'cbi-button',
|
|
'click': ui.hideModal
|
|
}, ['↩']),
|
|
' ',
|
|
E('button', {
|
|
'class': 'cbi-button cbi-button-positive',
|
|
'click': ui.createHandlerFn(view, () => {
|
|
const repo = repoInput.value.trim();
|
|
const tag = tagInput.value.trim() || 'latest';
|
|
|
|
if (!repo) {
|
|
ui.addTimeLimitedNotification(null, [_('Repository cannot be empty')], 3000, 'warning');
|
|
return;
|
|
}
|
|
|
|
ui.hideModal();
|
|
|
|
return view.executeDockerAction(
|
|
dm2.image_tag,
|
|
{ id: imageId, query: { repo: repo, tag: tag } },
|
|
dm2.Types['image'].sub['tag'].i18n,
|
|
{
|
|
showOutput: true,
|
|
successMessage: _('Tag added successfully'),
|
|
successDuration: 4000,
|
|
onSuccess: () => refresh(),
|
|
}
|
|
);
|
|
})
|
|
}, [dm2.Types['image'].sub['tag'].e])
|
|
])
|
|
]);
|
|
}, fullId)
|
|
}, shortId);
|
|
};
|
|
|
|
this.insertOutputFrame(s, m);
|
|
|
|
poll.add(L.bind(() => { refresh(); }, this), 10);
|
|
|
|
return m.render();
|
|
},
|
|
|
|
handleFileUpload() {
|
|
// const uploadUrl = `?quiet=${encodeURIComponent('false')}`;
|
|
|
|
return this.super('handleXHRTransfer', [{
|
|
q_params: { query: { quiet: 'false' } },
|
|
commandCPath: `/images/load`,
|
|
commandDPath: `/images/load`,
|
|
commandTitle: _('Uploading…'),
|
|
commandMessage: _('Uploading image…'),
|
|
successMessage: _('Image loaded successfully'),
|
|
defaultPath: '/tmp'
|
|
}]);
|
|
},
|
|
|
|
handleSave: null,
|
|
handleSaveApply: null,
|
|
handleReset: null,
|
|
|
|
getImagesTable(images) {
|
|
const data = [];
|
|
|
|
for (const image of images) {
|
|
// Just push plain data objects without UCI metadata
|
|
data.push({
|
|
...image,
|
|
_disable_delete: null,
|
|
_id: (image.Id || '').substring(7, 20),
|
|
Created: this.buildTimeString(image.Created) || '',
|
|
});
|
|
}
|
|
|
|
return data;
|
|
},
|
|
|
|
});
|