phares3757/gatus
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Generate chart on the backend instead of using obnoxiously large frontend library

Browse Source
This commit is contained in:
TwinProduction
2021-08-21 17:39:22 -04:00
committed by Chris
parent 470e3a3ebc
commit 82d697b032
11 changed files with 64 additions and 871 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/app/src/components/Chart.vue
View File

@ -1,58 +0,0 @@
<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'
export default defineComponent({
name: 'Chart',
extends: Line,
props: {
data: {
type: Object,
required: true
}
},
watch: {
data: function (value) {
this.renderChart(value, this.options)
}
},
data() {
return {
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 0,
},
scales: {
xAxes: [{
type: 'time',
time: {
stepSize: 60,
}
}],
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
legend: {
display: false
},
layout: {
padding: 20
}
}
}
}
})
</script>
<style>
canvas {
max-height: 300px !important;
}
</style>

67
web/app/src/views/Details.vue
View File

@ -16,45 +16,44 @@
/>
<Pagination @page="changePage"/>
</slot>
<div class="mt-12">
<div v-if="serviceStatus && serviceStatus.key" class="mt-12">
<h1 class="text-xl xl:text-3xl font-mono text-gray-400">UPTIME</h1>
<hr/>
<div v-if="serviceStatus && serviceStatus.key"
class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
<div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
<div class="flex-1">
<h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
<img :src="generateBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto"/>
<img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
</div>
<div class="flex-1">
<h2 class="text-sm text-gray-400 mb-1">Last 24 hours</h2>
<img :src="generateBadgeImageURL('24h')" alt="24h uptime badge" class="mx-auto"/>
<img :src="generateUptimeBadgeImageURL('24h')" alt="24h uptime badge" class="mx-auto" />
</div>
<div class="flex-1">
<h2 class="text-sm text-gray-400 mb-1">Last hour</h2>
<img :src="generateBadgeImageURL('1h')" alt="1h uptime badge" class="mx-auto"/>
<img :src="generateUptimeBadgeImageURL('1h')" alt="1h uptime badge" class="mx-auto" />
</div>
</div>
</div>
<div class="mt-12">
<div v-if="serviceStatus && serviceStatus.key" class="mt-12">
<h1 class="text-xl xl:text-3xl font-mono text-gray-400">RESPONSE TIME</h1>
<hr/>
<Chart
:data="
{
labels: this.chartLabels,
datasets: [
{
label: 'Average response time (ms)',
borderColor: '#28a745',
fill: false,
tension: 0.05,
data: this.chartValues
}
]
}"
/>
<img :src="generateResponseTimeChartImageURL()" alt="response time chart" class="mt-6" />
<div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
<div class="flex-1">
<h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
<img :src="generateResponseTimeBadgeImageURL('7d')" alt="7d response time badge" class="mx-auto mt-2" />
</div>
<div class="flex-1">
<h2 class="text-sm text-gray-400 mb-1">Last 24 hours</h2>
<img :src="generateResponseTimeBadgeImageURL('24h')" alt="24h response time badge" class="mx-auto mt-2" />
</div>
<div class="flex-1">
<h2 class="text-sm text-gray-400 mb-1">Last hour</h2>
<img :src="generateResponseTimeBadgeImageURL('1h')" alt="1h response time badge" class="mx-auto mt-2" />
</div>
</div>
</div>
<div>
<div v-if="serviceStatus && serviceStatus.key">
<h1 class="text-xl xl:text-3xl font-mono text-gray-400 mt-4">EVENTS</h1>
<hr class="mb-4"/>
<div>
@ -92,12 +91,10 @@ import Service from '@/components/Service.vue';
import {SERVER_URL} from "@/main.js";
import {helper} from "@/mixins/helper.js";
import Pagination from "@/components/Pagination";
import Chart from "@/components/Chart";
export default {
name: 'Details',
components: {
Chart,
Pagination,
Service,
Settings,
@ -113,15 +110,6 @@ export default {
if (JSON.stringify(this.serviceStatus) !== JSON.stringify(data)) {
this.serviceStatus = data.serviceStatus;
this.uptime = data.uptime;
let labels = [];
let values = [];
for (let key in data.hourlyAverageResponseTime) {
labels.push(new Date(key*1000));
values.push(data.hourlyAverageResponseTime[key]);
}
this.chartLabels = labels;
this.chartValues = values;
let events = [];
for (let i = data.events.length - 1; i >= 0; i--) {
let event = data.events[i];
@ -154,8 +142,14 @@ export default {
}
});
},
generateBadgeImageURL(duration) {
return `${this.serverUrl}/api/v1/badges/uptime/${duration}/${this.serviceStatus.key}.svg`;
generateUptimeBadgeImageURL(duration) {
return `${this.serverUrl}/api/v1/services/${this.serviceStatus.key}/uptimes/${duration}/badge.svg`;
},
generateResponseTimeBadgeImageURL(duration) {
return `${this.serverUrl}/api/v1/services/${this.serviceStatus.key}/response-times/${duration}/badge.svg`;
},
generateResponseTimeChartImageURL() {
return `${this.serverUrl}/api/v1/services/${this.serviceStatus.key}/response-times/24h/chart.svg`;
},
prettifyUptime(uptime) {
if (!uptime) {
@ -183,6 +177,7 @@ export default {
serviceStatus: {},
uptime: {},
events: [],
hourlyAverageResponseTime: {},
// Since this page isn't at the root, we need to modify the server URL a bit
serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
currentPage: 1,