mirrors/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2026-02-12 01:49:02 +00:00
Code Activity

Add page for individual service details

Browse Source
This commit is contained in:
TwinProduction
2021-01-27 18:25:37 -05:00
parent 2ccd656386
commit dcbbec7931
20 changed files with 391 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/app/src/components/Services.vue
View File

@@ -1,20 +1,8 @@
<template>
<div class="container mx-auto rounded shadow-xl border my-3 p-5 text-left" id="global">
<div class="mb-2">
<div class="flex flex-wrap">
<div class="w-2/3 text-left my-auto">
<div class="title font-light">Health Status</div>
</div>
<div class="w-1/3 flex justify-end">
<img src="../assets/logo.png" alt="Gatus" style="min-width: 50px; max-width: 200px; width: 20%;"/>
</div>
</div>
</div>
<div id="results">
<slot v-for="serviceGroup in serviceGroups" :key="serviceGroup">
<ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip" />
</slot>
</div>
<div id="results">
<slot v-for="serviceGroup in serviceGroups" :key="serviceGroup">
<ServiceGroup :services="serviceGroup.services" :name="serviceGroup.name" @showTooltip="showTooltip"/>
</slot>
</div>
</template>
@@ -31,6 +19,7 @@ export default {
showStatusOnHover: Boolean,
serviceStatuses: Object
},
emits: ['showTooltip'],
methods: {
process() {
let outputByGroup = {};
@@ -45,7 +34,7 @@ export default {
let serviceGroups = [];
for (let name in outputByGroup) {
if (name !== 'undefined') {
serviceGroups.push({ name: name, services: outputByGroup[name]})
serviceGroups.push({name: name, services: outputByGroup[name]})
}
}
// Add all services that don't have a group at the end
@@ -74,29 +63,8 @@ export default {
<style>
#global {
max-width: 1140px;
}
#results div.container:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#results div.container:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-width: 1px;
border-color: #dee2e6;
border-style: solid;
}
#results .service-group-content > div:nth-child(1) {
.service-group-content > div:nth-child(1) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.title {
font-size: 2.5rem;
}
</style>