2021-09-11 08:22:30 +00:00
|
|
|
<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">
|
2021-09-12 18:26:45 +00:00
|
|
|
<button v-if="!enableEditMode" class="btn btn-info me-2" @click="edit">
|
2021-09-11 11:40:03 +00:00
|
|
|
<font-awesome-icon icon="edit" />
|
|
|
|
Edit Status Page
|
|
|
|
</button>
|
|
|
|
|
2021-09-12 18:26:45 +00:00
|
|
|
<button v-if="enableEditMode" class="btn btn-dark me-2" @click="leaveEditMode">
|
|
|
|
<font-awesome-icon icon="" />
|
|
|
|
Leave Edit Mode
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<router-link v-if="!enableEditMode" to="/dashboard" class="btn btn-info">
|
2021-09-11 11:40:03 +00:00
|
|
|
<font-awesome-icon icon="tachometer-alt" />
|
|
|
|
Go to Dashboard
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
|
2021-09-12 18:26:45 +00:00
|
|
|
<div class="shadow-box list p-4 overall-status mt-4">
|
2021-09-11 11:40:03 +00:00
|
|
|
<font-awesome-icon icon="check-circle" class="ok" /> All Systems Operational
|
|
|
|
</div>
|
|
|
|
|
2021-09-12 18:26:45 +00:00
|
|
|
<div v-if="showEditFeature" class="mt-4">
|
|
|
|
<VueMultiselect
|
|
|
|
v-model="selectedMonitor"
|
|
|
|
:options="allMonitorList"
|
|
|
|
:custom-label="monitorSelectorLabel"
|
|
|
|
:searchable="true"
|
|
|
|
@select="onSelectedMonitor"
|
|
|
|
></VueMultiselect>
|
|
|
|
</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>
|
2021-09-11 08:22:30 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-09-12 18:26:45 +00:00
|
|
|
import VueMultiselect from "vue-multiselect"
|
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";
|
|
|
|
}
|
2021-09-11 08:22:30 +00:00
|
|
|
|
|
|
|
export default {
|
2021-09-11 15:43:07 +00:00
|
|
|
components: {
|
|
|
|
HeartbeatBar,
|
|
|
|
Uptime,
|
2021-09-12 18:26:45 +00:00
|
|
|
VueMultiselect,
|
2021-09-11 15:43:07 +00:00
|
|
|
},
|
2021-09-11 08:22:30 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2021-09-12 18:26:45 +00:00
|
|
|
enableEditMode: false,
|
2021-09-11 08:22:30 +00:00
|
|
|
hasToken: false,
|
2021-09-11 11:40:03 +00:00
|
|
|
config: {},
|
2021-09-11 15:43:07 +00:00
|
|
|
monitorList: {},
|
2021-09-12 18:26:45 +00:00
|
|
|
selectedMonitor: null,
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2021-09-12 18:26:45 +00:00
|
|
|
allMonitorList() {
|
|
|
|
return Object.values(this.$root.monitorList);
|
|
|
|
},
|
|
|
|
showEditFeature() {
|
|
|
|
return this.enableEditMode && this.$root.socket.connected;
|
|
|
|
}
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
},
|
2021-09-11 11:40:03 +00:00
|
|
|
async created() {
|
2021-09-11 08:22:30 +00:00
|
|
|
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 08:22:30 +00:00
|
|
|
},
|
2021-09-11 15:43:07 +00:00
|
|
|
async mounted() {
|
|
|
|
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-09-12 18:26:45 +00:00
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
edit() {
|
|
|
|
this.$root.initSocketIO(true);
|
2021-09-12 18:26:45 +00:00
|
|
|
this.enableEditMode = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
leaveEditMode() {
|
|
|
|
this.enableEditMode = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
monitorSelectorLabel(monitor) {
|
|
|
|
return `${monitor.name}`;
|
|
|
|
},
|
|
|
|
|
|
|
|
onSelectedMonitor(selectedOption, id) {
|
|
|
|
console.log(selectedOption);
|
|
|
|
console.log(id);
|
|
|
|
|
|
|
|
// TODO: emit socket cmd to set it public
|
|
|
|
// TODO: Reload monitor or add to list
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
2021-09-12 18:26:45 +00:00
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</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>
|