mirror of
https://git.proxmox.com/git/pve-manager
synced 2025-07-13 22:42:43 +00:00
af3c0a9287
uses the common function PVE::Tools::download_file_from_url to download a iso image or container template. note: Only users with permissions `Sys.Audit` and `Sys.Modify` on `/` are permitted to use the api endpoints due to security reasons. (it is possible to download files from internal networks which would be not visible/accessible from outside) Signed-off-by: Lorenz Stechauner <l.stechauner@proxmox.com> Reviewed-By: Dominik Csapak <d.csapak@proxmox.com>
643 lines
14 KiB
JavaScript
643 lines
14 KiB
JavaScript
Ext.define('PVE.storage.Upload', {
|
|
extend: 'Ext.window.Window',
|
|
alias: 'widget.pveStorageUpload',
|
|
|
|
resizable: false,
|
|
|
|
modal: true,
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
if (!me.nodename) {
|
|
throw "no node name specified";
|
|
}
|
|
if (!me.storage) {
|
|
throw "no storage ID specified";
|
|
}
|
|
|
|
let baseurl = `/nodes/${me.nodename}/storage/${me.storage}/upload`;
|
|
|
|
let pbar = Ext.create('Ext.ProgressBar', {
|
|
text: 'Ready',
|
|
hidden: true,
|
|
});
|
|
|
|
let acceptedExtensions = {
|
|
iso: ".img, .iso",
|
|
vztmpl: ".tar.gz, .tar.xz",
|
|
};
|
|
|
|
let defaultContent = me.contents[0] || '';
|
|
|
|
let fileField = Ext.create('Ext.form.field.File', {
|
|
name: 'filename',
|
|
buttonText: gettext('Select File...'),
|
|
allowBlank: false,
|
|
setAccept: function(content) {
|
|
let acceptString = acceptedExtensions[content] || '';
|
|
this.fileInputEl.set({
|
|
accept: acceptString,
|
|
});
|
|
},
|
|
listeners: {
|
|
afterrender: function(cmp) {
|
|
cmp.setAccept(defaultContent);
|
|
},
|
|
},
|
|
});
|
|
|
|
me.formPanel = Ext.create('Ext.form.Panel', {
|
|
method: 'POST',
|
|
waitMsgTarget: true,
|
|
bodyPadding: 10,
|
|
border: false,
|
|
width: 300,
|
|
fieldDefaults: {
|
|
labelWidth: 100,
|
|
anchor: '100%',
|
|
},
|
|
items: [
|
|
{
|
|
xtype: 'pveContentTypeSelector',
|
|
cts: me.contents,
|
|
fieldLabel: gettext('Content'),
|
|
name: 'content',
|
|
value: defaultContent,
|
|
allowBlank: false,
|
|
listeners: {
|
|
change: function(cmp, newValue, oldValue) {
|
|
fileField.setAccept(newValue);
|
|
},
|
|
},
|
|
},
|
|
fileField,
|
|
pbar,
|
|
],
|
|
});
|
|
|
|
let form = me.formPanel.getForm();
|
|
|
|
let doStandardSubmit = function() {
|
|
form.submit({
|
|
url: "/api2/htmljs" + baseurl,
|
|
waitMsg: gettext('Uploading file...'),
|
|
success: function(f, action) {
|
|
me.close();
|
|
},
|
|
failure: function(f, action) {
|
|
var msg = PVE.Utils.extractFormActionError(action);
|
|
Ext.Msg.alert(gettext('Error'), msg);
|
|
},
|
|
});
|
|
};
|
|
|
|
let updateProgress = function(per, bytes) {
|
|
var text = (per * 100).toFixed(2) + '%';
|
|
if (bytes) {
|
|
text += " (" + Proxmox.Utils.format_size(bytes) + ')';
|
|
}
|
|
pbar.updateProgress(per, text);
|
|
};
|
|
|
|
let abortBtn = Ext.create('Ext.Button', {
|
|
text: gettext('Abort'),
|
|
disabled: true,
|
|
handler: function() {
|
|
me.close();
|
|
},
|
|
});
|
|
|
|
let submitBtn = Ext.create('Ext.Button', {
|
|
text: gettext('Upload'),
|
|
disabled: true,
|
|
handler: function(button) {
|
|
var fd;
|
|
try {
|
|
fd = new FormData();
|
|
} catch (err) {
|
|
doStandardSubmit();
|
|
return;
|
|
}
|
|
|
|
button.setDisabled(true);
|
|
abortBtn.setDisabled(false);
|
|
|
|
var field = form.findField('content');
|
|
fd.append("content", field.getValue());
|
|
field.setDisabled(true);
|
|
|
|
field = form.findField('filename');
|
|
var file = field.fileInputEl.dom;
|
|
fd.append("filename", file.files[0]);
|
|
field.setDisabled(true);
|
|
|
|
pbar.setVisible(true);
|
|
updateProgress(0);
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
me.xhr = xhr;
|
|
|
|
xhr.addEventListener("load", function(e) {
|
|
if (xhr.status === 200) {
|
|
me.close();
|
|
return;
|
|
}
|
|
let err = Ext.htmlEncode(xhr.statusText);
|
|
let msg = `${gettext('Error')} ${xhr.status.toString()}: ${err}`;
|
|
if (xhr.responseText !== "") {
|
|
let result = Ext.decode(xhr.responseText);
|
|
result.message = msg;
|
|
msg = Proxmox.Utils.extractRequestError(result, true);
|
|
}
|
|
Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
|
|
}, false);
|
|
|
|
xhr.addEventListener("error", function(e) {
|
|
let err = e.target.status.toString();
|
|
let msg = `Error '${err}' occurred while receiving the document.`;
|
|
Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
|
|
});
|
|
|
|
xhr.upload.addEventListener("progress", function(evt) {
|
|
if (evt.lengthComputable) {
|
|
let percentComplete = evt.loaded / evt.total;
|
|
updateProgress(percentComplete, evt.loaded);
|
|
}
|
|
}, false);
|
|
|
|
xhr.open("POST", `/api2/json${baseurl}`, true);
|
|
xhr.send(fd);
|
|
},
|
|
});
|
|
|
|
form.on('validitychange', (f, valid) => submitBtn.setDisabled(!valid));
|
|
|
|
Ext.apply(me, {
|
|
title: gettext('Upload'),
|
|
items: me.formPanel,
|
|
buttons: [abortBtn, submitBtn],
|
|
listeners: {
|
|
close: function() {
|
|
if (me.xhr) {
|
|
me.xhr.abort();
|
|
delete me.xhr;
|
|
}
|
|
},
|
|
},
|
|
});
|
|
|
|
me.callParent();
|
|
},
|
|
});
|
|
|
|
Ext.define('PVE.storage.DownloadUrl', {
|
|
extend: 'Proxmox.window.Edit',
|
|
alias: 'widget.pveStorageDownloadUrl',
|
|
mixins: ['Proxmox.Mixin.CBind'],
|
|
|
|
isCreate: true,
|
|
|
|
method: 'POST',
|
|
|
|
showTaskViewer: true,
|
|
|
|
title: gettext('Download from URL'),
|
|
submitText: gettext('Download'),
|
|
|
|
cbindData: function(initialConfig) {
|
|
var me = this;
|
|
return {
|
|
nodename: me.nodename,
|
|
storage: me.storage,
|
|
content: me.content,
|
|
};
|
|
},
|
|
|
|
cbind: {
|
|
url: '/nodes/{nodename}/storage/{storage}/download-url',
|
|
},
|
|
|
|
controller: {
|
|
xclass: 'Ext.app.ViewController',
|
|
|
|
urlChange: function(field) {
|
|
let me = this;
|
|
let view = me.getView();
|
|
field = view.down('[name=url]');
|
|
field.setValidation(gettext("Please check URL"));
|
|
field.validate();
|
|
view.setValues({
|
|
size: gettext("unknown"),
|
|
mimetype: gettext("unknown"),
|
|
});
|
|
},
|
|
|
|
urlCheck: function(field) {
|
|
let me = this;
|
|
let view = me.getView();
|
|
field = view.down('[name=url]');
|
|
view.setValues({
|
|
size: gettext("unknown"),
|
|
mimetype: gettext("unknown"),
|
|
});
|
|
Proxmox.Utils.API2Request({
|
|
url: `/nodes/${view.nodename}/query-url-metadata`,
|
|
method: 'GET',
|
|
params: {
|
|
url: field.getValue(),
|
|
'verify-certificates': view.getValues()['verify-certificates'],
|
|
},
|
|
waitMsgTarget: view,
|
|
failure: function(res, opt) {
|
|
field.setValidation(res.result.message);
|
|
field.validate();
|
|
},
|
|
success: function(res, opt) {
|
|
field.setValidation();
|
|
field.validate();
|
|
|
|
let data = res.result.data;
|
|
view.setValues({
|
|
filename: data.filename || "",
|
|
size: (data.size && Proxmox.Utils.format_size(data.size)) || gettext("unknown"),
|
|
mimetype: data.mimetype || gettext("unknown"),
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
hashChange: function(field) {
|
|
let checksum = Ext.getCmp('downloadUrlChecksum');
|
|
if (field.getValue() === '__default__') {
|
|
checksum.setDisabled(true);
|
|
checksum.setValue("");
|
|
checksum.allowBlank = true;
|
|
} else {
|
|
checksum.setDisabled(false);
|
|
checksum.allowBlank = false;
|
|
}
|
|
},
|
|
},
|
|
|
|
items: [
|
|
{
|
|
xtype: 'inputpanel',
|
|
border: false,
|
|
columnT: [
|
|
{
|
|
xtype: 'fieldcontainer',
|
|
layout: 'hbox',
|
|
fieldLabel: gettext('URL'),
|
|
items: [
|
|
{
|
|
xtype: 'textfield',
|
|
name: 'url',
|
|
allowBlank: false,
|
|
flex: 1,
|
|
listeners: {
|
|
change: 'urlChange',
|
|
},
|
|
},
|
|
{
|
|
xtype: 'button',
|
|
name: 'check',
|
|
text: gettext('Check'),
|
|
margin: '0 0 0 5',
|
|
listeners: {
|
|
click: 'urlCheck',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
xtype: 'textfield',
|
|
name: 'filename',
|
|
allowBlank: false,
|
|
fieldLabel: gettext('File name'),
|
|
},
|
|
],
|
|
column1: [
|
|
{
|
|
xtype: 'displayfield',
|
|
name: 'size',
|
|
fieldLabel: gettext('File size'),
|
|
value: gettext('unknown'),
|
|
},
|
|
],
|
|
column2: [
|
|
{
|
|
xtype: 'displayfield',
|
|
name: 'mimetype',
|
|
fieldLabel: gettext('MIME type'),
|
|
value: gettext('unknown'),
|
|
},
|
|
],
|
|
advancedColumn1: [
|
|
{
|
|
xtype: 'pveHashAlgorithmSelector',
|
|
name: 'checksum-algorithm',
|
|
fieldLabel: gettext('Hash algorithm'),
|
|
allowBlank: true,
|
|
hasNoneOption: true,
|
|
value: '__default__',
|
|
listeners: {
|
|
change: 'hashChange',
|
|
},
|
|
},
|
|
{
|
|
xtype: 'textfield',
|
|
name: 'checksum',
|
|
fieldLabel: gettext('Checksum'),
|
|
allowBlank: true,
|
|
disabled: true,
|
|
emptyText: gettext('none'),
|
|
id: 'downloadUrlChecksum',
|
|
},
|
|
],
|
|
advancedColumn2: [
|
|
{
|
|
xtype: 'proxmoxcheckbox',
|
|
name: 'verify-certificates',
|
|
fieldLabel: gettext('Verify certificates'),
|
|
uncheckedValue: 0,
|
|
checked: true,
|
|
listeners: {
|
|
change: 'urlChange',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
xtype: 'hiddenfield',
|
|
name: 'content',
|
|
cbind: {
|
|
value: '{content}',
|
|
},
|
|
},
|
|
],
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
if (!me.nodename) {
|
|
throw "no node name specified";
|
|
}
|
|
if (!me.storage) {
|
|
throw "no storage ID specified";
|
|
}
|
|
|
|
me.callParent();
|
|
},
|
|
});
|
|
|
|
Ext.define('PVE.storage.ContentView', {
|
|
extend: 'Ext.grid.GridPanel',
|
|
|
|
alias: 'widget.pveStorageContentView',
|
|
|
|
viewConfig: {
|
|
trackOver: false,
|
|
loadMask: false,
|
|
},
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
if (!me.nodename) {
|
|
me.nodename = me.pveSelNode.data.node;
|
|
if (!me.nodename) {
|
|
throw "no node name specified";
|
|
}
|
|
}
|
|
const nodename = me.nodename;
|
|
|
|
if (!me.storage) {
|
|
me.storage = me.pveSelNode.data.storage;
|
|
if (!me.storage) {
|
|
throw "no storage ID specified";
|
|
}
|
|
}
|
|
const storage = me.storage;
|
|
|
|
var content = me.content;
|
|
if (!content) {
|
|
throw "no content type specified";
|
|
}
|
|
|
|
const baseurl = `/nodes/${nodename}/storage/${storage}/content`;
|
|
let store = me.store = Ext.create('Ext.data.Store', {
|
|
model: 'pve-storage-content',
|
|
proxy: {
|
|
type: 'proxmox',
|
|
url: '/api2/json' + baseurl,
|
|
extraParams: {
|
|
content: content,
|
|
},
|
|
},
|
|
sorters: {
|
|
property: 'volid',
|
|
order: 'DESC',
|
|
},
|
|
});
|
|
|
|
if (!me.sm) {
|
|
me.sm = Ext.create('Ext.selection.RowModel', {});
|
|
}
|
|
let sm = me.sm;
|
|
|
|
let reload = () => store.load();
|
|
|
|
Proxmox.Utils.monStoreErrors(me, store);
|
|
|
|
if (!me.tbar) {
|
|
me.tbar = [];
|
|
}
|
|
if (me.useUploadButton) {
|
|
me.tbar.unshift(
|
|
{
|
|
xtype: 'button',
|
|
text: gettext('Upload'),
|
|
disabled: !me.enableUploadButton,
|
|
handler: function() {
|
|
Ext.create('PVE.storage.Upload', {
|
|
nodename: nodename,
|
|
storage: storage,
|
|
contents: [content],
|
|
autoShow: true,
|
|
taskDone: () => reload(),
|
|
});
|
|
},
|
|
},
|
|
{
|
|
xtype: 'button',
|
|
text: gettext('Download from URL'),
|
|
disabled: !me.enableDownloadUrlButton,
|
|
handler: function() {
|
|
Ext.create('PVE.storage.DownloadUrl', {
|
|
nodename: nodename,
|
|
storage: storage,
|
|
content: content,
|
|
autoShow: true,
|
|
taskDone: () => reload(),
|
|
});
|
|
},
|
|
},
|
|
'-',
|
|
);
|
|
}
|
|
if (!me.useCustomRemoveButton) {
|
|
me.tbar.push({
|
|
xtype: 'proxmoxStdRemoveButton',
|
|
selModel: sm,
|
|
delay: 5,
|
|
callback: () => reload(),
|
|
baseurl: baseurl + '/',
|
|
});
|
|
}
|
|
me.tbar.push(
|
|
'->',
|
|
gettext('Search') + ':',
|
|
' ',
|
|
{
|
|
xtype: 'textfield',
|
|
width: 200,
|
|
enableKeyEvents: true,
|
|
emptyText: gettext('Name, Format'),
|
|
listeners: {
|
|
keyup: {
|
|
buffer: 500,
|
|
fn: function(field) {
|
|
store.clearFilter(true);
|
|
store.filter([
|
|
{
|
|
property: 'text',
|
|
value: field.getValue(),
|
|
anyMatch: true,
|
|
caseSensitive: false,
|
|
},
|
|
]);
|
|
},
|
|
},
|
|
change: function(field, newValue, oldValue) {
|
|
if (newValue !== this.originalValue) {
|
|
this.triggers.clear.setVisible(true);
|
|
}
|
|
},
|
|
},
|
|
triggers: {
|
|
clear: {
|
|
cls: 'pmx-clear-trigger',
|
|
weight: -1,
|
|
hidden: true,
|
|
handler: function() {
|
|
this.triggers.clear.setVisible(false);
|
|
this.setValue(this.originalValue);
|
|
store.clearFilter();
|
|
},
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
let availableColumns = {
|
|
'name': {
|
|
header: gettext('Name'),
|
|
flex: 2,
|
|
sortable: true,
|
|
renderer: PVE.Utils.render_storage_content,
|
|
dataIndex: 'text',
|
|
},
|
|
'notes': {
|
|
header: gettext('Notes'),
|
|
flex: 1,
|
|
renderer: Ext.htmlEncode,
|
|
dataIndex: 'notes',
|
|
},
|
|
'date': {
|
|
header: gettext('Date'),
|
|
width: 150,
|
|
dataIndex: 'vdate',
|
|
},
|
|
'format': {
|
|
header: gettext('Format'),
|
|
width: 100,
|
|
dataIndex: 'format',
|
|
},
|
|
'size': {
|
|
header: gettext('Size'),
|
|
width: 100,
|
|
renderer: Proxmox.Utils.format_size,
|
|
dataIndex: 'size',
|
|
},
|
|
};
|
|
|
|
if (me.hideColumns) {
|
|
me.hideColumns.forEach(key => delete availableColumns[key]);
|
|
}
|
|
if (!me.hasNotesColumn) {
|
|
delete availableColumns.notes;
|
|
}
|
|
if (me.extraColumns && typeof me.extraColumns === 'object') {
|
|
Object.assign(availableColumns, me.extraColumns);
|
|
}
|
|
const columns = Object.values(availableColumns);
|
|
|
|
Ext.apply(me, {
|
|
store: store,
|
|
selModel: sm,
|
|
tbar: me.tbar,
|
|
columns: columns,
|
|
listeners: {
|
|
activate: reload,
|
|
},
|
|
});
|
|
|
|
me.callParent();
|
|
},
|
|
}, function() {
|
|
Ext.define('pve-storage-content', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
'volid', 'content', 'format', 'size', 'used', 'vmid',
|
|
'channel', 'id', 'lun', 'notes', 'verification',
|
|
{
|
|
name: 'text',
|
|
convert: function(value, record) {
|
|
// check for volid, because if you click on a grouping header,
|
|
// it calls convert (but with an empty volid)
|
|
if (value || record.data.volid === null) {
|
|
return value;
|
|
}
|
|
return PVE.Utils.render_storage_content(value, {}, record);
|
|
},
|
|
},
|
|
{
|
|
name: 'vdate',
|
|
convert: function(value, record) {
|
|
// check for volid, because if you click on a grouping header,
|
|
// it calls convert (but with an empty volid)
|
|
if (value || record.data.volid === null) {
|
|
return value;
|
|
}
|
|
let t = record.data.content;
|
|
if (t === "backup") {
|
|
let v = record.data.volid;
|
|
let match = v.match(/(\d{4}_\d{2}_\d{2})-(\d{2}_\d{2}_\d{2})/);
|
|
if (match) {
|
|
let date = match[1].replace(/_/g, '-');
|
|
let time = match[2].replace(/_/g, ':');
|
|
return date + " " + time;
|
|
}
|
|
}
|
|
if (record.data.ctime) {
|
|
let ctime = new Date(record.data.ctime * 1000);
|
|
return Ext.Date.format(ctime, 'Y-m-d H:i:s');
|
|
}
|
|
return '';
|
|
},
|
|
},
|
|
],
|
|
idProperty: 'volid',
|
|
});
|
|
});
|