[pbs-devel] [PATCH proxmox-backup 1/3] www: add AuthidSelector

[pbs-devel] [PATCH proxmox-backup 1/3] www: add AuthidSelector

[Fabian Grünbichler]

similar to TokenSelector, but with different fields / mapping of data.

Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
---
 www/Makefile               |  1 +
 www/form/AuthidSelector.js | 98 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 www/form/AuthidSelector.js

diff --git a/www/Makefile b/www/Makefile
index 9fd014b4..f8516a23 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -8,6 +8,7 @@ JSSRC=							\
 	Utils.js					\
 	form/UserSelector.js				\
 	form/TokenSelector.js				\
+	form/AuthidSelector.js				\
 	form/RemoteSelector.js				\
 	form/DataStoreSelector.js			\
 	form/CalendarEvent.js				\
diff --git a/www/form/AuthidSelector.js b/www/form/AuthidSelector.js
new file mode 100644
index 00000000..89389834
--- /dev/null
+++ b/www/form/AuthidSelector.js
@@ -0,0 +1,98 @@
+Ext.define('pbs-authids', {
+    extend: 'Ext.data.Model',
+    fields: [
+	'authid', 'comment', 'type',
+    ],
+    idProperty: 'authid',
+});
+
+Ext.define('PBS.form.AuthidSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: 'widget.pbsAuthidSelector',
+
+    allowBlank: false,
+    autoSelect: false,
+    valueField: 'authid',
+    displayField: 'authid',
+
+    editable: true,
+    anyMatch: true,
+    forceSelection: true,
+
+    store: {
+	model: 'pbs-authids',
+	params: {
+	    enabled: 1,
+	},
+	sorters: 'authid',
+    },
+
+    initComponent: function() {
+	let me = this;
+	me.userStore = Ext.create('Ext.data.Store', {
+	    model: 'pbs-users-with-tokens',
+	});
+	me.userStore.on('load', this.onLoad, this);
+	me.userStore.load();
+
+	me.callParent();
+    },
+
+    onLoad: function(store, data, success) {
+	if (!success) return;
+
+	let authidStore = this.store;
+
+	let records = [];
+	Ext.Array.each(data, function(user) {
+	let u = {};
+	u.authid = user.data.userid;
+	u.comment = user.data.comment;
+	u.type = 'u';
+	records.push(u);
+	let tokens = user.data.tokens || [];
+	Ext.Array.each(tokens, function(token) {
+	    let r = {};
+	    r.authid = token.tokenid;
+	    r.comment = token.comment;
+	    r.type = 't';
+	    records.push(r);
+	});
+	});
+
+	authidStore.loadData(records);
+    },
+
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('Type'),
+		sortable: true,
+		dataIndex: 'type',
+		renderer: function(value) {
+		    switch (value) {
+			case 'u': return gettext('User');
+			case 't': return gettext('API Token');
+			default: return Proxmox.Utils.unknownText;
+		    }
+		},
+		flex: 1,
+	    },
+	    {
+		header: gettext('Auth ID'),
+		sortable: true,
+		dataIndex: 'authid',
+		renderer: Ext.String.htmlEncode,
+		flex: 1,
+	    },
+	    {
+		header: gettext('Comment'),
+		sortable: false,
+		dataIndex: 'comment',
+		renderer: Ext.String.htmlEncode,
+		flex: 1,
+	    },
+	],
+    },
+});
+
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 2/3] www: use AuthidSelector for sync job owner

[Fabian Grünbichler]

Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
---
 www/window/SyncJobEdit.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/window/SyncJobEdit.js b/www/window/SyncJobEdit.js
