[pve-devel] [PATCH proxmox-backup] ui: add 'join info' copy/paste button on datastore summary
Thomas Lamprecht
t.lamprecht at proxmox.com
Thu Oct 29 16:29:28 CET 2020
On 29.10.20 15:19, Oguz Bektas wrote:
> shows information about the datastore:
> - datastore name
> - hostname
> - host x509 fingerprint
>
> and creates the base64-encoded json blob to be pasted into PVE to add
> as storage.
>
code looks familiar, no reference from where you took it? ;-)
Did you see no way to pull common stuff out from the PVE cluster join info this
was based on to widget toolkit?
Also, where's a user for this code? I.e., the PVE Storage Add and PBS Remote
add? It's a bit hard to review if one has only half of the picture..
> Signed-off-by: Oguz Bektas <o.bektas at proxmox.com>
> ---
>
> www/DataStoreSummary.js | 35 ++++++++++++++-
> www/Makefile | 1 +
> www/window/DataStoreJoin.js | 88 +++++++++++++++++++++++++++++++++++++
> 3 files changed, 123 insertions(+), 1 deletion(-)
> create mode 100644 www/window/DataStoreJoin.js
>
> diff --git a/www/DataStoreSummary.js b/www/DataStoreSummary.js
> index 93bd99a3..616e2cf7 100644
> --- a/www/DataStoreSummary.js
> +++ b/www/DataStoreSummary.js
> @@ -208,7 +208,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({
Why isn't this request not done by the "joininfowindow"?
The button handler could also be a simple wrapper around creating that window,
which should do the request then on creation.
Can be OK as is, but I'd then move this out as it gets a bit crowded here.
> + 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 dsName = panel.datastore;
> + Ext.create('PBS.JoinInfoWindow', {
> + joinInfo: {
> + ipAddress: hostname,
> + fingerprint: fingerprint,
> + dsName: dsName,
s/dsName/datastore/ - clear, understandable names trumps saving a few letters.
> + },
> + }).show();
> + },
> + });
> + },
> + },
> + '->',
> + {
> + xtype: 'proxmoxRRDTypeSelector',
> + },
> + ],
>
> items: [
> {
> diff --git a/www/Makefile b/www/Makefile
> index cba8bed5..42fe8724 100644
> --- a/www/Makefile
> +++ b/www/Makefile
> @@ -21,6 +21,7 @@ JSSRC= \
> window/BackupFileDownloader.js \
> window/CreateDirectory.js \
> window/DataStoreEdit.js \
> + window/DataStoreJoin.js \
> window/FileBrowser.js \
> window/NotesEdit.js \
> window/RemoteEdit.js \
> diff --git a/www/window/DataStoreJoin.js b/www/window/DataStoreJoin.js
> new file mode 100644
> index 00000000..3a1dd87f
> --- /dev/null
> +++ b/www/window/DataStoreJoin.js
> @@ -0,0 +1,88 @@
> +Ext.define('PBS.JoinInfoWindow', {
join info is the wrong name here, use DatastoreInfo or something like that, at least
if that widget stays here and not in widget toolkit
> + extend: 'Ext.window.Window',
> + modal: true,
> + width: 600,
> + title: gettext('Datastore Join Information'),
> + mixins: ['Proxmox.Mixin.CBind'],
> + joinInfo: {
> + ipAddress: undefined,
> + fingerprint: undefined,
> + dsName: undefined,
> + },
> + layout: 'form',
> + bodyPadding: '10 0',
> + items: [
> + {
> + xtype: 'container',
> + layout: 'form',
> + border: false,
> + padding: '0 10 10 10',
> + items: [
> + {
> + xtype: 'textfield',
> + fieldLabel: gettext('x509 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: 'dsNameField',
> + cbind: {
> + value: '{joinInfo.dsName}',
> + },
> + 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();
> + },
> + },
> + ],
> +});
> +
> +
>
More information about the pve-devel
mailing list