Ext.define('proxmox-file-tree', {
extend: 'Ext.data.Model',
- fields: ['filepath', 'text', 'type', 'size',
+ fields: [
+ 'filepath', 'text', 'type', 'size',
+ {
+ name: 'sizedisplay',
+ calculate: data => {
+ if (data.size === undefined) {
+ return '';
+ } else if (data.type === 'd') {
+ let fs = data.size === 1 ? gettext('{0} item') : gettext('{0} items');
+ return Ext.String.format(fs, data.size);
+ }
+
+ return Proxmox.Utils.format_size(data.size);
+ },
+ },
{
name: 'mtime',
type: 'date',
{
name: 'iconCls',
calculate: function(data) {
- let icon = 'file-o';
- switch (data.type) {
- case 'b': // block device
- icon = 'cube';
- break;
- case 'c': // char device
- icon = 'tty';
- break;
- case 'd':
- icon = data.expanded ? 'folder-open-o' : 'folder-o';
- break;
- case 'f': //regular file
- icon = 'file-text-o';
- break;
- case 'h': // hardlink
- icon = 'file-o';
- break;
- case 'l': // softlink
- icon = 'link';
- break;
- case 'p': // pipe/fifo
- icon = 'exchange';
- break;
- case 's': // socket
- icon = 'plug';
- break;
- default:
- icon = 'file-o';
- break;
+ let icon = Proxmox.Schema.pxarFileTypes[data.type]?.icon ?? 'file-o';
+ if (data.expanded && data.type === 'd') {
+ icon = 'folder-open-o';
}
-
return `fa fa-${icon}`;
},
},
modal: true,
+ config: {
+ // the base-URL to get the list of files. required.
+ listURL: '',
+
+ // the base download URL, e.g., something like '/api2/...'
+ downloadURL: '',
+
+ // extra parameters set as proxy paramns and for an actual download request
+ extraParams: {},
+
+ // the file types for which the download button should be enabled
+ downloadableFileTypes: {
+ 'h': true, // hardlinks
+ 'f': true, // "normal" files
+ 'd': true, // directories
+ },
+
+ // enable tar download, this will add a menu to the
+ // "Download" button when the selection can be downloaded as
+ // .tar files
+ enableTar: false,
+
+ // prefix to prepend to downloaded file names
+ downloadPrefix: '',
+ },
+
controller: {
xclass: 'Ext.app.ViewController',
return url.href;
},
- downloadFile: function() {
+ downloadTar: function() {
+ this.downloadFile(true);
+ },
+
+ downloadZip: function() {
+ this.downloadFile(false);
+ },
+
+ downloadFile: function(tar) {
let me = this;
let view = me.getView();
let tree = me.lookup('tree');
let data = selection[0].data;
- let atag = document.createElement('a');
-
- atag.download = data.text;
let params = { ...view.extraParams };
params.filepath = data.filepath;
- atag.download = data.text;
+
+ let atag = document.createElement('a');
+ atag.download = view.downloadPrefix + data.text;
if (data.type === 'd') {
- atag.download += ".zip";
+ if (tar) {
+ params.tar = 1;
+ atag.download += ".tar.zst";
+ } else {
+ atag.download += ".zip";
+ }
}
- atag.href = me.buildUrl(view.downloadUrl, params);
+ atag.href = me.buildUrl(view.downloadURL, params);
atag.click();
},
if (!selection || selection.length < 1) return;
let data = selection[0].data;
- let canDownload = view.downloadUrl && ['h', 'f', 'd'].indexOf(data.type) !== -1;
- me.lookup('downloadBtn').setDisabled(!canDownload);
+ let st = Ext.String.format(gettext('Selected "{0}"'), atob(data.filepath));
+ view.lookup('selectText').setText(st);
+
+ let canDownload = view.downloadURL && view.downloadableFileTypes[data.type];
+ let enableMenu = view.enableTar && data.type === 'd';
+
+ let downloadBtn = view.lookup('downloadBtn');
+ downloadBtn.setDisabled(!canDownload || enableMenu);
+ downloadBtn.setHidden(!canDownload || enableMenu);
+
+ let menuBtn = view.lookup('menuBtn');
+ menuBtn.setDisabled(!canDownload || !enableMenu);
+ menuBtn.setHidden(!canDownload || !enableMenu);
+ },
+
+ errorHandler: function(error, msg) {
+ let me = this;
+ if (error?.status === 503) {
+ return false;
+ }
+ me.lookup('downloadBtn').setDisabled(true);
+ me.lookup('menuBtn').setDisabled(true);
+ if (me.initialLoadDone) {
+ Ext.Msg.alert(gettext('Error'), msg);
+ return true;
+ }
+ return false;
},
init: function(view) {
let me = this;
let tree = me.lookup('tree');
- if (!view.listUrl) {
+ if (!view.listURL) {
throw "no list URL given";
}
let store = tree.getStore();
let proxy = store.getProxy();
- Proxmox.Utils.monStoreErrors(tree, store, true);
- proxy.setUrl(view.listUrl);
+ let errorCallback = (error, msg) => me.errorHandler(error, msg);
+ proxy.setUrl(view.listURL);
+ proxy.setTimeout(60*1000);
proxy.setExtraParams(view.extraParams);
- store.load(() => {
+
+ tree.mon(store, 'beforeload', () => {
+ Proxmox.Utils.setErrorMask(tree, true);
+ });
+ tree.mon(store, 'load', (treestore, rec, success, operation, node) => {
+ if (success) {
+ Proxmox.Utils.setErrorMask(tree, false);
+ return;
+ }
+ if (!node.loadCount) {
+ node.loadCount = 0; // ensure its numeric
+ }
+ // trigger a reload if we got a 503 answer from the proxy
+ if (operation?.error?.status === 503 && node.loadCount < 10) {
+ node.collapse();
+ node.expand();
+ node.loadCount++;
+ return;
+ }
+
+ let error = operation.getError();
+ let msg = Proxmox.Utils.getResponseErrorMessage(error);
+ if (!errorCallback(error, msg)) {
+ Proxmox.Utils.setErrorMask(tree, msg);
+ } else {
+ Proxmox.Utils.setErrorMask(tree, false);
+ }
+ });
+ store.load((rec, op, success) => {
let root = store.getRoot();
root.expand(); // always expand invisible root node
- if (view.archive) {
+ if (view.archive === 'all') {
+ root.expandChildren(false);
+ } else if (view.archive) {
let child = root.findChild('text', view.archive);
if (child) {
child.expand();
} else if (root.childNodes.length === 1) {
root.firstChild.expand();
}
+ me.initialLoadDone = success;
});
},
},
},
+ viewConfig: {
+ loadMask: false,
+ },
+
columns: [
{
text: gettext('Name'),
},
{
text: gettext('Size'),
- dataIndex: 'size',
- renderer: value => value === undefined ? '' : Proxmox.Utils.format_size(value),
+ dataIndex: 'sizedisplay',
sorter: {
sorterFn: function(a, b) {
+ if (a.data.type === 'd' && b.data.type !== 'd') {
+ return -1;
+ } else if (a.data.type !== 'd' && b.data.type === 'd') {
+ return 1;
+ }
+
let asize = a.data.size || 0;
let bsize = b.data.size || 0;
{
text: gettext('Type'),
dataIndex: 'type',
- renderer: function(value) {
- switch (value) {
- case 'b': return gettext('Block Device');
- case 'c': return gettext('Character Device');
- case 'd': return gettext('Directory');
- case 'f': return gettext('File');
- case 'h': return gettext('Hardlink');
- case 'l': return gettext('Softlink');
- case 'p': return gettext('Pipe/Fifo');
- case 's': return gettext('Socket');
- default: return Proxmox.Utils.unknownText;
- }
- },
+ renderer: (v) => Proxmox.Schema.pxarFileTypes[v]?.label ?? Proxmox.Utils.unknownText,
},
],
},
],
- buttons: [
+ fbar: [
+ {
+ text: '',
+ xtype: 'label',
+ reference: 'selectText',
+ },
{
text: gettext('Download'),
- handler: 'downloadFile',
+ xtype: 'button',
+ handler: 'downloadZip',
reference: 'downloadBtn',
disabled: true,
+ hidden: true,
+ },
+ {
+ text: gettext('Download as'),
+ xtype: 'button',
+ reference: 'menuBtn',
+ menu: {
+ items: [
+ {
+ iconCls: 'fa fa-fw fa-file-zip-o',
+ text: gettext('.zip'),
+ handler: 'downloadZip',
+ reference: 'downloadZip',
+ },
+ {
+ iconCls: 'fa fa-fw fa-archive',
+ text: gettext('.tar.zst'),
+ handler: 'downloadTar',
+ reference: 'downloadTar',
+ },
+ ],
+ },
},
],
});
projects / proxmox-widget-toolkit.git / blobdiff