uptime-kuma/src/pages/StatusPage.vue

1073 lines
34 KiB
Vue
Raw Normal View History

<template>
2021-09-20 08:22:18 +00:00
<div v-if="loadedTheme" class="container mt-3">
2022-03-15 04:00:29 +00:00
<!-- Sidebar for edit mode -->
<div v-if="enableEditMode" class="sidebar">
2022-04-09 09:03:10 +00:00
<div class="sidebar-body">
<div class="my-3">
<label for="slug" class="form-label">{{ $t("Slug") }}</label>
<div class="input-group">
<span id="basic-addon3" class="input-group-text">/status/</span>
<input id="slug" v-model="config.slug" type="text" class="form-control">
</div>
2022-03-15 04:00:29 +00:00
</div>
2021-09-13 11:21:39 +00:00
2022-04-09 09:03:10 +00:00
<div class="my-3">
<label for="title" class="form-label">{{ $t("Title") }}</label>
<input id="title" v-model="config.title" type="text" class="form-control">
</div>
2021-09-13 11:21:39 +00:00
<!-- Description -->
2022-04-09 09:03:10 +00:00
<div class="my-3">
<label for="description" class="form-label">{{ $t("Description") }}</label>
<textarea id="description" v-model="config.description" class="form-control"></textarea>
</div>
2021-09-13 11:21:39 +00:00
<!-- Footer Text -->
<div class="my-3">
<label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label>
<textarea id="footer-text" v-model="config.footerText" class="form-control"></textarea>
</div>
2022-04-09 09:03:10 +00:00
<div class="my-3 form-check form-switch">
<input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
<label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
</div>
2021-09-13 11:21:39 +00:00
2022-04-09 09:03:10 +00:00
<div class="my-3 form-check form-switch">
<input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox">
<label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
</div>
2021-09-13 11:21:39 +00:00
<!-- Show Powered By -->
<div class="my-3 form-check form-switch">
<input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox">
<label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
</div>
2022-04-09 09:03:10 +00:00
<div v-if="false" class="my-3">
2022-04-29 12:17:15 +00:00
<label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon") }}</sup></label>
2022-04-09 09:03:10 +00:00
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
</div>
2021-09-15 06:34:30 +00:00
2022-04-09 16:25:27 +00:00
<!-- Domain Name List -->
2022-04-09 09:03:10 +00:00
<div class="my-3">
2022-04-09 16:25:27 +00:00
<label class="form-label">
{{ $t("Domain Names") }}
2022-04-09 16:25:27 +00:00
<font-awesome-icon icon="plus-circle" class="btn-add-domain action text-primary" @click="addDomainField" />
</label>
<ul class="list-group domain-name-list">
<li v-for="(domain, index) in config.domainNameList" :key="index" class="list-group-item">
<input v-model="config.domainNameList[index]" type="text" class="no-bg domain-input" placeholder="example.com" />
<font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="removeDomain(index)" />
</li>
</ul>
2022-04-09 09:03:10 +00:00
</div>
2021-09-15 06:34:30 +00:00
<!-- Custom CSS -->
<div class="my-3">
<div class="mb-1">{{ $t("Custom CSS") }}</div>
<prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
</div>
2022-04-09 09:03:10 +00:00
<div class="danger-zone">
<button class="btn btn-danger me-2" @click="deleteDialog">
<font-awesome-icon icon="trash" />
{{ $t("Delete") }}
</button>
</div>
2021-09-13 11:21:39 +00:00
</div>
2022-03-15 04:00:29 +00:00
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<button class="btn btn-success me-2" @click="save">
2021-09-13 11:21:39 +00:00
<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">
2022-04-06 14:43:22 +00:00
<font-awesome-icon icon="undo" />
2021-09-13 11:21:39 +00:00
{{ $t("Discard") }}
</button>
</div>
2021-09-11 11:40:03 +00:00
</div>
2021-09-13 11:21:39 +00:00
<!-- Main Status Page -->
2022-03-15 04:00:29 +00:00
<div :class="{ edit: enableEditMode}" class="main">
<!-- Logo & Title -->
<h1 class="mb-4 title-flex">
2022-03-15 04:00:29 +00:00
<!-- Logo -->
<span class="logo-wrapper" @click="showImageCropUploadMethod">
2022-05-30 07:45:44 +00:00
<img :src="logoURL" alt class="logo me-2" :class="logoClass" />
2022-03-15 04:00:29 +00:00
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
</span>
2021-09-15 06:34:30 +00:00
2022-03-15 04:00:29 +00:00
<!-- Uploader -->
<!-- url="/api/status-page/upload-logo" -->
2022-04-30 12:57:08 +00:00
<ImageCropUpload
v-model="showImageCropUpload"
field="img"
:width="128"
:height="128"
:langType="$i18n.locale"
img-format="png"
:noCircle="true"
:noSquare="false"
@crop-success="cropSuccess"
2022-03-15 04:00:29 +00:00
/>
<!-- Title -->
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
</h1>
<!-- Admin functions -->
<div v-if="hasToken" class="mb-4">
<div v-if="!enableEditMode">
<button class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" />
{{ $t("Edit Status Page") }}
</button>
2021-09-15 10:28:48 +00:00
2022-03-15 04:00:29 +00:00
<a href="/manage-status-page" class="btn btn-info">
<font-awesome-icon icon="tachometer-alt" />
{{ $t("Go to Dashboard") }}
</a>
</div>
2021-10-29 05:19:24 +00:00
2022-03-15 04:00:29 +00:00
<div v-else>
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
<font-awesome-icon icon="bullhorn" />
{{ $t("Create Incident") }}
</button>
</div>
2021-09-13 11:21:39 +00:00
</div>
2021-09-11 11:40:03 +00:00
2022-03-15 04:00:29 +00:00
<!-- Incident -->
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
<strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
2021-09-16 06:37:57 +00:00
2022-03-15 04:00:29 +00:00
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
<Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
2021-09-16 06:37:57 +00:00
2022-03-15 04:00:29 +00:00
<!-- Incident Date -->
<div class="date mt-3">
2022-04-09 09:03:10 +00:00
{{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
2022-03-15 04:00:29 +00:00
<span v-if="incident.lastUpdatedDate">
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
</span>
</div>
2022-03-15 04:00:29 +00:00
<div v-if="editMode" class="mt-3">
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
<font-awesome-icon icon="bullhorn" />
{{ $t("Post") }}
2021-09-16 14:48:28 +00:00
</button>
2021-09-16 06:37:57 +00:00
2022-03-15 04:00:29 +00:00
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
<font-awesome-icon icon="edit" />
{{ $t("Edit") }}
</button>
2021-09-16 06:37:57 +00:00
2022-03-15 04:00:29 +00:00
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
<font-awesome-icon icon="times" />
{{ $t("Cancel") }}
</button>
2021-09-16 14:48:28 +00:00
2022-03-15 04:00:29 +00:00
<div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ $t("Style") }}: {{ $t(incident.style) }}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
</ul>
</div>
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
<font-awesome-icon icon="unlink" />
{{ $t("Unpin") }}
2021-09-16 14:48:28 +00:00
</button>
</div>
2021-09-16 06:37:57 +00:00
</div>
<!-- Maintenance -->
<template v-if="maintenance.length">
2022-04-30 12:57:08 +00:00
<div
v-for="maintenanceItem in maintenance" :key="maintenanceItem.id"
2022-09-18 14:34:05 +00:00
class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert"
2022-04-30 12:57:08 +00:00
>
<div class="item">
<div class="row">
<div class="col-1 col-md-1 d-flex justify-content-center align-items-center">
<font-awesome-icon
icon="wrench"
2022-09-18 14:34:05 +00:00
class="maintenance-icon"
/>
</div>
<div class="col-11 col-md-11">
<h4 class="alert-heading">{{ maintenanceItem.title }}</h4>
<div class="content">{{ maintenanceItem.description }}</div>
<div class="date mt-3">
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
</div>
</div>
</div>
2022-04-30 12:33:54 +00:00
</div>
</div>
2022-04-30 12:33:54 +00:00
</template>
2021-09-16 14:48:28 +00:00
2022-03-15 04:00:29 +00:00
<!-- Overall Status -->
<div class="shadow-box list p-4 overall-status mb-4">
<div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
<font-awesome-icon icon="question-circle" class="ok" />
{{ $t("No Services") }}
2021-09-16 14:48:28 +00:00
</div>
2022-03-15 04:00:29 +00:00
<template v-else>
<div v-if="allUp">
<font-awesome-icon icon="check-circle" class="ok" />
{{ $t("All Systems Operational") }}
</div>
<div v-else-if="partialDown">
<font-awesome-icon icon="exclamation-circle" class="warning" />
{{ $t("Partially Degraded Service") }}
</div>
<div v-else-if="allDown">
<font-awesome-icon icon="times-circle" class="danger" />
{{ $t("Degraded Service") }}
</div>
<div v-else-if="isMaintenance">
<font-awesome-icon icon="wrench" class="status-maintenance" />
{{ $t("Maintenance") }}
</div>
2022-03-15 04:00:29 +00:00
<div v-else>
<font-awesome-icon icon="question-circle" style="color: #efefef;" />
</div>
</template>
</div>
2021-09-16 14:48:28 +00:00
2022-03-15 04:00:29 +00:00
<!-- Description -->
<strong v-if="editMode">{{ $t("Description") }}:</strong>
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
2021-09-20 08:22:18 +00:00
2022-03-15 04:00:29 +00:00
<div v-if="editMode" class="mb-4">
<div>
<button class="btn btn-primary btn-add-group me-2" @click="addGroup">
<font-awesome-icon icon="plus" />
{{ $t("Add Group") }}
</button>
</div>
2022-03-15 04:00:29 +00:00
<div class="mt-3">
<div v-if="allMonitorList.length > 0 && loadedData">
<label>{{ $t("Add a monitor") }}:</label>
<select v-model="selectedMonitor" class="form-control">
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
</select>
</div>
<div v-else class="text-center">
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
</div>
2021-09-20 08:22:18 +00:00
</div>
2021-09-11 11:40:03 +00:00
</div>
2021-09-14 15:27:11 +00:00
2022-03-15 04:00:29 +00:00
<div class="mb-4">
<div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
<!-- 👀 Nothing here, please add a group or a monitor. -->
👀 {{ $t("statusPageNothing") }}
</div>
2021-09-11 11:40:03 +00:00
2022-03-18 09:56:46 +00:00
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" />
2021-09-15 06:34:30 +00:00
</div>
2022-03-15 04:00:29 +00:00
<footer class="mt-5 mb-4">
<div class="custom-footer-text text-start">
<strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
</div>
<Editable v-model="config.footerText" tag="div" :contenteditable="enableEditMode" :noNL="false" class="alert-heading p-2" />
<p v-if="config.showPoweredBy">
{{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
</p>
2022-03-15 04:00:29 +00:00
</footer>
2021-09-13 11:21:39 +00:00
</div>
2022-03-18 07:19:52 +00:00
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
{{ $t("deleteStatusPageMsg") }}
</Confirm>
<component is="style" v-if="config.customCSS" type="text/css">
{{ config.customCSS }}
</component>
2021-09-11 11:40:03 +00:00
</div>
</template>
<script>
2021-09-11 15:43:07 +00:00
import axios from "axios";
import dayjs from "dayjs";
2021-10-30 01:25:32 +00:00
import Favico from "favico.js";
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-css";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
2022-04-30 01:51:14 +00:00
import ImageCropUpload from "vue-image-crop-upload";
// import Prism Editor
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
import { useToast } from "vue-toastification";
import Confirm from "../components/Confirm.vue";
import PublicGroupList from "../components/PublicGroupList.vue";
import { getResBaseURL } from "../util-frontend";
2022-05-09 08:28:14 +00:00
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
2021-10-30 01:25:32 +00:00
2021-09-16 14:48:28 +00:00
const toast = useToast();
2021-09-11 15:43:07 +00:00
2021-09-15 06:34:30 +00:00
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
// eslint-disable-next-line no-unused-vars
2021-09-17 06:42:19 +00:00
let feedInterval;
2021-10-30 01:25:32 +00:00
const favicon = new Favico({
animation: "none"
});
export default {
2022-04-06 14:43:22 +00:00
2021-09-11 15:43:07 +00:00
components: {
2021-09-16 14:48:28 +00:00
PublicGroupList,
2022-03-18 07:19:52 +00:00
ImageCropUpload,
Confirm,
PrismEditor,
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();
},
2022-04-06 14:43:22 +00:00
props: {
/** Override for the status page slug */
2022-04-06 14:43:22 +00:00
overrideSlug: {
type: String,
required: false,
default: null,
},
},
data() {
return {
2022-03-10 13:34:30 +00:00
slug: null,
2021-09-12 18:26:45 +00:00
enableEditMode: false,
2021-09-16 06:37:57 +00:00
enableEditIncidentMode: false,
hasToken: false,
2021-09-11 11:40:03 +00:00
config: {},
2021-09-12 18:26:45 +00:00
selectedMonitor: null,
2021-09-15 10:28:48 +00:00
incident: null,
2021-09-17 06:42:19 +00:00
previousIncident: null,
2021-09-15 10:28:48 +00:00
showImageCropUpload: false,
imgDataUrl: "/icon.svg",
2021-09-20 08:22:18 +00:00
loadedTheme: false,
2021-09-22 07:10:08 +00:00
loadedData: false,
2021-09-22 07:31:15 +00:00
baseURL: "",
2022-03-15 04:00:29 +00:00
clickedEditButton: false,
maintenance: [],
2021-09-17 06:42:19 +00:00
};
},
computed: {
2021-09-13 11:21:39 +00:00
2021-09-22 07:31:15 +00:00
logoURL() {
if (this.imgDataUrl.startsWith("data:")) {
return this.imgDataUrl;
} else {
return this.baseURL + this.imgDataUrl;
}
},
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
},
2021-09-16 06:37:57 +00:00
editIncidentMode() {
2021-09-16 14:48:28 +00:00
return this.enableEditIncidentMode;
2021-09-16 06:37:57 +00:00
},
2021-09-15 06:34:30 +00:00
isPublished() {
2022-03-10 13:34:30 +00:00
return this.config.published;
2021-10-29 05:19:24 +00:00
},
2021-09-15 10:28:48 +00:00
logoClass() {
if (this.editMode) {
return {
"edit-mode": true,
2021-09-17 06:42:19 +00:00
};
2021-09-15 10:28:48 +00:00
}
return {};
2021-09-16 14:48:28 +00:00
},
incidentClass() {
return "bg-" + this.incident.style;
},
maintenanceClass() {
return "bg-maintenance";
},
2021-09-16 14:48:28 +00:00
overallStatus() {
2021-09-20 08:22:18 +00:00
if (Object.keys(this.$root.publicLastHeartbeatList).length === 0) {
return -1;
}
2021-09-16 14:48:28 +00:00
let status = STATUS_PAGE_ALL_UP;
let hasUp = false;
for (let id in this.$root.publicLastHeartbeatList) {
let beat = this.$root.publicLastHeartbeatList[id];
if (beat.status === MAINTENANCE) {
return STATUS_PAGE_MAINTENANCE;
2022-04-30 12:57:08 +00:00
} else if (beat.status === UP) {
2021-09-16 14:48:28 +00:00
hasUp = true;
} else {
status = STATUS_PAGE_PARTIAL_DOWN;
}
}
if (! hasUp) {
status = STATUS_PAGE_ALL_DOWN;
}
return status;
},
allUp() {
return this.overallStatus === STATUS_PAGE_ALL_UP;
},
partialDown() {
return this.overallStatus === STATUS_PAGE_PARTIAL_DOWN;
},
allDown() {
return this.overallStatus === STATUS_PAGE_ALL_DOWN;
},
2021-09-15 10:28:48 +00:00
isMaintenance() {
return this.overallStatus === STATUS_PAGE_MAINTENANCE;
},
},
watch: {
2022-04-09 16:25:27 +00:00
/**
* If connected to the socket and logged in, request private data of this statusPage
* @param connected
*/
"$root.loggedIn"(loggedIn) {
if (loggedIn) {
this.$root.getSocket().emit("getStatusPage", this.slug, (res) => {
if (res.ok) {
this.config = res.config;
if (!this.config.customCSS) {
this.config.customCSS = "body {\n" +
" \n" +
"}\n";
}
2022-04-09 16:25:27 +00:00
} else {
toast.error(res.msg);
}
});
}
},
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-15 10:28:48 +00:00
},
// Set Theme
2022-03-10 13:34:30 +00:00
"config.theme"() {
2022-03-18 04:57:37 +00:00
this.$root.statusPageTheme = this.config.theme;
2021-09-20 08:22:18 +00:00
this.loadedTheme = true;
},
"config.title"(title) {
document.title = title;
2022-03-15 04:00:29 +00:00
},
"$root.monitorList"() {
2022-03-18 09:56:46 +00:00
let count = Object.keys(this.$root.monitorList).length;
// Since publicGroupList is getting from public rest api, monitors' tags may not present if showTags = false
if (count > 0) {
for (let group of this.$root.publicGroupList) {
for (let monitor of group.monitorList) {
if (monitor.tags === undefined && this.$root.monitorList[monitor.id]) {
monitor.tags = this.$root.monitorList[monitor.id].tags;
}
}
}
}
2021-09-13 11:21:39 +00:00
}
2021-09-15 10:28:48 +00:00
},
2021-09-11 11:40:03 +00:00
async created() {
2021-09-24 07:26:48 +00:00
this.hasToken = ("token" in this.$root.storage());
2021-09-11 11:40:03 +00:00
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-22 07:31:15 +00:00
// Special handle for dev
this.baseURL = getResBaseURL();
},
2021-09-11 15:43:07 +00:00
async mounted() {
2022-04-06 14:43:22 +00:00
this.slug = this.overrideSlug || this.$route.params.slug;
2021-09-20 08:22:18 +00:00
2022-03-10 13:34:30 +00:00
if (!this.slug) {
this.slug = "default";
}
2021-09-20 08:22:18 +00:00
2022-06-01 05:05:12 +00:00
this.getData().then((res) => {
this.config = res.data.config;
2022-03-16 06:14:47 +00:00
2022-04-09 16:25:27 +00:00
if (!this.config.domainNameList) {
this.config.domainNameList = [];
}
2021-09-16 14:48:28 +00:00
if (this.config.icon) {
this.imgDataUrl = this.config.icon;
2021-09-16 14:48:28 +00:00
}
this.incident = res.data.incident;
2022-05-08 18:50:08 +00:00
this.maintenance = res.data.maintenance;
this.$root.publicGroupList = res.data.publicGroupList;
}).catch( function (error) {
if (error.response.status === 404) {
location.href = "/page-not-found";
}
console.log(error);
2021-09-16 14:48:28 +00:00
});
2021-09-17 06:42:19 +00:00
// 5mins a loop
this.updateHeartbeatList();
2021-09-17 06:42:19 +00:00
feedInterval = setInterval(() => {
this.updateHeartbeatList();
}, (300 + 10) * 1000);
2022-03-17 16:00:56 +00:00
// Go to edit page if ?edit present
// null means ?edit present, but no value
if (this.$route.query.edit || this.$route.query.edit === null) {
this.edit();
}
},
methods: {
2022-06-01 05:05:12 +00:00
/**
* Get status page data
* It should be preloaded in window.preloadData
* @returns {Promise<any>}
*/
getData: function () {
if (window.preloadData) {
return new Promise(resolve => resolve({
data: window.preloadData
}));
} else {
return axios.get("/api/status-page/" + this.slug);
}
},
/**
* Provide syntax highlighting for CSS
* @param {string} code Text to highlight
* @returns {string}
*/
highlighter(code) {
return highlight(code, languages.css);
},
/** Update the heartbeat list and update favicon if neccessary */
updateHeartbeatList() {
2021-09-17 06:42:19 +00:00
// If editMode, it will use the data from websocket.
if (! this.editMode) {
2022-03-10 13:34:30 +00:00
axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
2021-10-30 01:25:32 +00:00
const { heartbeatList, uptimeList } = res.data;
2022-03-12 07:31:01 +00:00
this.$root.heartbeatList = heartbeatList;
this.$root.uptimeList = uptimeList;
const heartbeatIds = Object.keys(heartbeatList);
2021-10-30 01:25:32 +00:00
const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
const monitorHeartbeats = heartbeatList[currentId];
const lastHeartbeat = monitorHeartbeats.at(-1);
if (lastHeartbeat) {
return lastHeartbeat.status === 0 ? downMonitorsAmount + 1 : downMonitorsAmount;
} else {
return downMonitorsAmount;
}
2021-10-30 01:25:32 +00:00
}, 0);
favicon.badge(downMonitors);
2021-09-22 07:10:08 +00:00
this.loadedData = true;
2021-09-17 06:42:19 +00:00
});
}
},
2021-09-12 18:26:45 +00:00
/** Enable editing mode */
edit() {
if (this.hasToken) {
this.$root.initSocketIO(true);
this.enableEditMode = true;
this.clickedEditButton = true;
2022-06-13 11:24:05 +00:00
// Try to fix #1658
this.loadedData = true;
}
2021-09-12 18:26:45 +00:00
},
/** Save the status page */
save() {
2022-03-15 04:00:29 +00:00
let startTime = new Date();
2022-03-24 15:43:07 +00:00
this.config.slug = this.config.slug.trim().toLowerCase();
2022-03-15 04:00:29 +00:00
this.$root.getSocket().emit("saveStatusPage", this.slug, this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
if (res.ok) {
this.enableEditMode = false;
this.$root.publicGroupList = res.publicGroupList;
2022-03-15 04:00:29 +00:00
// Add some delay, so that the side menu animation would be better
let endTime = new Date();
let time = 100 - (endTime - startTime) / 1000;
if (time < 0) {
time = 0;
}
setTimeout(() => {
2022-03-17 16:00:56 +00:00
location.href = "/status/" + this.config.slug;
2022-03-15 04:00:29 +00:00
}, time);
} else {
toast.error(res.msg);
}
});
2021-09-12 18:26:45 +00:00
},
/** Show dialog confirming deletion */
2022-03-18 07:19:52 +00:00
deleteDialog() {
this.$refs.confirmDelete.show();
},
/** Request deletion of this status page */
2022-03-18 07:19:52 +00:00
deleteStatusPage() {
this.$root.getSocket().emit("deleteStatusPage", this.slug, (res) => {
if (res.ok) {
this.enableEditMode = false;
location.href = "/manage-status-page";
} else {
toast.error(res.msg);
}
});
2021-09-12 18:26:45 +00:00
},
/**
* Returns label for a specifed monitor
* @param {Object} monitor Object representing monitor
* @returns {string}
*/
2021-09-12 18:26:45 +00:00
monitorSelectorLabel(monitor) {
return `${monitor.name}`;
},
/** Add a group to the status page */
2021-09-13 11:21:39 +00:00
addGroup() {
let groupName = this.$t("Untitled Group");
2021-09-15 06:34:30 +00:00
if (this.$root.publicGroupList.length === 0) {
groupName = this.$t("Services");
2021-09-15 06:34:30 +00:00
}
this.$root.publicGroupList.unshift({
2021-09-15 06:34:30 +00:00
name: groupName,
2021-09-13 11:21:39 +00:00
monitorList: [],
2021-09-17 06:42:19 +00:00
});
2021-09-14 06:12:27 +00:00
},
/** Add a domain to the status page */
2022-04-09 16:25:27 +00:00
addDomainField() {
this.config.domainNameList.push("");
2021-09-15 10:28:48 +00:00
},
/** Discard changes to status page */
2021-09-14 06:12:27 +00:00
discard() {
2022-03-17 16:00:56 +00:00
location.href = "/status/" + this.slug;
2021-10-29 05:19:24 +00:00
},
2021-09-15 10:28:48 +00:00
/**
* Set URL of new image after successful crop operation
* @param {string} imgDataUrl URL of image in data:// format
2021-09-15 10:28:48 +00:00
*/
2021-09-16 06:37:57 +00:00
cropSuccess(imgDataUrl) {
2021-09-15 10:28:48 +00:00
this.imgDataUrl = imgDataUrl;
},
/** Show image crop dialog if in edit mode */
2021-09-15 10:28:48 +00:00
showImageCropUploadMethod() {
if (this.editMode) {
this.showImageCropUpload = true;
}
2021-09-16 06:37:57 +00:00
},
/** Create an incident for this status page */
2021-09-16 06:37:57 +00:00
createIncident() {
this.enableEditIncidentMode = true;
2021-09-17 06:42:19 +00:00
if (this.incident) {
this.previousIncident = this.incident;
}
2021-09-16 06:37:57 +00:00
this.incident = {
title: "",
content: "",
2021-09-16 14:48:28 +00:00
style: "primary",
2021-09-16 06:37:57 +00:00
};
},
/** Post the incident to the status page */
2021-09-16 06:37:57 +00:00
postIncident() {
if (this.incident.title === "" || this.incident.content === "") {
toast.error(this.$t("Please input title and content"));
2021-09-16 14:48:28 +00:00
return;
}
this.$root.getSocket().emit("postIncident", this.slug, this.incident, (res) => {
2021-09-16 14:48:28 +00:00
if (res.ok) {
this.enableEditIncidentMode = false;
this.incident = res.incident;
} else {
toast.error(res.msg);
}
});
2021-09-16 06:37:57 +00:00
},
/** Click Edit Button */
2021-09-16 06:37:57 +00:00
editIncident() {
this.enableEditIncidentMode = true;
2021-09-17 06:42:19 +00:00
this.previousIncident = Object.assign({}, this.incident);
2021-09-16 06:37:57 +00:00
},
/** Cancel creation or editing of incident */
2021-09-16 06:37:57 +00:00
cancelIncident() {
this.enableEditIncidentMode = false;
2021-09-17 06:42:19 +00:00
if (this.previousIncident) {
this.incident = this.previousIncident;
this.previousIncident = null;
}
2021-09-16 06:37:57 +00:00
},
/** Unpin the incident */
2021-09-16 06:37:57 +00:00
unpinIncident() {
this.$root.getSocket().emit("unpinIncident", this.slug, () => {
2021-09-16 14:48:28 +00:00
this.incident = null;
2021-09-17 06:42:19 +00:00
});
},
/**
* Get the relative time difference of a date from now
* @returns {string}
*/
dateFromNow(date) {
return dayjs.utc(date).fromNow();
},
/**
* Remove a domain from the status page
* @param {number} index Index of domain to remove
*/
2022-04-09 16:25:27 +00:00
removeDomain(index) {
this.config.domainNameList.splice(index, 1);
},
2021-09-15 06:34:30 +00:00
}
2021-09-17 06:42:19 +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;
}
}
2022-03-15 04:00:29 +00:00
.main {
transition: all ease-in-out 0.1s;
&.edit {
margin-left: 300px;
}
}
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 300px;
height: 100vh;
2022-04-09 09:03:10 +00:00
2022-03-15 04:00:29 +00:00
border-right: 1px solid #ededed;
2022-03-18 07:19:52 +00:00
.danger-zone {
border-top: 1px solid #ededed;
padding-top: 15px;
}
2022-04-09 09:03:10 +00:00
.sidebar-body {
2022-04-09 09:23:22 +00:00
padding: 0 10px 10px 10px;
2022-04-09 09:03:10 +00:00
overflow-x: hidden;
overflow-y: auto;
height: calc(100% - 70px);
}
2022-03-15 04:00:29 +00:00
.sidebar-footer {
border-top: 1px solid #ededed;
2022-04-09 16:25:27 +00:00
border-right: 1px solid #ededed;
2022-04-09 09:23:22 +00:00
padding: 10px;
2022-04-09 09:03:10 +00:00
width: 300px;
height: 70px;
position: fixed;
left: 0;
bottom: 0;
background-color: white;
2022-04-09 16:25:27 +00:00
display: flex;
align-items: center;
2022-03-15 04:00:29 +00:00
}
}
2021-09-11 11:40:03 +00:00
footer {
text-align: center;
font-size: 14px;
}
2021-09-13 11:21:39 +00:00
2021-09-15 10:28:48 +00:00
.description span {
min-width: 50px;
}
.title-flex {
display: flex;
align-items: center;
gap: 10px;
}
.logo-wrapper {
display: inline-block;
position: relative;
&:hover {
.icon-upload {
transform: scale(1.2);
}
}
.icon-upload {
transition: all $easing-in 0.2s;
position: absolute;
bottom: 6px;
font-size: 20px;
left: -14px;
background-color: white;
padding: 5px;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.9);
}
}
2021-09-15 10:28:48 +00:00
.logo {
transition: all $easing-in 0.2s;
&.edit-mode {
cursor: pointer;
&:hover {
transform: scale(1.2);
}
}
}
2021-09-16 06:37:57 +00:00
.incident {
.content {
&[contenteditable="true"] {
min-height: 60px;
}
}
.date {
font-size: 12px;
2021-09-16 06:37:57 +00:00
}
}
.maintenance-bg-info {
color: $maintenance;
}
.maintenance-icon {
2022-09-18 14:34:05 +00:00
font-size: 35px;
vertical-align: middle;
}
.dark .shadow-box {
background-color: #0d1117;
}
.status-maintenance {
color: $maintenance;
margin-right: 5px;
}
2021-09-23 08:31:45 +00:00
.mobile {
h1 {
font-size: 22px;
}
.overall-status {
font-size: 20px;
}
}
2022-03-15 04:00:29 +00:00
.dark {
.sidebar {
background-color: $dark-header-bg;
border-right-color: $dark-border-color;
2022-03-18 07:19:52 +00:00
.danger-zone {
border-top-color: $dark-border-color;
}
2022-03-15 04:00:29 +00:00
.sidebar-footer {
2022-04-09 16:25:27 +00:00
border-right-color: $dark-border-color;
2022-03-15 04:00:29 +00:00
border-top-color: $dark-border-color;
2022-04-09 09:03:10 +00:00
background-color: $dark-header-bg;
2022-03-15 04:00:29 +00:00
}
}
}
2022-04-09 16:25:27 +00:00
.domain-name-list {
li {
display: flex;
align-items: center;
padding: 10px 0 10px 10px;
.domain-input {
flex-grow: 1;
background-color: transparent;
border: none;
color: $dark-font-color;
outline: none;
&::placeholder {
color: #1d2634;
}
}
}
}
/* required class */
.css-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
border-radius: 1rem;
padding: 10px 5px;
border: 1px solid #ced4da;
.dark & {
background: $dark-bg;
border: 1px solid $dark-border-color;
}
}
2021-09-11 11:40:03 +00:00
</style>