index bb9540a6..573a4af6 100644
--- a/www/window/SyncJobEdit.js
+++ b/www/window/SyncJobEdit.js
@@ -112,7 +112,7 @@ Ext.define('PBS.window.SyncJobEdit', {
 	me.method = id ? 'PUT' : 'POST';
 	me.autoLoad = !!id;
 	me.scheduleValue = id ? null : 'hourly';
-	me.userid = id ? null : Proxmox.UserName;
+	me.authid = id ? null : Proxmox.UserName;
 	return { };
     },
 
@@ -139,10 +139,10 @@ Ext.define('PBS.window.SyncJobEdit', {
 	    },
 	    {
 		fieldLabel: gettext('Local Owner'),
-		xtype: 'pbsUserSelector',
+		xtype: 'pbsAuthidSelector',
 		name: 'owner',
 		cbind: {
-		    value: '{userid}',
+		    value: '{authid}',
 		    deleteEmpty: '{!isCreate}',
 		},
 	    },
-- 
2.20.1

[pbs-devel] applied: [PATCH proxmox-backup 2/3] www: use AuthidSelector for sync job owner

[Thomas Lamprecht]

On 06.11.20 13:01, Fabian Grünbichler wrote:
> Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
> ---
>  www/window/SyncJobEdit.js | 6 +++---
>  1 file changed, 3 insertions(+), 3 deletions(-)
> 
>

applied, thanks!

[pbs-devel] [PATCH proxmox-backup 3/3] www: use AuthidSelector for selecting new owner

[Fabian Grünbichler]

Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
---
 www/BackupGroupChangeOwner.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/BackupGroupChangeOwner.js b/www/BackupGroupChangeOwner.js
index 9bd01782..39a9492a 100644
--- a/www/BackupGroupChangeOwner.js
+++ b/www/BackupGroupChangeOwner.js
@@ -31,10 +31,10 @@ Ext.define('PBS.BackupGroupChangeOwner', {
 
 		column1: [
 		    {
-			xtype: 'pbsUserSelector',
+			xtype: 'pbsAuthidSelector',
 			name: 'new-owner',
 			value: me.owner,
-			fieldLabel: gettext('Userid'),
+			fieldLabel: gettext('Owner'),
 			minLength: 8,
 			allowBlank: false,
 		    },
-- 
2.20.1

[pbs-devel] applied: [PATCH proxmox-backup 3/3] www: use AuthidSelector for selecting new owner

[Thomas Lamprecht]

On 06.11.20 13:01, Fabian Grünbichler wrote:
> Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
> ---
>  www/BackupGroupChangeOwner.js | 4 ++--
>  1 file changed, 2 insertions(+), 2 deletions(-)
> 
>

applied, thanks!

[pbs-devel] applied: [PATCH proxmox-backup 1/3] www: add AuthidSelector

[Dietmar Maurer]

applied all 3 patches

Re: [pbs-devel] [PATCH proxmox-backup 1/3] www: add AuthidSelector

[Thomas Lamprecht]

some "after applied" review below, maybe for the next time when we do not need
to rush such things in ;-)

On 06.11.20 13:01, Fabian Grünbichler wrote:
> similar to TokenSelector, but with different fields / mapping of data.
> 

this should be quite easily mergable with the existing user selector, I'll see
if I can do that.

> Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
> ---
>  www/Makefile               |  1 +
>  www/form/AuthidSelector.js | 98 ++++++++++++++++++++++++++++++++++++++
>  2 files changed, 99 insertions(+)
>  create mode 100644 www/form/AuthidSelector.js
> 
> diff --git a/www/Makefile b/www/Makefile
> index 9fd014b4..f8516a23 100644
> --- a/www/Makefile
> +++ b/www/Makefile
> @@ -8,6 +8,7 @@ JSSRC=							\
>  	Utils.js					\
>  	form/UserSelector.js				\
>  	form/TokenSelector.js				\
> +	form/AuthidSelector.js				\
>  	form/RemoteSelector.js				\
>  	form/DataStoreSelector.js			\
>  	form/CalendarEvent.js				\
> diff --git a/www/form/AuthidSelector.js b/www/form/AuthidSelector.js
> new file mode 100644
> index 00000000..89389834
> --- /dev/null
> +++ b/www/form/AuthidSelector.js
> @@ -0,0 +1,98 @@
> +Ext.define('pbs-authids', {
> +    extend: 'Ext.data.Model',
> +    fields: [
> +	'authid', 'comment', 'type',
> +    ],
> +    idProperty: 'authid',
> +});
> +
> +Ext.define('PBS.form.AuthidSelector', {
> +    extend: 'Proxmox.form.ComboGrid',
> +    alias: 'widget.pbsAuthidSelector',
> +
> +    allowBlank: false,
> +    autoSelect: false,
> +    valueField: 'authid',
> +    displayField: 'authid',
> +
> +    editable: true,
> +    anyMatch: true,
> +    forceSelection: true,
> +
> +    store: {
> +	model: 'pbs-authids',
> +	params: {
> +	    enabled: 1,
> +	},
> +	sorters: 'authid',
> +    },
> +
> +    initComponent: function() {
> +	let me = this;
> +	me.userStore = Ext.create('Ext.data.Store', {
> +	    model: 'pbs-users-with-tokens',
> +	});
> +	me.userStore.on('load', this.onLoad, this);
> +	me.userStore.load();
> +
> +	me.callParent();
> +    },
> +
> +    onLoad: function(store, data, success) {
> +	if (!success) return;
> +
> +	let authidStore = this.store;
> +
> +	let records = [];
> +	Ext.Array.each(data, function(user) {

could be just:

for (const record of data) {
   ...
}
> +	let u = {};
> +	u.authid = user.data.userid;
> +	u.comment = user.data.comment;
> +	u.type = 'u';
> +	records.push(u);
> +	let tokens = user.data.tokens || [];
> +	Ext.Array.each(tokens, function(token) {

could be just
for (const token of tokens) {
   ...
}

> +	    let r = {};
> +	    r.authid = token.tokenid;
> +	    r.comment = token.comment;
> +	    r.type = 't';
> +	    records.push(r);

besides indentation being completely off, please write such things as
let r = {
    authid: token.tokenid,
    comment: token.comment,
    type: 't',
};

you could also push this directly without constructing r first.

> +	});
> +	});
> +
> +	authidStore.loadData(records);

you need to validate the field after loading data like this, else it's always shown as
invalid even if set to an OK value.

> +    },
> +
> +    listConfig: {

for more columns it often can be better to increase the default width of the
picker grid, e.g.:

width: 500,

> +	columns: [
> +	    {
> +		header: gettext('Type'),
> +		sortable: true,
> +		dataIndex: 'type',
> +		renderer: function(value) {
> +		    switch (value) {
> +			case 'u': return gettext('User');
> +			case 't': return gettext('API Token');
> +			default: return Proxmox.Utils.unknownText;
> +		    }
> +		},
> +		flex: 1,

if the size is really fixed, we use also fixed widths to  give dynamic data more space
and improve layout, i.e.:

width: 80,

> +	    },
> +	    {
> +		header: gettext('Auth ID'),
> +		sortable: true,
> +		dataIndex: 'authid',
> +		renderer: Ext.String.htmlEncode,
> +		flex: 1,
> +	    },
> +	    {
> +		header: gettext('Comment'),
> +		sortable: false,
> +		dataIndex: 'comment',
> +		renderer: Ext.String.htmlEncode,
> +		flex: 1,
> +	    },
> +	],
> +    },
> +});
> +
>