mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-08-21 16:15:25 +08:00
Merge remote-tracking branch 'origin_kuma/master'
# Conflicts: # package-lock.json # server/database.js # server/model/monitor.js # server/routers/api-router.js # server/server.js # src/components/MonitorList.vue # src/components/PingChart.vue # src/icon.js # src/pages/DashboardHome.vue # src/pages/StatusPage.vue # src/router.js # src/util.js
This commit is contained in:
Karel Krýda
81
src/pages/AddStatusPage.vue
Normal file
81
src/pages/AddStatusPage.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<transition name="slide-fade" appear>
|
||||
<div>
|
||||
<h1 class="mb-3">
|
||||
{{ $t("Add New Status Page") }}
|
||||
</h1>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<div class="shadow-box">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">{{ $t("Name") }}</label>
|
||||
<input id="name" v-model="title" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<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="slug" type="text" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-text">
|
||||
<ul>
|
||||
<li>{{ $t("Accept characters:") }} <mark>a-z</mark> <mark>0-9</mark> <mark>-</mark></li>
|
||||
<i18n-t tag="li" keypath="startOrEndWithOnly">
|
||||
<mark>a-z</mark> <mark>0-9</mark>
|
||||
</i18n-t>
|
||||
<li>{{ $t("No consecutive dashes") }} <mark>--</mark></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 mb-1">
|
||||
<button id="monitor-submit-btn" class="btn btn-primary w-100" type="submit" :disabled="processing">{{ $t("Next") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
slug: "",
|
||||
processing: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("addStatusPage", this.title, this.slug, (res) => {
|
||||
this.processing = false;
|
||||
|
||||
if (res.ok) {
|
||||
location.href = "/status/" + this.slug + "?edit";
|
||||
} else {
|
||||
|
||||
if (res.msg.includes("UNIQUE constraint")) {
|
||||
this.$root.toastError(this.$t("The slug is already taken. Please choose another slug."));
|
||||
} else {
|
||||
this.$root.toastRes(res);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shadow-box {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -26,9 +26,9 @@ export default {
|
||||
MonitorList,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ $t("Up") }}</h3>
|
||||
<span class="num">{{ stats.up }}</span>
|
||||
<span class="num">{{ $root.stats.up }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("Down") }}</h3>
|
||||
<span class="num text-danger">{{ stats.down }}</span>
|
||||
<span class="num text-danger">{{ $root.stats.down }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("Maintenance") }}</h3>
|
||||
@@ -21,11 +21,11 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("Unknown") }}</h3>
|
||||
<span class="num text-secondary">{{ stats.unknown }}</span>
|
||||
<span class="num text-secondary">{{ $root.stats.unknown }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("pauseDashboardHome") }}</h3>
|
||||
<span class="num text-secondary">{{ stats.pause }}</span>
|
||||
<span class="num text-secondary">{{ $root.stats.pause }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
|
||||
<td><router-link :to="`/dashboard/monitor/${beat.monitorID}`">{{ beat.name }}</router-link></td>
|
||||
<td><router-link :to="`/dashboard/${beat.monitorID}`">{{ beat.name }}</router-link></td>
|
||||
<td><Status :status="beat.status" /></td>
|
||||
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
|
||||
<td class="border-0">{{ beat.msg }}</td>
|
||||
@@ -93,41 +93,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
let result = {
|
||||
up: 0,
|
||||
down: 0,
|
||||
maintenance: 0,
|
||||
unknown: 0,
|
||||
pause: 0,
|
||||
};
|
||||
|
||||
for (let monitorID in this.$root.monitorList) {
|
||||
let beat = this.$root.lastHeartbeatList[monitorID];
|
||||
let monitor = this.$root.monitorList[monitorID];
|
||||
|
||||
if (monitor && monitor.maintenance) {
|
||||
result.maintenance++;
|
||||
}
|
||||
else if (monitor && !monitor.active) {
|
||||
result.pause++;
|
||||
} else if (beat) {
|
||||
if (beat.status === 1) {
|
||||
result.up++;
|
||||
} else if (beat.status === 0) {
|
||||
result.down++;
|
||||
} else if (beat.status === 2) {
|
||||
result.up++;
|
||||
} else {
|
||||
result.unknown++;
|
||||
}
|
||||
} else {
|
||||
result.unknown++;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
importantHeartBeatList() {
|
||||
let result = [];
|
||||
@@ -157,6 +122,7 @@ export default {
|
||||
return 0;
|
||||
});
|
||||
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
this.heartBeatList = result;
|
||||
|
||||
return result;
|
||||
|
||||
@@ -32,6 +32,9 @@
|
||||
<option value="steam">
|
||||
Steam Game Server
|
||||
</option>
|
||||
<option value="mqtt">
|
||||
MQTT
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -53,7 +56,7 @@
|
||||
<CopyableInput id="push-url" v-model="pushURL" type="url" disabled="disabled" />
|
||||
<div class="form-text">
|
||||
{{ $t("needPushEvery", [monitor.interval]) }}<br />
|
||||
{{ $t("pushOptionalParams", ["msg, ping"]) }}
|
||||
{{ $t("pushOptionalParams", ["status, msg, ping"]) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,15 +70,15 @@
|
||||
</div>
|
||||
|
||||
<!-- Hostname -->
|
||||
<!-- TCP Port / Ping / DNS / Steam only -->
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam'" class="my-3">
|
||||
<!-- TCP Port / Ping / DNS / Steam / MQTT only -->
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
|
||||
<label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
|
||||
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required>
|
||||
</div>
|
||||
|
||||
<!-- Port -->
|
||||
<!-- For TCP Port / Steam Type -->
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'steam'" class="my-3">
|
||||
<!-- For TCP Port / Steam / MQTT Type -->
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
|
||||
<label for="port" class="form-label">{{ $t("Port") }}</label>
|
||||
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
|
||||
</div>
|
||||
@@ -87,7 +90,7 @@
|
||||
<label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
|
||||
<input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
|
||||
<div class="form-text">
|
||||
{{ $t("resoverserverDescription") }}
|
||||
{{ $t("resolverserverDescription") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,6 +118,36 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- MQTT -->
|
||||
<!-- For MQTT Type -->
|
||||
<template v-if="monitor.type === 'mqtt'">
|
||||
<div class="my-3">
|
||||
<label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
|
||||
<input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="my-3">
|
||||
<label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
|
||||
<input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="my-3">
|
||||
<label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
|
||||
<input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
|
||||
<div class="form-text">
|
||||
{{ $t("topicExplanation") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3">
|
||||
<label for="mqttSuccessMessage" class="form-label">MQTT {{ $t("successMessage") }}</label>
|
||||
<input id="mqttSuccessMessage" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">
|
||||
<div class="form-text">
|
||||
{{ $t("successMessageExplanation") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Interval -->
|
||||
<div class="my-3">
|
||||
<label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
|
||||
@@ -139,6 +172,15 @@
|
||||
|
||||
<h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
|
||||
|
||||
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
|
||||
<input id="expiry-notification" v-model="monitor.expiryNotification" class="form-check-input" type="checkbox">
|
||||
<label class="form-check-label" for="expiry-notification">
|
||||
{{ $t("Certificate Expiry Notification") }}
|
||||
</label>
|
||||
<div class="form-text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
|
||||
<input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
|
||||
<label class="form-check-label" for="ignore-tls">
|
||||
@@ -222,6 +264,34 @@
|
||||
{{ $t("Setup Notification") }}
|
||||
</button>
|
||||
|
||||
<!-- Proxies -->
|
||||
<div v-if="monitor.type === 'http' || monitor.type === 'keyword'">
|
||||
<h2 class="mt-5 mb-2">{{ $t("Proxy") }}</h2>
|
||||
<p v-if="$root.proxyList.length === 0">
|
||||
{{ $t("Not available, please setup.") }}
|
||||
</p>
|
||||
|
||||
<div v-if="$root.proxyList.length > 0" class="form-check my-3">
|
||||
<input id="proxy-disable" v-model="monitor.proxyId" :value="null" name="proxy" class="form-check-input" type="radio">
|
||||
<label class="form-check-label" for="proxy-disable">{{ $t("No Proxy") }}</label>
|
||||
</div>
|
||||
|
||||
<div v-for="proxy in $root.proxyList" :key="proxy.id" class="form-check my-3">
|
||||
<input :id="`proxy-${proxy.id}`" v-model="monitor.proxyId" :value="proxy.id" name="proxy" class="form-check-input" type="radio">
|
||||
|
||||
<label class="form-check-label" :for="`proxy-${proxy.id}`">
|
||||
{{ proxy.host }}:{{ proxy.port }} ({{ proxy.protocol }})
|
||||
<a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
|
||||
</label>
|
||||
|
||||
<span v-if="proxy.default === true" class="badge bg-primary ms-2">{{ $t("default") }}</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary me-2" type="button" @click="$refs.proxyDialog.show()">
|
||||
{{ $t("Setup Proxy") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- HTTP Options -->
|
||||
<template v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
|
||||
<h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
|
||||
@@ -285,23 +355,25 @@
|
||||
</form>
|
||||
|
||||
<NotificationDialog ref="notificationDialog" @added="addedNotification" />
|
||||
<ProxyDialog ref="proxyDialog" @added="addedProxy" />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NotificationDialog from "../components/NotificationDialog.vue";
|
||||
import TagsManager from "../components/TagsManager.vue";
|
||||
import CopyableInput from "../components/CopyableInput.vue";
|
||||
|
||||
import { useToast } from "vue-toastification";
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import { useToast } from "vue-toastification";
|
||||
import CopyableInput from "../components/CopyableInput.vue";
|
||||
import NotificationDialog from "../components/NotificationDialog.vue";
|
||||
import ProxyDialog from "../components/ProxyDialog.vue";
|
||||
import TagsManager from "../components/TagsManager.vue";
|
||||
import { genSecret, isDev } from "../util.ts";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProxyDialog,
|
||||
CopyableInput,
|
||||
NotificationDialog,
|
||||
TagsManager,
|
||||
@@ -349,25 +421,36 @@ export default {
|
||||
},
|
||||
|
||||
pushURL() {
|
||||
return this.$root.baseURL + "/api/push/" + this.monitor.pushToken + "?msg=OK&ping=";
|
||||
return this.$root.baseURL + "/api/push/" + this.monitor.pushToken + "?status=true&msg=OK&ping=";
|
||||
},
|
||||
|
||||
bodyPlaceholder() {
|
||||
return this.$t("Example:", [`
|
||||
return this.$t("Example:", [ `
|
||||
{
|
||||
"key": "value"
|
||||
}`]);
|
||||
}` ]);
|
||||
},
|
||||
|
||||
headersPlaceholder() {
|
||||
return this.$t("Example:", [`
|
||||
return this.$t("Example:", [ `
|
||||
{
|
||||
"HeaderName": "HeaderValue"
|
||||
}`]);
|
||||
}` ]);
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
"$root.proxyList"() {
|
||||
if (this.isAdd) {
|
||||
if (this.$root.proxyList && !this.monitor.proxyId) {
|
||||
const proxy = this.$root.proxyList.find(proxy => proxy.default);
|
||||
|
||||
if (proxy) {
|
||||
this.monitor.proxyId = proxy.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"$route.fullPath"() {
|
||||
this.init();
|
||||
@@ -435,14 +518,28 @@ export default {
|
||||
notificationIDList: {},
|
||||
ignoreTls: false,
|
||||
upsideDown: false,
|
||||
expiryNotification: false,
|
||||
maxredirects: 10,
|
||||
accepted_statuscodes: ["200-299"],
|
||||
accepted_statuscodes: [ "200-299" ],
|
||||
dns_resolve_type: "A",
|
||||
dns_resolve_server: "1.1.1.1",
|
||||
proxyId: null,
|
||||
mqttUsername: "",
|
||||
mqttPassword: "",
|
||||
mqttTopic: "",
|
||||
mqttSuccessMessage: "",
|
||||
};
|
||||
|
||||
if (this.$root.proxyList && !this.monitor.proxyId) {
|
||||
const proxy = this.$root.proxyList.find(proxy => proxy.default);
|
||||
|
||||
if (proxy) {
|
||||
this.monitor.proxyId = proxy.id;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.$root.notificationList.length; i++) {
|
||||
if (this.$root.notificationList[i].isDefault == true) {
|
||||
if (this.$root.notificationList[i].isDefault === true) {
|
||||
this.monitor.notificationIDList[this.$root.notificationList[i].id] = true;
|
||||
}
|
||||
}
|
||||
@@ -532,6 +629,12 @@ export default {
|
||||
addedNotification(id) {
|
||||
this.monitor.notificationIDList[id] = true;
|
||||
},
|
||||
|
||||
// Added a Proxy Event
|
||||
// Enable it if the proxy is added in EditMonitor.vue
|
||||
addedProxy(id) {
|
||||
this.monitor.proxyId = id;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,19 +1,45 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<StatusPage v-if="statusPageSlug" :override-slug="statusPageSlug" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import StatusPage from "./StatusPage.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StatusPage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusPageSlug: null,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
let entryPage = (await axios.get("/api/entry-page")).data;
|
||||
|
||||
if (entryPage === "statusPage") {
|
||||
this.$router.push("/status");
|
||||
// There are only 2 cases that could come in here.
|
||||
// 1. Matched status Page domain name
|
||||
// 2. Vue Frontend Dev
|
||||
let res = (await axios.get("/api/entry-page")).data;
|
||||
|
||||
if (res.type === "statusPageMatchedDomain") {
|
||||
this.statusPageSlug = res.statusPageSlug;
|
||||
this.$root.forceStatusPageTheme = true;
|
||||
|
||||
} else if (res.type === "entryPage") { // Dev only. For production, the logic is in the server side
|
||||
const entryPage = res.entryPage;
|
||||
|
||||
if (entryPage === "statusPage") {
|
||||
this.$router.push("/status");
|
||||
} else {
|
||||
this.$router.push("/dashboard");
|
||||
}
|
||||
} else {
|
||||
this.$router.push("/dashboard");
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
@@ -11,6 +11,6 @@ export default {
|
||||
components: {
|
||||
MonitorList,
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
117
src/pages/ManageStatusPage.vue
Normal file
117
src/pages/ManageStatusPage.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<transition name="slide-fade" appear>
|
||||
<div>
|
||||
<h1 class="mb-3">
|
||||
{{ $t("Status Pages") }}
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("New Status Page") }}</router-link>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box">
|
||||
<template v-if="$root.statusPageListLoaded">
|
||||
<span v-if="Object.keys($root.statusPageList).length === 0" class="d-flex align-items-center justify-content-center my-3">
|
||||
{{ $t("No status pages") }}
|
||||
</span>
|
||||
|
||||
<!-- use <a> instead of <router-link>, because the heartbeat won't load. -->
|
||||
<a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
|
||||
<img :src="icon(statusPage.icon)" alt class="logo me-2" />
|
||||
<div class="info">
|
||||
<div class="title">{{ statusPage.title }}</div>
|
||||
<div class="slug">/status/{{ statusPage.slug }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
<div v-else class="d-flex align-items-center justify-content-center my-3 spinner">
|
||||
<font-awesome-icon icon="spinner" size="2x" spin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getResBaseURL } from "../util-frontend";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
icon(icon) {
|
||||
if (icon === "/icon.svg") {
|
||||
return icon;
|
||||
} else {
|
||||
return getResBaseURL() + icon;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.15s;
|
||||
padding: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #cdf8f4;
|
||||
}
|
||||
|
||||
$logo-width: 70px;
|
||||
|
||||
.logo {
|
||||
width: $logo-width;
|
||||
|
||||
// Better when the image is loading
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.info {
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.slug {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.item {
|
||||
&:hover {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
99
src/pages/NotFound.vue
Normal file
99
src/pages/NotFound.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Desktop header -->
|
||||
<header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
|
||||
<router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
|
||||
<object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" />
|
||||
<span class="fs-4 title">Uptime Kuma</span>
|
||||
</router-link>
|
||||
</header>
|
||||
|
||||
<!-- Mobile header -->
|
||||
<header v-else class="d-flex flex-wrap justify-content-center pt-2 pb-2 mb-3">
|
||||
<router-link to="/dashboard" class="d-flex align-items-center text-dark text-decoration-none">
|
||||
<object class="bi" width="40" height="40" data="/icon.svg" />
|
||||
<span class="fs-4 title ms-2">Uptime Kuma</span>
|
||||
</router-link>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div>
|
||||
<strong>🐻 {{ $t("Page Not Found") }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="guide">
|
||||
Most likely causes:
|
||||
<ul>
|
||||
<li>The resource is no longer available.</li>
|
||||
<li>There might be a typing error in the address.</li>
|
||||
</ul>
|
||||
|
||||
What you can try:<br />
|
||||
<ul>
|
||||
<li>Retype the address.</li>
|
||||
<li><a href="#" class="go-back" @click="goBack()">Go back to the previous page.</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.go-back {
|
||||
text-decoration: none;
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
padding-top: 30px;
|
||||
|
||||
strong {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.guide {
|
||||
max-width: 800px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark {
|
||||
header {
|
||||
background-color: $dark-header-bg;
|
||||
border-bottom-color: $dark-header-bg !important;
|
||||
|
||||
span {
|
||||
color: #f0f6fc;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
background-color: $dark-bg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<div class="shadow-box">
|
||||
<div class="row">
|
||||
<div class="settings-menu">
|
||||
<div v-if="showSubMenu" class="settings-menu col-lg-3 col-md-5">
|
||||
<router-link
|
||||
v-for="(item, key) in subMenus"
|
||||
:key="key"
|
||||
@@ -16,9 +16,17 @@
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<a v-if="$root.isMobile && $root.loggedIn && $root.socket.token !== 'autoLogin'" class="logout" @click.prevent="$root.logout">
|
||||
<div class="menu-item">
|
||||
<font-awesome-icon icon="sign-out-alt" />
|
||||
{{ $t("Logout") }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-content-header">
|
||||
<div class="settings-content col-lg-9 col-md-7">
|
||||
<div v-if="currentPage" class="settings-content-header">
|
||||
{{ subMenus[currentPage].title }}
|
||||
</div>
|
||||
<div class="mx-3">
|
||||
@@ -41,7 +49,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
|
||||
settings: {},
|
||||
settingsLoaded: false,
|
||||
};
|
||||
@@ -52,11 +59,19 @@ export default {
|
||||
let pathSplit = useRoute().path.split("/");
|
||||
let pathEnd = pathSplit[pathSplit.length - 1];
|
||||
if (!pathEnd || pathEnd === "settings") {
|
||||
return "general";
|
||||
return null;
|
||||
}
|
||||
return pathEnd;
|
||||
},
|
||||
|
||||
showSubMenu() {
|
||||
if (this.$root.isMobile) {
|
||||
return !this.currentPage;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
subMenus() {
|
||||
return {
|
||||
general: {
|
||||
@@ -68,12 +83,18 @@ export default {
|
||||
notifications: {
|
||||
title: this.$t("Notifications"),
|
||||
},
|
||||
"reverse-proxy": {
|
||||
title: this.$t("Reverse Proxy"),
|
||||
},
|
||||
"monitor-history": {
|
||||
title: this.$t("Monitor History"),
|
||||
},
|
||||
security: {
|
||||
title: this.$t("Security"),
|
||||
},
|
||||
proxies: {
|
||||
title: this.$t("Proxies"),
|
||||
},
|
||||
backup: {
|
||||
title: this.$t("Backup"),
|
||||
},
|
||||
@@ -84,15 +105,34 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
"$root.isMobile"() {
|
||||
this.loadGeneralPage();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadSettings();
|
||||
this.loadGeneralPage();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// For desktop only, mobile do nothing
|
||||
loadGeneralPage() {
|
||||
if (!this.currentPage && !this.$root.isMobile) {
|
||||
this.$router.push("/settings/general");
|
||||
}
|
||||
},
|
||||
|
||||
loadSettings() {
|
||||
this.$root.getSocket().emit("getSettings", (res) => {
|
||||
this.settings = res.data;
|
||||
|
||||
if (this.settings.checkUpdate === undefined) {
|
||||
this.settings.checkUpdate = true;
|
||||
}
|
||||
|
||||
if (this.settings.searchEngineIndex === undefined) {
|
||||
this.settings.searchEngineIndex = false;
|
||||
}
|
||||
@@ -109,13 +149,21 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
saveSettings() {
|
||||
this.$root.getSocket().emit("setSettings", this.settings, (res) => {
|
||||
/**
|
||||
* Save Settings
|
||||
* @param currentPassword (Optional) Only need for disableAuth to true
|
||||
*/
|
||||
saveSettings(callback, currentPassword) {
|
||||
this.$root.getSocket().emit("setSettings", this.settings, currentPassword, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
this.loadSettings();
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -136,9 +184,6 @@ footer {
|
||||
}
|
||||
|
||||
.settings-menu {
|
||||
flex: 0 0 auto;
|
||||
width: 300px;
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@@ -148,6 +193,8 @@ footer {
|
||||
margin: 0.5em;
|
||||
padding: 0.7em 1em;
|
||||
cursor: pointer;
|
||||
border-left-width: 0;
|
||||
transition: all ease-in-out 0.1s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
@@ -171,9 +218,6 @@ footer {
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - 300px);
|
||||
|
||||
.settings-content-header {
|
||||
width: calc(100% + 20px);
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
@@ -187,6 +231,18 @@ footer {
|
||||
background: $dark-header-bg;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.mobile & {
|
||||
padding: 15px 0 0 0;
|
||||
|
||||
.dark & {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
color: $danger !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,232 +1,298 @@
|
||||
<template>
|
||||
<div v-if="loadedTheme" class="container mt-3">
|
||||
<!-- Logo & Title -->
|
||||
<h1 class="mb-4">
|
||||
<!-- Logo -->
|
||||
<span class="logo-wrapper" @click="showImageCropUploadMethod">
|
||||
<img :src="logoURL" alt class="logo me-2" :class="logoClass" />
|
||||
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
|
||||
</span>
|
||||
<!-- Sidebar for edit mode -->
|
||||
<div v-if="enableEditMode" class="sidebar">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Uploader -->
|
||||
<!-- url="/api/status-page/upload-logo" -->
|
||||
<ImageCropUpload v-model="showImageCropUpload"
|
||||
field="img"
|
||||
:width="128"
|
||||
:height="128"
|
||||
:langType="$i18n.locale"
|
||||
img-format="png"
|
||||
:noCircle="true"
|
||||
:noSquare="false"
|
||||
@crop-success="cropSuccess"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!-- Title -->
|
||||
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
||||
</h1>
|
||||
<!-- Description -->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<a href="/dashboard" class="btn btn-info">
|
||||
<font-awesome-icon icon="tachometer-alt" />
|
||||
{{ $t("Go to Dashboard") }}
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div v-if="false" class="my-3">
|
||||
<label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
|
||||
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Domain Name List -->
|
||||
<div class="my-3">
|
||||
<label class="form-label">
|
||||
{{ $t("Domain Names") }}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div class="danger-zone">
|
||||
<button class="btn btn-danger me-2" @click="deleteDialog">
|
||||
<font-awesome-icon icon="trash" />
|
||||
{{ $t("Delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="sidebar-footer">
|
||||
<button class="btn btn-success me-2" @click="save">
|
||||
<font-awesome-icon icon="save" />
|
||||
{{ $t("Save") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger me-2" @click="discard">
|
||||
<font-awesome-icon icon="save" />
|
||||
<font-awesome-icon icon="undo" />
|
||||
{{ $t("Discard") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
|
||||
<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>-->
|
||||
|
||||
<!-- Set Default Language -->
|
||||
<!-- Set theme -->
|
||||
<button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
|
||||
<font-awesome-icon icon="save" />
|
||||
{{ $t("Switch to Light Theme") }}
|
||||
</button>
|
||||
|
||||
<button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
|
||||
<font-awesome-icon icon="save" />
|
||||
{{ $t("Switch to Dark Theme") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
|
||||
<template v-if="tagsVisible">
|
||||
<font-awesome-icon icon="eye-slash" />
|
||||
{{ $t("Hide Tags") }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<font-awesome-icon icon="eye" />
|
||||
{{ $t("Show Tags") }}
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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" />
|
||||
|
||||
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
|
||||
<Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
|
||||
|
||||
<!-- Incident Date -->
|
||||
<div class="date mt-3">
|
||||
{{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
|
||||
<span v-if="incident.lastUpdatedDate">
|
||||
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
|
||||
<!-- Main Status Page -->
|
||||
<div :class="{ edit: enableEditMode}" class="main">
|
||||
<!-- Logo & Title -->
|
||||
<h1 class="mb-4 title-flex">
|
||||
<!-- Logo -->
|
||||
<span class="logo-wrapper" @click="showImageCropUploadMethod">
|
||||
<img :src="logoURL" alt class="logo me-2" :class="logoClass" @load="statusPageLogoLoaded" />
|
||||
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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") }}
|
||||
</button>
|
||||
<!-- Uploader -->
|
||||
<!-- url="/api/status-page/upload-logo" -->
|
||||
<ImageCropUpload v-model="showImageCropUpload"
|
||||
field="img"
|
||||
:width="128"
|
||||
:height="128"
|
||||
:langType="$i18n.locale"
|
||||
img-format="png"
|
||||
:noCircle="true"
|
||||
:noSquare="false"
|
||||
@crop-success="cropSuccess"
|
||||
/>
|
||||
|
||||
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
|
||||
<font-awesome-icon icon="edit" />
|
||||
{{ $t("Edit") }}
|
||||
</button>
|
||||
<!-- Title -->
|
||||
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
||||
</h1>
|
||||
|
||||
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
|
||||
<font-awesome-icon icon="times" />
|
||||
{{ $t("Cancel") }}
|
||||
</button>
|
||||
|
||||
<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) }}
|
||||
<!-- 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>
|
||||
<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") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Maintenance -->
|
||||
<div v-if="maintenance.length !== 0" v-for="maintenanceItem in maintenance" class="shadow-box alert mb-4 p-4 maintenance" role="alert" :class="maintenanceClass">
|
||||
<h4 v-text="maintenanceItem.title" class="alert-heading" />
|
||||
|
||||
<div v-text="maintenanceItem.description" class="content" />
|
||||
|
||||
<!-- Incident Date -->
|
||||
<div class="date mt-3">
|
||||
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} ({{ dateFromNow(maintenanceItem.start_date) }})<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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") }}
|
||||
</div>
|
||||
|
||||
<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="statusMaintenance" />
|
||||
{{ $t("Maintenance") }}
|
||||
<a href="/manage-status-page" class="btn btn-info">
|
||||
<font-awesome-icon icon="tachometer-alt" />
|
||||
{{ $t("Go to Dashboard") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<font-awesome-icon icon="question-circle" style="color: #efefef;" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<strong v-if="editMode">{{ $t("Description") }}:</strong>
|
||||
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
|
||||
<font-awesome-icon icon="bullhorn" />
|
||||
{{ $t("Create Incident") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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") }}
|
||||
<!-- 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" />
|
||||
|
||||
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
|
||||
<Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
|
||||
|
||||
<!-- Incident Date -->
|
||||
<div class="date mt-3">
|
||||
{{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
|
||||
<span v-if="incident.lastUpdatedDate">
|
||||
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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") }}
|
||||
</button>
|
||||
|
||||
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
|
||||
<font-awesome-icon icon="edit" />
|
||||
{{ $t("Edit") }}
|
||||
</button>
|
||||
|
||||
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
|
||||
<font-awesome-icon icon="times" />
|
||||
{{ $t("Cancel") }}
|
||||
</button>
|
||||
|
||||
<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") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PublicGroupList :edit-mode="enableEditMode" />
|
||||
<!-- Maintenance -->
|
||||
<div v-if="maintenance.length !== 0" v-for="maintenanceItem in maintenance" class="shadow-box alert mb-4 p-4 maintenance" role="alert" :class="maintenanceClass">
|
||||
<h4 v-text="maintenanceItem.title" class="alert-heading" />
|
||||
|
||||
<div v-text="maintenanceItem.description" class="content" />
|
||||
|
||||
<!-- Incident Date -->
|
||||
<div class="date mt-3">
|
||||
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} ({{ dateFromNow(maintenanceItem.start_date) }})<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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") }}
|
||||
</div>
|
||||
|
||||
<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="statusMaintenance" />
|
||||
{{ $t("Maintenance") }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<font-awesome-icon icon="question-circle" style="color: #efefef;" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<strong v-if="editMode">{{ $t("Description") }}:</strong>
|
||||
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" />
|
||||
</div>
|
||||
|
||||
<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" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<footer class="mt-5 mb-4">
|
||||
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
||||
</footer>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -234,26 +300,39 @@
|
||||
import axios from "axios";
|
||||
import PublicGroupList from "../components/PublicGroupList.vue";
|
||||
import ImageCropUpload from "vue-image-crop-upload";
|
||||
import {
|
||||
STATUS_PAGE_ALL_DOWN,
|
||||
STATUS_PAGE_ALL_UP,
|
||||
STATUS_PAGE_MAINTENANCE,
|
||||
STATUS_PAGE_PARTIAL_DOWN,
|
||||
UP,
|
||||
MAINTENANCE
|
||||
} from "../util.ts";
|
||||
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
|
||||
import { useToast } from "vue-toastification";
|
||||
import dayjs from "dayjs";
|
||||
import Favico from "favico.js";
|
||||
import { getResBaseURL } from "../util-frontend";
|
||||
import Confirm from "../components/Confirm.vue";
|
||||
// import Prism Editor
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
|
||||
// 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
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
let feedInterval;
|
||||
|
||||
const favicon = new Favico({
|
||||
animation: "none"
|
||||
});
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
PublicGroupList,
|
||||
ImageCropUpload
|
||||
ImageCropUpload,
|
||||
Confirm,
|
||||
PrismEditor,
|
||||
},
|
||||
|
||||
// Leave Page for vue route change
|
||||
@@ -269,8 +348,17 @@ export default {
|
||||
next();
|
||||
},
|
||||
|
||||
props: {
|
||||
overrideSlug: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
slug: null,
|
||||
enableEditMode: false,
|
||||
enableEditIncidentMode: false,
|
||||
hasToken: false,
|
||||
@@ -283,6 +371,7 @@ export default {
|
||||
loadedTheme: false,
|
||||
loadedData: false,
|
||||
baseURL: "",
|
||||
clickedEditButton: false,
|
||||
maintenance: [],
|
||||
};
|
||||
},
|
||||
@@ -321,15 +410,7 @@ export default {
|
||||
},
|
||||
|
||||
isPublished() {
|
||||
return this.config.statusPagePublished;
|
||||
},
|
||||
|
||||
theme() {
|
||||
return this.config.statusPageTheme;
|
||||
},
|
||||
|
||||
tagsVisible() {
|
||||
return this.config.statusPageTags
|
||||
return this.config.published;
|
||||
},
|
||||
|
||||
logoClass() {
|
||||
@@ -397,6 +478,29 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
|
||||
/**
|
||||
* 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";
|
||||
}
|
||||
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Selected a monitor and add to the list.
|
||||
*/
|
||||
@@ -414,13 +518,28 @@ export default {
|
||||
},
|
||||
|
||||
// Set Theme
|
||||
"config.statusPageTheme"() {
|
||||
this.$root.statusPageTheme = this.config.statusPageTheme;
|
||||
"config.theme"() {
|
||||
this.$root.statusPageTheme = this.config.theme;
|
||||
this.loadedTheme = true;
|
||||
},
|
||||
|
||||
"config.title"(title) {
|
||||
document.title = title;
|
||||
},
|
||||
|
||||
"$root.monitorList"() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
@@ -439,64 +558,125 @@ export default {
|
||||
});
|
||||
|
||||
// Special handle for dev
|
||||
const env = process.env.NODE_ENV;
|
||||
if (env === "development" || localStorage.dev === "dev") {
|
||||
this.baseURL = location.protocol + "//" + location.hostname + ":3001";
|
||||
}
|
||||
this.baseURL = getResBaseURL();
|
||||
},
|
||||
async mounted() {
|
||||
axios.get("/api/status-page/config").then((res) => {
|
||||
this.config = res.data;
|
||||
this.slug = this.overrideSlug || this.$route.params.slug;
|
||||
|
||||
if (this.config.logo) {
|
||||
this.imgDataUrl = this.config.logo;
|
||||
}
|
||||
});
|
||||
|
||||
axios.get("/api/status-page/incident").then((res) => {
|
||||
if (res.data.ok) {
|
||||
this.incident = res.data.incident;
|
||||
if (!this.slug) {
|
||||
this.slug = "default";
|
||||
}
|
||||
|
||||
axios.get("/api/status-page/" + this.slug).then((res) => {
|
||||
this.config = res.data.config;
|
||||
|
||||
if (!this.config.domainNameList) {
|
||||
this.config.domainNameList = [];
|
||||
}
|
||||
|
||||
if (this.config.icon) {
|
||||
this.imgDataUrl = this.config.icon;
|
||||
}
|
||||
|
||||
this.incident = res.data.incident;
|
||||
this.$root.publicGroupList = res.data.publicGroupList;
|
||||
});
|
||||
|
||||
//TODO: make OK with multi status pages
|
||||
axios.get("/api/status-page/maintenance-list").then((res) => {
|
||||
this.maintenance = res.data;
|
||||
});
|
||||
|
||||
axios.get("/api/status-page/monitor-list").then((res) => {
|
||||
this.$root.publicGroupList = res.data;
|
||||
});
|
||||
|
||||
// 5mins a loop
|
||||
this.updateHeartbeatList();
|
||||
feedInterval = setInterval(() => {
|
||||
this.updateHeartbeatList();
|
||||
}, (300 + 10) * 1000);
|
||||
|
||||
// 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: {
|
||||
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.css);
|
||||
},
|
||||
|
||||
updateHeartbeatList() {
|
||||
// If editMode, it will use the data from websocket.
|
||||
if (! this.editMode) {
|
||||
axios.get("/api/status-page/heartbeat").then((res) => {
|
||||
this.$root.heartbeatList = res.data.heartbeatList;
|
||||
this.$root.uptimeList = res.data.uptimeList;
|
||||
axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
|
||||
const { heartbeatList, uptimeList } = res.data;
|
||||
|
||||
this.$root.heartbeatList = heartbeatList;
|
||||
this.$root.uptimeList = uptimeList;
|
||||
|
||||
const heartbeatIds = Object.keys(heartbeatList);
|
||||
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;
|
||||
}
|
||||
}, 0);
|
||||
|
||||
favicon.badge(downMonitors);
|
||||
|
||||
this.loadedData = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
edit() {
|
||||
this.$root.initSocketIO(true);
|
||||
this.enableEditMode = true;
|
||||
if (this.hasToken) {
|
||||
this.$root.initSocketIO(true);
|
||||
this.enableEditMode = true;
|
||||
this.clickedEditButton = true;
|
||||
}
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
|
||||
let startTime = new Date();
|
||||
this.config.slug = this.config.slug.trim().toLowerCase();
|
||||
|
||||
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;
|
||||
location.reload();
|
||||
|
||||
// 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(() => {
|
||||
location.href = "/status/" + this.config.slug;
|
||||
}, time);
|
||||
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
deleteDialog() {
|
||||
this.$refs.confirmDelete.show();
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -520,31 +700,12 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
addDomainField() {
|
||||
this.config.domainNameList.push("");
|
||||
},
|
||||
|
||||
discard() {
|
||||
location.reload();
|
||||
},
|
||||
|
||||
changeTheme(name) {
|
||||
this.config.statusPageTheme = name;
|
||||
},
|
||||
changeTagsVisibilty(newState) {
|
||||
this.config.statusPageTags = newState;
|
||||
|
||||
// On load, the status page will not include tags if it's not enabled for security reasons
|
||||
// Which means if we enable tags, it won't show in the UI until saved
|
||||
// So we have this to enhance UX and load in the tags from the authenticated source instantly
|
||||
this.$root.publicGroupList = this.$root.publicGroupList.map((group) => {
|
||||
return {
|
||||
...group,
|
||||
monitorList: group.monitorList.map((monitor) => {
|
||||
// We only include the tags if visible so we can reuse the logic to hide the tags on disable
|
||||
return {
|
||||
...monitor,
|
||||
tags: newState ? this.$root.monitorList[monitor.id].tags : []
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
location.href = "/status/" + this.slug;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -560,6 +721,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
statusPageLogoLoaded(eventPayload) {
|
||||
// Remark: may not work in dev, due to cros
|
||||
favicon.image(eventPayload.target);
|
||||
},
|
||||
|
||||
createIncident() {
|
||||
this.enableEditIncidentMode = true;
|
||||
|
||||
@@ -575,12 +741,12 @@ export default {
|
||||
},
|
||||
|
||||
postIncident() {
|
||||
if (this.incident.title == "" || this.incident.content == "") {
|
||||
if (this.incident.title === "" || this.incident.content === "") {
|
||||
toast.error(this.$t("Please input title and content"));
|
||||
return;
|
||||
}
|
||||
|
||||
this.$root.getSocket().emit("postIncident", this.incident, (res) => {
|
||||
this.$root.getSocket().emit("postIncident", this.slug, this.incident, (res) => {
|
||||
|
||||
if (res.ok) {
|
||||
this.enableEditIncidentMode = false;
|
||||
@@ -611,7 +777,7 @@ export default {
|
||||
},
|
||||
|
||||
unpinIncident() {
|
||||
this.$root.getSocket().emit("unpinIncident", () => {
|
||||
this.$root.getSocket().emit("unpinIncident", this.slug, () => {
|
||||
this.incident = null;
|
||||
});
|
||||
},
|
||||
@@ -620,6 +786,10 @@ export default {
|
||||
return dayjs.utc(date).fromNow();
|
||||
},
|
||||
|
||||
removeDomain(index) {
|
||||
this.config.domainNameList.splice(index, 1);
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -654,6 +824,50 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
transition: all ease-in-out 0.1s;
|
||||
|
||||
&.edit {
|
||||
margin-left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
|
||||
border-right: 1px solid #ededed;
|
||||
|
||||
.danger-zone {
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
padding: 0 10px 10px 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
border-top: 1px solid #ededed;
|
||||
border-right: 1px solid #ededed;
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
height: 70px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
@@ -663,6 +877,12 @@ footer {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.title-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -701,7 +921,7 @@ footer {
|
||||
|
||||
.incident {
|
||||
.content {
|
||||
&[contenteditable=true] {
|
||||
&[contenteditable="true"] {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
@@ -737,4 +957,55 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.sidebar {
|
||||
background-color: $dark-header-bg;
|
||||
border-right-color: $dark-border-color;
|
||||
|
||||
.danger-zone {
|
||||
border-top-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
border-right-color: $dark-border-color;
|
||||
border-top-color: $dark-border-color;
|
||||
background-color: $dark-header-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user