use FileBrowser from proxmox-widget-toolkit

Signed-off-by: Stefan Reiter <s.reiter@proxmox.com>

diff --git a/www/Makefile b/www/Makefile
index 1790273f371ddab6785fc6b5e0ebadc08da5dc4c..2b847e740ebd263b71ae203488a30a26dbb3c091 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -61,7 +61,6 @@ JSSRC=                                                        \
        window/BackupGroupChangeOwner.js                \
        window/CreateDirectory.js                       \
        window/DataStoreEdit.js                         \
-       window/FileBrowser.js                           \
        window/NotesEdit.js                             \
        window/RemoteEdit.js                            \
        window/NotifyOptions.js                         \

diff --git a/www/datastore/Content.js b/www/datastore/Content.js
index d0cf3e0b8697d71cef1c0b6677bfdf4584eb720f..a6c77f636f3f49e180b0c9e2fef49802e93d9fc2 100644 (file)
--- a/www/datastore/Content.js
+++ b/www/datastore/Content.js
@@ -452,12 +452,15 @@ Ext.define('PBS.DataStoreContent', {
            let type = data['backup-type'];
            let timetext = PBS.Utils.render_datetime_utc(data["backup-time"]);
 
-           Ext.create('PBS.window.FileBrowser', {
+           Ext.create('Proxmox.window.FileBrowser', {
                title: `${type}/${id}/${timetext}`,
-               datastore: view.datastore,
-               'backup-id': id,
-               'backup-time': (time.getTime()/1000).toFixed(0),
-               'backup-type': type,
+               listUrl: `/api2/json/admin/datastore/${view.datastore}/catalog`,
+               downloadUrl: `/api2/json/admin/datastore/${view.datastore}/pxar-file-download`,
+               extraParams: {
+                   'backup-id': id,
+                   'backup-time': (time.getTime()/1000).toFixed(0),
+                   'backup-type': type,
+               },
                archive: rec.data.filename,
            }).show();
        },

diff --git a/www/window/FileBrowser.js b/www/window/FileBrowser.js
deleted file mode 100644 (file)
index 724e179..0000000
--- a/www/window/FileBrowser.js
+++ /dev/null
@@ -1,252 +0,0 @@
-Ext.define('pbs-file-tree', {
-    extend: 'Ext.data.Model',
-
-    fields: ['filepath', 'text', 'type', 'size',
-       {
-           name: 'mtime',
-           type: 'date',
-           dateFormat: 'timestamp',
-       },
-       {
-           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;
-               }
-
-               return `fa fa-${icon}`;
-           },
-       },
-    ],
-    idProperty: 'filepath',
-});
-
-Ext.define("PBS.window.FileBrowser", {
-    extend: "Ext.window.Window",
-
-    width: 800,
-    height: 600,
-
-    modal: true,
-
-    controller: {
-       xclass: 'Ext.app.ViewController',
-
-       buildUrl: function(baseurl, params) {
-           let url = new URL(baseurl, window.location.origin);
-           for (const [key, value] of Object.entries(params)) {
-               url.searchParams.append(key, value);
-           }
-
-           return url.href;
-       },
-
-       downloadFile: function() {
-           let me = this;
-           let view = me.getView();
-           let tree = me.lookup('tree');
-           let selection = tree.getSelection();
-           if (!selection || selection.length < 1) return;
-
-           let data = selection[0].data;
-
-           let atag = document.createElement('a');
-
-           atag.download = data.text;
-           let params = {
-               'backup-id': view['backup-id'],
-               'backup-type': view['backup-type'],
-               'backup-time': view['backup-time'],
-           };
-           params.filepath = data.filepath;
-           atag.download = data.text;
-           if (data.type === 'd') {
-               atag.download += ".zip";
-           }
-           atag.href = me
-               .buildUrl(`/api2/json/admin/datastore/${view.datastore}/pxar-file-download`, params);
-           atag.click();
-       },
-
-       fileChanged: function() {
-           let me = this;
-           let tree = me.lookup('tree');
-           let selection = tree.getSelection();
-           if (!selection || selection.length < 1) return;
-
-           let data = selection[0].data;
-
-           let canDownload = false;
-           switch (data.type) {
-               case 'h':
-               case 'f':
-                   canDownload = true;
-                   break;
-               case 'd':
-                   if (data.depth > 1) {
-                       canDownload = true;
-                   }
-                   break;
-               default: break;
-           }
-
-           me.lookup('downloadBtn').setDisabled(!canDownload);
-       },
-
-       init: function(view) {
-           let me = this;
-           let tree = me.lookup('tree');
-
-           if (!view['backup-id']) {
-               throw "no backup-id given";
-           }
-
-           if (!view['backup-type']) {
-               throw "no backup-id given";
-           }
-
-           if (!view['backup-time']) {
-               throw "no backup-id given";
-           }
-
-           if (!view.datastore) {
-               throw "no datastore given";
-           }
-
-           let store = tree.getStore();
-           let proxy = store.getProxy();
-
-           Proxmox.Utils.monStoreErrors(tree, store, true);
-           proxy.setUrl(`/api2/json/admin/datastore/${view.datastore}/catalog`);
-           proxy.setExtraParams({
-               'backup-id': view['backup-id'],
-               'backup-type': view['backup-type'],
-               'backup-time': view['backup-time'],
-           });
-           store.load(() => {
-               let root = store.getRoot();
-               root.expand(); // always expand invisible root node
-               if (view.archive) {
-                   let child = root.findChild('text', view.archive);
-                   if (child) {
-                       child.expand();
-                       setTimeout(function() {
-                           tree.setSelection(child);
-                           tree.getView().focusRow(child);
-                       }, 10);
-                   }
-               } else if (root.childNodes.length === 1) {
-                   root.firstChild.expand();
-               }
-           });
-       },
-
-       control: {
-           'treepanel': {
-               selectionchange: 'fileChanged',
-           },
-       },
-    },
-
-    layout: 'fit',
-    items: [
-       {
-           xtype: 'treepanel',
-           scrollable: true,
-           rootVisible: false,
-           reference: 'tree',
-           store: {
-               autoLoad: false,
-               model: 'pbs-file-tree',
-               defaultRootId: '/',
-               nodeParam: 'filepath',
-               sorters: 'text',
-               proxy: {
-                   appendId: false,
-                   type: 'proxmox',
-               },
-           },
-
-           columns: [
-               {
-                   text: gettext('Name'),
-                   xtype: 'treecolumn',
-                   flex: 1,
-                   dataIndex: 'text',
-                   renderer: Ext.String.htmlEncode,
-               },
-               {
-                   text: gettext('Size'),
-                   dataIndex: 'size',
-                   renderer: value => value === undefined ? '' : Proxmox.Utils.format_size(value),
-                   sorter: {
-                       sorterFn: function(a, b) {
-                           let asize = a.data.size || 0;
-                           let bsize = b.data.size || 0;
-
-                           return asize - bsize;
-                       },
-                   },
-               },
-               {
-                   text: gettext('Modified'),
-                   dataIndex: 'mtime',
-                   minWidth: 200,
-               },
-               {
-                   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;
-                       }
-                   },
-               },
-           ],
-       },
-    ],
-
-    buttons: [
-       {
-           text: gettext('Download'),
-           handler: 'downloadFile',
-           reference: 'downloadBtn',
-           disabled: true,
-       },
-    ],
-});