[pbs-devel] [PATCH proxmox-backup 1/2] ui: add 'show repository Information' button for datastores

[Dominik Csapak <d.csapak@proxmox.com>]

this has a similar functionality as the 'show fingerprint' button,
but for repository strings that are needed e.g. for the cli

included with and without the current user for convenience

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/Makefile                          |  1 +
 www/Utils.js                          |  8 +++
 www/datastore/DataStoreListSummary.js | 15 +++++
 www/datastore/Panel.js                | 17 ++++-
 www/window/DatastoreRepoInfo.js       | 97 +++++++++++++++++++++++++++
 5 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 www/window/DatastoreRepoInfo.js

diff --git a/www/Makefile b/www/Makefile
index 04c12b31..be7e27ab 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -86,6 +86,7 @@ JSSRC=							\
 	window/VerifyAll.js				\
 	window/ZFSCreate.js				\
 	window/InfluxDbEdit.js				\
+	window/DatastoreRepoInfo.js			\
 	dashboard/DataStoreStatistics.js		\
 	dashboard/LongestTasks.js			\
 	dashboard/RunningTasks.js			\
diff --git a/www/Utils.js b/www/Utils.js
index 7592d1bd..439aadb1 100644
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -752,4 +752,12 @@ Ext.define('PBS.Utils', {
 	return options.join(', ');
     },
 
+    copyInputContent: function(inputId) {
+	let el = document.getElementById(inputId);
+	if (!el) {
+	    return;
+	}
+	el.select();
+	document.execCommand("copy");
+    },
 });
diff --git a/www/datastore/DataStoreListSummary.js b/www/datastore/DataStoreListSummary.js
index 968239b0..ae503496 100644
--- a/www/datastore/DataStoreListSummary.js
+++ b/www/datastore/DataStoreListSummary.js
@@ -89,6 +89,21 @@ Ext.define('PBS.datastore.DataStoreListSummary', {
 	me.lookup('historychart').setData(data);
     },
 
+    tools: [
+	{
+	    xtype: 'button',
+	    text: gettext('Show Repository Information'),
+	    handler: function() {
+		let me = this;
+		let datastore = me.up('panel').datastore;
+		Ext.create('PBS.window.DatastoreRepoInfo', {
+		    datastore,
+		    autoShow: true,
+		});
+	    },
+	},
+    ],
+
     items: [
 	{
 	    xtype: 'container',
diff --git a/www/datastore/Panel.js b/www/datastore/Panel.js
index fd1b4611..248460d8 100644
--- a/www/datastore/Panel.js
+++ b/www/datastore/Panel.js
@@ -37,7 +37,22 @@ Ext.define('PBS.DataStorePanel', {
 	border: false,
     },
 
-    tools: [PBS.Utils.get_help_tool("datastore_intro")],
+    tools: [
+	PBS.Utils.get_help_tool("datastore_intro"),
+	{
+	    xtype: 'button',
+	    margin: '0 0 0 10',
+	    text: gettext('Show Repository Information'),
+	    handler: function() {
+		let me = this;
+		let datastore = me.up('panel').datastore;
+		Ext.create('PBS.window.DatastoreRepoInfo', {
+		    datastore,
+		    autoShow: true,
+		});
+	    },
+	},
+    ],
 
     items: [
 	{
diff --git a/www/window/DatastoreRepoInfo.js b/www/window/DatastoreRepoInfo.js
new file mode 100644
index 00000000..9d2df9aa
--- /dev/null
+++ b/www/window/DatastoreRepoInfo.js
@@ -0,0 +1,97 @@
+Ext.define('PBS.window.DatastoreRepoInfo', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.pbsDatastoreRepoInfo',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    title: gettext('Repository Information'),
+
+    modal: true,
+    resizable: false,
+    width: 600,
+    layout: 'anchor',
+    bodyPadding: 10,
+
+    cbindData: function() {
+	let me = this;
+	let host = window.location.hostname;
+	if (window.location.port.toString() !== "8007") {
+	    host += `:${window.location.port}`;
+	}
+	let datastore = me.datastore;
+	let user = Proxmox.UserName;
+	let repository = `${host}:${datastore}`;
+	let repositoryWithUser = `${user}@${host}:${datastore}`;
+
+	return {
+	    datastore,
+	    repository,
+	    repositoryWithUser,
+	};
+    },
+
+    defaults: {
+	xtype: 'fieldcontainer',
+	layout: 'hbox',
+	labelWidth: 120,
+    },
+
+    items: [
+	{
+	    xtype: 'displayfield',
+	    fieldLabel: gettext('Datastore'),
+	    cbind: {
+		value: '{datastore}',
+	    },
+	},
+	{
+	    fieldLabel: gettext('Repository'),
+	    cbind: {},
+	    items: [
+		{
+		    xtype: 'textfield',
+		    inputId: 'repository',
+		    flex: 1,
+		    editable: false,
+		    cbind: {
+			value: '{repository}',
+		    },
+		},
+		{
+		    xtype: 'button',
+		    iconCls: 'fa fa-clipboard',
+		    handler: () => PBS.Utils.copyInputContent('repository'),
+		    text: gettext('Copy'),
+		},
+	    ],
+	},
+	{
+	    fieldLabel: gettext('with current User'),
+	    cbind: {},
+	    items: [
+		{
+		    xtype: 'textfield',
+		    inputId: 'repositoryWithUser',
+		    flex: 1,
+		    editable: false,
+		    cbind: {
+			value: '{repositoryWithUser}',
+		    },
+		},
+		{
+		    xtype: 'button',
+		    iconCls: 'fa fa-clipboard',
+		    handler: () => PBS.Utils.copyInputContent('repositoryWithUser'),
+		    text: gettext('Copy'),
+		},
+	    ],
+	},
+    ],
+    buttons: [
+	{
+	    text: gettext('Ok'),
+	    handler: function() {
+		this.up('window').close();
+	    },
+	},
+    ],
+});
-- 
2.30.2