Merge d552975d6c 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,60 @@ export default {
             return Object.keys(this.selectedMonitors).length;
         },
 
+        /**
+         * Returns applied filters based on query params.
+         * @returns {{ status: number[], active: any[], 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"] || [];
+            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 (!Array.isArray(active)) {
+                active = [ active ];
+            }
+            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 ];
+            }
+            tags = tags.map(Number);
+            return {
+                status,
+                active,
+                tags,
+            };
+        },
+
+        searchText: {
+            get() {
+                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: newQuery,
+                });
+            }
+        },
+
         /**
          * Determines if any filters are active.
          * @returns {boolean} True if any filter is active, false otherwise.
@@ -239,11 +287,18 @@ export default {
         },
         /**
          * Update the MonitorList Filter
-         * @param {object} newFilter Object with new filter
+         * @param {{ status: number[], active: any[], tags: number[] }} newFilter Object with new filter
          * @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

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") }}
@@ -118,8 +119,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'"
                 />
@@ -185,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) {
@@ -241,14 +264,15 @@ export default {
         },
         clearFilters() {
             this.$emit("updateFilter", {
-                status: null,
+                status: [],
             });
         },
-        getExistingTags() {
+        getExistingTags(callback) {
             this.$root.getSocket().emit("getTags", (res) => {
                 if (res.ok) {
                     this.tagsList = res.tags;
                 }
+                callback();
             });
         },
         getTaggedMonitorCount(tag) {

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}"
 }

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 };