]>
Commit | Line | Data |
---|---|---|
1b9a3f19 | 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> | |
20 | import service from "@/mixins/service.js"; | |
21 | import Generic from "./Generic.vue"; | |
22 | ||
23 | export 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( | |
de4b7e61 | 69 | "apikey is not present in config.yml for the Healthchecks entry!", |
1b9a3f19 | 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> |