4 <p class="title is-4">{{ item.name }}</p>
5 <p class="subtitle is-6">
6 <template v-if="item.subtitle">
9 <template v-else-if="status">
15 <div v-if="status" class="status" :class="status">
23 import service from "@/mixins/service.js";
24 import Generic from "./Generic.vue";
40 dashboard: function () {
41 return this.item.slug ? this.item.slug : "default";
47 return this.incident.incident == null ? this.pageStatus : "bad";
49 lastHeartBeatList: function () {
52 for (let id in this.heartbeat.heartbeatList) {
53 let index = this.heartbeat.heartbeatList[id].length - 1;
54 result[id] = this.heartbeat.heartbeatList[id][index];
59 pageStatus: function () {
60 if (!this.heartbeat) {
63 if (Object.keys(this.heartbeat.heartbeatList).length === 0) {
68 for (let id in this.lastHeartBeatList) {
69 let beat = this.lastHeartBeatList[id];
70 if (beat.status == 1) {
81 statusMessage: function () {
85 if (this.incident.incident) {
86 return this.incident.incident.title;
88 return this.pageStatus == "warn"
89 ? "Partially Degraded Service"
90 : "All Systems Operational";
93 if (!this.heartbeat) {
96 const data = Object.values(this.heartbeat.uptimeList);
97 const percent = data.reduce((a, b) => a + b, 0) / data.length || 0;
98 return (percent * 100).toFixed(1);
102 this.item.url = `${this.item.url}/status/${this.dashboard}`;
106 fetchStatus: function () {
107 this.fetch(`/api/status-page/${this.dashboard}?cachebust=${Date.now()}`)
108 .catch((e) => console.error(e))
109 .then((resp) => (this.incident = resp));
111 this.fetch(`/api/status-page/heartbeat/${this.dashboard}?cachebust=${Date.now()}`)
112 .catch((e) => console.error(e))
113 .then((resp) => (this.heartbeat = resp));
119 <style scoped lang="scss">
122 color: var(--text-title);
125 background-color: #94e185;
126 border-color: #78d965;
127 box-shadow: 0 0 5px 1px #94e185;
131 background-color: #f8a306;
132 border-color: #e1b35e;
133 box-shadow: 0 0 5px 1px #f8a306;
137 background-color: #c9404d;
138 border-color: #c42c3b;
139 box-shadow: 0 0 5px 1px #c9404d;
144 display: inline-block;
148 border: 1px solid #000;