[pve-devel] [PATCH widget-toolkit] node/ServiceView: fix #5611: hiding the non-installed services

[Thomas Lamprecht]

Am 06/11/2024 um 12:37 schrieb Daniel Herzig:
> This patch adds a filter to identify services, which are reported as
> 'not-found' by the api. By default they will not be shown in the UI
> anymore, but visibility can still be toggled using a new checkbox.
> 
> Signed-off-by: Daniel Herzig <d.herzig at proxmox.com>
> ---
>  src/node/ServiceView.js | 24 ++++++++++++++++++++++++
>  1 file changed, 24 insertions(+)
> 
> diff --git a/src/node/ServiceView.js b/src/node/ServiceView.js
> index 19cfc18..f1c2e5f 100644
> --- a/src/node/ServiceView.js
> +++ b/src/node/ServiceView.js
> @@ -29,6 +29,10 @@ Ext.define('Proxmox.node.ServiceView', {
>  	    },
>  	});
>  
> +	let hide_not_installed = function(record) {
> +	    return record.get('unit-state') !== 'not-found';
> +	};

FWIW, you can use arrow functions for a conciser implementation here. Albeit
they are not always the right choice as `this` inside them refers to the
outer `this`, unlike in functions, but for such filter/map/...  closures they
normally work well and can be often slightly nicer to read.

Also, we favor camelCase for new code in the frontend, e.g.:

let filterInstalledOnly = record => record.get('unit-state') !== 'not-found';

> +
>  	let store = Ext.create('Proxmox.data.DiffStore', {
>  	    rstore: rstore,
>  	    sortAfterUpdate: true,
> @@ -38,6 +42,24 @@ Ext.define('Proxmox.node.ServiceView', {
>  		    direction: 'ASC',
>  		},
>  	    ],
> +	    filters: [
> +		hide_not_installed,
> +	    ],
> +	});
> +
> +	let unHideCB = Ext.create('Ext.form.field.Checkbox', {
> +	    boxLabel: gettext('Show non-installed services'),
> +	    value: false,

Negatives are not ideal for UX, so I'd reverse this, e.g. label it something
like 'Show only installed services' and default to true/checked and switch if/else
branch below.

> +	    boxLabelAlign: 'before',
> +	    listeners: {
> +		change: function(_cb, value) {
> +		    if (value) {
> +			store.clearFilter();
> +		    } else {
> +			store.addFilter([hide_not_installed]);
> +		    }
> +		},
> +	    },
>  	});
>  
>  	let view_service_log = function() {
> @@ -166,6 +188,8 @@ Ext.define('Proxmox.node.ServiceView', {
>  		restart_btn,
>  		'-',
>  		syslog_btn,
> +		'->',
> +		unHideCB,
>  	    ],
>  	    columns: [
>  		{