Re: [pve-devel] [PATCH v3 proxmox-widget-toolkit 65/66] notification: add ui for managing notification filters

[Dominik Csapak <d.csapak@proxmox.com>]

more or  less the same comments as for 61/66

autoShow,
single line if,
column use,
etc.

On 7/17/23 17:00, Lukas Wagner wrote:
> Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
> ---
>   src/Makefile                         |   3 +-
>   src/data/model/NotificationConfig.js |   9 ++
>   src/panel/NotificationConfigView.js  | 119 +++++++++++++++++++++++++++
>   src/window/NotificationFilterEdit.js | 115 ++++++++++++++++++++++++++
>   4 files changed, 245 insertions(+), 1 deletion(-)
>   create mode 100644 src/window/NotificationFilterEdit.js
> 
> diff --git a/src/Makefile b/src/Makefile
> index f661bb6..21fbe76 100644
> --- a/src/Makefile
> +++ b/src/Makefile
> @@ -89,7 +89,8 @@ JSSRC=					\
>   	window/ACMEAccount.js		\
>   	window/ACMEPluginEdit.js	\
>   	window/ACMEDomains.js		\
> -	window/EndpointEditBase.js		\
> +	window/EndpointEditBase.js	\
> +	window/NotificationFilterEdit.js \
>   	window/FileBrowser.js		\
>   	window/AuthEditBase.js		\
>   	window/AuthEditOpenId.js	\
> diff --git a/src/data/model/NotificationConfig.js b/src/data/model/NotificationConfig.js
> index c2ce843..bb4ef85 100644
> --- a/src/data/model/NotificationConfig.js
> +++ b/src/data/model/NotificationConfig.js
> @@ -6,3 +6,12 @@ Ext.define('proxmox-notification-endpoints', {
>       },
>       idProperty: 'name',
>   });
> +
> +Ext.define('proxmox-notification-filters', {
> +    extend: 'Ext.data.Model',
> +    fields: ['name', 'comment'],
> +    proxy: {
> +        type: 'proxmox',
> +    },
> +    idProperty: 'name',
> +});
> diff --git a/src/panel/NotificationConfigView.js b/src/panel/NotificationConfigView.js
> index 2aa04da..c3f7c40 100644
> --- a/src/panel/NotificationConfigView.js
> +++ b/src/panel/NotificationConfigView.js
> @@ -15,6 +15,17 @@ Ext.define('Proxmox.panel.NotificationConfigView', {
>   		baseUrl: '{baseUrl}',
>   	    },
>   	},
> +	{
> +	    region: 'south',
> +	    height: '50%',
> +	    border: false,
> +	    collapsible: true,
> +	    animCollapse: false,
> +	    xtype: 'pmxNotificationFilterView',
> +	    cbind: {
> +		baseUrl: '{baseUrl}',
> +	    },
> +	},
>       ],
>   });
>   
> @@ -194,3 +205,111 @@ Ext.define('Proxmox.panel.NotificationEndpointView', {
>   	me.store.rstore.proxy.setUrl(`/api2/json/${me.baseUrl}/targets`);
>       },
>   });
> +
> +Ext.define('Proxmox.panel.NotificationFilterView', {
> +    extend: 'Ext.grid.Panel',
> +    alias: 'widget.pmxNotificationFilterView',
> +
> +    title: gettext('Notification Filters'),
> +
> +    controller: {
> +	xclass: 'Ext.app.ViewController',
> +
> +	openEditWindow: function(filter) {
> +	    let me = this;
> +
> +	    Ext.create('Proxmox.window.NotificationFilterEdit', {
> +		baseUrl: me.getView().baseUrl,
> +		name: filter,
> +		listeners: {
> +		    destroy: () => me.reload(),
> +		},
> +	    }).show();
> +	},
> +
> +	openEditForSelectedItem: function() {
> +	    let me = this;
> +	    let view = me.getView();
> +
> +	    let selection = view.getSelection();
> +	    if (selection.length < 1) return;
> +	    let filterName = selection[0].data.name;
> +
> +	    me.openEditWindow(filterName);
> +	},
> +
> +	reload: function() {
> +	    let me = this;
> +	    let view = me.getView();
> +	    view.getStore().rstore.load();
> +	},
> +    },
> +
> +    listeners: {
> +	itemdblclick: 'openEditForSelectedItem',
> +	activate: 'reload',
> +    },
> +
> +    emptyText: gettext('No notification filters configured'),
> +
> +    columns: [
> +	{
> +	    dataIndex: 'name',
> +	    text: gettext('Filter Name'),
> +	    renderer: Ext.String.htmlEncode,
> +	    flex: 1,
> +	},
> +	{
> +	    dataIndex: 'comment',
> +	    text: gettext('Comment'),
> +	    renderer: Ext.String.htmlEncode,
> +	    flex: 2,
> +	},
> +    ],
> +
> +    store: {
> +	type: 'diff',
> +	autoDestroy: true,
> +	autoDestroyRstore: true,
> +	rstore: {
> +	    type: 'update',
> +	    storeid: 'proxmox-notification-filters',
> +	    model: 'proxmox-notification-filters',
> +	    autoStart: true,
> +	},
> +	sorters: 'name',
> +    },
> +
> +    initComponent: function() {
> +	let me = this;
> +
> +	if (!me.baseUrl) {
> +	    throw "baseUrl is not set!";
> +	}
> +
> +	Ext.apply(me, {
> +	    tbar: [
> +		{
> +		    xtype: 'proxmoxButton',
> +		    text: gettext('Add'),
> +		    handler: () => me.getController().openEditWindow(),
> +		    selModel: false,
> +		},
> +		{
> +		    xtype: 'proxmoxButton',
> +		    text: gettext('Modify'),
> +		    handler: 'openEditForSelectedItem',
> +		    disabled: true,
> +		},
> +		{
> +		    xtype: 'proxmoxStdRemoveButton',
> +		    callback: 'reload',
> +		    baseurl: `${me.baseUrl}/filters`,
> +		},
> +	    ],
> +	});
> +
> +	me.callParent();
> +	me.store.rstore.proxy.setUrl(`/api2/json/${me.baseUrl}/filters`);
> +    },
> +});
> diff --git a/src/window/NotificationFilterEdit.js b/src/window/NotificationFilterEdit.js
> new file mode 100644
> index 0000000..6a48446
> --- /dev/null
> +++ b/src/window/NotificationFilterEdit.js
> @@ -0,0 +1,115 @@
> +Ext.define('Proxmox.panel.NotificationFilterEditPanel', {
> +    extend: 'Proxmox.panel.InputPanel',
> +    xtype: 'pmxNotificationFilterEditPanel',
> +    mixins: ['Proxmox.Mixin.CBind'],
> +
> +    columnT: [
> +	{
> +	    xtype: 'pmxDisplayEditField',
> +	    name: 'name',
> +	    cbind: {
> +		value: '{name}',
> +		editable: '{isCreate}',
> +	    },
> +	    fieldLabel: gettext('Filter Name'),
> +	    allowBlank: false,
> +	},
> +	{
> +	    xtype: 'proxmoxKVComboBox',
> +	    name: 'min-severity',
> +	    fieldLabel: gettext('Minimum Severity'),
> +	    value: null,
> +	    cbind: {
> +		deleteEmpty: '{!isCreate}',
> +	    },
> +	    comboItems: [
> +		['info', 'info'],
> +		['notice', 'notice'],
> +		['warning', 'warning'],
> +		['error', 'error'],
> +	    ],
> +	    triggers: {
> +		clear: {
> +		    cls: 'pmx-clear-trigger',
> +		    weight: -1,
> +		    hidden: false,
> +		    handler: function() {
> +			this.setValue('');
> +		    },
> +		},
> +	    },
> +	},
> +	{
> +	    xtype: 'proxmoxcheckbox',
> +	    fieldLabel: gettext('Invert match'),
> +	    name: 'invert-match',
> +	    uncheckedValue: 0,
> +	    defaultValue: 0,
> +	    cbind: {
> +		deleteDefaultValue: '{!isCreate}',
> +	    },
> +	},
> +    ],
> +
> +    column1: [],
> +
> +    column2: [],
> +
> +    columnB: [
> +	{
> +	    xtype: 'proxmoxtextfield',
> +	    name: 'comment',
> +	    fieldLabel: gettext('Comment'),
> +	    cbind: {
> +		deleteEmpty: '{!isCreate}',
> +	    },
> +	},
> +    ],
> +});
> +
> +Ext.define('Proxmox.window.NotificationFilterEdit', {
> +    extend: 'Proxmox.window.Edit',
> +
> +    isAdd: true,
> +
> +    fieldDefaults: {
> +	labelWidth: 120,
> +    },
> +
> +    initComponent: function() {
> +	let me = this;
> +
> +	me.isCreate = !me.name;
> +
> +	if (!me.baseUrl) {
> +	    throw "baseUrl not set";
> +	}
> +
> +	me.url = `/api2/extjs${me.baseUrl}/filters`;
> +
> +	if (me.isCreate) {
> +	    me.method = 'POST';
> +	} else {
> +	    me.url += `/${me.name}`;
> +	    me.method = 'PUT';
> +	}
> +
> +	me.subject = gettext('Notification Filter');
> +
> +	Ext.apply(me, {
> +	    items: [{
> +		name: me.name,
> +		xtype: 'pmxNotificationFilterEditPanel',
> +		isCreate: me.isCreate,
> +		baseUrl: me.baseUrl,
> +	    }],
> +	});
> +
> +	me.callParent();
> +
> +	if (!me.isCreate) {
> +	    me.load();
> +	}
> +    },
> +});
> +