7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-21 12:11:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add ability to group monitors in dashboard

Browse Source
This commit is contained in:
Peace
2023-01-28 02:58:03 +01:00
parent d99d37898e
commit 645fd94bba
11 changed files with 411 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Details.vue
View File

@@ -1,6 +1,7 @@
<template>
<transition name="slide-fade" appear>
<div v-if="monitor">
<span> {{ group }}</span>
<h1> {{ monitor.name }}</h1>
<div class="tags">
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
@@ -286,6 +287,13 @@ export default {
const endIndex = startIndex + this.perPage;
return this.heartBeatList.slice(startIndex, endIndex);
},
group() {
if (!this.monitor.pathName.includes("/")) {
return "";
}
return this.monitor.pathName.substr(0, this.monitor.pathName.lastIndexOf("/"));
}
},
mounted() {

56
src/pages/EditMonitor.vue
View File

@@ -12,6 +12,9 @@
<label for="type" class="form-label">{{ $t("Monitor Type") }}</label>
<select id="type" v-model="monitor.type" class="form-select">
<optgroup :label="$t('General Monitor Type')">
<option value="group">
{{ $t("Group") }}
</option>
<option value="http">
HTTP(s)
</option>
@@ -79,6 +82,15 @@
<input id="name" v-model="monitor.name" type="text" class="form-control" required>
</div>
<!-- Parent Monitor -->
<div class="my-3">
<label for="parent" class="form-label">{{ $t("Monitor Group") }}</label>
<select v-model="monitor.parent" class="form-select" :disabled="sortedMonitorList.length === 0">
<option :value="null" selected>{{ $t("None") }}</option>
<option v-for="parentMonitor in sortedMonitorList" :key="parentMonitor.id" :value="parentMonitor.id">{{ parentMonitor.pathName }}</option>
</select>
</div>
<!-- URL -->
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
<label for="url" class="form-label">{{ $t("URL") }}</label>
@@ -737,6 +749,49 @@ message HealthCheckResponse {
return null;
},
sortedMonitorList() {
// return Object.values(this.$root.monitorList).filter(monitor => {
// // Only return monitors which aren't related to the current selected
// if (monitor.id === this.monitor.id || monitor.parent === this.monitor.id) {
// return false;
// }
// return true;
// });
let result = Object.values(this.$root.monitorList);
console.log(this.monitor.childrenIDs);
result = result.filter(monitor => monitor.type === "group");
result = result.filter(monitor => monitor.id !== this.monitor.id);
result = result.filter(monitor => !this.monitor.childrenIDs?.includes(monitor.id));
result.sort((m1, m2) => {
if (m1.active !== m2.active) {
if (m1.active === 0) {
return 1;
}
if (m2.active === 0) {
return -1;
}
}
if (m1.weight !== m2.weight) {
if (m1.weight > m2.weight) {
return -1;
}
if (m1.weight < m2.weight) {
return 1;
}
}
return m1.pathName.localeCompare(m2.pathName);
});
return result;
},
},
watch: {
"$root.proxyList"() {
@@ -839,6 +894,7 @@ message HealthCheckResponse {
this.monitor = {
type: "http",
name: "",
parent: null,
url: "https://",
method: "GET",
interval: 60,

31
src/pages/StatusPage.vue
View File

@@ -254,10 +254,10 @@
</div>
<div class="mt-3">
<div v-if="allMonitorList.length > 0 && loadedData">
<div v-if="sortedMonitorList.length > 0 && loadedData">
<label>{{ $t("Add a monitor") }}:</label>
<select v-model="selectedMonitor" class="form-control">
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
<option v-for="monitor in sortedMonitorList" :key="monitor.id" :value="monitor">{{ monitor.pathName }}</option>
</select>
</div>
<div v-else class="text-center">
@@ -391,7 +391,7 @@ export default {
/**
* If the monitor is added to public list, which will not be in this list.
*/
allMonitorList() {
sortedMonitorList() {
let result = [];
for (let id in this.$root.monitorList) {
@@ -401,6 +401,31 @@ export default {
}
}
result.sort((m1, m2) => {
if (m1.active !== m2.active) {
if (m1.active === 0) {
return 1;
}
if (m2.active === 0) {
return -1;
}
}
if (m1.weight !== m2.weight) {
if (m1.weight > m2.weight) {
return -1;
}
if (m1.weight < m2.weight) {
return 1;
}
}
return m1.pathName.localeCompare(m2.pathName);
});
return result;
},