Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge f10175fe7b into 29575343ca

Browse Source
NihadBadalov 1 month ago committed by GitHub
parent 29575343ca f10175fe7b
commit cdef8ec751
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 147 additions and 76 deletions
Show Stats Download Patch File Download Diff File

80
src/components/MonitorList.vue
Unescape View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="header-filter"> <div class="header-filter">
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" /> <MonitorListFilter @update-filter="updateFilter" />
</div> </div>
<!-- Selection Controls --> <!-- Selection Controls -->
@ -95,11 +95,6 @@ export default {
disableSelectAllWatcher: false, disableSelectAllWatcher: false,
selectedMonitors: {}, selectedMonitors: {},
windowTop: 0, windowTop: 0,
filterState: {
status: null,
active: null,
tags: null,
}
}; };
}, },
computed: { computed: {
@ -169,7 +164,7 @@ export default {
* @returns {boolean} True if any filter is active, false otherwise. * @returns {boolean} True if any filter is active, false otherwise.
*/ */
filtersActive() { filtersActive() {
return this.filterState.status != null || this.filterState.active != null || this.filterState.tags != null || this.searchText !== ""; return this.$router.currentRoute.value.query?.status != null || this.$router.currentRoute.value.query?.active != null || this.$router.currentRoute.value.query?.tags != null || this.searchText !== "";
} }
}, },
watch: { watch: {
@ -204,8 +199,46 @@ export default {
} }
}, },
}, },
mounted() { async mounted() {
window.addEventListener("scroll", this.onScroll); window.addEventListener("scroll", this.onScroll);
const queryParams = this.$router.currentRoute.value.query;
const statusParams = queryParams?.["status"];
const activeParams = queryParams?.["active"];
const tagParams = queryParams?.["tags"];
const tags = await (() => {
return new Promise((resolve) => {
this.$root.getSocket().emit("getTags", (res) => {
if (res.ok) {
resolve(res.tags);
}
});
});
})();
const fetchedTagIDs = tagParams
? tagParams
.split(",")
.map(identifier => {
const tagID = parseInt(identifier, 10);
if (isNaN(tagID)) {
return;
}
return tags.find(t => t.tag_id === tagID)?.id ?? 1;
})
.filter(tagID => tagID !== 0)
: undefined;
this.updateFilter({
status: statusParams ? statusParams.split(",").map(
status => status.trim()
) : queryParams?.["status"],
active: activeParams ? activeParams.split(",").map(
active => active.trim()
) : queryParams?.["active"],
tags: tagParams ? fetchedTagIDs : queryParams?.["tags"],
});
}, },
beforeUnmount() { beforeUnmount() {
window.removeEventListener("scroll", this.onScroll); window.removeEventListener("scroll", this.onScroll);
@ -243,7 +276,20 @@ export default {
* @returns {void} * @returns {void}
*/ */
updateFilter(newFilter) { updateFilter(newFilter) {
this.filterState = newFilter; const newQuery = { ...this.$router.currentRoute.value.query };
for (const [ key, value ] of Object.entries(newFilter)) {
if (!value
|| (value instanceof Array && value.length === 0)) {
delete newQuery[key];
continue;
}
newQuery[key] = value instanceof Array
? value.length > 0 ? value.join(",") : null
: value;
}
this.$router.push({ query: newQuery });
}, },
/** /**
* Deselect a monitor * Deselect a monitor
@ -333,25 +379,25 @@ export default {
// filter by status // filter by status
let statusMatch = true; let statusMatch = true;
if (this.filterState.status != null && this.filterState.status.length > 0) { if (this.$router.currentRoute.value.query?.status != null && this.$router.currentRoute.value.query?.status.length > 0) {
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.filterState.status.includes(monitor.status); statusMatch = this.$router.currentRoute.value.query?.status.includes(monitor.status);
} }
// filter by active // filter by active
let activeMatch = true; let activeMatch = true;
if (this.filterState.active != null && this.filterState.active.length > 0) { if (this.$router.currentRoute.value.query?.active != null && this.$router.currentRoute.value.query?.active.length > 0) {
activeMatch = this.filterState.active.includes(monitor.active); activeMatch = this.$router.currentRoute.value.query?.active.includes(monitor.active);
} }
// filter by tags // filter by tags
let tagsMatch = true; let tagsMatch = true;
if (this.filterState.tags != null && this.filterState.tags.length > 0) { const tagsInURL = this.$router.currentRoute.value.query?.tags?.split(",") || [];
tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs if (this.$router.currentRoute.value.query?.tags != null && this.$router.currentRoute.value.query?.tags.length > 0) {
.filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags const monitorTagIds = monitor.tags.map(tag => tag.tag_id);
.length > 0; tagsMatch = tagsInURL.map(Number).some(tagId => monitorTagIds.includes(tagId));
} }
return searchTextMatch && statusMatch && activeMatch && tagsMatch; return searchTextMatch && statusMatch && activeMatch && tagsMatch;

126
src/components/MonitorListFilter.vue
Unescape View File

@ -14,10 +14,10 @@
<font-awesome-icon v-if="numFiltersActive > 0" icon="times" /> <font-awesome-icon v-if="numFiltersActive > 0" icon="times" />
</button> </button>
<MonitorListFilterDropdown <MonitorListFilterDropdown
:filterActive="filterState.status?.length > 0" :filterActive="$router.currentRoute.value.query?.status?.length > 0"
> >
<template #status> <template #status>
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" /> <Status v-if="$router.currentRoute.value.query?.status?.length === 1" :status="$router.currentRoute.value.query?.status[0]" />
<span v-else> <span v-else>
{{ $t('Status') }} {{ $t('Status') }}
</span> </span>
@ -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="filterState.status?.includes(1)" 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="filterState.status?.includes(0)" 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="filterState.status?.includes(2)" 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="filterState.status?.includes(3)" 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>
@ -77,10 +89,10 @@
</li> </li>
</template> </template>
</MonitorListFilterDropdown> </MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.active?.length > 0"> <MonitorListFilterDropdown :filterActive="$router.currentRoute.value.query?.active?.length > 0">
<template #status> <template #status>
<span v-if="filterState.active?.length === 1"> <span v-if="$router.currentRoute.value.query?.active?.length === 1">
<span v-if="filterState.active[0]">{{ $t("Running") }}</span> <span v-if="$router.currentRoute.value.query?.active[0]">{{ $t("Running") }}</span>
<span v-else>{{ $t("filterActivePaused") }}</span> <span v-else>{{ $t("filterActivePaused") }}</span>
</span> </span>
<span v-else> <span v-else>
@ -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="filterState.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="filterState.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>
@ -116,12 +134,11 @@
</li> </li>
</template> </template>
</MonitorListFilterDropdown> </MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0"> <MonitorListFilterDropdown :filterActive="$router.currentRoute.value.query?.tags?.length > 0">
<template #status> <template #status>
<Tag <Tag
v-if="filterState.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 === filterState.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="filterState.tags?.includes(tag.id)" 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>
@ -162,12 +184,6 @@ export default {
Status, Status,
Tag, Tag,
}, },
props: {
filterState: {
type: Object,
required: true,
}
},
emits: [ "updateFilter" ], emits: [ "updateFilter" ],
data() { data() {
return { return {
@ -176,72 +192,68 @@ export default {
}, },
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.filterState).forEach(item => { this.$router.currentRoute.value.query.tags?.length > 0 ? 1 : 0;
if (item != null && item.length > 0) {
num += 1;
}
});
return num;
} }
}, },
mounted() { mounted() {
this.getExistingTags(); this.getExistingTags();
}, },
methods: { methods: {
getActiveFilters: function () {
const filters = this.$router.currentRoute.value.query;
return {
status: filters["status"] ? filters["status"].split(",") : [],
active: filters["active"] ? filters["active"].split(",") : [],
tags: filters["tags"] ? filters["tags"].split(",") : [],
};
},
toggleStatusFilter(status) { toggleStatusFilter(status) {
let newFilter = { let newFilter = {
...this.filterState ...this.getActiveFilters(),
}; };
if (newFilter.status == null) { if (newFilter.status.includes("" + status)) {
newFilter.status = [ status ]; newFilter.status = newFilter.status.filter(item => item !== "" + status);
} else { } else {
if (newFilter.status.includes(status)) { newFilter.status.push(status);
newFilter.status = newFilter.status.filter(item => item !== status);
} else {
newFilter.status.push(status);
}
} }
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
}, },
toggleActiveFilter(active) { toggleActiveFilter(active) {
let newFilter = { let newFilter = {
...this.filterState ...this.getActiveFilters(),
}; };
if (newFilter.active == null) { if (newFilter.active.includes("" + active)) {
newFilter.active = [ active ]; newFilter.active = newFilter.active.filter(item => item !== "" + active);
} else { } else {
if (newFilter.active.includes(active)) { newFilter.active.push(active);
newFilter.active = newFilter.active.filter(item => item !== active);
} else {
newFilter.active.push(active);
}
} }
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
}, },
toggleTagFilter(tag) { toggleTagFilter(tag) {
let newFilter = { let newFilter = {
...this.filterState ...this.getActiveFilters(),
}; };
if (newFilter.tags == null) { if (newFilter.tags.includes("" + tag.id)) {
newFilter.tags = [ tag.id ]; newFilter.tags = newFilter.tags.filter(item => item !== "" + tag.id);
} else { } else {
if (newFilter.tags.includes(tag.id)) { newFilter.tags.push(tag.id);
newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
} else {
newFilter.tags.push(tag.id);
}
} }
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
}, },
clearFilters() { clearFilters() {
this.$emit("updateFilter", { this.$emit("updateFilter", {
status: null, status: undefined,
active: undefined,
tags: undefined,
}); });
}, },
getExistingTags() { getExistingTags() {

16
src/components/TagEditDialog.vue
Unescape View File

@ -17,11 +17,15 @@
v-model="tag.name" v-model="tag.name"
type="text" type="text"
class="form-control" class="form-control"
:class="{'is-invalid': nameInvalid}" :class="{'is-invalid': nameInvalid || nameContainsComma}"
required required
> >
<div class="invalid-feedback"> <div class="invalid-feedback">
{{ $t("Tag with this name already exist.") }} {{
nameInvalid
? $t("Tag with this name already exist.")
: $t("Tag name contains a comma.")
}}
</div> </div>
</div> </div>
@ -160,6 +164,7 @@ export default {
addingMonitor: [], addingMonitor: [],
selectedAddMonitor: null, selectedAddMonitor: null,
nameInvalid: false, nameInvalid: false,
nameContainsComma: false,
}; };
}, },
@ -260,6 +265,13 @@ export default {
this.nameInvalid = true; this.nameInvalid = true;
return false; return false;
} }
this.nameContainsComma = false;
if (this.tag?.name?.includes(",")) {
this.nameContainsComma = true;
return false;
}
return true; return true;
}, },

1
src/lang/en.json
Unescape View File

@ -182,6 +182,7 @@
"Add New below or Select...": "Add New below or Select…", "Add New below or Select...": "Add New below or Select…",
"Tag with this name already exist.": "Tag with this name already exists.", "Tag with this name already exist.": "Tag with this name already exists.",
"Tag with this value already exist.": "Tag with this value already exists.", "Tag with this value already exist.": "Tag with this value already exists.",
"Tag name contains a comma.": "Tag name contains a comma.",
"color": "Color", "color": "Color",
"value (optional)": "value (optional)", "value (optional)": "value (optional)",
"Gray": "Gray", "Gray": "Gray",

Write Preview
Loading…
Cancel
Save