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>

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
 	},

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();
+    },
+});

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)) {
+	    let xtype = path;
-		console.warn('xtype "'+path+'" not found');
+	    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 (lastpanel && lastpanel.xtype === xtype) {
-		if (path === 'pbsDataStoreContent') {
+		if (isDataStore) {
-		    subpath = subpath || '';
+		    if (datastore === lastpanel.datastore) {
-		    if (subpath === lastpanel.datastore) {
 			action.stop();
 			return;
 		    }
@@ -61,8 +68,12 @@ Ext.define('PBS.MainView', {
 	    var lastpanel = contentpanel.getLayout().getActiveItem();
 
 	    var obj;
-	    if (path === 'pbsDataStoreContent') {
+	    if (PBS.Utils.isDataStorePath(path)) {
-		obj = contentpanel.add({ xtype: path, datastore: subpath, border: false });
+		let datastore = PBS.Utils.getDataStoreFromPath(path);
+		obj = contentpanel.add({
+		    xtype: 'pbsDataStorePanel',
+		    datastore,
+		});
 	    } else {
 		obj = contentpanel.add({ xtype: path, border: false });
 	    }

www/Makefile

@@ -19,6 +19,7 @@ JSSRC=							\
 	DataStoreConfig.js				\
 	DataStoreStatus.js				\
 	DataStoreContent.js				\
+	DataStorePanel.js				\
 	ServerStatus.js					\
 	ServerAdministration.js				\
 	Dashboard.js					\

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
 		    });

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;