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

[pbs-devel] [PATCH proxmox-backup 1/2] ui: add 'show repository 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>
---
 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

[pbs-devel] [PATCH proxmox-backup 2/2] ui: add fingerprint also to the 'show repository 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>
---
sending this seperately because i'm not sure if we want to have the
fingerprint here too, and if i handled the permission in an ok way

sadly there is no way to get that info from the browser itself
(at least i could not find it..)

 www/MainView.js                 | 11 +++++++++++
 www/window/DatastoreRepoInfo.js | 25 +++++++++++++++++++++++++
 2 files changed, 36 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 9d2df9aa..eb704f81 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;
 	if (window.location.port.toString() !== "8007") {
 	    host += `:${window.location.port}`;
@@ -24,6 +25,7 @@ Ext.define('PBS.window.DatastoreRepoInfo', {
 
 	return {
 	    datastore,
+	    fingerprint,
 	    repository,
 	    repositoryWithUser,
 	};
@@ -43,6 +45,29 @@ Ext.define('PBS.window.DatastoreRepoInfo', {
 		value: '{datastore}',
 	    },
 	},
+	{
+	    fieldLabel: gettext('Fingerprint'),
+	    cbind: {
+		hidden: '{!fingerprint}',
+	    },
+	    items: [
+		{
+		    xtype: 'textfield',
+		    inputId: 'fingerprintField',
+		    editable: false,
+		    flex: 1,
+		    cbind: {
+			value: '{fingerprint}',
+		    },
+		},
+		{
+		    xtype: 'button',
+		    iconCls: 'fa fa-clipboard',
+		    handler: () => PBS.Utils.copyInputContent('fingerprintField'),
+		    text: gettext('Copy'),
+		},
+	    ],
+	},
 	{
 	    fieldLabel: gettext('Repository'),
 	    cbind: {},
-- 
2.30.2

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

[Fabian Grünbichler]

On November 29, 2023 12:03 pm, Dominik Csapak wrote:
> 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>

for both patches:

Tested-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>

works as expected - I am not 100% sure whether the "Repository" naming
is confusing or not for the intended audience, maybe at least the button
could be titled "Show Client Information" or something in that
direction?

some other nits for follow-ups/folding in:
- a short note in the relevant docs part "Backup Repository Locations"
- a help button linking to that docs part ;)
- a bit of space between the text field and copy button
- "*W*ith current User" instead of "with current User" might look nicer

> ---
>  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
> 
> 
> 
> _______________________________________________
> pbs-devel mailing list
> pbs-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
> 
> 
> 

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

[Thomas Lamprecht]

Am 29/11/2023 um 12:03 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
> 

datastore should be copyable too, and could be nice if the host (ip or domain,
maybe just document.location.hostname) would be visble separately too.

Potentially divide the repo stuff for CLI a bit of with a extra line that
spots a "Repository for CLI and API" label (or the like)

W.r.t. button placement, to the contrary of my intial suggestion I might
prefer it at the start of the summary view's top bar (where the RRD range
selector is). similar to the "Package Versions" button in PVE's node
summary.

An onlineHelp reference to "Backup Repository Locations" as Fabian suggests
would be really a good idea, as is the missing padding for the copy buttons,
and those could be a bit less flashy by using the inline buttons (or toolbar
button, always forget what we/ExtJS name it) styling.

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

[Dominik Csapak]

On 11/29/23 15:53, Thomas Lamprecht wrote:
> Am 29/11/2023 um 12:03 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
>>
> 
> datastore should be copyable too, and could be nice if the host (ip or domain,
> maybe just document.location.hostname) would be visble separately too.
> 
> Potentially divide the repo stuff for CLI a bit of with a extra line that
> spots a "Repository for CLI and API" label (or the like)
> 
> W.r.t. button placement, to the contrary of my intial suggestion I might
> prefer it at the start of the summary view's top bar (where the RRD range
> selector is). similar to the "Package Versions" button in PVE's node
> summary.

only there, or leave it at the datastore list summary too?

> 
> An onlineHelp reference to "Backup Repository Locations" as Fabian suggests
> would be really a good idea, as is the missing padding for the copy buttons,
> and those could be a bit less flashy by using the inline buttons (or toolbar
> button, always forget what we/ExtJS name it) styling.
> 

makes all sense, do you have a preference for the button text
(i.e. fabians suggestion 'show client information' or 'show connection info' like you
offlist suggested?)

i'd then have:

datastore
hostname
fingerprint

"repository for cli and api"(
repository
with current user

sounds ok ?