all lists on lists.proxmox.com
 help / color / mirror / Atom feed
* [pbs-devel] [PATCH proxmox-backup v2 1/3] ui: add 'show connection information' button for datastores
@ 2023-11-29 15:49 Dominik Csapak
  2023-11-29 15:49 ` [pbs-devel] [PATCH proxmox-backup v2 2/3] ui: add fingerprint also to the 'show connection information' window Dominik Csapak
                   ` (2 more replies)
  0 siblings, 3 replies; 4+ messages in thread
From: Dominik Csapak @ 2023-11-29 15:49 UTC (permalink / raw)
  To: pbs-devel

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





^ permalink raw reply	[flat|nested] 4+ messages in thread

end of thread, other threads:[~2023-11-29 16:15 UTC | newest]

Thread overview: 4+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-11-29 15:49 [pbs-devel] [PATCH proxmox-backup v2 1/3] ui: add 'show connection information' button for datastores Dominik Csapak
2023-11-29 15:49 ` [pbs-devel] [PATCH proxmox-backup v2 2/3] ui: add fingerprint also to the 'show connection information' window Dominik Csapak
2023-11-29 15:49 ` [pbs-devel] [PATCH proxmox-backup v2 3/3] docs: note that the webui has a show connection information button Dominik Csapak
2023-11-29 16:14 ` [pbs-devel] applied-series: [PATCH proxmox-backup v2 1/3] ui: add 'show connection information' button for datastores Thomas Lamprecht

This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal