extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-24 17:04:42 +01:00
Code Issues 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
Show Stats 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> <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; &#8592;
</router-link> </router-link>
<div class="container mx-auto"> <div class="container mx-auto">
@ -8,8 +8,6 @@
<hr class="mb-4" /> <hr class="mb-4" />
<Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" /> <Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
</slot> </slot>
<!-- print table of each results in table? that'd be sick as fuck -->
<div v-if="serviceStatus.uptime" class="mt-5"> <div v-if="serviceStatus.uptime" class="mt-5">
<h1 class="text-3xl text-monospace text-gray-400">UPTIME</h1> <h1 class="text-3xl text-monospace text-gray-400">UPTIME</h1>
<hr /> <hr />
@ -27,8 +25,20 @@
<h2 class="text-sm text-gray-400">Last hour</h2> <h2 class="text-sm text-gray-400">Last hour</h2>
</div> </div>
</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>
</div> </div>
<Settings @refreshData="fetchData"/> <Settings @refreshData="fetchData"/>
</template> </template>
@ -58,6 +68,9 @@ export default {
} }
}); });
}, },
generateBadgeImageURL(duration) {
return `${SERVER_URL}/api/v1/badges/uptime/${duration}/${this.serviceStatus.key}`;
},
prettifyUptime(uptime) { prettifyUptime(uptime) {
if (!uptime) { if (!uptime) {
return "0%"; return "0%";