Add response time chart
This commit is contained in:
TwinProduction
58
web/app/src/components/Chart.vue
Normal file
58
web/app/src/components/Chart.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<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>
|
||||
@ -1,47 +1,72 @@
|
||||
<template>
|
||||
<router-link to="../" class="absolute top-2 left-2 inline-block px-2 pb-0.5 text-lg text-black bg-gray-100 rounded hover:bg-gray-200 focus:outline-none border border-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">
|
||||
<router-link to="../"
|
||||
class="absolute top-2 left-2 inline-block px-2 pb-0.5 text-lg text-black bg-gray-100 rounded hover:bg-gray-200 focus:outline-none border border-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">
|
||||
←
|
||||
</router-link>
|
||||
<div>
|
||||
<slot v-if="serviceStatus">
|
||||
<h1 class="text-xl xl:text-3xl font-mono text-gray-400">RECENT CHECKS</h1>
|
||||
<hr class="mb-4" />
|
||||
<hr class="mb-4"/>
|
||||
<Service
|
||||
:data="serviceStatus"
|
||||
:maximumNumberOfResults="20"
|
||||
@showTooltip="showTooltip"
|
||||
@toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
|
||||
@toggleShowAverageResponseTime="toggleShowAverageResponseTime"
|
||||
:showAverageResponseTime="showAverageResponseTime"
|
||||
/>
|
||||
<Pagination @page="changePage"/>
|
||||
</slot>
|
||||
<div 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">
|
||||
<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-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="generateBadgeImageURL('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="generateBadgeImageURL('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="generateBadgeImageURL('1h')" alt="1h uptime badge" class="mx-auto"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div 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
|
||||
}
|
||||
]
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl xl:text-3xl font-mono text-gray-400 mt-4">EVENTS</h1>
|
||||
<hr class="mb-4" />
|
||||
<hr class="mb-4"/>
|
||||
<div>
|
||||
<slot v-for="event in events" :key="event">
|
||||
<div class="p-3 my-4">
|
||||
<h2 class="text-lg">
|
||||
<img v-if="event.type === 'HEALTHY'" src="../assets/arrow-up-green.png" alt="Healthy" class="border border-green-600 rounded-full opacity-75 bg-green-100 mr-2 inline" width="26" />
|
||||
<img v-else-if="event.type === 'UNHEALTHY'" src="../assets/arrow-down-red.png" alt="Unhealthy" class="border border-red-500 rounded-full opacity-75 bg-red-100 mr-2 inline" width="26" />
|
||||
<img v-else-if="event.type === 'START'" src="../assets/arrow-right-black.png" alt="Start" class="border border-gray-500 rounded-full opacity-75 bg-gray-100 mr-2 inline" width="26" />
|
||||
<img v-if="event.type === 'HEALTHY'" src="../assets/arrow-up-green.png" alt="Healthy"
|
||||
class="border border-green-600 rounded-full opacity-75 bg-green-100 mr-2 inline" width="26"/>
|
||||
<img v-else-if="event.type === 'UNHEALTHY'" src="../assets/arrow-down-red.png" alt="Unhealthy"
|
||||
class="border border-red-500 rounded-full opacity-75 bg-red-100 mr-2 inline" width="26"/>
|
||||
<img v-else-if="event.type === 'START'" src="../assets/arrow-right-black.png" alt="Start"
|
||||
class="border border-gray-500 rounded-full opacity-75 bg-gray-100 mr-2 inline" width="26"/>
|
||||
{{ event.fancyText }}
|
||||
</h2>
|
||||
<div class="flex mt-1 text-sm text-gray-400">
|
||||
@ -67,10 +92,12 @@ 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,
|
||||
@ -86,10 +113,19 @@ 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--) {
|
||||
for (let i = data.events.length - 1; i >= 0; i--) {
|
||||
let event = data.events[i];
|
||||
if (i === data.events.length-1) {
|
||||
if (i === data.events.length - 1) {
|
||||
if (event.type === 'UNHEALTHY') {
|
||||
event.fancyText = 'Service is unhealthy';
|
||||
} else if (event.type === 'HEALTHY') {
|
||||
@ -98,7 +134,7 @@ export default {
|
||||
event.fancyText = 'Monitoring started';
|
||||
}
|
||||
} else {
|
||||
let nextEvent = data.events[i+1];
|
||||
let nextEvent = data.events[i + 1];
|
||||
if (event.type === 'HEALTHY') {
|
||||
event.fancyText = 'Service became healthy';
|
||||
} else if (event.type === 'UNHEALTHY') {
|
||||
@ -128,7 +164,7 @@ export default {
|
||||
return (uptime * 100).toFixed(2) + '%'
|
||||
},
|
||||
prettifyTimeDifference(start, end) {
|
||||
let minutes = Math.ceil((new Date(start) - new Date(end))/1000/60);
|
||||
let minutes = Math.ceil((new Date(start) - new Date(end)) / 1000 / 60);
|
||||
return minutes + (minutes === 1 ? ' minute' : ' minutes');
|
||||
},
|
||||
changePage(page) {
|
||||
@ -145,11 +181,14 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
serviceStatus: {},
|
||||
uptime: {},
|
||||
events: [],
|
||||
// Since this page isn't at the root, we need to modify the server URL a bit
|
||||
serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
|
||||
currentPage: 1,
|
||||
showAverageResponseTime: true,
|
||||
chartLabels: [],
|
||||
chartValues: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user