uptime-kuma/src/pages/StatusPage.vue

125 lines
3.1 KiB
Vue
Raw Normal View History

<template>
2021-09-11 11:40:03 +00:00
<div class="container mt-3">
<h1><img src="/icon.svg" alt /> Uptime Kuma</h1>
<div v-if="hasToken" class="mt-3">
<button class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" />
Edit Status Page
</button>
<router-link to="/dashboard" class="btn btn-info">
<font-awesome-icon icon="tachometer-alt" />
Go to Dashboard
</router-link>
</div>
<div class="shadow-box list mt-4 p-4 overall-status">
<font-awesome-icon icon="check-circle" class="ok" /> All Systems Operational
</div>
2021-09-11 15:43:07 +00:00
<div class="shadow-box monitor-list mt-4">
<div v-if="Object.keys(monitorList).length === 0" class="text-center my-3">
{{ $t("No Monitors") }}
2021-09-11 11:40:03 +00:00
</div>
2021-09-11 15:43:07 +00:00
<div v-for="(item, index) in monitorList" :key="index" class="item">
2021-09-11 11:40:03 +00:00
<div class="row">
2021-09-11 15:43:07 +00:00
<div class="col-6 col-md-8 small-padding">
2021-09-11 11:40:03 +00:00
<div class="info">
<Uptime :monitor="item" type="24" :pill="true" />
{{ item.name }}
</div>
</div>
2021-09-11 15:43:07 +00:00
<div :key="$root.userHeartbeatBar" class="col-6 col-md-4">
2021-09-11 11:40:03 +00:00
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
</div>
2021-09-11 15:43:07 +00:00
</div>
2021-09-11 11:40:03 +00:00
</div>
<footer class="mt-4">
Powered by <a target="_blank" href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a>
</footer>
</div>
</template>
<script>
2021-09-11 15:43:07 +00:00
import { useToast } from "vue-toastification";
2021-09-11 11:40:03 +00:00
const toast = useToast();
2021-09-11 15:43:07 +00:00
import axios from "axios";
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Uptime from "../components/Uptime.vue";
2021-09-11 11:40:03 +00:00
const env = process.env.NODE_ENV || "production";
// change the axios base url for development
if (env === "development" || localStorage.dev === "dev") {
axios.defaults.baseURL = location.protocol + "//" + location.hostname + ":3001";
}
export default {
2021-09-11 15:43:07 +00:00
components: {
HeartbeatBar,
Uptime,
},
data() {
return {
hasToken: false,
2021-09-11 11:40:03 +00:00
config: {},
2021-09-11 15:43:07 +00:00
monitorList: {},
}
},
computed: {
},
watch: {
},
2021-09-11 11:40:03 +00:00
async created() {
this.hasToken = ("token" in localStorage);
2021-09-11 15:43:07 +00:00
this.config = (await axios.get("/api/status-page/config")).data;
2021-09-11 11:40:03 +00:00
// Set Theme
this.$root.statusPageTheme = this.config.statusPageTheme;
},
2021-09-11 15:43:07 +00:00
async mounted() {
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
},
methods: {
edit() {
this.$root.initSocketIO(true);
}
},
}
</script>
2021-09-11 11:40:03 +00:00
<style lang="scss" scoped>
@import "../assets/vars.scss";
.overall-status {
font-weight: bold;
font-size: 20px;
.ok {
color: $primary;
}
}
h1 {
font-size: 30px;
img {
vertical-align: middle;
height: 60px;
width: 60px;
}
}
footer {
text-align: center;
font-size: 14px;
}
</style>