[pbs-devel] [PATCH v4 backup 1/2] ui: add 'join info' copy/paste button on datastore summary

[pbs-devel] [PATCH v4 backup 1/2] ui: add 'join info' copy/paste button on datastore summary

[Oguz Bektas]

shows info about the datastore:
- fingerprint
- datastore name
- hostname

and creates the base64-encoded json blob to be pasted into Remote -> Add
menu.

Signed-off-by: Oguz Bektas <o.bektas@proxmox.com>
---
 www/Makefile                |  1 +
 www/datastore/Summary.js    | 35 ++++++++++++++-
 www/window/DataStoreJoin.js | 88 +++++++++++++++++++++++++++++++++++++
 3 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 www/window/DataStoreJoin.js

diff --git a/www/Makefile b/www/Makefile
index 1790273f..61bb6e02 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -61,6 +61,7 @@ JSSRC=							\
 	window/BackupGroupChangeOwner.js		\
 	window/CreateDirectory.js			\
 	window/DataStoreEdit.js				\
+	window/DataStoreJoin.js				\
 	window/FileBrowser.js				\
 	window/NotesEdit.js				\
 	window/RemoteEdit.js				\
diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index 25a7b6e5..6a74155a 100644
--- a/www/datastore/Summary.js
+++ b/www/datastore/Summary.js
@@ -185,7 +185,40 @@ Ext.define('PBS.DataStoreSummary', {
 	padding: 5,
     },
 
-    tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
+    tbar: [
+	{
+	    xtype: 'button',
+	    text: gettext('Show Datastore Information'),
+	    handler: function() {
+		let me = this;
+		let panel = me.up('panel');
+		Proxmox.Utils.API2Request({
+		    url: '/api2/extjs/nodes/localhost/status',
+		    method: 'GET',
+		    waitMsgTarget: panel,
+		    failure: function(e) {
+			console.log(e);
+		    },
+		    success: function(response) {
+			let fingerprint = response.result.data.info.fingerprint;
+			let hostname = window.location.hostname;
+			let datastore = panel.datastore;
+			Ext.create('PBS.JoinInfoWindow', {
+			    joinInfo: {
+				ipAddress: hostname,
+				fingerprint: fingerprint,
+				datastore: datastore,
+			    },
+			}).show();
+		    },
+		});
+	    },
+	},
+	'->',
+	{
+	    xtype: 'proxmoxRRDTypeSelector',
+	},
+    ],
 
     items: [
 	{
diff --git a/www/window/DataStoreJoin.js b/www/window/DataStoreJoin.js
new file mode 100644
index 00000000..bb009cc4
--- /dev/null
+++ b/www/window/DataStoreJoin.js
@@ -0,0 +1,88 @@
+Ext.define('PBS.JoinInfoWindow', {
+	extend: 'Ext.window.Window',
+	modal: true,
+	width: 600,
+	title: gettext('Datastore Join Information'),
+	mixins: ['Proxmox.Mixin.CBind'],
+	joinInfo: {
+	    ipAddress: undefined,
+	    fingerprint: undefined,
+	    datastore: undefined,
+	},
+	layout: 'form',
+	bodyPadding: '10 0',
+	items: [
+	{
+	    xtype: 'container',
+	    layout: 'form',
+	    border: false,
+	    padding: '0 10 10 10',
+	    items: [
+		{
+		    xtype: 'textfield',
+		    fieldLabel: gettext('Fingerprint'),
+		    inputId: 'fingerprintField',
+		    cbind: {
+			value: '{joinInfo.fingerprint}',
+		    },
+		    editable: false,
+		},
+		{
+		    xtype: 'textfield',
+		    fieldLabel: gettext('Hostname'),
+		    editable: true,
+		    inputId: 'hostnameField',
+		    cbind: {
+			value: '{joinInfo.ipAddress}',
+		    },
+		},
+		{
+		    xtype: 'textfield',
+		    fieldLabel: gettext('Datastore Name'),
+		    inputId: 'datastoreField',
+		    cbind: {
+			value: '{joinInfo.datastore}',
+		    },
+		    editable: false,
+		},
+		{
+		    xtype: 'textarea',
+		    inputId: 'SerializedJoinInfo',
+		    fieldLabel: gettext('Join Information'),
+		    grow: true,
+		    editable: false,
+		    cbind: {
+			joinInfo: '{joinInfo}',
+		    },
+		    listeners: {
+			afterrender: function(field) {
+			    var jsons = Ext.JSON.encode(field.joinInfo);
+			    var base64s = Ext.util.Base64.encode(jsons);
+			    field.setValue(base64s);
+			},
+		    },
+		},
+	    ],
+	},
+	],
+	buttons: [
+	    {
+		xtype: 'button',
+		iconCls: 'fa fa-clipboard',
+		handler: function(b) {
+		    var el = document.getElementById('SerializedJoinInfo');
+		    el.select();
+		    document.execCommand("copy");
+		},
+		text: gettext('Copy'),
+	    },
+	    {
+		text: gettext('Ok'),
+		handler: function() {
+		    this.up('window').close();
+		},
+	    },
+	],
+});
+
+
-- 
2.20.1

[pbs-devel] [PATCH v4 backup 2/2] ui: add textarea in remote and menu for pasting json blob

[Oguz Bektas]

automatically fill hostname and fingerprint when pasted

Signed-off-by: Oguz Bektas <o.bektas@proxmox.com>
---
 www/window/RemoteEdit.js | 55 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/www/window/RemoteEdit.js b/www/window/RemoteEdit.js
index 4a4d8114..92b3d929 100644
--- a/www/window/RemoteEdit.js
+++ b/www/window/RemoteEdit.js
@@ -11,6 +11,39 @@ Ext.define('PBS.window.RemoteEdit', {
 
     fieldDefaults: { labelWidth: 120 },
 
+    viewModel: {
+	parent: null,
+	data: {
+	    info: {
+		ipAddress: '',
+		fingerprint: '',
+		datastore: '',
+	    },
+	},
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+	control: {
+	    'textarea[name=serializedinfo]': {
+		change: 'deserializeInfo',
+	    },
+	},
+        deserializeInfo: function(field, value) {
+	    let vm = this.getViewModel();
+	    let jsons = Ext.util.Base64.decode(value);
+	    let joinInfo = Ext.JSON.decode(jsons, true);
+
+	    let info = {
+	        ipAddress: joinInfo.ipAddress,
+	        fingerprint: joinInfo.fingerprint,
+	        datastore: joinInfo.datastore,
+	    };
+
+	    vm.set('info', info);
+	},
+    },
+
     cbindData: function(initialConfig) {
 	let me = this;
 
@@ -26,7 +59,7 @@ Ext.define('PBS.window.RemoteEdit', {
 	};
     },
 
-    items: {
+    items: [{
 	xtype: 'inputpanel',
 	column1: [
 	    {
@@ -47,6 +80,9 @@ Ext.define('PBS.window.RemoteEdit', {
 		submitValue: false,
 		vtype: 'HostPort',
 		fieldLabel: gettext('Host'),
+		bind: {
+		    value: '{info.ipAddress}',
+		},
 		listeners: {
 		    change: function(field, newvalue) {
 			let host = newvalue;
@@ -86,7 +122,6 @@ Ext.define('PBS.window.RemoteEdit', {
 		name: 'port',
 	    },
 	],
-
 	column2: [
 	    {
 		xtype: 'proxmoxtextfield',
@@ -105,7 +140,6 @@ Ext.define('PBS.window.RemoteEdit', {
 		},
 	    },
 	],
-
 	columnB: [
 	    {
 		xtype: 'proxmoxtextfield',
@@ -114,6 +148,10 @@ Ext.define('PBS.window.RemoteEdit', {
 		    deleteEmpty: '{!isCreate}',
 		},
 		fieldLabel: gettext('Fingerprint'),
+		bind: {
+		    value: '{info.fingerprint}',
+		},
+
 	    },
 	    {
 		xtype: 'proxmoxtextfield',
@@ -124,7 +162,16 @@ Ext.define('PBS.window.RemoteEdit', {
 		fieldLabel: gettext('Comment'),
 	    },
 	],
-    },
+	},
+	{
+	    xtype: 'textarea',
+	    name: 'serializedinfo',
+	    fieldLabel: gettext('Remote Info Blob'),
+	    submitValue: false,
+	    emptyText: gettext('Paste encoded Remote Information here'),
+	    value: '',
+	},
+    ],
 
     setValues: function(values) {
 	let me = this;
-- 
2.20.1

Re: [pbs-devel] [PATCH v4 backup 1/2] ui: add 'join info' copy/paste button on datastore summary

[Dylan Whyte]

Hi,

I've just made one extra note to remove the "Datastore name" textfield 
update, as this field no longer exists. (Sorry, this is my bad for not 
seeing this during our off-list discussion).
Otherwise all is working perfectly.

Reviewed-By: Dylan Whyte<d.whyte@proxmox.com>

Tested-By: Dylan Whyte<d.whyte@proxmox.com>


On 3/31/21 12:35 PM, Oguz Bektas wrote:
> shows info about the datastore:
> - fingerprint
> - datastore name
> - hostname
>
> and creates the base64-encoded json blob to be pasted into Remote -> Add
> menu.
>
> Signed-off-by: Oguz Bektas <o.bektas@proxmox.com>
> ---
>   www/Makefile                |  1 +
>   www/datastore/Summary.js    | 35 ++++++++++++++-
>   www/window/DataStoreJoin.js | 88 +++++++++++++++++++++++++++++++++++++
>   3 files changed, 123 insertions(+), 1 deletion(-)
>   create mode 100644 www/window/DataStoreJoin.js
>
> diff --git a/www/Makefile b/www/Makefile
> index 1790273f..61bb6e02 100644
> --- a/www/Makefile
> +++ b/www/Makefile
> @@ -61,6 +61,7 @@ JSSRC=							\
>   	window/BackupGroupChangeOwner.js		\
>   	window/CreateDirectory.js			\
>   	window/DataStoreEdit.js				\
> +	window/DataStoreJoin.js				\
>   	window/FileBrowser.js				\
>   	window/NotesEdit.js				\
>   	window/RemoteEdit.js				\
> diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
> index 25a7b6e5..6a74155a 100644
> --- a/www/datastore/Summary.js
> +++ b/www/datastore/Summary.js
> @@ -185,7 +185,40 @@ Ext.define('PBS.DataStoreSummary', {
>   	padding: 5,
>       },
>   
> -    tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
> +    tbar: [
> +	{
> +	    xtype: 'button',
> +	    text: gettext('Show Datastore Information'),
> +	    handler: function() {
> +		let me = this;
> +		let panel = me.up('panel');
> +		Proxmox.Utils.API2Request({
> +		    url: '/api2/extjs/nodes/localhost/status',
> +		    method: 'GET',
> +		    waitMsgTarget: panel,
> +		    failure: function(e) {
> +			console.log(e);
> +		    },
> +		    success: function(response) {
> +			let fingerprint = response.result.data.info.fingerprint;
> +			let hostname = window.location.hostname;
> +			let datastore = panel.datastore;
> +			Ext.create('PBS.JoinInfoWindow', {
> +			    joinInfo: {
> +				ipAddress: hostname,
> +				fingerprint: fingerprint,
> +				datastore: datastore,
> +			    },
> +			}).show();
> +		    },
> +		});
> +	    },
> +	},
> +	'->',
> +	{
> +	    xtype: 'proxmoxRRDTypeSelector',
> +	},
> +    ],
>   
>       items: [
>   	{
> diff --git a/www/window/DataStoreJoin.js b/www/window/DataStoreJoin.js
> new file mode 100644
> index 00000000..bb009cc4
> --- /dev/null
> +++ b/www/window/DataStoreJoin.js
> @@ -0,0 +1,88 @@
> +Ext.define('PBS.JoinInfoWindow', {
> +	extend: 'Ext.window.Window',
> +	modal: true,
> +	width: 600,
> +	title: gettext('Datastore Join Information'),
> +	mixins: ['Proxmox.Mixin.CBind'],
> +	joinInfo: {
> +	    ipAddress: undefined,
> +	    fingerprint: undefined,
> +	    datastore: undefined,
> +	},
> +	layout: 'form',
> +	bodyPadding: '10 0',
> +	items: [
> +	{
> +	    xtype: 'container',
> +	    layout: 'form',
> +	    border: false,
> +	    padding: '0 10 10 10',
> +	    items: [
> +		{
> +		    xtype: 'textfield',
> +		    fieldLabel: gettext('Fingerprint'),
> +		    inputId: 'fingerprintField',
> +		    cbind: {
> +			value: '{joinInfo.fingerprint}',
> +		    },
> +		    editable: false,
> +		},
> +		{
> +		    xtype: 'textfield',
> +		    fieldLabel: gettext('Hostname'),
> +		    editable: true,
> +		    inputId: 'hostnameField',
> +		    cbind: {
> +			value: '{joinInfo.ipAddress}',
> +		    },
> +		},
> +		{
> +		    xtype: 'textfield',
> +		    fieldLabel: gettext('Datastore Name'),
> +		    inputId: 'datastoreField',
> +		    cbind: {
> +			value: '{joinInfo.datastore}',
> +		    },
> +		    editable: false,
> +		},
This should also be pulled out, since this field is no longer present.
> +		{
> +		    xtype: 'textarea',
> +		    inputId: 'SerializedJoinInfo',
> +		    fieldLabel: gettext('Join Information'),
> +		    grow: true,
> +		    editable: false,
> +		    cbind: {
> +			joinInfo: '{joinInfo}',
> +		    },
> +		    listeners: {
> +			afterrender: function(field) {
> +			    var jsons = Ext.JSON.encode(field.joinInfo);
> +			    var base64s = Ext.util.Base64.encode(jsons);
> +			    field.setValue(base64s);
> +			},
> +		    },
> +		},
> +	    ],
> +	},
> +	],
> +	buttons: [
> +	    {
> +		xtype: 'button',
> +		iconCls: 'fa fa-clipboard',
> +		handler: function(b) {
> +		    var el = document.getElementById('SerializedJoinInfo');
> +		    el.select();
> +		    document.execCommand("copy");
> +		},
> +		text: gettext('Copy'),
> +	    },
> +	    {
> +		text: gettext('Ok'),
> +		handler: function() {
> +		    this.up('window').close();
> +		},
> +	    },
> +	],
> +});
> +
> +