2021-09-11 08:22:30 +00:00
|
|
|
<template>
|
2021-09-11 11:40:03 +00:00
|
|
|
<div class="container mt-3">
|
2021-09-14 15:27:11 +00:00
|
|
|
<h1>
|
|
|
|
<img src="/icon.svg" alt class="me-2" />
|
2021-09-15 06:34:30 +00:00
|
|
|
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
2021-09-14 15:27:11 +00:00
|
|
|
</h1>
|
2021-09-11 11:40:03 +00:00
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
<div v-if="hasToken" class="mt-3" style="height: 38px;">
|
|
|
|
<div v-if="!enableEditMode">
|
|
|
|
<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 v-else>
|
|
|
|
<button class="btn btn-success me-2" @click="leaveEditMode">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Save") }}
|
|
|
|
</button>
|
|
|
|
|
2021-09-14 06:12:27 +00:00
|
|
|
<button class="btn btn-danger me-2" @click="discard">
|
2021-09-13 11:21:39 +00:00
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Discard") }}
|
|
|
|
</button>
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<button class="btn btn-primary btn-add-group me-2" @click="">
|
|
|
|
<font-awesome-icon icon="bullhorn" />
|
|
|
|
{{ $t("Create Incident") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="isPublished" class="btn btn-light me-2" @click="">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Unpublish") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="!isPublished" class="btn btn-info me-2" @click="">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Publish") }}
|
|
|
|
</button>
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
<!-- Set Default Language -->
|
|
|
|
<!-- Set theme -->
|
|
|
|
</div>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-12 18:26:45 +00:00
|
|
|
<div class="shadow-box list p-4 overall-status mt-4">
|
2021-09-14 06:12:27 +00:00
|
|
|
<div v-if="false">
|
|
|
|
<font-awesome-icon icon="check-circle" class="ok" />
|
|
|
|
All Systems Operational
|
|
|
|
</div>
|
2021-09-15 06:34:30 +00:00
|
|
|
<div v-if="false">
|
2021-09-14 06:12:27 +00:00
|
|
|
<font-awesome-icon icon="exclamation-circle" class="warning" />
|
|
|
|
Partially Degraded Service
|
|
|
|
</div>
|
2021-09-15 06:34:30 +00:00
|
|
|
<div>
|
|
|
|
<font-awesome-icon icon="times-circle" class="danger" />
|
|
|
|
Degraded Service
|
|
|
|
</div>
|
2021-09-14 06:12:27 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-14 15:27:11 +00:00
|
|
|
<div class="mt-4">
|
|
|
|
<Editable v-model="config.description" :contenteditable="editMode" tag="span" />
|
|
|
|
</div>
|
|
|
|
|
2021-09-14 06:12:27 +00:00
|
|
|
<div class="shadow-box alert alert-success mt-4 p-4" role="alert">
|
|
|
|
<h4 class="alert-heading">Well done!</h4>
|
|
|
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
|
|
|
<hr>
|
|
|
|
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
2021-09-14 15:27:11 +00:00
|
|
|
|
|
|
|
<div class="mt-3">
|
|
|
|
<button v-if="editMode" class="btn btn-light me-2">Unpin</button>
|
|
|
|
<button v-if="editMode" class="btn btn-light">Edit</button>
|
|
|
|
</div>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<div v-if="editMode" class="mt-4">
|
2021-09-14 15:27:11 +00:00
|
|
|
<div>
|
2021-09-15 06:34:30 +00:00
|
|
|
<button class="btn btn-primary btn-add-group me-2" @click="addGroup">
|
|
|
|
<font-awesome-icon icon="plus" />
|
|
|
|
Add Group
|
|
|
|
</button>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
2021-09-14 15:27:11 +00:00
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<div class="mt-3">
|
2021-09-14 15:27:11 +00:00
|
|
|
<VueMultiselect
|
|
|
|
v-model="selectedMonitor"
|
|
|
|
:options="allMonitorList"
|
|
|
|
:custom-label="monitorSelectorLabel"
|
|
|
|
:searchable="true"
|
|
|
|
placeholder="Add a monitor"
|
|
|
|
></VueMultiselect>
|
2021-09-11 15:43:07 +00:00
|
|
|
</div>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<div class="mt-4">
|
|
|
|
<div v-if="$root.publicGroupList.length === 0" class="text-center">
|
|
|
|
👀 Nothing here, please add a group or a monitor.
|
|
|
|
</div>
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
<GroupList :edit-mode="enableEditMode" />
|
|
|
|
</div>
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<footer class="mt-5 mb-4">
|
2021-09-11 11:40:03 +00:00
|
|
|
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 axios from "axios";
|
2021-09-13 11:21:39 +00:00
|
|
|
import GroupList from "../components/GroupList.vue";
|
2021-09-11 15:43:07 +00:00
|
|
|
|
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
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
|
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
export default {
|
2021-09-11 15:43:07 +00:00
|
|
|
components: {
|
2021-09-13 11:21:39 +00:00
|
|
|
GroupList,
|
2021-09-12 18:26:45 +00:00
|
|
|
VueMultiselect,
|
2021-09-11 15:43:07 +00:00
|
|
|
},
|
2021-09-15 06:34:30 +00:00
|
|
|
|
|
|
|
// Leave Page for vue route change
|
|
|
|
beforeRouteLeave(to, from, next) {
|
|
|
|
if (this.editMode) {
|
|
|
|
const answer = window.confirm(leavePageMsg);
|
|
|
|
if (answer) {
|
|
|
|
next();
|
|
|
|
} else {
|
|
|
|
next(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
next();
|
|
|
|
},
|
|
|
|
|
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-12 18:26:45 +00:00
|
|
|
selectedMonitor: null,
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2021-09-13 11:21:39 +00:00
|
|
|
|
2021-09-14 06:12:27 +00:00
|
|
|
/**
|
|
|
|
* If the monitor is added to public list, which will not be in this list.
|
|
|
|
*/
|
2021-09-12 18:26:45 +00:00
|
|
|
allMonitorList() {
|
2021-09-13 11:21:39 +00:00
|
|
|
let result = [];
|
|
|
|
|
|
|
|
for (let id in this.$root.monitorList) {
|
2021-09-14 06:12:27 +00:00
|
|
|
if (this.$root.monitorList[id] && ! (id in this.$root.publicMonitorList)) {
|
2021-09-13 11:21:39 +00:00
|
|
|
let monitor = this.$root.monitorList[id];
|
|
|
|
result.push(monitor);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
2021-09-12 18:26:45 +00:00
|
|
|
},
|
2021-09-15 06:34:30 +00:00
|
|
|
|
2021-09-14 15:27:11 +00:00
|
|
|
editMode() {
|
2021-09-12 18:26:45 +00:00
|
|
|
return this.enableEditMode && this.$root.socket.connected;
|
2021-09-15 06:34:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
isPublished() {
|
|
|
|
return this.config.statusPagePublished;
|
|
|
|
},
|
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
/**
|
|
|
|
* Selected a monitor and add to the list.
|
|
|
|
*/
|
|
|
|
selectedMonitor(monitor) {
|
|
|
|
if (monitor) {
|
|
|
|
if (this.$root.publicGroupList.length === 0) {
|
|
|
|
this.addGroup();
|
|
|
|
}
|
|
|
|
|
|
|
|
const firstGroup = this.$root.publicGroupList[0];
|
|
|
|
|
|
|
|
firstGroup.monitorList.push(monitor);
|
|
|
|
this.selectedMonitor = null;
|
|
|
|
}
|
|
|
|
}
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
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-15 06:34:30 +00:00
|
|
|
|
|
|
|
// Browser change page
|
|
|
|
// https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
|
|
|
|
window.addEventListener("beforeunload", (e) => {
|
|
|
|
if (this.editMode) {
|
|
|
|
(e || window.event).returnValue = leavePageMsg;
|
|
|
|
return leavePageMsg;
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
});
|
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}`;
|
|
|
|
},
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
addGroup() {
|
2021-09-15 06:34:30 +00:00
|
|
|
let groupName = "Untitled Group";
|
|
|
|
|
|
|
|
if (this.$root.publicGroupList.length === 0) {
|
|
|
|
groupName = "Services";
|
|
|
|
}
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
this.$root.publicGroupList.push({
|
2021-09-15 06:34:30 +00:00
|
|
|
name: groupName,
|
2021-09-13 11:21:39 +00:00
|
|
|
monitorList: [],
|
|
|
|
})
|
2021-09-14 06:12:27 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
discard() {
|
|
|
|
location.reload();
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
2021-09-15 06:34:30 +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;
|
2021-09-14 06:12:27 +00:00
|
|
|
font-size: 25px;
|
2021-09-11 11:40:03 +00:00
|
|
|
|
|
|
|
.ok {
|
|
|
|
color: $primary;
|
|
|
|
}
|
2021-09-14 06:12:27 +00:00
|
|
|
|
|
|
|
.warning {
|
|
|
|
color: $warning;
|
|
|
|
}
|
2021-09-15 06:34:30 +00:00
|
|
|
|
|
|
|
.danger {
|
|
|
|
color: $danger;
|
|
|
|
}
|
2021-09-11 11:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
|
|
img {
|
|
|
|
vertical-align: middle;
|
|
|
|
height: 60px;
|
|
|
|
width: 60px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
footer {
|
|
|
|
text-align: center;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
2021-09-13 11:21:39 +00:00
|
|
|
|
2021-09-11 11:40:03 +00:00
|
|
|
</style>
|