[pbs-devel] [PATCH proxmox-backup v2 1/3] ui: add 'show connection information' button for datastores

[pbs-devel] [PATCH proxmox-backup v2 1/3] ui: add 'show connection information' button for datastores

[Dominik Csapak]

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

[pbs-devel] [PATCH proxmox-backup v2 2/3] ui: add fingerprint also to the 'show connection information' window

[Dominik Csapak]

by globally calling the 'status' api once and saving the fingerprint
into the global Proxmox variable.

since not all users might have that permission, ignore errors for that,
and don't show the fingerprint in this case

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* adapt to changes in DatastoreRepoInfo
 www/MainView.js                 | 11 +++++++++++
 www/window/DatastoreRepoInfo.js |  9 +++++++++
 2 files changed, 20 insertions(+)

diff --git a/www/MainView.js b/www/MainView.js
index d35162e4..4dbfe9bf 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -184,6 +184,17 @@ Ext.define('PBS.MainView', {
 		interval: 15*60*1000,
 	    });
 
+	    Proxmox.Utils.API2Request({
+		url: `/api2/extjs/nodes/localhost/status`,
+		success: function({ result }) {
+		    if (result?.data?.info?.fingerprint) {
+			Proxmox.Fingerprint = result.data.info.fingerprint;
+		    }
+		},
+		failure: function() {
+		    // silently ignore errors
+		},
+	    });
 
 	    // select treeitem and load page from url fragment, if set
 	    let token = Ext.util.History.getToken() || 'pbsDashboard';
diff --git a/www/window/DatastoreRepoInfo.js b/www/window/DatastoreRepoInfo.js
index a7080c27..b2d4f402 100644
--- a/www/window/DatastoreRepoInfo.js
+++ b/www/window/DatastoreRepoInfo.js
@@ -13,6 +13,7 @@ Ext.define('PBS.window.DatastoreRepoInfo', {
 
     cbindData: function() {
 	let me = this;
+	let fingerprint = Proxmox.Fingerprint;
 	let host = window.location.hostname;
 	let hostname = host;
 	if (window.location.port.toString() !== "8007") {
@@ -26,6 +27,7 @@ Ext.define('PBS.window.DatastoreRepoInfo', {
 	return {
 	    datastore,
 	    hostname,
+	    fingerprint,
 	    repository,
 	    repositoryWithUser,
 	};
@@ -49,6 +51,13 @@ Ext.define('PBS.window.DatastoreRepoInfo', {
 		value: '{hostname}',
 	    },
 	},
+	{
+	    fieldLabel: gettext('Fingerprint'),
+	    cbind: {
+		value: '{fingerprint}',
+		hidden: '{!fingerprint}',
+	    },
+	},
 	{
 	    xtype: 'displayfield',
 	    value: '',
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup v2 3/3] docs: note that the webui has a show connection information button

[Dominik Csapak]

so that users know where they can easily copy that information

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
new in v2
 docs/backup-client.rst | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/backup-client.rst b/docs/backup-client.rst
index 8559e64d..873a6464 100644
--- a/docs/backup-client.rst
+++ b/docs/backup-client.rst
@@ -26,6 +26,9 @@ brackets (for example, `[fe80::01]`).
 You can pass the repository with the ``--repository`` command-line option, or
 by setting the ``PBS_REPOSITORY`` environment variable.
 
+The web interface provides copyable repository text in the datastore summary
+with the `Show Connection Information` button.
+
 Below are some examples of valid repositories and their corresponding real
 values:
 
-- 
2.30.2

[pbs-devel] applied-series: [PATCH proxmox-backup v2 1/3] ui: add 'show connection information' button for datastores

[Thomas Lamprecht]

Am 29/11/2023 um 16:49 schrieb Dominik Csapak:
> 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
> 
>

applied, thanks!

I squashed two small fixes into yours, namely the one for the icon color to
also work with light mode (adding the x-btn-icon-el-default-toolbar-small to
iconCls) and renaming the window title to "Connection Information" to fit the
adapted button text.