ui: add ACL panel to datastores

by introducing a datastorepanel (a TabPanel) which holds the content
and acl panel for now.

to be able to handle this in the router, we have to change the logic
of how to select the datastore from using the subpath to putting it
into the path (and extracting it when necessary)

if we need this again (e.g. possibly for remotes), we can further
refactor this logic to be more generic

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/DataStoreContent.js b/www/DataStoreContent.js
index f14b40eadea9c2bca4509683e45c28a638ba86e4..28eebfdbb73a6f7c0dfcc0a9ca570805e6d1c618 100644 (file)
--- a/www/DataStoreContent.js
+++ b/www/DataStoreContent.js
@@ -19,6 +19,8 @@ Ext.define('PBS.DataStoreContent', {
 
     rootVisible: false,
 
+    title: gettext('Content'),
+
     controller: {
        xclass: 'Ext.app.ViewController',
 
@@ -33,8 +35,6 @@ Ext.define('PBS.DataStoreContent', {
                groupField: 'backup-group',
            });
 
-           view.title = gettext('Data Store Content: ') + view.datastore;
-
            Proxmox.Utils.monStoreErrors(view, view.store, true);
            this.reload(); // initial load
        },

diff --git a/www/DataStorePanel.js b/www/DataStorePanel.js
new file mode 100644 (file)
index 0000000..1b15751
--- /dev/null
+++ b/www/DataStorePanel.js
@@ -0,0 +1,40 @@
+Ext.define('PBS.DataStorePanel', {
+    extend: 'Ext.tab.Panel',
+    alias: 'widget.pbsDataStorePanel',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    cbindData: function(initalConfig) {
+       let me = this;
+       return {
+           aclPath: `/datastore/${me.datastore}`,
+       };
+    },
+
+    border: false,
+    defaults: {
+       border: false,
+    },
+
+    items: [
+       {
+           xtype: 'pbsDataStoreContent',
+           cbind: {
+               datastore: '{datastore}',
+           },
+       },
+       {
+           itemId: 'acl',
+           xtype: 'pbsACLView',
+           aclExact: true,
+           cbind: {
+               aclPath: '{aclPath}',
+           },
+       },
+    ],
+
+    initComponent: function() {
+       let me = this;
+       me.title = `${gettext("Data Store")}: ${me.datastore}`;
+       me.callParent();
+    },
+});

diff --git a/www/MainView.js b/www/MainView.js
index e81df2bcbd6170f754854f3d351dd6f994dc1695..bb15e9a8fc1f1abc539fafb30a836d020ad0486b 100644 (file)
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -20,17 +20,24 @@ Ext.define('PBS.MainView', {
        beforeChangePath: function(path, subpath, action) {
            var me = this;
 
-           if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
-               console.warn('xtype "'+path+'" not found');
+           let xtype = path;
+           let datastore;
+           let isDataStore = PBS.Utils.isDataStorePath(path);
+           if (isDataStore) {
+               xtype = 'pbsDataStorePanel';
+               datastore = PBS.Utils.getDataStoreFromPath(path);
+           }
+
+           if (!Ext.ClassManager.getByAlias(`widget.${xtype}`)) {
+               console.warn(`xtype ${xtype} not found`);
                action.stop();
                return;
            }
 
            var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
-           if (lastpanel && lastpanel.xtype === path) {
-               if (path === 'pbsDataStoreContent') {
-                   subpath = subpath || '';
-                   if (subpath === lastpanel.datastore) {
+           if (lastpanel && lastpanel.xtype === xtype) {
+               if (isDataStore) {
+                   if (datastore === lastpanel.datastore) {
                        action.stop();
                        return;
                    }
@@ -61,8 +68,12 @@ Ext.define('PBS.MainView', {
            var lastpanel = contentpanel.getLayout().getActiveItem();
 
            var obj;
-           if (path === 'pbsDataStoreContent') {
-               obj = contentpanel.add({ xtype: path, datastore: subpath, border: false });
+           if (PBS.Utils.isDataStorePath(path)) {
+               let datastore = PBS.Utils.getDataStoreFromPath(path);
+               obj = contentpanel.add({
+                   xtype: 'pbsDataStorePanel',
+                   datastore,
+               });
            } else {
                obj = contentpanel.add({ xtype: path, border: false });
            }

diff --git a/www/Makefile b/www/Makefile
index 12a195ef640c6534c070cabfa70c0c9390c4ecd0..7bbc3441f2eaaa1fc84f492110e72135b8a5392f 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -19,6 +19,7 @@ JSSRC=                                                        \
        DataStoreConfig.js                              \
        DataStoreStatus.js                              \
        DataStoreContent.js                             \
+       DataStorePanel.js                               \
        ServerStatus.js                                 \
        ServerAdministration.js                         \
        Dashboard.js                                    \

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 6761e6b45973ea9d2d57c0df64ea3db0cb8a8fd6..1feedf10dd86d5ba92d5c5387627f62df5f8dd2c 100644 (file)
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -98,7 +98,7 @@ Ext.define('PBS.view.main.NavigationTree', {
                if (!list.findChild('text', name, false)) {
                    list.appendChild({
                        text: name,
-                       path: 'pbsDataStoreContent:' + name,
+                       path: `DataStore-${name}`,
                        iconCls: 'fa fa-database',
                        leaf: true
                    });

diff --git a/www/Utils.js b/www/Utils.js
index ab44a414814de2027b73d4d3ff1b38caaa1bf0b6..7fe2cad97f6efa56ac2082a1cde0bcfe3acf37d5 100644 (file)
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -15,6 +15,16 @@ Ext.define('PBS.Utils', {
        Ext.util.Cookies.set('PBSAuthCookie', data.ticket, null, '/', null, false);
     },
 
+    dataStorePrefix: 'DataStore-',
+
+    getDataStoreFromPath: function(path) {
+       return path.slice(PBS.Utils.dataStorePrefix.length);
+    },
+
+    isDataStorePath: function(path) {
+       return path.indexOf(PBS.Utils.dataStorePrefix) === 0;
+    },
+
     constructor: function() {
        var me = this;