commit c290eec: [WebUI] Add control to invert action filter

[moisseev]

Author: moisseev
Date: 2023-10-15 19:58:20 +0300
URL: https://github.com/rspamd/rspamd/commit/c290eece13a1f9f1f816789f5e02bb9c0cf34d82 (refs/pull/4645/head)

[WebUI] Add control to invert action filter
to scan results and history tables

Issue: #4098

---
 .eslintrc.json             |  1 +
 interface/js/app/rspamd.js | 32 +++++++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 714c80f7c..f0856b782 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -49,6 +49,7 @@
         "padded-blocks": "off",
         "prefer-arrow-callback": "off",
         "prefer-destructuring": "off",
+        "prefer-named-capture-group": "off",
         "prefer-object-has-own": "off",
         "prefer-spread": "off",
         "prefer-template": "off",
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 763579ca6..59a4a4d17 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -792,13 +792,29 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
             },
             $create: function () {
                 this._super();
-                var self = this, $form_grp = $("<div/>", {
-                    class: "form-group"
+                const self = this, $form_grp = $("<div/>", {
+                    class: "form-group d-inline-flex align-items-center"
                 }).append($("<label/>", {
                     class: "sr-only",
                     text: "Action"
                 })).prependTo(self.$form);
 
+                $("<div/>", {
+                    class: "form-check form-check-inline",
+                    title: "Invert action match."
+                }).append(
+                    self.$not = $("<input/>", {
+                        type: "checkbox",
+                        class: "form-check-input",
+                        id: "not_" + table
+                    }).on("change", {self: self}, self._onStatusDropdownChanged),
+                    $("<label/>", {
+                        class: "form-check-label",
+                        for: "not_" + table,
+                        text: "not"
+                    })
+                ).appendTo($form_grp);
+
                 self.$action = $("<select/>", {
                     class: "form-select"
                 }).on("change", {
@@ -813,13 +829,19 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
                 });
             },
             _onStatusDropdownChanged: function (e) {
-                var self = e.data.self, selected = $(this).val();
+                const self = e.data.self;
+                const selected = self.$action.val();
                 if (selected !== self.def) {
+                    const not = self.$not.is(":checked");
+                    let query = null;
+
                     if (selected === "reject") {
-                        self.addFilter("action", "reject -soft", ["action"]);
+                        query = not ? "-reject OR soft" : "reject -soft";
                     } else {
-                        self.addFilter("action", selected, ["action"]);
+                        query = not ? selected.replace(/(\b\w+\b)/g, "-$1") : selected;
                     }
+
+                    self.addFilter("action", query, ["action"]);
                 } else {
                     self.removeFilter("action");
                 }