Merge 1b379690dd into 277d6fe0ce

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,59 @@ export default {
             return Object.keys(this.selectedMonitors).length;
         },
 
+        /**
+         * Returns applied filters based on query params.
+         * @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"] || 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) {
+                const newQuery = {
+                    ...this.$route.query,
+                    searchText: value,
+                };
+                if (!value) {
+                    delete newQuery.searchText;
+                }
+                this.$router.replace({
+                    query: newQuery,
+                });
+            }
+        },
+
         /**
          * Determines if any filters are active.
          * @returns {boolean} True if any filter is active, false otherwise.
@@ -239,11 +286,27 @@ 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) {
-            this.filterState = 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,
+            });
         },
         /**
          * Deselect a monitor

src/components/MonitorListFilter.vue

@@ -118,8 +118,9 @@
         </MonitorListFilterDropdown>
         <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"
+                    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'"
                 />

src/router.js

@@ -192,8 +192,26 @@ 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 {
+            ...to,
+            query: {
+                ...to.query,
+                ...from.query,
+            },
+        };
+    }
+});
+
+export { router };