]>
Commit | Line | Data |
---|---|---|
8d9cfa98 AB |
1 | <template> |
2 | <div> | |
3 | <div | |
4 | class="card" | |
5 | :style="`background-color:${item.background};`" | |
6 | :class="item.class" | |
7 | > | |
8 | <a :href="item.url" :target="item.target" rel="noreferrer"> | |
9 | <div class="card-content"> | |
10 | <div :class="mediaClass"> | |
11 | <slot name="icon"> | |
12 | <div v-if="item.logo" class="media-left"> | |
13 | <figure class="image is-48x48"> | |
14 | <img :src="item.logo" :alt="`${item.name} logo`" /> | |
15 | </figure> | |
16 | </div> | |
17 | <div v-if="item.icon" class="media-left"> | |
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> | |
48 | ||
49 | <script> | |
50 | export default { | |
51 | name: "Prometheus", | |
52 | props: { | |
53 | item: Object, | |
54 | }, | |
55 | data: () => ({ | |
56 | api: { | |
57 | status: "", | |
58 | count: 0, | |
59 | alerts: { | |
60 | firing: 0, | |
61 | inactive: 0, | |
62 | pending: 0, | |
63 | }, | |
64 | }, | |
65 | }), | |
66 | computed: { | |
67 | mediaClass: function () { | |
68 | return { media: true, "no-subtitle": !this.item.subtitle }; | |
69 | }, | |
70 | count: function () { | |
71 | return ( | |
72 | this.countFiring() || this.countPending() || this.countInactive() || 0 | |
73 | ); | |
74 | }, | |
75 | level: function () { | |
76 | if (this.countFiring()) { | |
77 | return "firing"; | |
78 | } else if (this.countPending()) { | |
79 | return "pending"; | |
80 | } | |
81 | return "inactive"; | |
82 | }, | |
83 | }, | |
84 | created() { | |
85 | this.fetchStatus(); | |
86 | }, | |
87 | methods: { | |
88 | fetchStatus: async function () { | |
89 | const url = `${this.item.url}/api/v1/alerts`; | |
90 | this.api = await fetch(url, { method: "get" }) | |
91 | .then((response) => { | |
92 | return response.json(); | |
93 | }) | |
94 | .catch((e) => console.log(e)); | |
95 | }, | |
96 | countFiring: function () { | |
97 | if (this.api) { | |
98 | return this.api.data?.alerts?.filter( | |
99 | (alert) => alert.state === "firing" | |
100 | ).length; | |
101 | } | |
102 | return 0; | |
103 | }, | |
104 | countPending: function () { | |
105 | if (this.api) { | |
106 | return this.api.data?.alerts?.filter( | |
107 | (alert) => alert.state === "pending" | |
108 | ).length; | |
109 | } | |
110 | return 0; | |
111 | }, | |
112 | countInactive: function () { | |
113 | if (this.api) { | |
114 | return this.api.data?.alerts?.filter( | |
115 | (alert) => alert.state === "inactive" | |
116 | ).length; | |
117 | } | |
118 | return 0; | |
119 | }, | |
120 | }, | |
121 | }; | |
122 | </script> | |
123 | ||
124 | <style scoped lang="scss"> | |
125 | .media-left { | |
126 | .image { | |
127 | display: flex; | |
128 | align-items: center; | |
129 | } | |
130 | ||
131 | img { | |
132 | max-height: 100%; | |
133 | } | |
134 | } | |
135 | .status { | |
136 | font-size: 0.8rem; | |
137 | color: var(--text-title); | |
138 | ||
139 | &.firing:before { | |
140 | background-color: #d65c68; | |
141 | border-color: #e87d88; | |
142 | box-shadow: 0 0 5px 1px #d65c68; | |
143 | } | |
144 | ||
145 | &.pending:before { | |
146 | background-color: #e8bb7d; | |
147 | border-color: #d6a35c; | |
148 | box-shadow: 0 0 5px 1px #e8bb7d; | |
149 | } | |
150 | ||
151 | &.inactive:before { | |
152 | background-color: #8fe87d; | |
153 | border-color: #70d65c; | |
154 | box-shadow: 0 0 5px 1px #8fe87d; | |
155 | } | |
156 | ||
157 | &:before { | |
158 | content: " "; | |
159 | display: inline-block; | |
160 | width: 7px; | |
161 | height: 7px; | |
162 | margin-right: 10px; | |
163 | border: 1px solid #000; | |
164 | border-radius: 7px; | |
165 | } | |
166 | } | |
167 | </style> |