ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-10-29 18:50:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fix: Filtering works with group monitor (#3469)

Browse source 
* Fix: Filtering works with group monitor

* Chore: Update comment

* Apply suggestions from code review

Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>

---------

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>
Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>
This commit is contained in:
Nelson Chan 2023-08-07 00:35:50 +08:00 committed by GitHub
parent 439b6517d1
commit 36777c5eff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/components/MonitorList.vue
View file

@ -51,7 +51,7 @@
v-for="(item, index) in sortedMonitorList"
:key="index"
:monitor="item"
:isSearch="searchText !== ''"
:showPathName="filtersActive"
:isSelectMode="selectMode"
:isSelected="isSelected"
:select="select"
@ -117,31 +117,68 @@ export default {
},
/**
* Returns a sorted list of monitors based on the applied filters and search text.
*
* @return {Array} The sorted list of monitors.
*/
sortedMonitorList() {
let result = Object.values(this.$root.monitorList);
// Simple filter by search text
// finds monitor name, tag name or tag value
if (this.searchText !== "") {
const loweredSearchText = this.searchText.toLowerCase();
result = result.filter(monitor => {
return monitor.name.toLowerCase().includes(loweredSearchText)
result = result.filter(monitor => {
// filter by search text
// finds monitor name, tag name or tag value
let searchTextMatch = true;
if (this.searchText !== "") {
const loweredSearchText = this.searchText.toLowerCase();
searchTextMatch =
monitor.name.toLowerCase().includes(loweredSearchText)
|| monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
|| tag.value?.toLowerCase().includes(loweredSearchText));
});
} else {
result = result.filter(monitor => monitor.parent === null);
}
}
// filter by status
let statusMatch = true;
if (this.filterState.status != null && this.filterState.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);
}
// filter by active
let activeMatch = true;
if (this.filterState.active != null && this.filterState.active.length > 0) {
activeMatch = this.filterState.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
.length > 0;
}
// Hide children if not filtering
let showChild = true;
if (this.filterState.status == null && this.filterState.active == null && this.filterState.tags == null && this.searchText === "") {
if (monitor.parent !== null) {
showChild = false;
}
}
return searchTextMatch && statusMatch && activeMatch && tagsMatch && showChild;
});
// Filter result by active state, weight and alphabetical
result.sort((m1, m2) => {
if (m1.active !== m2.active) {
if (m1.active === 0) {
if (m1.active === false) {
return 1;
}
if (m2.active === 0) {
if (m2.active === false) {
return -1;
}
}
@ -159,27 +196,6 @@ export default {
return m1.name.localeCompare(m2.name);
});
if (this.filterState.status != null && this.filterState.status.length > 0) {
result.map(monitor => {
if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
}
});
result = result.filter(monitor => this.filterState.status.includes(monitor.status));
}
if (this.filterState.active != null && this.filterState.active.length > 0) {
result = result.filter(monitor => this.filterState.active.includes(monitor.active));
}
if (this.filterState.tags != null && this.filterState.tags.length > 0) {
result = result.filter(monitor => {
return 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
.length > 0;
});
}
return result;
},
@ -233,6 +249,15 @@ export default {
this.selectAll = false;
this.selectedMonitors = {};
}
},
/**
* Determines if any filters are active.
*
* @return {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 !== "";
}
},
mounted() {

8
src/components/MonitorListItem.vue
View file

@ -44,7 +44,7 @@
<MonitorListItem
v-for="(item, index) in sortedChildMonitorList"
:key="index" :monitor="item"
:isSearch="isSearch"
:showPathName="showPathName"
:isSelectMode="isSelectMode"
:isSelected="isSelected"
:select="select"
@ -75,8 +75,8 @@ export default {
type: Object,
default: null,
},
/** If the user is currently searching */
isSearch: {
/** Should the monitor name show it's parent */
showPathName: {
type: Boolean,
default: false,
},
@ -153,7 +153,7 @@ export default {
};
},
monitorName() {
if (this.isSearch) {
if (this.showPathName) {
return this.monitor.pathName;
} else {
return this.monitor.name;