From 6832c791c4b0665f359e7880622fcc500a10bcaf Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sat, 26 Oct 2024 08:20:14 +0545
Subject: [PATCH 01/18] Convert filters and search text into query params

---
 src/components/MonitorList.vue       | 64 +++++++++++++++++++++++++---
 src/components/MonitorListFilter.vue |  3 +-
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index a579316b3..e95207040 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -89,17 +89,11 @@ export default {
     },
     data() {
         return {
-            searchText: "",
             selectMode: false,
             selectAll: false,
             disableSelectAllWatcher: false,
             selectedMonitors: {},
             windowTop: 0,
-            filterState: {
-                status: null,
-                active: null,
-                tags: null,
-            }
         };
     },
     computed: {
@@ -164,6 +158,55 @@ export default {
             return Object.keys(this.selectedMonitors).length;
         },
 
+        /**
+         * Returns applied filters based on query params.
+         * @returns {object} The current filter state.
+         */
+        filterState() {
+            // Since query params are always strings, convert them to the correct type
+            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"] || null;
+            if (active) {
+                if (!Array.isArray(active)) {
+                    active = [ active ];
+                }
+                active = active.map(val => val === "true");
+            }
+            let tags = this.$route.query["tags"] || null;
+            if (tags) {
+                if (!Array.isArray(tags)) {
+                    tags = [ tags ];
+                }
+                tags = tags.map(Number);
+            }
+            return {
+                status,
+                active,
+                tags,
+            };
+        },
+
+        searchText: {
+            get() {
+                return this.$route.query.searchText || "";
+            },
+            set(value) {
+                this.$router.replace({
+                    query: {
+                        ...this.$route.query,
+                        searchText: value,
+                    }
+                });
+            }
+        },
+
         /**
          * Determines if any filters are active.
          * @returns {boolean} True if any filter is active, false otherwise.
@@ -243,7 +286,14 @@ export default {
          * @returns {void}
          */
         updateFilter(newFilter) {
-            this.filterState = newFilter;
+            this.$router.replace({
+                query: {
+                    ...this.$route.query,
+                    status: newFilter.status,
+                    active: newFilter.active,
+                    tags: newFilter.tags,
+                },
+            });
         },
         /**
          * Deselect a monitor
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 330efc9be..247f2e809 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -118,8 +118,9 @@
         </MonitorListFilterDropdown>
         <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
             <template #status>
+                <!-- Prevent rendering Tag component if invalid tag is passed from query params -->
                 <Tag
-                    v-if="filterState.tags?.length === 1"
+                    v-if="filterState.tags?.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
                     :item="tagsList.find(tag => tag.id === filterState.tags[0])"
                     :size="'sm'"
                 />

From 9c50d709f10bb6d6a7d182d0856472fa9f53acba Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sat, 26 Oct 2024 11:34:27 +0545
Subject: [PATCH 02/18] Clarify comment for conditional rendering of Tag

---
 src/components/MonitorListFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 247f2e809..74b5fdf7e 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -118,7 +118,7 @@
         </MonitorListFilterDropdown>
         <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
             <template #status>
-                <!-- Prevent rendering Tag component if invalid tag is passed from query params -->
+                <!-- Prevent rendering Tag component if tagsList has not been fetched or filterState contains invalid tag -->
                 <Tag
                     v-if="filterState.tags?.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
                     :item="tagsList.find(tag => tag.id === filterState.tags[0])"

From f549eaec202449e0dac2abb02f4953c264d36015 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sun, 27 Oct 2024 08:45:22 +0545
Subject: [PATCH 03/18] Add type for filterState

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/MonitorList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index e95207040..540da767c 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -160,7 +160,7 @@ export default {
 
         /**
          * Returns applied filters based on query params.
-         * @returns {object} 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

From 958fc99ea95afdd50e733bf76e5b29a1ee0c5d53 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sun, 27 Oct 2024 08:47:04 +0545
Subject: [PATCH 04/18] Add type for updateFilter param

---
 src/components/MonitorList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index e95207040..28c0cbb17 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -282,7 +282,7 @@ export default {
         },
         /**
          * Update the MonitorList Filter
-         * @param {object} newFilter Object with new filter
+         * @param {{ status: number[], active: bool, tags: number[] }} newFilter Object with new filter
          * @returns {void}
          */
         updateFilter(newFilter) {

From b68cdf70d6338f4e24da1531c8862766b871ebab Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sun, 27 Oct 2024 19:45:43 +0545
Subject: [PATCH 05/18] Preserve query params on route change

---
 src/router.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/router.js b/src/router.js
index bda5078e1..431165ecd 100644
--- a/src/router.js
+++ b/src/router.js
@@ -192,8 +192,24 @@ const routes = [
     },
 ];
 
-export const router = createRouter({
+const router = createRouter({
     linkActiveClass: "active",
     history: createWebHistory(),
     routes,
 });
+
+router.beforeEach((to, from) => {
+    // If the path is same, either the query or has has changed so avoid changing query params
+    // Without this check, modifying any query params will be blocked
+    // Check if redirectedFrom is defined to check if this function has already been run
+    // Without this check, the router will be stuck in an infinite loop
+    if (to.path !== from.path && !to.redirectedFrom) {
+        return {
+            path: to.path,
+            query: { ...to.query, ...from.query },
+            params: to.params,
+        }
+    }
+});
+
+export { router };

From 2e18a19a9e5c000f7900f08cea7c607bf333cb22 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sun, 27 Oct 2024 19:55:21 +0545
Subject: [PATCH 06/18] Delete query params if empty

---
 src/components/MonitorList.vue | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 303e284ce..f91f6878f 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -198,11 +198,15 @@ export default {
                 return this.$route.query.searchText || "";
             },
             set(value) {
+                const newQuery = {
+                    ...this.$route.query,
+                    searchText: value,
+                };
+                if (!value) {
+                    delete newQuery.searchText;
+                }
                 this.$router.replace({
-                    query: {
-                        ...this.$route.query,
-                        searchText: value,
-                    }
+                    query: newQuery,
                 });
             }
         },
@@ -286,13 +290,22 @@ export default {
          * @returns {void}
          */
         updateFilter(newFilter) {
+            let newQuery = {
+                ...this.$route.query,
+                ...newFilter,
+            };
+            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: {
-                    ...this.$route.query,
-                    status: newFilter.status,
-                    active: newFilter.active,
-                    tags: newFilter.tags,
-                },
+                query: newQuery,
             });
         },
         /**

From d9c626d4cc464582c3217a279f02a0ab060a4e1e Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sun, 27 Oct 2024 19:59:16 +0545
Subject: [PATCH 07/18] Fix linting errors

---
 src/router.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/router.js b/src/router.js
index 431165ecd..393708e42 100644
--- a/src/router.js
+++ b/src/router.js
@@ -206,9 +206,12 @@ router.beforeEach((to, from) => {
     if (to.path !== from.path && !to.redirectedFrom) {
         return {
             path: to.path,
-            query: { ...to.query, ...from.query },
+            query: {
+                ...to.query,
+                ...from.query,
+            },
             params: to.params,
-        }
+        };
     }
 });
 

From db1a980e23acfb17d8b5adb2e8d8a5743835d53d Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sun, 27 Oct 2024 20:03:43 +0545
Subject: [PATCH 08/18] Modify only required parts of url

---
 src/router.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/router.js b/src/router.js
index 393708e42..8832eaf9a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -205,12 +205,11 @@ router.beforeEach((to, from) => {
     // Without this check, the router will be stuck in an infinite loop
     if (to.path !== from.path && !to.redirectedFrom) {
         return {
-            path: to.path,
+            ...to,
             query: {
                 ...to.query,
                 ...from.query,
             },
-            params: to.params,
         };
     }
 });

From 177363ac6059964863f53df96033aa489a584499 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Mon, 28 Oct 2024 05:50:50 +0545
Subject: [PATCH 09/18] Revert "Delete query params if empty"

This reverts commit 2e18a19a9e5c000f7900f08cea7c607bf333cb22.
---
 src/components/MonitorList.vue | 33 ++++++++++-----------------------
 1 file changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index f91f6878f..303e284ce 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -198,15 +198,11 @@ export default {
                 return this.$route.query.searchText || "";
             },
             set(value) {
-                const newQuery = {
-                    ...this.$route.query,
-                    searchText: value,
-                };
-                if (!value) {
-                    delete newQuery.searchText;
-                }
                 this.$router.replace({
-                    query: newQuery,
+                    query: {
+                        ...this.$route.query,
+                        searchText: value,
+                    }
                 });
             }
         },
@@ -290,22 +286,13 @@ export default {
          * @returns {void}
          */
         updateFilter(newFilter) {
-            let newQuery = {
-                ...this.$route.query,
-                ...newFilter,
-            };
-            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,
+                query: {
+                    ...this.$route.query,
+                    status: newFilter.status,
+                    active: newFilter.active,
+                    tags: newFilter.tags,
+                },
             });
         },
         /**

From dfb1b977804f17ecd5ca5551e4319fba41f72038 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Mon, 28 Oct 2024 06:01:35 +0545
Subject: [PATCH 10/18] Use default value to remove unused filters from query
 params

---
 src/components/MonitorList.vue       | 17 ++++++++++-------
 src/components/MonitorListFilter.vue |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 303e284ce..6951bbba9 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -164,7 +164,7 @@ export default {
          */
         filterState() {
             // Since query params are always strings, convert them to the correct type
-            let status = this.$route.query["status"] || null;
+            let status = this.$route.query["status"] || [];
             if (status) {
                 if (!Array.isArray(status)) {
                     status = [ status ];
@@ -172,14 +172,14 @@ export default {
                 status = status.map(Number);
             }
             // Casting to boolean does not work here as Boolean("false") === true
-            let active = this.$route.query["active"] || null;
+            let active = this.$route.query["active"] || [];
             if (active) {
                 if (!Array.isArray(active)) {
                     active = [ active ];
                 }
                 active = active.map(val => val === "true");
             }
-            let tags = this.$route.query["tags"] || null;
+            let tags = this.$route.query["tags"] || [];
             if (tags) {
                 if (!Array.isArray(tags)) {
                     tags = [ tags ];
@@ -198,11 +198,14 @@ export default {
                 return this.$route.query.searchText || "";
             },
             set(value) {
+                let newQuery = { ...this.$route.query };
+                if (value === "") {
+                    delete newQuery.searchText;
+                } else {
+                    newQuery.searchText = value;
+                }
                 this.$router.replace({
-                    query: {
-                        ...this.$route.query,
-                        searchText: value,
-                    }
+                    query: newQuery,
                 });
             }
         },
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 74b5fdf7e..930c6ea7a 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -242,7 +242,7 @@ export default {
         },
         clearFilters() {
             this.$emit("updateFilter", {
-                status: null,
+                status: [],
             });
         },
         getExistingTags() {

From baf0a1bdb9617f3c80de68893f8c07835ce21107 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Mon, 28 Oct 2024 06:05:35 +0545
Subject: [PATCH 11/18] Refactor

---
 src/components/MonitorList.vue | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 6951bbba9..272421e02 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -165,27 +165,21 @@ export default {
         filterState() {
             // Since query params are always strings, convert them to the correct type
             let status = this.$route.query["status"] || [];
-            if (status) {
-                if (!Array.isArray(status)) {
-                    status = [ status ];
-                }
-                status = status.map(Number);
+            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"] || [];
-            if (active) {
-                if (!Array.isArray(active)) {
-                    active = [ active ];
-                }
-                active = active.map(val => val === "true");
+            if (!Array.isArray(active)) {
+                active = [ active ];
             }
+            active = active.map(val => val === "true");
             let tags = this.$route.query["tags"] || [];
-            if (tags) {
-                if (!Array.isArray(tags)) {
-                    tags = [ tags ];
-                }
-                tags = tags.map(Number);
+            if (!Array.isArray(tags)) {
+                tags = [ tags ];
             }
+            tags = tags.map(Number);
             return {
                 status,
                 active,

From d552975d6c35daebf44946a00b94a7c9500ae6e7 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Mon, 28 Oct 2024 07:01:07 +0545
Subject: [PATCH 12/18] Display toast on invalid query params

---
 src/components/MonitorList.vue       | 14 ++++++++++---
 src/components/MonitorListFilter.vue | 31 ++++++++++++++++++++++++----
 src/lang/en.json                     |  3 ++-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 272421e02..8b85b9762 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -160,7 +160,7 @@ export default {
 
         /**
          * Returns applied filters based on query params.
-         * @returns {{ status: number[], active: bool, tags: number[] }} The current filter state.
+         * @returns {{ status: number[], active: any[], tags: number[] }} The current filter state.
          */
         filterState() {
             // Since query params are always strings, convert them to the correct type
@@ -174,7 +174,15 @@ export default {
             if (!Array.isArray(active)) {
                 active = [ active ];
             }
-            active = active.map(val => val === "true");
+            active = active.map(val => {
+                if (val === "true") {
+                    return true;
+                }
+                if (val === "false") {
+                    return false;
+                }
+                return val;
+            });
             let tags = this.$route.query["tags"] || [];
             if (!Array.isArray(tags)) {
                 tags = [ tags ];
@@ -279,7 +287,7 @@ export default {
         },
         /**
          * Update the MonitorList Filter
-         * @param {{ status: number[], active: bool, tags: number[] }} newFilter Object with new filter
+         * @param {{ status: number[], active: any[], tags: number[] }} newFilter Object with new filter
          * @returns {void}
          */
         updateFilter(newFilter) {
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 930c6ea7a..251551006 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -80,8 +80,9 @@
         <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
             <template #status>
                 <span v-if="filterState.active?.length === 1">
-                    <span v-if="filterState.active[0]">{{ $t("Running") }}</span>
-                    <span v-else>{{ $t("filterActivePaused") }}</span>
+                    <span v-if="filterState.active[0] === true">{{ $t("Running") }}</span>
+                    <span v-else-if="filterState.active[0] === false">{{ $t("filterActivePaused") }}</span>
+                    <span v-else>{{ $t("Unknown") }}</span>
                 </span>
                 <span v-else>
                     {{ $t("filterActive") }}
@@ -186,10 +187,31 @@ 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) {
@@ -245,11 +267,12 @@ export default {
                 status: [],
             });
         },
-        getExistingTags() {
+        getExistingTags(callback) {
             this.$root.getSocket().emit("getTags", (res) => {
                 if (res.ok) {
                     this.tagsList = res.tags;
                 }
+                callback();
             });
         },
         getTaggedMonitorCount(tag) {
diff --git a/src/lang/en.json b/src/lang/en.json
index 07d3a3d24..9e28ed0f6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1060,5 +1060,6 @@
     "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}"
 }

From 1a70dac69058d9d6610aabbdcd2dd78bf3e817e4 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Fri, 1 Nov 2024 16:25:24 +0545
Subject: [PATCH 13/18] Fix filters active

---
 src/components/MonitorList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 8b85b9762..49be97ed5 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -217,7 +217,7 @@ export default {
          * @returns {boolean} True if any filter is active, false otherwise.
          */
         filtersActive() {
-            return this.filterState.status != null || this.filterState.active != null || this.filterState.tags != null || this.searchText !== "";
+            return this.filterState.status.length > 0 || this.filterState.active.length > 0 || this.filterState.tags.length > 0 || this.searchText !== "";
         }
     },
     watch: {

From 49c20b184017a2a9867e0c27ea6b0401c626f092 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Fri, 1 Nov 2024 16:38:47 +0545
Subject: [PATCH 14/18] Refactor: Remove checks for null

---
 src/components/MonitorList.vue       | 10 ++---
 src/components/MonitorListFilter.vue | 58 +++++++++++-----------------
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 49be97ed5..88450948b 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -294,9 +294,7 @@ export default {
             this.$router.replace({
                 query: {
                     ...this.$route.query,
-                    status: newFilter.status,
-                    active: newFilter.active,
-                    tags: newFilter.tags,
+                    ...newFilter,
                 },
             });
         },
@@ -388,7 +386,7 @@ export default {
 
             // filter by status
             let statusMatch = true;
-            if (this.filterState.status != null && this.filterState.status.length > 0) {
+            if (this.filterState.status.length > 0) {
                 if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
                     monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
                 }
@@ -397,13 +395,13 @@ export default {
 
             // filter by active
             let activeMatch = true;
-            if (this.filterState.active != null && this.filterState.active.length > 0) {
+            if (this.filterState.active.length > 0) {
                 activeMatch = this.filterState.active.includes(monitor.active);
             }
 
             // filter by tags
             let tagsMatch = true;
-            if (this.filterState.tags != null && this.filterState.tags.length > 0) {
+            if (this.filterState.tags.length > 0) {
                 tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs
                     .filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
                     .length > 0;
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 251551006..5f223d60c 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -14,10 +14,10 @@
             <font-awesome-icon v-if="numFiltersActive > 0" icon="times" />
         </button>
         <MonitorListFilterDropdown
-            :filterActive="filterState.status?.length > 0"
+            :filterActive="filterState.status.length > 0"
         >
             <template #status>
-                <Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
+                <Status v-if="filterState.status.length === 1" :status="filterState.status[0]" />
                 <span v-else>
                     {{ $t('Status') }}
                 </span>
@@ -29,7 +29,7 @@
                             <Status :status="1" />
                             <span class="ps-3">
                                 {{ $root.stats.up }}
-                                <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(1)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -42,7 +42,7 @@
                             <Status :status="0" />
                             <span class="ps-3">
                                 {{ $root.stats.down }}
-                                <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(0)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -55,7 +55,7 @@
                             <Status :status="2" />
                             <span class="ps-3">
                                 {{ $root.stats.pending }}
-                                <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(2)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -68,7 +68,7 @@
                             <Status :status="3" />
                             <span class="ps-3">
                                 {{ $root.stats.maintenance }}
-                                <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
+                                <span v-if="filterState.status.includes(3)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -77,9 +77,9 @@
                 </li>
             </template>
         </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
+        <MonitorListFilterDropdown :filterActive="filterState.active.length > 0">
             <template #status>
-                <span v-if="filterState.active?.length === 1">
+                <span v-if="filterState.active.length === 1">
                     <span v-if="filterState.active[0] === true">{{ $t("Running") }}</span>
                     <span v-else-if="filterState.active[0] === false">{{ $t("filterActivePaused") }}</span>
                     <span v-else>{{ $t("Unknown") }}</span>
@@ -95,7 +95,7 @@
                             <span>{{ $t("Running") }}</span>
                             <span class="ps-3">
                                 {{ $root.stats.active }}
-                                <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
+                                <span v-if="filterState.active.includes(true)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -108,7 +108,7 @@
                             <span>{{ $t("filterActivePaused") }}</span>
                             <span class="ps-3">
                                 {{ $root.stats.pause }}
-                                <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
+                                <span v-if="filterState.active.includes(false)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -117,11 +117,11 @@
                 </li>
             </template>
         </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
+        <MonitorListFilterDropdown :filterActive="filterState.tags.length > 0">
             <template #status>
                 <!-- Prevent rendering Tag component if tagsList has not been fetched or filterState contains invalid tag -->
                 <Tag
-                    v-if="filterState.tags?.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
+                    v-if="filterState.tags.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
                     :item="tagsList.find(tag => tag.id === filterState.tags[0])"
                     :size="'sm'"
                 />
@@ -136,7 +136,7 @@
                             <span><Tag :item="tag" :size="'sm'" /></span>
                             <span class="ps-3">
                                 {{ getTaggedMonitorCount(tag) }}
-                                <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
+                                <span v-if="filterState.tags.includes(tag.id)" class="px-1 filter-active">
                                     <font-awesome-icon icon="check" />
                                 </span>
                             </span>
@@ -181,7 +181,7 @@ export default {
             let num = 0;
 
             Object.values(this.filterState).forEach(item => {
-                if (item != null && item.length > 0) {
+                if (item.length > 0) {
                     num += 1;
                 }
             });
@@ -219,14 +219,10 @@ export default {
                 ...this.filterState
             };
 
-            if (newFilter.status == null) {
-                newFilter.status = [ status ];
+            if (newFilter.status.includes(status)) {
+                newFilter.status = newFilter.status.filter(item => item !== status);
             } else {
-                if (newFilter.status.includes(status)) {
-                    newFilter.status = newFilter.status.filter(item => item !== status);
-                } else {
-                    newFilter.status.push(status);
-                }
+                newFilter.status.push(status);
             }
             this.$emit("updateFilter", newFilter);
         },
@@ -235,14 +231,10 @@ export default {
                 ...this.filterState
             };
 
-            if (newFilter.active == null) {
-                newFilter.active = [ active ];
+            if (newFilter.active.includes(active)) {
+                newFilter.active = newFilter.active.filter(item => item !== active);
             } else {
-                if (newFilter.active.includes(active)) {
-                    newFilter.active = newFilter.active.filter(item => item !== active);
-                } else {
-                    newFilter.active.push(active);
-                }
+                newFilter.active.push(active);
             }
             this.$emit("updateFilter", newFilter);
         },
@@ -251,14 +243,10 @@ export default {
                 ...this.filterState
             };
 
-            if (newFilter.tags == null) {
-                newFilter.tags = [ tag.id ];
+            if (newFilter.tags.includes(tag.id)) {
+                newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
             } else {
-                if (newFilter.tags.includes(tag.id)) {
-                    newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
-                } else {
-                    newFilter.tags.push(tag.id);
-                }
+                newFilter.tags.push(tag.id);
             }
             this.$emit("updateFilter", newFilter);
         },

From 7be040472af08796aec2aa806e262ad7a55af296 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Fri, 1 Nov 2024 16:39:31 +0545
Subject: [PATCH 15/18] Bugfix: Preserve query params when navigating to same
 path

---
 src/router.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router.js b/src/router.js
index 8832eaf9a..9a2db859d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -203,7 +203,7 @@ router.beforeEach((to, from) => {
     // Without this check, modifying any query params will be blocked
     // Check if redirectedFrom is defined to check if this function has already been run
     // Without this check, the router will be stuck in an infinite loop
-    if (to.path !== from.path && !to.redirectedFrom) {
+    if (to.fullPath !== from.fullPath && !to.redirectedFrom) {
         return {
             ...to,
             query: {

From 7901d7666eb54f4968776029be26b5af608baaa4 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sat, 16 Nov 2024 06:47:43 +0545
Subject: [PATCH 16/18] BugFix: Clear Button Not working

---
 src/components/MonitorListFilter.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index 5f223d60c..100d1bc64 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -253,6 +253,8 @@ export default {
         clearFilters() {
             this.$emit("updateFilter", {
                 status: [],
+                active: [],
+                tags: [],
             });
         },
         getExistingTags(callback) {

From 24ffef5d69e5c090b116dfe7b2366d3bb1bb5f44 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sat, 16 Nov 2024 06:49:42 +0545
Subject: [PATCH 17/18] Bugfix: Broke functionality in previous commit

---
 src/router.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/router.js b/src/router.js
index 9a2db859d..9e6fcdd9c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -199,19 +199,22 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from) => {
-    // If the path is same, either the query or has has changed so avoid changing query params
-    // Without this check, modifying any query params will be blocked
     // Check if redirectedFrom is defined to check if this function has already been run
     // Without this check, the router will be stuck in an infinite loop
-    if (to.fullPath !== from.fullPath && !to.redirectedFrom) {
-        return {
-            ...to,
-            query: {
-                ...to.query,
-                ...from.query,
-            },
-        };
+    if (to.redirectedFrom) return;
+
+    // If the user is navigating to same page but to.query is empty, they have clicked on the same link
+    // For example: Clicked on Add monitor twice
+    if (to.path === from.path && Object.keys(to.query).length !== 0) {
+        return;
     }
+    return {
+        ...to,
+        query: {
+            ...to.query,
+            ...from.query,
+        },
+    };
 });
 
 export { router };

From 9b9233f192cbb76388023aaa7629d4b4bd83cc75 Mon Sep 17 00:00:00 2001
From: Suven-p <pandeysuven@gmail.com>
Date: Sat, 16 Nov 2024 06:56:53 +0545
Subject: [PATCH 18/18] Refactor: Linting errors

---
 src/router.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/router.js b/src/router.js
index 9e6fcdd9c..12300b5bf 100644
--- a/src/router.js
+++ b/src/router.js
@@ -201,7 +201,9 @@ const router = createRouter({
 router.beforeEach((to, from) => {
     // Check if redirectedFrom is defined to check if this function has already been run
     // Without this check, the router will be stuck in an infinite loop
-    if (to.redirectedFrom) return;
+    if (to.redirectedFrom) {
+        return;
+    }
 
     // If the user is navigating to same page but to.query is empty, they have clicked on the same link
     // For example: Clicked on Add monitor twice