128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<template>
|
|
<div class='container px-3 py-3 border-l border-r border-t rounded-none'>
|
|
<div class='flex flex-wrap mb-2'>
|
|
<div class='w-3/4'>
|
|
<span class='font-bold'>{{ data.name }}</span> <span class='text-gray-500 font-light'>- {{ data.results[data.results.length - 1].hostname }}</span>
|
|
</div>
|
|
<div class='w-1/4 text-right'>
|
|
<span class='font-light status-min-max-ms'>
|
|
{{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) }}ms
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class='status-over-time flex flex-row'>
|
|
<slot v-for="filler in 20 - data.results.length" :key="filler">
|
|
<span class="status rounded border border-dashed"> </span>
|
|
</slot>
|
|
<slot v-for="result in data.results" :key="result">
|
|
<span v-if="result.success" class="status rounded bg-success">✓</span>
|
|
<span v-else class="status rounded bg-red-600">X</span>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
<div class='flex flex-wrap status-time-ago'>
|
|
<div class='w-1/2'>
|
|
{{ generatePrettyTimeAgo(data.results[0].timestamp) }}
|
|
</div>
|
|
<div class='w-1/2 text-right'>
|
|
{{ generatePrettyTimeAgo(data.results[data.results.length - 1].timestamp) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Service',
|
|
props: {
|
|
data: Object
|
|
},
|
|
methods: {
|
|
updateMinAndMaxResponseTimes() {
|
|
let minResponseTime = null;
|
|
let maxResponseTime = null;
|
|
for (let i in this.data.results) {
|
|
const responseTime = parseInt(this.data.results[i].duration/1000000);
|
|
if (minResponseTime == null || minResponseTime > responseTime) {
|
|
minResponseTime = responseTime;
|
|
}
|
|
if (maxResponseTime == null || maxResponseTime < responseTime) {
|
|
maxResponseTime = responseTime;
|
|
}
|
|
}
|
|
if (this.minResponseTime !== minResponseTime) {
|
|
this.minResponseTime = minResponseTime;
|
|
}
|
|
if (this.maxResponseTime !== maxResponseTime) {
|
|
this.maxResponseTime = maxResponseTime;
|
|
}
|
|
},
|
|
generatePrettyTimeAgo(t) {
|
|
let differenceInMs = new Date().getTime() - new Date(t).getTime();
|
|
if (differenceInMs > 3600000) {
|
|
let hours = (differenceInMs/3600000).toFixed(0);
|
|
return hours + " hour" + (hours !== "1" ? "s" : "") + " ago";
|
|
}
|
|
if (differenceInMs > 60000) {
|
|
let minutes = (differenceInMs/60000).toFixed(0);
|
|
return minutes + " minute" + (minutes !== "1" ? "s" : "") + " ago";
|
|
}
|
|
return (differenceInMs/1000).toFixed(0) + " seconds ago";
|
|
}
|
|
},
|
|
watch: {
|
|
data: function () {
|
|
this.updateMinAndMaxResponseTimes();
|
|
}
|
|
},
|
|
created() {
|
|
this.updateMinAndMaxResponseTimes()
|
|
},
|
|
data() {
|
|
return {
|
|
minResponseTime: 0,
|
|
maxResponseTime: 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.status {
|
|
cursor: pointer;
|
|
transition: all 500ms ease-in-out;
|
|
overflow-x: hidden;
|
|
color: white;
|
|
width: 5%;
|
|
font-size: 75%;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.status:hover {
|
|
opacity: 0.7;
|
|
transition: opacity 100ms ease-in-out;
|
|
color: black;
|
|
}
|
|
|
|
.status-over-time {
|
|
overflow: auto;
|
|
}
|
|
|
|
.status-over-time > span:not(:first-child) {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.status-time-ago {
|
|
color: #6a737d;
|
|
opacity: 0.5;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.status-min-max-ms {
|
|
overflow-x: hidden;
|
|
}
|
|
</style> |