5 :style="`background-color:${item.background};`"
8 <a :href="item.url" :target="item.target" rel="noreferrer">
9 <div class="card-content">
10 <div :class="mediaClass">
12 <div v-if="item.logo" class="media-left">
13 <figure class="image is-48x48">
14 <img :src="item.logo" :alt="`${item.name} logo`" />
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>
23 <div class="media-content">
25 <p class="title is-4">{{ item.name }}</p>
26 <p class="subtitle is-6">
27 <template v-if="item.subtitle">
30 <template v-else-if="api">
31 {{ count }} {{ level }} alerts
36 <div v-if="api" class="status" :class="level">
40 <div class="tag" :class="item.tagstyle" v-if="item.tag">
41 <strong class="tag-text">#{{ item.tag }}</strong>
67 mediaClass: function () {
68 return { media: true, "no-subtitle": !this.item.subtitle };
72 this.countFiring() || this.countPending() || this.countInactive() || 0
76 if (this.countFiring()) {
78 } else if (this.countPending()) {
88 fetchStatus: async function () {
89 const url = `${this.item.url}/api/v1/alerts`;
90 this.api = await fetch(url, { method: "get" })
92 return response.json();
94 .catch((e) => console.log(e));
96 countFiring: function () {
98 return this.api.data?.alerts?.filter(
99 (alert) => alert.state === "firing"
104 countPending: function () {
106 return this.api.data?.alerts?.filter(
107 (alert) => alert.state === "pending"
112 countInactive: function () {
114 return this.api.data?.alerts?.filter(
115 (alert) => alert.state === "inactive"
124 <style scoped lang="scss">
137 color: var(--text-title);
140 background-color: #d65c68;
141 border-color: #e87d88;
142 box-shadow: 0 0 5px 1px #d65c68;
146 background-color: #e8bb7d;
147 border-color: #d6a35c;
148 box-shadow: 0 0 5px 1px #e8bb7d;
152 background-color: #8fe87d;
153 border-color: #70d65c;
154 box-shadow: 0 0 5px 1px #8fe87d;
159 display: inline-block;
163 border: 1px solid #000;