Display toast on invalid query params

This commit is contained in:
Suven-p 2024-10-28 07:01:07 +05:45
parent baf0a1bdb9
commit d552975d6c
3 changed files with 40 additions and 8 deletions

View file

@ -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) {

View file

@ -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) {

View file

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