[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 at proxmox.com>

for both patches:

Tested-by: Fabian Grünbichler <f.gruenbichler at 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 at lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
> 
> 
>