Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Apply suggestions

Browse Source
pull/4264/head
Nelson Chan 1 month ago
parent d9da6819ff
commit ddfe06c72f
No known key found for this signature in database
1 changed files with 245 additions and 226 deletions
Show Stats Download Patch File Download Diff File

293
src/components/PingChart.vue
Unescape View File

@ -47,7 +47,7 @@ export default {
loading: false,
// Time period for the chart to display, in hours
chartPeriodHrs: "0",
chartPeriodHrs: "24",
chartPeriodOptions: {
0: this.$t("recent"),
@ -163,19 +163,148 @@ export default {
};
},
chartData() {
let lastHeartbeatTime;
const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;
if (this.chartPeriodHrs === "0") {
return this.getChartDatapointsFromHeartbeatList();
} else {
return this.getChartDatapointsFromStats();
}
},
},
watch: {
// Update chart data when the selected chart period changes
chartPeriodHrs: function (newPeriod) {
if (this.chartDataFetchInterval) {
clearInterval(this.chartDataFetchInterval);
this.chartDataFetchInterval = null;
}
// eslint-disable-next-line eqeqeq
if (newPeriod == "0") {
this.heartbeatList = null;
this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
} else {
this.loading = true;
let period;
try {
period = parseInt(newPeriod);
} catch (e) {
// Invalid period
period = 24;
}
this.$root.getMonitorChartData(this.monitorId, period, (res) => {
if (!res.ok) {
this.$root.toastError(res.msg);
} else {
this.chartRawData = res.data;
this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
}
this.loading = false;
});
this.chartDataFetchInterval = setInterval(() => {
this.$root.getMonitorChartData(this.monitorId, period, (res) => {
if (res.ok) {
this.chartRawData = res.data;
}
});
}, 5 * 60 * 1000);
}
}
},
created() {
// Load chart period from storage if saved
let period = this.$root.storage()[`chart-period-${this.monitorId}`];
if (period != null) {
// Has this ever been not a string?
if (typeof period !== "string") {
period = period.toString();
}
this.chartPeriodHrs = period;
} else {
this.chartPeriodHrs = "24";
}
},
beforeUnmount() {
if (this.chartDataFetchInterval) {
clearInterval(this.chartDataFetchInterval);
}
},
methods: {
// Get color of bar chart for this datapoint
getBarColorForDatapoint(datapoint) {
if (datapoint.maintenance != null) {
// Target is in maintenance
return "rgba(23,71,245,0.41)";
} else if (datapoint.down === 0) {
// Target is up, no need to display a bar
return "#000";
} else if (datapoint.up === 0) {
// Target is down
return "rgba(220, 53, 69, 0.41)";
} else {
// Show yellow for mixed status
return "rgba(245, 182, 23, 0.41)";
}
},
// push datapoint to chartData
pushDatapoint(datapoint, avgPingData, minPingData, maxPingData, downData, colorData) {
const x = this.$root.unixToDateTime(datapoint.timestamp);
// Show ping values if it was up in this period
avgPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.avgPing : null,
});
minPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.minPing : null,
});
maxPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.maxPing : null,
});
downData.push({
x,
y: datapoint.down + (datapoint.maintenance || 0),
});
colorData.push(this.getBarColorForDatapoint(datapoint));
},
// get the average of a set of datapoints
getAverage(datapoints) {
const totalUp = datapoints.reduce((total, current) => total + current.up, 0);
const totalDown = datapoints.reduce((total, current) => total + current.down, 0);
const totalMaintenance = datapoints.reduce((total, current) => total + (current.maintenance || 0), 0);
const totalPing = datapoints.reduce((total, current) => total + current.avgPing * current.up, 0);
const minPing = datapoints.reduce((min, current) => Math.min(min, current.minPing), Infinity);
const maxPing = datapoints.reduce((max, current) => Math.max(max, current.maxPing), 0);
// Find the middle timestamp to use
let midpoint = Math.floor(datapoints.length / 2);
return {
timestamp: datapoints[midpoint].timestamp,
up: totalUp,
down: totalDown,
maintenance: totalMaintenance > 0 ? totalMaintenance : undefined,
avgPing: totalUp > 0 ? totalPing / totalUp : 0,
minPing,
maxPing,
};
},
getChartDatapointsFromHeartbeatList() {
// Render chart using heartbeatList
let lastHeartbeatTime;
const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;
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 (red color), under maintenance (blue color) or pending (orange color), 0 if target is up
let colorData = []; // Color Data for Bar Chart
let heartbeatList = (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) || [];
heartbeatList
.map((beat) => {
for (const beat of heartbeatList) {
const beatTime = this.$root.toDayjs(beat.time);
const x = beatTime.format("YYYY-MM-DD HH:mm:ss");
@ -212,10 +341,19 @@ export default {
x,
y: (beat.status === DOWN || beat.status === MAINTENANCE || beat.status === PENDING) ? 1 : 0,
});
colorData.push((beat.status === MAINTENANCE) ? "rgba(23,71,245,0.41)" : ((beat.status === PENDING) ? "rgba(245,182,23,0.41)" : "#DC354568"));
switch (beat.status) {
case MAINTENANCE:
colorData.push("rgba(23 ,71, 245, 0.41)");
break;
case PENDING:
colorData.push("rgba(245, 182, 23, 0.41)");
break;
default:
colorData.push("rgba(220, 53, 69, 0.41)");
}
lastHeartbeatTime = beatTime;
});
}
return {
datasets: [
@ -244,8 +382,12 @@ export default {
},
],
};
} else {
},
getChartDatapointsFromStats() {
// Render chart using UptimeCalculator data
let lastHeartbeatTime;
const monitorInterval = this.$root.monitorList[this.monitorId]?.interval;
let avgPingData = []; // Ping Data for Line Chart, y-axis contains ping time
let minPingData = []; // Ping Data for Line Chart, y-axis contains ping time
let maxPingData = []; // Ping Data for Line Chart, y-axis contains ping time
@ -269,8 +411,11 @@ export default {
// Insert empty datapoint to separate big gaps
if (lastHeartbeatTime && monitorInterval) {
const diff = Math.abs(beatTime.diff(lastHeartbeatTime));
if ((period <= 24 && diff > Math.max(1000 * 60 * 10, monitorInterval * 1000 * 10)) ||
(period > 24 && diff > Math.max(1000 * 60 * 60 * 10, monitorInterval * 1000 * 10)) ) {
const oneSecond = 1000;
const oneMinute = oneSecond * 60;
const oneHour = oneMinute * 60;
if ((period <= 24 && diff > Math.max(oneMinute * 10, monitorInterval * oneSecond * 10)) ||
(period > 24 && diff > Math.max(oneHour * 10, monitorInterval * oneSecond * 10))) {
// Big gap detected
// Clear the aggregate buffer
if (aggregateBuffer.length > 0) {
@ -386,132 +531,6 @@ export default {
},
],
};
}
},
},
watch: {
// Update chart data when the selected chart period changes
chartPeriodHrs: function (newPeriod) {
if (this.chartDataFetchInterval) {
clearInterval(this.chartDataFetchInterval);
this.chartDataFetchInterval = null;
}
// eslint-disable-next-line eqeqeq
if (newPeriod == "0") {
this.heartbeatList = null;
this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
} else {
this.loading = true;
let period;
try {
period = parseInt(newPeriod);
} catch (e) {
// Invalid period
period = 24;
}
this.$root.getMonitorChartData(this.monitorId, period, (res) => {
if (!res.ok) {
this.$root.toastError(res.msg);
} else {
this.chartRawData = res.data;
this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
}
this.loading = false;
});
this.chartDataFetchInterval = setInterval(() => {
this.$root.getMonitorChartData(this.monitorId, period, (res) => {
if (res.ok) {
this.chartRawData = res.data;
}
});
}, 5 * 60 * 1000);
}
}
},
created() {
// Load chart period from storage if saved
let period = this.$root.storage()[`chart-period-${this.monitorId}`];
if (period != null) {
// Has this ever been not a string?
if (typeof period !== "string") {
period = period.toString();
}
this.chartPeriodHrs = period;
} else {
this.chartPeriodHrs = "24";
}
},
beforeUnmount() {
if (this.chartDataFetchInterval) {
clearInterval(this.chartDataFetchInterval);
}
},
methods: {
// Get color of bar chart for this datapoint
getBarColorForDatapoint(datapoint) {
if (datapoint.maintenance != null) {
// Target is in maintenance
return "rgba(23,71,245,0.41)";
} else if (datapoint.down === 0) {
// Target is up
return "#FFFFFFFF";
} else if (datapoint.up === 0) {
// Target is down
return "#DC354568";
} else {
// Show yellow for mixed status
return "rgba(245,182,23,0.41)";
}
},
// push datapoint to chartData
pushDatapoint(datapoint, avgPingData, minPingData, maxPingData, downData, colorData) {
const x = this.$root.unixToDateTime(datapoint.timestamp);
// Show ping values if it was up in this period
avgPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.avgPing : null,
});
minPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.minPing : null,
});
maxPingData.push({
x,
y: datapoint.up > 0 && datapoint.avgPing > 0 ? datapoint.maxPing : null,
});
downData.push({
x,
y: datapoint.down + (datapoint.maintenance || 0),
});
colorData.push(this.getBarColorForDatapoint(datapoint));
},
// get the average of a set of datapoints
getAverage(datapoints) {
const totalUp = datapoints.reduce((total, current) => total + current.up, 0);
const totalDown = datapoints.reduce((total, current) => total + current.down, 0);
const totalMaintenance = datapoints.reduce((total, current) => total + (current.maintenance || 0), 0);
const totalPing = datapoints.reduce((total, current) => total + current.avgPing * current.up, 0);
const minPing = datapoints.reduce((min, current) => Math.min(min, current.minPing), Infinity);
const maxPing = datapoints.reduce((max, current) => Math.max(max, current.maxPing), 0);
// Find the middle timestamp to use
let midpoint = Math.floor(datapoints.length / 2);
return {
timestamp: datapoints[midpoint].timestamp,
up: totalUp,
down: totalDown,
maintenance: totalMaintenance > 0 ? totalMaintenance : undefined,
avgPing: totalUp > 0 ? totalPing / totalUp : 0,
minPing,
maxPing,
};
},
}
};

Write Preview
Loading…
Cancel
Save