From c0ac207453c7751dcaed0982cba44d9995b3a966 Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Wed, 20 May 2020 12:15:38 +0200
Subject: [PATCH] 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 |  4 ++--
 www/DataStorePanel.js   | 40 ++++++++++++++++++++++++++++++++++++++++
 www/MainView.js         | 27 +++++++++++++++++++--------
 www/Makefile            |  1 +
 www/NavigationTree.js   |  2 +-
 www/Utils.js            | 10 ++++++++++
 6 files changed, 73 insertions(+), 11 deletions(-)
 create mode 100644 www/DataStorePanel.js

diff --git a/www/DataStoreContent.js b/www/DataStoreContent.js
index f14b40ea..28eebfdb 100644
--- 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
index 00000000..1b157518
--- /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 e81df2bc..bb15e9a8 100644
--- 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 12a195ef..7bbc3441 100644
--- 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 6761e6b4..1feedf10 100644
--- 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 ab44a414..7fe2cad9 100644
--- 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;