ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-02-17 09:05:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Fix: Remove URL parameter access by property name

Browse source
This commit is contained in:
NihadBadalov 2024-03-11 23:12:39 +01:00
parent 4b0ce4857e
commit 57f79d231b
2 changed files with 53 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/MonitorList.vue
View file

@ -95,22 +95,6 @@ export default {
disableSelectAllWatcher: false, disableSelectAllWatcher: false,
selectedMonitors: {}, selectedMonitors: {},
windowTop: 0, windowTop: 0,
statusStates: {
up: 1,
down: 0,
pending: 2,
maintenance: 3,
1: "up",
0: "down",
2: "pending",
3: "maintenance",
},
activeStates: {
running: true,
paused: false,
true: "running",
false: "paused",
},
}; };
}, },
computed: { computed: {
@ -233,26 +217,27 @@ export default {
}); });
})(); })();
const fetchedTagNames = tagParams const fetchedTagIDs = tagParams
? tagParams ? tagParams
.split(",") .split(",")
.map(identifier => { .map(identifier => {
const tagID = parseInt(identifier, 10); const tagID = parseInt(identifier, 10);
return tags if (isNaN(tagID)) {
.find(t => t.name === identifier || t.id === tagID) return;
?.name ?? 0; }
return tags.find(t => t.tag_id === tagID)?.id ?? 1;
}) })
.filter(tagID => tagID !== 0) .filter(tagID => tagID !== 0)
: undefined; : undefined;
this.updateFilter({ this.updateFilter({
status: statusParams ? statusParams.split(",").map( status: statusParams ? statusParams.split(",").map(
status => this.statusStates[this.statusStates[status.trim()]] status => status.trim()
) : queryParams?.["status"], ) : queryParams?.["status"],
active: activeParams ? activeParams.split(",").map( active: activeParams ? activeParams.split(",").map(
active => this.activeStates[this.activeStates[active.trim()]] active => active.trim()
) : queryParams?.["active"], ) : queryParams?.["active"],
tags: tagParams ? fetchedTagNames : queryParams?.["tags"], tags: tagParams ? fetchedTagIDs : queryParams?.["tags"],
}); });
}, },
beforeUnmount() { beforeUnmount() {
@ -398,7 +383,7 @@ export default {
if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) { if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
monitor.status = this.$root.lastHeartbeatList[monitor.id].status; monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
} }
statusMatch = this.$router.currentRoute.value.query?.status.includes(this.statusStates[monitor.status]); statusMatch = this.$router.currentRoute.value.query?.status.includes(monitor.status);
} }
// filter by active // filter by active
@ -411,9 +396,8 @@ export default {
let tagsMatch = true; let tagsMatch = true;
const tagsInURL = this.$router.currentRoute.value.query?.tags?.split(",") || []; const tagsInURL = this.$router.currentRoute.value.query?.tags?.split(",") || [];
if (this.$router.currentRoute.value.query?.tags != null && this.$router.currentRoute.value.query?.tags.length > 0) { if (this.$router.currentRoute.value.query?.tags != null && this.$router.currentRoute.value.query?.tags.length > 0) {
tagsMatch = monitor.tags.map(tag => tag.name) // convert to array of tag names const monitorTagIds = monitor.tags.map(tag => tag.tag_id);
.filter(monitorTagId => tagsInURL.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags tagsMatch = tagsInURL.map(Number).some(tagId => monitorTagIds.includes(tagId));
.length > 0;
} }
return searchTextMatch && statusMatch && activeMatch && tagsMatch; return searchTextMatch && statusMatch && activeMatch && tagsMatch;

86
src/components/MonitorListFilter.vue
View file

@ -29,7 +29,10 @@
<Status :status="1" /> <Status :status="1" />
<span class="ps-3"> <span class="ps-3">
{{ $root.stats.up }} {{ $root.stats.up }}
<span v-if="$router.currentRoute.value.query?.status?.includes('up')" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.status?.includes('1')"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -42,7 +45,10 @@
<Status :status="0" /> <Status :status="0" />
<span class="ps-3"> <span class="ps-3">
{{ $root.stats.down }} {{ $root.stats.down }}
<span v-if="$router.currentRoute.value.query?.status?.includes('down')" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.status?.includes('0')"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -55,7 +61,10 @@
<Status :status="2" /> <Status :status="2" />
<span class="ps-3"> <span class="ps-3">
{{ $root.stats.pending }} {{ $root.stats.pending }}
<span v-if="$router.currentRoute.value.query?.status?.includes('pending')" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.status?.includes('2')"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -68,7 +77,10 @@
<Status :status="3" /> <Status :status="3" />
<span class="ps-3"> <span class="ps-3">
{{ $root.stats.maintenance }} {{ $root.stats.maintenance }}
<span v-if="$router.currentRoute.value.query?.status?.includes('maintenance')" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.status?.includes('3')"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -94,7 +106,10 @@
<span>{{ $t("Running") }}</span> <span>{{ $t("Running") }}</span>
<span class="ps-3"> <span class="ps-3">
{{ $root.stats.active }} {{ $root.stats.active }}
<span v-if="$router.currentRoute.value.query?.active?.includes(true)" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.active?.includes(true)"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -107,7 +122,10 @@
<span>{{ $t("filterActivePaused") }}</span> <span>{{ $t("filterActivePaused") }}</span>
<span class="ps-3"> <span class="ps-3">
{{ $root.stats.pause }} {{ $root.stats.pause }}
<span v-if="$router.currentRoute.value.query?.active?.includes(false)" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.active?.includes(false)"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -119,9 +137,8 @@
<MonitorListFilterDropdown :filterActive="$router.currentRoute.value.query?.tags?.length > 0"> <MonitorListFilterDropdown :filterActive="$router.currentRoute.value.query?.tags?.length > 0">
<template #status> <template #status>
<Tag <Tag
v-if="$router.currentRoute.value.query?.tags?.length === 1" v-if="$router.currentRoute.value.query?.tags?.split?.(',')?.length === 1 && tagsList.find(tag => tag.id === +$router.currentRoute.value.query?.tags?.split?.(',')?.[0])"
:item="tagsList.find(tag => tag.id === $router.currentRoute.value.query?.tags[0])" :item="tagsList.find(tag => tag.id === +$router.currentRoute.value.query?.tags?.split?.(',')?.[0])" :size="'sm'"
:size="'sm'"
/> />
<span v-else> <span v-else>
{{ $t('Tags') }} {{ $t('Tags') }}
@ -131,10 +148,15 @@
<li v-for="tag in tagsList" :key="tag.id"> <li v-for="tag in tagsList" :key="tag.id">
<div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)"> <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
<div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center justify-content-between">
<span><Tag :item="tag" :size="'sm'" /></span> <span>
<Tag :item="tag" :size="'sm'" />
</span>
<span class="ps-3"> <span class="ps-3">
{{ getTaggedMonitorCount(tag) }} {{ getTaggedMonitorCount(tag) }}
<span v-if="$router.currentRoute.value.query?.tags?.split(',').includes(tag.name)" class="px-1 filter-active"> <span
v-if="$router.currentRoute.value.query?.tags?.split(',').includes(tag.id)"
class="px-1 filter-active"
>
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -166,28 +188,13 @@ export default {
data() { data() {
return { return {
tagsList: [], tagsList: [],
filterNames: [
"status",
"active",
"tags",
],
}; };
}, },
computed: { computed: {
numFiltersActive() { numFiltersActive() {
let num = 0; return this.$router.currentRoute.value.query.status?.length > 0 ? 1 : 0 +
this.$router.currentRoute.value.query.active?.length > 0 ? 1 : 0 +
Object.values( this.$router.currentRoute.value.query.tags?.length > 0 ? 1 : 0;
Array.from(Object.entries(this.$router.currentRoute.value.query)).filter(
e => this.filterNames.includes(e[0])
)
).forEach(item => {
if (item != null && item.length > 0) {
num += 1;
}
});
return num;
} }
}, },
mounted() { mounted() {
@ -210,19 +217,10 @@ export default {
...this.getActiveFilters(), ...this.getActiveFilters(),
}; };
const statusStates = { if (newFilter.status.includes("" + status)) {
1: "up", newFilter.status = newFilter.status.filter(item => item !== "" + status);
0: "down",
2: "pending",
3: "maintenance",
};
const finalStatus = statusStates[status];
if (newFilter.status.includes("" + finalStatus)) {
newFilter.status = newFilter.status.filter(item => item !== "" + finalStatus);
} else { } else {
newFilter.status.push(finalStatus); newFilter.status.push(status);
} }
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
@ -245,10 +243,10 @@ export default {
...this.getActiveFilters(), ...this.getActiveFilters(),
}; };
if (newFilter.tags.includes("" + tag.name)) { if (newFilter.tags.includes("" + tag.id)) {
newFilter.tags = newFilter.tags.filter(item => item !== "" + tag.name); newFilter.tags = newFilter.tags.filter(item => item !== "" + tag.id);
} else { } else {
newFilter.tags.push(tag.name); newFilter.tags.push(tag.id);
} }
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);