src/components/MonitorList.vue

@@ -160,34 +160,32 @@ export default {
 
         /**
          * Returns applied filters based on query params.
-         * @returns {{ status: number[], active: any[], tags: number[] }} The current filter state.
+         * @returns {{ status: number[], active: bool, tags: number[] }} The current filter state.
          */
         filterState() {
             // Since query params are always strings, convert them to the correct type
-            let status = this.$route.query["status"] || [];
+            let status = this.$route.query["status"] || null;
+            if (status) {
                 if (!Array.isArray(status)) {
                     status = [ status ];
                 }
                 status = status.map(Number);
+            }
             // Casting to boolean does not work here as Boolean("false") === true
-            let active = this.$route.query["active"] || [];
+            let active = this.$route.query["active"] || null;
+            if (active) {
                 if (!Array.isArray(active)) {
                     active = [ active ];
                 }
-            active = active.map(val => {
+                active = active.map(val => val === "true");
-                if (val === "true") {
-                    return true;
             }
-                if (val === "false") {
+            let tags = this.$route.query["tags"] || null;
-                    return false;
+            if (tags) {
-                }
-                return val;
-            });
-            let tags = this.$route.query["tags"] || [];
                 if (!Array.isArray(tags)) {
                     tags = [ tags ];
                 }
                 tags = tags.map(Number);
+            }
             return {
                 status,
                 active,
@@ -200,11 +198,12 @@ export default {
                 return this.$route.query.searchText || "";
             },
             set(value) {
-                let newQuery = { ...this.$route.query };
+                const newQuery = {
-                if (value === "") {
+                    ...this.$route.query,
+                    searchText: value,
+                };
+                if (!value) {
                     delete newQuery.searchText;
-                } else {
-                    newQuery.searchText = value;
                 }
                 this.$router.replace({
                     query: newQuery,
@@ -287,17 +286,26 @@ export default {
         },
         /**
          * Update the MonitorList Filter
-         * @param {{ status: number[], active: any[], tags: number[] }} newFilter Object with new filter
+         * @param {{ status: number[], active: bool, tags: number[] }} newFilter Object with new filter
          * @returns {void}
          */
         updateFilter(newFilter) {
-            this.$router.replace({
+            let newQuery = {
-                query: {
                 ...this.$route.query,
-                    status: newFilter.status,
+                ...newFilter,
-                    active: newFilter.active,
+            };
-                    tags: newFilter.tags,
+            if (!newFilter.status || newFilter.status.length === 0) {
-                },
+                delete newQuery.status;
+            }
+            if (!newFilter.active || newFilter.active.length === 0) {
+                delete newQuery.active;
+            }
+            if (!newFilter.tags || newFilter.tags.length === 0) {
+                delete newQuery.tags;
+            }
+
+            this.$router.replace({
+                query: newQuery,
             });
         },
         /**

src/components/MonitorListFilter.vue

@@ -80,9 +80,8 @@
         <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
             <template #status>
                 <span v-if="filterState.active?.length === 1">
-                    <span v-if="filterState.active[0] === true">{{ $t("Running") }}</span>
+                    <span v-if="filterState.active[0]">{{ $t("Running") }}</span>
-                    <span v-else-if="filterState.active[0] === false">{{ $t("filterActivePaused") }}</span>
+                    <span v-else>{{ $t("filterActivePaused") }}</span>
-                    <span v-else>{{ $t("Unknown") }}</span>
                 </span>
                 <span v-else>
                     {{ $t("filterActive") }}
@@ -187,31 +186,10 @@ export default {
             });
 
             return num;
-        },
-        /**
-         * Returns an array of invalid filters assuming tagsList has been fetched
-         * @returns {Array} Array of invalid filters
-         */
-        invalidFilters() {
-            const filters = [];
-            if (!this.filterState.status.every((val) => val >= 0 && val <= 3)) {
-                filters.push(this.$t("Status"));
-            }
-            if (!this.filterState.active.every((val) => val === true || val === false)) {
-                filters.push(this.$t("Active"));
-            }
-            if (!this.filterState.tags.every((val) => this.tagsList.find(tag => tag.id === val))) {
-                filters.push(this.$t("Tags"));
-            }
-            return filters;
         }
     },
     mounted() {
-        this.getExistingTags(() => {
+        this.getExistingTags();
-            if (this.invalidFilters.length > 0) {
-                this.$root.toastError(this.$t("InvalidFilters", [ this.invalidFilters.join(", ") ]));
-            }
-        });
     },
     methods: {
         toggleStatusFilter(status) {
@@ -264,15 +242,14 @@ export default {
         },
         clearFilters() {
             this.$emit("updateFilter", {
-                status: [],
+                status: null,
             });
         },
-        getExistingTags(callback) {
+        getExistingTags() {
             this.$root.getSocket().emit("getTags", (res) => {
                 if (res.ok) {
                     this.tagsList = res.tags;
                 }
-                callback();
             });
         },
         getTaggedMonitorCount(tag) {

src/lang/en.json

@@ -1060,6 +1060,5 @@
     "RabbitMQ Password": "RabbitMQ Password",
     "rabbitmqHelpText": "To use the monitor, you will need to enable the Management Plugin in your RabbitMQ setup. For more information, please consult the {rabitmq_documentation}.",
     "SendGrid API Key": "SendGrid API Key",
-    "Separate multiple email addresses with commas": "Separate multiple email addresses with commas",
+    "Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
-    "InvalidFilters": "The following filters are invalid: {0}"
 }