ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-23 23:04:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Feat: Handle monitor filter state in URL

Browse source
This commit is contained in:
NihadBadalov 2024-02-17 18:30:39 +01:00
parent d3a5b224cc
commit 3d4fb163d5
2 changed files with 120 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/components/MonitorList.vue
View file

@ -26,7 +26,7 @@
</div>
</div>
<div class="header-filter">
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
<MonitorListFilter @update-filter="updateFilter" />
</div>
<!-- Selection Controls -->
@ -95,11 +95,22 @@ export default {
disableSelectAllWatcher: false,
selectedMonitors: {},
windowTop: 0,
filterState: {
status: null,
active: null,
tags: null,
}
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: {
@ -169,7 +180,7 @@ export default {
* @returns {boolean} True if any filter is active, false otherwise.
*/
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: {
@ -207,21 +218,10 @@ export default {
async mounted() {
window.addEventListener("scroll", this.onScroll);
const statusParams = this.$router.currentRoute.value.query["status"];
const activeParams = this.$router.currentRoute.value.query["active"];
const tagParams = this.$router.currentRoute.value.query["tags"];
const statusStates = {
up: 1,
down: 0,
pending: 2,
maintenance: 3,
};
const activeStates = {
running: true,
paused: false,
};
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) => {
@ -233,24 +233,26 @@ export default {
});
})();
const fetchedTagIDs = tagParams
const fetchedTagNames = tagParams
? tagParams
.split(",")
.map(identifier => {
const tagID = parseInt(identifier, 10);
return tags
.find(t => t.name === identifier || t.id === tagID)
?.id ?? 0;
});
?.name ?? 0;
})
.filter(tagID => tagID !== 0)
: undefined;
this.updateFilter({
...this.filterState,
status: statusParams ? statusParams.split(",").map(
status => statusStates[status.trim()]
) : this.filterState["status"],
status => this.statusStates[this.statusStates[status.trim()]]
) : queryParams?.["status"],
active: activeParams ? activeParams.split(",").map(
active => activeStates[active.trim()]
) : this.filterState["active"],
tags: tagParams ? fetchedTagIDs : this.filterState["tags"],
active => this.activeStates[this.activeStates[active.trim()]]
) : queryParams?.["active"],
tags: tagParams ? fetchedTagNames : queryParams?.["tags"],
});
},
beforeUnmount() {
@ -289,7 +291,20 @@ export default {
* @returns {void}
*/
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
@ -379,24 +394,25 @@ export default {
// filter by status
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]) {
monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
}
statusMatch = this.filterState.status.includes(monitor.status);
statusMatch = this.$router.currentRoute.value.query?.status.includes(this.statusStates[monitor.status]);
}
// filter by active
let activeMatch = true;
if (this.filterState.active != null && this.filterState.active.length > 0) {
activeMatch = this.filterState.active.includes(monitor.active);
if (this.$router.currentRoute.value.query?.active != null && this.$router.currentRoute.value.query?.active.length > 0) {
activeMatch = this.$router.currentRoute.value.query?.active.includes(monitor.active);
}
// filter by tags
let tagsMatch = true;
if (this.filterState.tags != null && this.filterState.tags.length > 0) {
tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs
.filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
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) {
tagsMatch = monitor.tags.map(tag => tag.name) // convert to array of tag names
.filter(monitorTagId => tagsInURL.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
.length > 0;
}

104
src/components/MonitorListFilter.vue
View file

@ -14,10 +14,10 @@
<font-awesome-icon v-if="numFiltersActive > 0" icon="times" />
</button>
<MonitorListFilterDropdown
:filterActive="filterState.status?.length > 0"
:filterActive="this.$router.currentRoute.value.query?.status?.length > 0"
>
<template #status>
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
<Status v-if="this.$router.currentRoute.value.query?.status?.length === 1" :status="this.$router.currentRoute.value.query?.status[0]" />
<span v-else>
{{ $t('Status') }}
</span>
@ -29,7 +29,7 @@
<Status :status="1" />
<span class="ps-3">
{{ $root.stats.up }}
<span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.status?.includes('up')" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -42,7 +42,7 @@
<Status :status="0" />
<span class="ps-3">
{{ $root.stats.down }}
<span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.status?.includes('down')" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -55,7 +55,7 @@
<Status :status="2" />
<span class="ps-3">
{{ $root.stats.pending }}
<span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.status?.includes('pending')" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -68,7 +68,7 @@
<Status :status="3" />
<span class="ps-3">
{{ $root.stats.maintenance }}
<span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.status?.includes('maintenance')" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -77,10 +77,10 @@
</li>
</template>
</MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
<MonitorListFilterDropdown :filterActive="this.$router.currentRoute.value.query?.active?.length > 0">
<template #status>
<span v-if="filterState.active?.length === 1">
<span v-if="filterState.active[0]">{{ $t("Running") }}</span>
<span v-if="this.$router.currentRoute.value.query?.active?.length === 1">
<span v-if="this.$router.currentRoute.value.query?.active[0]">{{ $t("Running") }}</span>
<span v-else>{{ $t("filterActivePaused") }}</span>
</span>
<span v-else>
@ -94,7 +94,7 @@
<span>{{ $t("Running") }}</span>
<span class="ps-3">
{{ $root.stats.active }}
<span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.active?.includes(true)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -107,7 +107,7 @@
<span>{{ $t("filterActivePaused") }}</span>
<span class="ps-3">
{{ $root.stats.pause }}
<span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.active?.includes(false)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -116,11 +116,11 @@
</li>
</template>
</MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
<MonitorListFilterDropdown :filterActive="this.$router.currentRoute.value.query?.tags?.length > 0">
<template #status>
<Tag
v-if="filterState.tags?.length === 1"
:item="tagsList.find(tag => tag.id === filterState.tags[0])"
v-if="this.$router.currentRoute.value.query?.tags?.length === 1"
:item="tagsList.find(tag => tag.id === this.$router.currentRoute.value.query?.tags[0])"
:size="'sm'"
/>
<span v-else>
@ -134,7 +134,7 @@
<span><Tag :item="tag" :size="'sm'" /></span>
<span class="ps-3">
{{ getTaggedMonitorCount(tag) }}
<span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
<span v-if="this.$router.currentRoute.value.query?.tags?.split(',').includes(tag.name)" class="px-1 filter-active">
<font-awesome-icon icon="check" />
</span>
</span>
@ -162,23 +162,26 @@ export default {
Status,
Tag,
},
props: {
filterState: {
type: Object,
required: true,
}
},
emits: [ "updateFilter" ],
data() {
return {
tagsList: [],
filterNames: [
'status',
'active',
'tags',
],
};
},
computed: {
numFiltersActive() {
let num = 0;
Object.values(this.filterState).forEach(item => {
Object.values(
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;
}
@ -191,52 +194,63 @@ export default {
this.getExistingTags();
},
methods: {
getActiveFilters: function() {
const filters = Object.fromEntries(
Array.from(Object.entries(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) {
let newFilter = {
...this.filterState
...this.getActiveFilters(),
};
if (newFilter.status == null) {
newFilter.status = [ status ];
const statusStates = {
1: 'up',
0: 'down',
2: 'pending',
3: 'maintenance',
};
const finalStatus = statusStates[status];
if (newFilter.status.includes(''+finalStatus)) {
newFilter.status = newFilter.status.filter(item => item !== ''+finalStatus);
} else {
if (newFilter.status.includes(status)) {
newFilter.status = newFilter.status.filter(item => item !== status);
} else {
newFilter.status.push(status);
}
newFilter.status.push(finalStatus);
}
this.$emit("updateFilter", newFilter);
},
toggleActiveFilter(active) {
let newFilter = {
...this.filterState
...this.getActiveFilters(),
};
if (newFilter.active == null) {
newFilter.active = [ active ];
} else {
if (newFilter.active.includes(active)) {
newFilter.active = newFilter.active.filter(item => item !== active);
if (newFilter.active.includes(''+active)) {
newFilter.active = newFilter.active.filter(item => item !== ''+active);
} else {
newFilter.active.push(active);
}
}
this.$emit("updateFilter", newFilter);
},
toggleTagFilter(tag) {
let newFilter = {
...this.filterState
...this.getActiveFilters(),
};
if (newFilter.tags == null) {
newFilter.tags = [ tag.id ];
if (newFilter.tags.includes(''+tag.name)) {
newFilter.tags = newFilter.tags.filter(item => item !== ''+tag.name);
} else {
if (newFilter.tags.includes(tag.id)) {
newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
} else {
newFilter.tags.push(tag.id);
}
newFilter.tags.push(tag.name);
}
this.$emit("updateFilter", newFilter);
},
clearFilters() {