[pbs-devel] [PATCH proxmox-backup v2 1/3] ui: add 'show connection 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>
---
changes from v1:
* add help button
* refactor the copy field (and remove the utils copy function)
* put the button only in the datastore summary
* style the copy buttons like toolbar buttons
* add datastore and hostname also as copyable fields
* seperate the cli/api fields with a title and (small) padding
 www/Makefile                    |   1 +
 www/Utils.js                    |   1 -
 www/datastore/Summary.js        |  19 ++++-
 www/window/DatastoreRepoInfo.js | 126 ++++++++++++++++++++++++++++++++
 4 files changed, 145 insertions(+), 2 deletions(-)
 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..f464b250 100644
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -751,5 +751,4 @@ Ext.define('PBS.Utils', {
 
 	return options.join(', ');
     },
-
 });
diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index d67e81cc..9299c03f 100644
--- a/www/datastore/Summary.js
+++ b/www/datastore/Summary.js
@@ -218,7 +218,24 @@ Ext.define('PBS.DataStoreSummary', {
 	padding: 5,
     },
 
-    tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
+    tbar: [
+	{
+	    xtype: 'button',
+	    text: gettext('Show Connection Information'),
+	    handler: function() {
+		let me = this;
+		let datastore = me.up('panel').datastore;
+		Ext.create('PBS.window.DatastoreRepoInfo', {
+		    datastore,
+		    autoShow: true,
+		});
+	    },
+	},
+	'->',
+	{
+	    xtype: 'proxmoxRRDTypeSelector',
+	},
+    ],
 
     items: [
 	{
diff --git a/www/window/DatastoreRepoInfo.js b/www/window/DatastoreRepoInfo.js
new file mode 100644
index 00000000..a7080c27
--- /dev/null
+++ b/www/window/DatastoreRepoInfo.js
@@ -0,0 +1,126 @@
+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;
+	let hostname = host;
+	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,
+	    hostname,
+	    repository,
+	    repositoryWithUser,
+	};
+    },
+
+    defaults: {
+	xtype: 'pbsCopyField',
+	labelWidth: 120,
+    },
+
+    items: [
+	{
+	    fieldLabel: gettext('Datastore'),
+	    cbind: {
+		value: '{datastore}',
+	    },
+	},
+	{
+	    fieldLabel: gettext('Hostname/IP'),
+	    cbind: {
+		value: '{hostname}',
+	    },
+	},
+	{
+	    xtype: 'displayfield',
+	    value: '',
+	    labelWidth: 500,
+	    fieldLabel: gettext('Repository for CLI and API'),
+	    padding: '10 0 0 0',
+	},
+	{
+	    fieldLabel: gettext('Repository'),
+	    cbind: {
+		value: '{repository}',
+	    },
+	},
+	{
+	    fieldLabel: gettext('With Current User'),
+	    cbind: {
+		value: '{repositoryWithUser}',
+	    },
+	},
+    ],
+    buttons: [
+	{
+	    xtype: 'proxmoxHelpButton',
+	    onlineHelp: 'client_repository',
+	    hidden: false,
+	},
+	'->',
+	{
+	    text: gettext('Ok'),
+	    handler: function() {
+		this.up('window').close();
+	    },
+	},
+    ],
+});
+
+Ext.define('PBS.form.CopyField', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.pbsCopyField',
+
+    layout: 'hbox',
+
+    items: [
+	{
+	    xtype: 'textfield',
+	    itemId: 'inputField',
+	    editable: false,
+	    flex: 1,
+	},
+	{
+	    xtype: 'button',
+	    margin: '0 0 0 10',
+	    iconCls: 'fa fa-clipboard',
+	    baseCls: 'x-btn',
+	    cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+	    handler: function() {
+		let me = this;
+		let field = me.up('pbsCopyField');
+		let el = field.getComponent('inputField')?.inputEl;
+		if (!el?.dom) {
+		    return;
+		}
+		el.dom.select();
+		document.execCommand("copy");
+	    },
+	    text: gettext('Copy'),
+	},
+    ],
+
+    initComponent: function() {
+	let me = this;
+	me.callParent();
+	me.getComponent('inputField').setValue(me.value);
+    },
+});
-- 
2.30.2