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;
90 switch (this.pageStatus) {
92 message = "All Systems Operational";
95 message = "Partially Degraded Service";
98 message = "Degraded Service";
101 message = "Unknown service status";
105 uptime: function () {
106 if (!this.heartbeat) {
109 const data = Object.values(this.heartbeat.uptimeList);
110 const percent = data.reduce((a, b) => a + b, 0) / data.length || 0;
111 return (percent * 100).toFixed(1);
116 this.item.url = `${this.item.url}/status/${this.dashboard}`;
120 fetchStatus: function () {
121 const now = Date.now()
122 this.fetch(`/api/status-page/${this.dashboard}?cachebust=${now}`)
123 .catch((e) => console.error(e))
124 .then((resp) => (this.incident = resp));
127 `/api/status-page/heartbeat/${this.dashboard}?cachebust=${now}`
129 .catch((e) => console.error(e))
130 .then((resp) => (this.heartbeat = resp));
136 <style scoped lang="scss">
139 color: var(--text-title);
142 background-color: #94e185;
143 border-color: #78d965;
144 box-shadow: 0 0 5px 1px #94e185;
148 background-color: #f8a306;
149 border-color: #e1b35e;
150 box-shadow: 0 0 5px 1px #f8a306;
154 background-color: #c9404d;
155 border-color: #c42c3b;
156 box-shadow: 0 0 5px 1px #c9404d;
161 display: inline-block;
165 border: 1px solid #000;