mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-02-07 04:03:51 +00:00
[Status Page] wip, sidebar for editor
This commit is contained in:
Louis Lam
parent
3e96504813
commit
7c7dbf68c1
8 changed files with 360 additions and 210 deletions
|
|
@ -223,10 +223,10 @@ class Database {
|
||||||
if (title) {
|
if (title) {
|
||||||
console.log("Migrating Status Page");
|
console.log("Migrating Status Page");
|
||||||
|
|
||||||
let statusPageCheck = await R.findOne("status_page", " slug = '' ");
|
let statusPageCheck = await R.findOne("status_page", " slug = 'default' ");
|
||||||
|
|
||||||
if (statusPageCheck !== null) {
|
if (statusPageCheck !== null) {
|
||||||
console.log("Migrating Status Page - Fail, empty slug record is already existing");
|
console.log("Migrating Status Page - Skip, default slug record is already existing");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ module.exports.statusPageSocketHandler = (socket) => {
|
||||||
|
|
||||||
// Save Status Page
|
// Save Status Page
|
||||||
// imgDataUrl Only Accept PNG!
|
// imgDataUrl Only Accept PNG!
|
||||||
socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => {
|
socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
checkLogin(socket);
|
checkLogin(socket);
|
||||||
|
|
@ -97,7 +97,24 @@ module.exports.statusPageSocketHandler = (socket) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Save Config
|
// Save Config
|
||||||
await setSettings("statusPage", config);
|
let statusPage = await R.findOne("status_page", " slug = ? ", [
|
||||||
|
slug
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!statusPage) {
|
||||||
|
throw new Error("No slug?");
|
||||||
|
}
|
||||||
|
|
||||||
|
statusPage.slug = config.slug;
|
||||||
|
statusPage.title = config.title;
|
||||||
|
statusPage.icon = config.logo;
|
||||||
|
statusPage.theme = config.theme;
|
||||||
|
//statusPage.published = ;
|
||||||
|
//statusPage.search_engine_index = ;
|
||||||
|
statusPage.show_tags = config.showTags;
|
||||||
|
//statusPage.password = null;
|
||||||
|
|
||||||
|
await R.store(statusPage);
|
||||||
|
|
||||||
// Save Public Group List
|
// Save Public Group List
|
||||||
const groupIDList = [];
|
const groupIDList = [];
|
||||||
|
|
|
||||||
|
|
@ -163,6 +163,12 @@ textarea.form-control {
|
||||||
border-color: $dark-border-color;
|
border-color: $dark-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-group-text {
|
||||||
|
background-color: #282f39;
|
||||||
|
border-color: $dark-border-color;
|
||||||
|
color: $dark-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
.form-check-input:checked {
|
.form-check-input:checked {
|
||||||
border-color: $primary; // Re-apply bootstrap border
|
border-color: $primary; // Re-apply bootstrap border
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,9 @@ const toast = useToast();
|
||||||
let socket;
|
let socket;
|
||||||
|
|
||||||
const noSocketIOPages = [
|
const noSocketIOPages = [
|
||||||
"/status-page",
|
/^\/status-page$/, // /status-page
|
||||||
"/status",
|
/^\/status/, // /status**
|
||||||
"/"
|
/^\/$/ // /
|
||||||
];
|
];
|
||||||
|
|
||||||
const favicon = new Favico({
|
const favicon = new Favico({
|
||||||
|
|
@ -57,8 +57,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// No need to connect to the socket.io for status page
|
// No need to connect to the socket.io for status page
|
||||||
if (! bypass && noSocketIOPages.includes(location.pathname)) {
|
if (! bypass && location.pathname) {
|
||||||
return;
|
for (let page of noSocketIOPages) {
|
||||||
|
if (location.pathname.match(page)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.socket.initedSocketIO = true;
|
this.socket.initedSocketIO = true;
|
||||||
|
|
@ -110,7 +114,6 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("statusPageList", (data) => {
|
socket.on("statusPageList", (data) => {
|
||||||
console.log(data);
|
|
||||||
this.statusPageList = data;
|
this.statusPageList = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -443,7 +446,6 @@ export default {
|
||||||
"stats.down"(to, from) {
|
"stats.down"(to, from) {
|
||||||
if (to !== from) {
|
if (to !== from) {
|
||||||
favicon.badge(to);
|
favicon.badge(to);
|
||||||
console.log(to);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -460,9 +462,15 @@ export default {
|
||||||
|
|
||||||
// Reconnect the socket io, if status-page to dashboard
|
// Reconnect the socket io, if status-page to dashboard
|
||||||
"$route.fullPath"(newValue, oldValue) {
|
"$route.fullPath"(newValue, oldValue) {
|
||||||
if (noSocketIOPages.includes(newValue)) {
|
|
||||||
return;
|
if (newValue) {
|
||||||
|
for (let page of noSocketIOPages) {
|
||||||
|
if (newValue.match(page)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.initSocketIO();
|
this.initSocketIO();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
37
src/pages/AddStatusPage.vue
Normal file
37
src/pages/AddStatusPage.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<transition name="slide-fade" appear>
|
||||||
|
<div>
|
||||||
|
<h1 class="mb-3">
|
||||||
|
{{ $t("Add New Status Page") }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="shadow-box">
|
||||||
|
<div class="my-3">
|
||||||
|
<label for="name" class="form-label">{{ $t("Status Page Name") }}</label>
|
||||||
|
<input id="name" v-model="statusPage.basic_auth_user" type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-3">
|
||||||
|
<label for="basicauth" class="form-label">{{ $t("Password") }}</label>
|
||||||
|
<input id="basicauth-pass" v-model="statusPage.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusPage: {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -18,9 +18,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6 col-xl-5">
|
<div class="col-lg-6 col-xl-5">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<a target="_blank" :href="'/status/' + statusPage.slug" class="btn btn-dark">
|
<a :href="'/status/' + statusPage.slug" class="btn btn-dark">
|
||||||
<font-awesome-icon icon="external-link-square-alt" /><br />
|
<font-awesome-icon icon="external-link-square-alt" /><br />
|
||||||
{{ $t("Manage") }}
|
{{ $t("View") }}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a :href="'/status/' + statusPage.slug +'?edit'" class="btn btn-dark">
|
||||||
|
<font-awesome-icon icon="pen" /><br />
|
||||||
|
{{ $t("Edit") }}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<router-link to="/" class="btn btn-danger">
|
<router-link to="/" class="btn btn-danger">
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="loadedTheme" class="container mt-3">
|
<div v-if="loadedTheme" class="container mt-3">
|
||||||
<!-- Logo & Title -->
|
<!-- Sidebar for edit mode -->
|
||||||
<h1 class="mb-4">
|
<div v-if="enableEditMode" class="sidebar">
|
||||||
<!-- Logo -->
|
<div class="my-3">
|
||||||
<span class="logo-wrapper" @click="showImageCropUploadMethod">
|
<label for="slug" class="form-label">{{ $t("Slug") }}</label>
|
||||||
<img :src="logoURL" alt class="logo me-2" :class="logoClass" />
|
<div class="input-group">
|
||||||
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
|
<span id="basic-addon3" class="input-group-text">/status/</span>
|
||||||
</span>
|
<input id="slug" v-model="config.slug" type="text" class="form-control">
|
||||||
|
</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"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<a href="/dashboard" class="btn btn-info">
|
|
||||||
<font-awesome-icon icon="tachometer-alt" />
|
|
||||||
{{ $t("Go to Dashboard") }}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else>
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div v-if="false" class="my-3">
|
||||||
|
<label for="cname" class="form-label">Domain Names <sup>Coming Soon</sup></label>
|
||||||
|
<textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar Footer -->
|
||||||
|
<div class="sidebar-footer">
|
||||||
<button class="btn btn-success me-2" @click="save">
|
<button class="btn btn-success me-2" @click="save">
|
||||||
<font-awesome-icon icon="save" />
|
<font-awesome-icon icon="save" />
|
||||||
{{ $t("Save") }}
|
{{ $t("Save") }}
|
||||||
|
|
@ -49,167 +51,176 @@
|
||||||
<font-awesome-icon icon="save" />
|
<font-awesome-icon icon="save" />
|
||||||
{{ $t("Discard") }}
|
{{ $t("Discard") }}
|
||||||
</button>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
<div :class="{ edit: enableEditMode}" class="main">
|
||||||
<!-- Incident -->
|
<!-- Logo & Title -->
|
||||||
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
|
<h1 class="mb-4">
|
||||||
<strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
|
<!-- Logo -->
|
||||||
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
|
<span class="logo-wrapper" @click="showImageCropUploadMethod">
|
||||||
|
<img :src="logoURL" alt class="logo me-2" :class="logoClass" />
|
||||||
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
|
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
|
||||||
<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) }})
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="editMode" class="mt-3">
|
<!-- Uploader -->
|
||||||
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
|
<!-- url="/api/status-page/upload-logo" -->
|
||||||
<font-awesome-icon icon="bullhorn" />
|
<ImageCropUpload v-model="showImageCropUpload"
|
||||||
{{ $t("Post") }}
|
field="img"
|
||||||
</button>
|
: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">
|
<!-- Title -->
|
||||||
<font-awesome-icon icon="edit" />
|
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
||||||
{{ $t("Edit") }}
|
</h1>
|
||||||
</button>
|
|
||||||
|
|
||||||
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
|
<!-- Admin functions -->
|
||||||
<font-awesome-icon icon="times" />
|
<div v-if="hasToken" class="mb-4">
|
||||||
{{ $t("Cancel") }}
|
<div v-if="!enableEditMode">
|
||||||
</button>
|
<button class="btn btn-info me-2" @click="edit">
|
||||||
|
<font-awesome-icon icon="edit" />
|
||||||
<div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
|
{{ $t("Edit Status Page") }}
|
||||||
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
{{ $t("Style") }}: {{ $t(incident.style) }}
|
|
||||||
</button>
|
</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">
|
<a href="/manage-status-page" class="btn btn-info">
|
||||||
<font-awesome-icon icon="unlink" />
|
<font-awesome-icon icon="tachometer-alt" />
|
||||||
{{ $t("Unpin") }}
|
{{ $t("Go to Dashboard") }}
|
||||||
</button>
|
</a>
|
||||||
</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>
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<font-awesome-icon icon="question-circle" style="color: #efefef;" />
|
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
|
||||||
</div>
|
<font-awesome-icon icon="bullhorn" />
|
||||||
</template>
|
{{ $t("Create Incident") }}
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<!-- 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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
<!-- Incident -->
|
||||||
<div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
|
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
|
||||||
<!-- 👀 Nothing here, please add a group or a monitor. -->
|
<strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
|
||||||
👀 {{ $t("statusPageNothing") }}
|
<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) }})
|
||||||
|
</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>
|
</div>
|
||||||
|
|
||||||
<PublicGroupList :edit-mode="enableEditMode" />
|
<!-- Overall Status -->
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
<footer class="mt-5 mb-4">
|
<template v-else>
|
||||||
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
<div v-if="allUp">
|
||||||
</footer>
|
<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>
|
||||||
|
<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" />
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -266,6 +277,8 @@ export default {
|
||||||
loadedTheme: false,
|
loadedTheme: false,
|
||||||
loadedData: false,
|
loadedData: false,
|
||||||
baseURL: "",
|
baseURL: "",
|
||||||
|
clickedEditButton: false,
|
||||||
|
domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -306,10 +319,6 @@ export default {
|
||||||
return this.config.published;
|
return this.config.published;
|
||||||
},
|
},
|
||||||
|
|
||||||
theme() {
|
|
||||||
return this.config.theme;
|
|
||||||
},
|
|
||||||
|
|
||||||
tagsVisible() {
|
tagsVisible() {
|
||||||
return this.config.showTags;
|
return this.config.showTags;
|
||||||
},
|
},
|
||||||
|
|
@ -386,12 +395,17 @@ export default {
|
||||||
|
|
||||||
// Set Theme
|
// Set Theme
|
||||||
"config.theme"() {
|
"config.theme"() {
|
||||||
this.$root.statusPageTheme = this.config.theme;
|
this.$root.userTheme = this.config.theme;
|
||||||
this.loadedTheme = true;
|
this.loadedTheme = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
"config.title"(title) {
|
"config.title"(title) {
|
||||||
document.title = title;
|
document.title = title;
|
||||||
|
},
|
||||||
|
|
||||||
|
"config.showTags"(value) {
|
||||||
|
console.log("here???");
|
||||||
|
this.changeTagsVisibility(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
@ -479,14 +493,36 @@ export default {
|
||||||
edit() {
|
edit() {
|
||||||
this.$root.initSocketIO(true);
|
this.$root.initSocketIO(true);
|
||||||
this.enableEditMode = true;
|
this.enableEditMode = true;
|
||||||
|
this.clickedEditButton = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
save() {
|
save() {
|
||||||
this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
|
let startTime = new Date();
|
||||||
|
|
||||||
|
this.$root.getSocket().emit("saveStatusPage", this.slug, this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
this.enableEditMode = false;
|
this.enableEditMode = false;
|
||||||
this.$root.publicGroupList = res.publicGroupList;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(time);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// If the slug was changed, go to the new slug
|
||||||
|
if (this.slug !== this.config.slug) {
|
||||||
|
location.href = "/status/" + this.config.slug;
|
||||||
|
} else {
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
}, time);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.msg);
|
toast.error(res.msg);
|
||||||
}
|
}
|
||||||
|
|
@ -514,11 +550,7 @@ export default {
|
||||||
location.reload();
|
location.reload();
|
||||||
},
|
},
|
||||||
|
|
||||||
changeTheme(name) {
|
changeTagsVisibility(show) {
|
||||||
this.config.theme = name;
|
|
||||||
},
|
|
||||||
changeTagsVisibilty(newState) {
|
|
||||||
this.config.showTags = newState;
|
|
||||||
|
|
||||||
// On load, the status page will not include tags if it's not enabled for security reasons
|
// 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
|
// Which means if we enable tags, it won't show in the UI until saved
|
||||||
|
|
@ -530,7 +562,7 @@ export default {
|
||||||
// We only include the tags if visible so we can reuse the logic to hide the tags on disable
|
// We only include the tags if visible so we can reuse the logic to hide the tags on disable
|
||||||
return {
|
return {
|
||||||
...monitor,
|
...monitor,
|
||||||
tags: newState ? this.$root.monitorList[monitor.id].tags : []
|
tags: show ? this.$root.monitorList[monitor.id].tags : []
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
@ -644,6 +676,35 @@ h1 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
transition: all ease-in-out 0.1s;
|
||||||
|
|
||||||
|
&.edit {
|
||||||
|
margin-left: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 15px 15px 68px 15px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-right: 1px solid #ededed;
|
||||||
|
|
||||||
|
.sidebar-footer {
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 15px;
|
||||||
|
position: absolute;
|
||||||
|
border-top: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -711,4 +772,15 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
.sidebar {
|
||||||
|
background-color: $dark-header-bg;
|
||||||
|
border-right-color: $dark-border-color;
|
||||||
|
|
||||||
|
.sidebar-footer {
|
||||||
|
border-top-color: $dark-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import Security from "./components/settings/Security.vue";
|
||||||
import Backup from "./components/settings/Backup.vue";
|
import Backup from "./components/settings/Backup.vue";
|
||||||
import About from "./components/settings/About.vue";
|
import About from "./components/settings/About.vue";
|
||||||
import ManageStatusPage from "./pages/ManageStatusPage.vue";
|
import ManageStatusPage from "./pages/ManageStatusPage.vue";
|
||||||
|
import AddStatusPage from "./pages/AddStatusPage.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -103,6 +104,10 @@ const routes = [
|
||||||
path: "/manage-status-page",
|
path: "/manage-status-page",
|
||||||
component: ManageStatusPage,
|
component: ManageStatusPage,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/add-status-page",
|
||||||
|
component: AddStatusPage,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue