Bluemedia/fancy-gatus
1
0
Fork 0
mirror of https://github.com/BluemediaDev/fancy-gatus.git synced 2025-07-03 18:32:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

Initial build

Browse source
This commit is contained in:
Oliver Traber 2022-01-15 02:22:37 +01:00
parent ba484d3d9a
commit 20686e39b6
Signed by: Bluemedia
GPG key ID: C7BA47275B086E2C
14 changed files with 714 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/OverallStatus.vue Normal file
View file

@ -0,0 +1,60 @@
<template>
<div class="shadow-box">
<div class="status-wrapper" v-if="this.failedEndpoints.length === 0">
<BIconCheckCircleFill class="icon green" />
<span>All services healthy.</span>
</div>
<div class="status-wrapper" v-else>
<BIconExclamationCircleFill class="icon orange" />
<span>{{ failedEndpointCountText }}</span>
</div>
</div>
</template>
<script>
import { BIconExclamationCircleFill, BIconCheckCircleFill } from 'bootstrap-icons-vue';
export default {
name: 'OverallStatus',
components: {
BIconExclamationCircleFill,
BIconCheckCircleFill
},
props: {
failedEndpoints: {
type: Array,
required: true
},
},
computed: {
failedEndpointCountText() {
if (this.failedEndpoints.length === 2) {
return 'Two services are experiencing issues.';
} else if (this.failedEndpoints.length === 3) {
return 'Three services are experiencing issues.';
} else if (this.failedEndpoints.length > 3) {
return 'Multiple services are experiencing issues.';
} else {
return 'One service is experiencing issues.';
}
},
}
}
</script>
<style scoped>
.status-wrapper {
display: flex;
align-items: center;
font-size: 1.3rem;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.icon {
font-size: 30px;
}
span {
margin-left: 1rem;
}
</style>