mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-30 03:00:40 +00:00
WIP: Add options for chart period
Fix: Fix callback, add toast on error Fix: Improve styling Fix: Restore default chart behavior Fix: Replace 1h with 3h draft only
This commit is contained in:
parent
c9549c0de2
commit
b83c59e308
4 changed files with 111 additions and 16 deletions
|
@ -31,19 +31,36 @@ async function sendNotificationList(socket) {
|
||||||
* @param toUser True = send to all browsers with the same user id, False = send to the current browser only
|
* @param toUser True = send to all browsers with the same user id, False = send to the current browser only
|
||||||
* @param overwrite Overwrite client-side's heartbeat list
|
* @param overwrite Overwrite client-side's heartbeat list
|
||||||
*/
|
*/
|
||||||
async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
|
async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false, period = null) {
|
||||||
const timeLogger = new TimeLogger();
|
const timeLogger = new TimeLogger();
|
||||||
|
|
||||||
let list = await R.getAll(`
|
let result;
|
||||||
SELECT * FROM heartbeat
|
|
||||||
WHERE monitor_id = ?
|
|
||||||
ORDER BY time DESC
|
|
||||||
LIMIT 100
|
|
||||||
`, [
|
|
||||||
monitorID,
|
|
||||||
]);
|
|
||||||
|
|
||||||
let result = list.reverse();
|
if (period) {
|
||||||
|
let list = await R.getAll(`
|
||||||
|
SELECT * FROM heartbeat
|
||||||
|
WHERE monitor_id = ? AND
|
||||||
|
time > DATETIME('now', '-' || ? || ' hours')
|
||||||
|
ORDER BY time ASC
|
||||||
|
`, [
|
||||||
|
monitorID,
|
||||||
|
period,
|
||||||
|
]);
|
||||||
|
|
||||||
|
result = list;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
let list = await R.getAll(`
|
||||||
|
SELECT * FROM heartbeat
|
||||||
|
WHERE monitor_id = ?
|
||||||
|
ORDER BY time DESC
|
||||||
|
LIMIT 100
|
||||||
|
`, [
|
||||||
|
monitorID,
|
||||||
|
]);
|
||||||
|
|
||||||
|
result = list.reverse();
|
||||||
|
}
|
||||||
|
|
||||||
if (toUser) {
|
if (toUser) {
|
||||||
io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
|
io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
|
||||||
|
|
|
@ -644,6 +644,25 @@ exports.entryPage = "dashboard";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
socket.on("getMonitorBeats", async (monitorID, period, callback) => {
|
||||||
|
try {
|
||||||
|
checkLogin(socket);
|
||||||
|
|
||||||
|
console.log(`Get Monitor Beats: ${monitorID} User ID: ${socket.userID}`);
|
||||||
|
|
||||||
|
await sendHeartbeatList(socket, monitorID, true, true, period);
|
||||||
|
|
||||||
|
callback({
|
||||||
|
ok: true
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
callback({
|
||||||
|
ok: false,
|
||||||
|
msg: e.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Start or Resume the monitor
|
// Start or Resume the monitor
|
||||||
socket.on("resumeMonitor", async (monitorID, callback) => {
|
socket.on("resumeMonitor", async (monitorID, callback) => {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -1,5 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<LineChart :chart-data="chartData" :options="chartOptions" />
|
<div>
|
||||||
|
<div class="period-options">
|
||||||
|
{{ $t("show") }}: <select id="chart-period-select" v-model="chartPeriodHrs" class="form-select form-select-sm ms-1">
|
||||||
|
<option value="0">{{ $t("recent") }}</option>
|
||||||
|
<option value="3">3h</option>
|
||||||
|
<option value="6">6h</option>
|
||||||
|
<option value="24">24h</option>
|
||||||
|
<option value="168">1w</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<LineChart :chart-data="chartData" :options="chartOptions" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -9,8 +22,11 @@ import utc from "dayjs/plugin/utc";
|
||||||
import timezone from "dayjs/plugin/timezone";
|
import timezone from "dayjs/plugin/timezone";
|
||||||
import "chartjs-adapter-dayjs";
|
import "chartjs-adapter-dayjs";
|
||||||
import { LineChart } from "vue-chart-3";
|
import { LineChart } from "vue-chart-3";
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
|
||||||
dayjs.extend(utc);
|
dayjs.extend(utc);
|
||||||
dayjs.extend(timezone);
|
dayjs.extend(timezone);
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
|
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
|
||||||
|
|
||||||
|
@ -25,7 +41,12 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// Configurable filtering on top of the returned data
|
// Configurable filtering on top of the returned data
|
||||||
chartPeriodHrs: 6,
|
chartPeriodHrs: 0,
|
||||||
|
|
||||||
|
// Just Draft:
|
||||||
|
// A heartbeatList for 3h, 6h, 24h, 1w
|
||||||
|
// Set it to null, switch back to realtime (last 100 beats)
|
||||||
|
heartbeatList: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -117,7 +138,7 @@ export default {
|
||||||
},
|
},
|
||||||
callbacks: {
|
callbacks: {
|
||||||
label: (context) => {
|
label: (context) => {
|
||||||
return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`
|
return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -125,7 +146,7 @@ export default {
|
||||||
display: false,
|
display: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
chartData() {
|
chartData() {
|
||||||
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
|
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
|
||||||
|
@ -133,7 +154,7 @@ export default {
|
||||||
if (this.monitorId in this.$root.heartbeatList) {
|
if (this.monitorId in this.$root.heartbeatList) {
|
||||||
this.$root.heartbeatList[this.monitorId]
|
this.$root.heartbeatList[this.monitorId]
|
||||||
.filter(
|
.filter(
|
||||||
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
|
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
|
||||||
.map((beat) => {
|
.map((beat) => {
|
||||||
const x = this.$root.datetime(beat.time);
|
const x = this.$root.datetime(beat.time);
|
||||||
pingData.push({
|
pingData.push({
|
||||||
|
@ -143,7 +164,7 @@ export default {
|
||||||
downData.push({
|
downData.push({
|
||||||
x,
|
x,
|
||||||
y: beat.status === 0 ? 1 : 0,
|
y: beat.status === 0 ? 1 : 0,
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
@ -172,5 +193,39 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
chartPeriodHrs: function (newPeriod) {
|
||||||
|
if (newPeriod == "0") {
|
||||||
|
newPeriod = null;
|
||||||
|
}
|
||||||
|
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
|
||||||
|
if (!res.ok) {
|
||||||
|
toast.error(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../assets/vars.scss";
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
width: unset;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.period-options {
|
||||||
|
padding: 0.3em 1.5em;
|
||||||
|
margin-bottom: -1.5em;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -328,6 +328,10 @@ export default {
|
||||||
clearStatistics(callback) {
|
clearStatistics(callback) {
|
||||||
socket.emit("clearStatistics", callback);
|
socket.emit("clearStatistics", callback);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getMonitorBeats(monitorID, period, callback) {
|
||||||
|
socket.emit("getMonitorBeats", monitorID, period, callback);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
Loading…
Reference in a new issue