]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - src/window/FileBrowser.js
file browser: unify file type schema and avoid switch-case bloat
[proxmox-widget-toolkit.git] / src / window / FileBrowser.js
index 99a7a854fee90fb983473d4861d9c4f27c577617..570ad8f5a2201f3c7e26b0049660bab264ae1878 100644 (file)
@@ -1,7 +1,21 @@
 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',
@@ -10,40 +24,10 @@ Ext.define('proxmox-file-tree', {
        {
            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;
-                   case 'v': // virtual
-                       icon = 'cube';
-                       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}`;
            },
        },
@@ -75,6 +59,14 @@ Ext.define("Proxmox.window.FileBrowser", {
            '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: {
@@ -89,7 +81,15 @@ Ext.define("Proxmox.window.FileBrowser", {
            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');
@@ -98,14 +98,18 @@ Ext.define("Proxmox.window.FileBrowser", {
 
            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.click();
@@ -119,13 +123,28 @@ Ext.define("Proxmox.window.FileBrowser", {
            if (!selection || selection.length < 1) return;
 
            let data = selection[0].data;
+           let st = Ext.String.format(gettext('Selected "{0}"'), atob(data.filepath));
+           view.lookup('selectText').setText(st);
+
            let canDownload = view.downloadURL && view.downloadableFileTypes[data.type];
-           me.lookup('downloadBtn').setDisabled(!canDownload);
+           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;
@@ -145,9 +164,37 @@ Ext.define("Proxmox.window.FileBrowser", {
            let proxy = store.getProxy();
 
            let errorCallback = (error, msg) => me.errorHandler(error, msg);
-           Proxmox.Utils.monStoreErrors(tree, store, true, errorCallback);
            proxy.setUrl(view.listURL);
+           proxy.setTimeout(60*1000);
            proxy.setExtraParams(view.extraParams);
+
+           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
@@ -195,6 +242,10 @@ Ext.define("Proxmox.window.FileBrowser", {
                },
            },
 
+           viewConfig: {
+               loadMask: false,
+           },
+
            columns: [
                {
                    text: gettext('Name'),
@@ -205,10 +256,15 @@ Ext.define("Proxmox.window.FileBrowser", {
                },
                {
                    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;
 
@@ -224,31 +280,46 @@ Ext.define("Proxmox.window.FileBrowser", {
                {
                    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');
-                           case 'v': return gettext('Virtual');
-                           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',
+                   },
+               ],
+           },
        },
     ],
 });