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

Refactor: Remove checks for null

Browse source
This commit is contained in:
Suven-p 2024-11-01 16:38:47 +05:45
parent 1a70dac690
commit 49c20b1840
2 changed files with 27 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/MonitorList.vue
View file

@ -294,9 +294,7 @@ export default {
this.$router.replace({ this.$router.replace({
query: { query: {
...this.$route.query, ...this.$route.query,
status: newFilter.status, ...newFilter,
active: newFilter.active,
tags: newFilter.tags,
}, },
}); });
}, },
@ -388,7 +386,7 @@ 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.filterState.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;
} }
@ -397,13 +395,13 @@ export default {
// filter by active // filter by active
let activeMatch = true; let activeMatch = true;
if (this.filterState.active != null && this.filterState.active.length > 0) { if (this.filterState.active.length > 0) {
activeMatch = this.filterState.active.includes(monitor.active); activeMatch = this.filterState.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) { if (this.filterState.tags.length > 0) {
tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs 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 .filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
.length > 0; .length > 0;

40
src/components/MonitorListFilter.vue
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="filterState.status.length > 0"
> >
<template #status> <template #status>
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" /> <Status v-if="filterState.status.length === 1" :status="filterState.status[0]" />
<span v-else> <span v-else>
{{ $t('Status') }} {{ $t('Status') }}
</span> </span>
@ -29,7 +29,7 @@
<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="filterState.status.includes(1)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -42,7 +42,7 @@
<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="filterState.status.includes(0)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -55,7 +55,7 @@
<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="filterState.status.includes(2)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -68,7 +68,7 @@
<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="filterState.status.includes(3)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -77,9 +77,9 @@
</li> </li>
</template> </template>
</MonitorListFilterDropdown> </MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.active?.length > 0"> <MonitorListFilterDropdown :filterActive="filterState.active.length > 0">
<template #status> <template #status>
<span v-if="filterState.active?.length === 1"> <span v-if="filterState.active.length === 1">
<span v-if="filterState.active[0] === true">{{ $t("Running") }}</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-if="filterState.active[0] === false">{{ $t("filterActivePaused") }}</span>
<span v-else>{{ $t("Unknown") }}</span> <span v-else>{{ $t("Unknown") }}</span>
@ -95,7 +95,7 @@
<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="filterState.active.includes(true)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -108,7 +108,7 @@
<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="filterState.active.includes(false)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -117,11 +117,11 @@
</li> </li>
</template> </template>
</MonitorListFilterDropdown> </MonitorListFilterDropdown>
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0"> <MonitorListFilterDropdown :filterActive="filterState.tags.length > 0">
<template #status> <template #status>
<!-- Prevent rendering Tag component if tagsList has not been fetched or filterState contains invalid tag --> <!-- Prevent rendering Tag component if tagsList has not been fetched or filterState contains invalid tag -->
<Tag <Tag
v-if="filterState.tags?.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])" v-if="filterState.tags.length === 1 && tagsList.find(tag => tag.id === filterState.tags[0])"
:item="tagsList.find(tag => tag.id === filterState.tags[0])" :item="tagsList.find(tag => tag.id === filterState.tags[0])"
:size="'sm'" :size="'sm'"
/> />
@ -136,7 +136,7 @@
<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="filterState.tags.includes(tag.id)" class="px-1 filter-active">
<font-awesome-icon icon="check" /> <font-awesome-icon icon="check" />
</span> </span>
</span> </span>
@ -181,7 +181,7 @@ export default {
let num = 0; let num = 0;
Object.values(this.filterState).forEach(item => { Object.values(this.filterState).forEach(item => {
if (item != null && item.length > 0) { if (item.length > 0) {
num += 1; num += 1;
} }
}); });
@ -219,15 +219,11 @@ export default {
...this.filterState ...this.filterState
}; };
if (newFilter.status == null) {
newFilter.status = [ status ];
} else {
if (newFilter.status.includes(status)) { if (newFilter.status.includes(status)) {
newFilter.status = newFilter.status.filter(item => item !== status); newFilter.status = newFilter.status.filter(item => item !== status);
} else { } else {
newFilter.status.push(status); newFilter.status.push(status);
} }
}
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
}, },
toggleActiveFilter(active) { toggleActiveFilter(active) {
@ -235,15 +231,11 @@ export default {
...this.filterState ...this.filterState
}; };
if (newFilter.active == null) {
newFilter.active = [ active ];
} else {
if (newFilter.active.includes(active)) { if (newFilter.active.includes(active)) {
newFilter.active = newFilter.active.filter(item => item !== active); newFilter.active = newFilter.active.filter(item => item !== active);
} else { } else {
newFilter.active.push(active); newFilter.active.push(active);
} }
}
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
}, },
toggleTagFilter(tag) { toggleTagFilter(tag) {
@ -251,15 +243,11 @@ export default {
...this.filterState ...this.filterState
}; };
if (newFilter.tags == null) {
newFilter.tags = [ tag.id ];
} else {
if (newFilter.tags.includes(tag.id)) { if (newFilter.tags.includes(tag.id)) {
newFilter.tags = newFilter.tags.filter(item => item !== tag.id); newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
} else { } else {
newFilter.tags.push(tag.id); newFilter.tags.push(tag.id);
} }
}
this.$emit("updateFilter", newFilter); this.$emit("updateFilter", newFilter);
}, },
clearFilters() { clearFilters() {