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

Add section for badges

Browse Source
This commit is contained in:
TwinProduction
2021-01-27 18:46:51 -05:00
parent 99e8cfb1ce
commit 119b80edc0
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<router-link to="/" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg font-medium leading-6 text-center text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none">
<router-link to="/" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none">
&#8592;
</router-link>
<div class="container mx-auto">
@ -8,8 +8,6 @@
<hr class="mb-4" />
<Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
</slot>
<!-- print table of each results in table? that'd be sick as fuck -->
<div v-if="serviceStatus.uptime" class="mt-5">
<h1 class="text-3xl text-monospace text-gray-400">UPTIME</h1>
<hr />
@ -27,8 +25,20 @@
<h2 class="text-sm text-gray-400">Last hour</h2>
</div>
</div>
<h3 class="text-xl text-monospace text-gray-400">BADGES</h3>
<hr />
<div class="flex space-x-4 text-center text-2xl mt-5">
<div class="flex-1">
<img :src="generateBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
</div>
<div class="flex-1">
<img :src="generateBadgeImageURL('24h')" alt="7d uptime badge" class="mx-auto" />
</div>
<div class="flex-1">
<img :src="generateBadgeImageURL('1h')" alt="7d uptime badge" class="mx-auto" />
</div>
</div>
</div>
</div>
<Settings @refreshData="fetchData"/>
</template>
@ -58,6 +68,9 @@ export default {
}
});
},
generateBadgeImageURL(duration) {
return `${SERVER_URL}/api/v1/badges/uptime/${duration}/${this.serviceStatus.key}`;
},
prettifyUptime(uptime) {
if (!uptime) {
return "0%";