aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/services/Healhchecks.vue115
1 files changed, 115 insertions, 0 deletions
diff --git a/src/components/services/Healhchecks.vue b/src/components/services/Healhchecks.vue
new file mode 100644
index 0000000..c60f241
--- /dev/null
+++ b/src/components/services/Healhchecks.vue
@@ -0,0 +1,115 @@
1<template>
2 <Generic :item="item">
3 <template #indicator>
4 <div class="notifs">
5 <strong v-if="up > 0" class="notif up" title="Up">
6 {{ up }}
7 </strong>
8 <strong v-if="down > 0" class="notif down" title="Down">
9 {{ down }}
10 </strong>
11 <strong v-if="grace > 0" class="notif grace" title="Grace">
12 {{ grace }}
13 </strong>
14 </div>
15 </template>
16 </Generic>
17</template>
18
19<script>
20import service from "@/mixins/service.js";
21import Generic from "./Generic.vue";
22
23export default {
24 name: "Healthchecks",
25 mixins: [service],
26 props: {
27 item: Object,
28 },
29 components: {
30 Generic,
31 },
32 data: () => ({
33 api: null,
34 }),
35 computed: {
36 up: function () {
37 if (!this.api) {
38 return "";
39 }
40 return this.api.checks?.filter((check) => {
41 return check.status.toLowerCase() === "up";
42 }).length;
43 },
44 down: function () {
45 if (!this.api) {
46 return "";
47 }
48 return this.api.checks?.filter((check) => {
49 return check.status.toLowerCase() === "down";
50 }).length;
51 },
52 grace: function () {
53 if (!this.api) {
54 return "";
55 }
56 return this.api.checks?.filter((check) => {
57 return check.status.toLowerCase() === "grace";
58 }).length;
59 },
60 },
61 created() {
62 this.fetchStatus();
63 },
64 methods: {
65 fetchStatus: async function () {
66 const apikey = this.item.apikey;
67 if (!apikey) {
68 console.error(
69 "apikey is not present in config.yml for the Healthchecks entry!"
70 );
71 return;
72 }
73
74 const headers = {
75 "X-Api-Key": this.item.apikey,
76 };
77
78 this.api = await this.fetch("/api/v1/checks/", { headers }).catch((e) => {
79 console.error(e);
80 });
81 },
82 },
83};
84</script>
85
86<style scoped lang="scss">
87.notifs {
88 position: absolute;
89 color: white;
90 font-family: sans-serif;
91 top: 0.3em;
92 right: 0.5em;
93
94 .notif {
95 display: inline-block;
96 padding: 0.2em 0.35em;
97 border-radius: 0.25em;
98 position: relative;
99 margin-left: 0.3em;
100 font-size: 0.8em;
101
102 &.up {
103 background-color: #4fd671;
104 }
105
106 &.down {
107 background-color: #e51111;
108 }
109
110 &.grace {
111 background-color: #cdd02e;
112 }
113 }
114}
115</style>