mudhorn/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-25 05:34:08 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Feat: Use separate storage for custom chart period

Browse source 
Fix: Fix import error
This commit is contained in:
Nelson Chan 2021-10-22 18:38:41 +08:00
parent b83c59e308
commit 2f7b60f5e5
3 changed files with 67 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
server/client.js
View file

@ -31,36 +31,19 @@ async function sendNotificationList(socket) {
* @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
*/
async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false, period = null) {
async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
const timeLogger = new TimeLogger();
let result;
let list = await R.getAll(`
SELECT * FROM heartbeat
WHERE monitor_id = ?
ORDER BY time DESC
LIMIT 100
`, [
monitorID,
]);
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();
}
let result = list.reverse();
if (toUser) {
io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);

17
server/server.js
View file

@ -650,10 +650,23 @@ exports.entryPage = "dashboard";
console.log(`Get Monitor Beats: ${monitorID} User ID: ${socket.userID}`);
await sendHeartbeatList(socket, monitorID, true, true, period);
if (period == null) {
throw new Error("Invalid period.");
}
let list = await R.getAll(`
SELECT * FROM heartbeat
WHERE monitor_id = ? AND
time > DATETIME('now', '-' || ? || ' hours')
ORDER BY time ASC
`, [
monitorID,
period,
]);
callback({
ok: true
ok: true,
data: list,
});
} catch (e) {
callback({

64
src/components/PingChart.vue
View file

@ -15,7 +15,7 @@
</div>
</template>
<script>
<script lang="ts">
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
@ -23,6 +23,7 @@ import timezone from "dayjs/plugin/timezone";
import "chartjs-adapter-dayjs";
import { LineChart } from "vue-chart-3";
import { useToast } from "vue-toastification";
import { UP, DOWN, PENDING } from "../util.ts";
dayjs.extend(utc);
dayjs.extend(timezone);
@ -151,22 +152,28 @@ export default {
chartData() {
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
let downData = []; // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
if (this.monitorId in this.$root.heartbeatList) {
this.$root.heartbeatList[this.monitorId]
.filter(
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
.map((beat) => {
const x = this.$root.datetime(beat.time);
pingData.push({
x,
y: beat.ping,
});
downData.push({
x,
y: beat.status === 0 ? 1 : 0,
});
let heartbeatList = this.heartbeatList ||
(this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
[];
heartbeatList
.filter(
// Filtering as data gets appended
// not the most efficient, but works for now
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
.map((beat) => {
const x = this.$root.datetime(beat.time);
pingData.push({
x,
y: beat.ping,
});
}
downData.push({
x,
y: beat.status === DOWN ? 1 : 0,
});
});
return {
datasets: [
{
@ -197,14 +204,27 @@ export default {
chartPeriodHrs: function (newPeriod) {
if (newPeriod == "0") {
newPeriod = null;
this.heartbeatList = null;
} else {
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) {
toast.error(res.msg);
} else {
this.heartbeatList = res.data;
}
});
}
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) {
toast.error(res.msg);
}
});
}
},
created() {
// Setup Watcher on the root heartbeatList,
// And mirror latest change to this.heartbeatList
this.$watch(() => this.$root.heartbeatList[this.monitorId], (heartbeatList) => {
if (this.chartPeriodHrs != 0) {
this.heartbeatList.push(heartbeatList.at(-1));
}
}, { deep: true });
}
};
</script>
@ -217,7 +237,7 @@ export default {
}
.period-options {
padding: 0.3em 1.5em;
padding: 0.3em 2.2em;
margin-bottom: -1.5em;
float: right;
position: relative;