aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/services')
-rw-r--r--src/components/services/Prometheus.vue96
1 files changed, 36 insertions, 60 deletions
diff --git a/src/components/services/Prometheus.vue b/src/components/services/Prometheus.vue
index 25e9ddd..6efcb34 100644
--- a/src/components/services/Prometheus.vue
+++ b/src/components/services/Prometheus.vue
@@ -1,57 +1,41 @@
1<template> 1<template>
2 <div> 2 <Generic :item="item">
3 <div 3 <template #content>
4 class="card" 4 <p class="title is-4">{{ item.name }}</p>
5 :style="`background-color:${item.background};`" 5 <p class="subtitle is-6">
6 :class="item.class" 6 <template v-if="item.subtitle">
7 > 7 {{ item.subtitle }}
8 <a :href="item.url" :target="item.target" rel="noreferrer"> 8 </template>
9 <div class="card-content"> 9 <template v-else-if="api"> {{ count }} {{ level }} alerts </template>
10 <div :class="mediaClass"> 10 </p>
11 <slot name="icon"> 11 </template>
12 <div v-if="item.logo" class="media-left"> 12 <template #indicator>
13 <figure class="image is-48x48"> 13 <div v-if="api" class="status" :class="level">
14 <img :src="item.logo" :alt="`${item.name} logo`" /> 14 {{ count }}
15 </figure> 15 </div>
16 </div> 16 </template>
17 <div v-if="item.icon" class="media-left"> 17 </Generic>
18 <figure class="image is-48x48">
19 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
20 </figure>
21 </div>
22 </slot>
23 <div class="media-content">
24 <slot name="content">
25 <p class="title is-4">{{ item.name }}</p>
26 <p class="subtitle is-6">
27 <template v-if="item.subtitle">
28 {{ item.subtitle }}
29 </template>
30 <template v-else-if="api">
31 {{ count }} {{ level }} alerts
32 </template>
33 </p>
34 </slot>
35 </div>
36 <div v-if="api" class="status" :class="level">
37 {{ count }}
38 </div>
39 </div>
40 <div class="tag" :class="item.tagstyle" v-if="item.tag">
41 <strong class="tag-text">#{{ item.tag }}</strong>
42 </div>
43 </div>
44 </a>
45 </div>
46 </div>
47</template> 18</template>
48 19
49<script> 20<script>
21import service from "@/mixins/service.js";
22import Generic from "./Generic.vue";
23
24const AlertsStatus = Object.freeze({
25 firing: "firing",
26 pending: "pending",
27 inactive: "inactive",
28});
29
50export default { 30export default {
51 name: "Prometheus", 31 name: "Prometheus",
32 mixins: [service],
52 props: { 33 props: {
53 item: Object, 34 item: Object,
54 }, 35 },
36 components: {
37 Generic,
38 },
55 data: () => ({ 39 data: () => ({
56 api: { 40 api: {
57 status: "", 41 status: "",
@@ -64,9 +48,6 @@ export default {
64 }, 48 },
65 }), 49 }),
66 computed: { 50 computed: {
67 mediaClass: function () {
68 return { media: true, "no-subtitle": !this.item.subtitle };
69 },
70 count: function () { 51 count: function () {
71 return ( 52 return (
72 this.countFiring() || this.countPending() || this.countInactive() || 0 53 this.countFiring() || this.countPending() || this.countInactive() || 0
@@ -74,11 +55,11 @@ export default {
74 }, 55 },
75 level: function () { 56 level: function () {
76 if (this.countFiring()) { 57 if (this.countFiring()) {
77 return "firing"; 58 return AlertsStatus.firing;
78 } else if (this.countPending()) { 59 } else if (this.countPending()) {
79 return "pending"; 60 return AlertsStatus.pending;
80 } 61 }
81 return "inactive"; 62 return AlertsStatus.inactive;
82 }, 63 },
83 }, 64 },
84 created() { 65 created() {
@@ -86,17 +67,12 @@ export default {
86 }, 67 },
87 methods: { 68 methods: {
88 fetchStatus: async function () { 69 fetchStatus: async function () {
89 const url = `${this.item.url}/api/v1/alerts`; 70 this.api = await this.fetch("api/v1/alerts").catch((e) => console.log(e));
90 this.api = await fetch(url, { method: "get" })
91 .then((response) => {
92 return response.json();
93 })
94 .catch((e) => console.log(e));
95 }, 71 },
96 countFiring: function () { 72 countFiring: function () {
97 if (this.api) { 73 if (this.api) {
98 return this.api.data?.alerts?.filter( 74 return this.api.data?.alerts?.filter(
99 (alert) => alert.state === "firing" 75 (alert) => alert.state === AlertsStatus.firing
100 ).length; 76 ).length;
101 } 77 }
102 return 0; 78 return 0;
@@ -104,7 +80,7 @@ export default {
104 countPending: function () { 80 countPending: function () {
105 if (this.api) { 81 if (this.api) {
106 return this.api.data?.alerts?.filter( 82 return this.api.data?.alerts?.filter(
107 (alert) => alert.state === "pending" 83 (alert) => alert.state === AlertsStatus.pending
108 ).length; 84 ).length;
109 } 85 }
110 return 0; 86 return 0;
@@ -112,7 +88,7 @@ export default {
112 countInactive: function () { 88 countInactive: function () {
113 if (this.api) { 89 if (this.api) {
114 return this.api.data?.alerts?.filter( 90 return this.api.data?.alerts?.filter(
115 (alert) => alert.state === "inactive" 91 (alert) => alert.state === AlertsStatus.pending
116 ).length; 92 ).length;
117 } 93 }
118 return 0; 94 return 0;