[pve-devel] [PATCH v4 proxmox-widget-toolkit 68/69] notification: add ui for managing notification filters

[Lukas Wagner <l.wagner@proxmox.com>]

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---

Notes:
    Changes since v3:
      - use items/advancedItems instead of columns

 src/Makefile                         |   3 +-
 src/data/model/NotificationConfig.js |   9 ++
 src/panel/NotificationConfigView.js  | 119 +++++++++++++++++++++++++++
 src/window/NotificationFilterEdit.js | 109 ++++++++++++++++++++++++
 4 files changed, 239 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 80e38f1..6586524 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}',
+	    },
+	},
     ],
 });
 
@@ -198,3 +209,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,
+		autoShow: true,
+		listeners: {
+		    destroy: () => me.reload(),
+		},
+	    });
+	},
+
+	openEditForSelectedItem: function() {
+	    let me = this;
+	    let view = me.getView();
+
+	    let selection = view.getSelection();
+	    if (selection.length < 1) {
+		return;
+	    }
+
+	    me.openEditWindow(selection[0].data.name);
+	},
+
+	reload: function() {
+	    this.getView().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..703a9e2
--- /dev/null
+++ b/src/window/NotificationFilterEdit.js
@@ -0,0 +1,109 @@
+Ext.define('Proxmox.panel.NotificationFilterEditPanel', {
+    extend: 'Proxmox.panel.InputPanel',
+    xtype: 'pmxNotificationFilterEditPanel',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    items: [
+	{
+	    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}',
+	    },
+	},
+	{
+	    xtype: 'proxmoxtextfield',
+	    name: 'comment',
+	    fieldLabel: gettext('Comment'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	},
+    ],
+});
+
+Ext.define('Proxmox.window.NotificationFilterEdit', {
+    extend: 'Proxmox.window.Edit',
+
+    isAdd: true,
+
+    fieldDefaults: {
+	labelWidth: 120,
+    },
+
+    width: 500,
+
+    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();
+	}
+    },
+});
-- 
2.39.2