self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 08:48:45 +02:00
Code Issues Actions 5 Releases Activity

[Status Page] wip, sidebar for editor

Browse Source
This commit is contained in:
Louis Lam 2022-03-15 12:00:29 +08:00
parent 3e96504813
commit 7c7dbf68c1
8 changed files with 360 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
server/database.js
View File

@ -223,10 +223,10 @@ class Database {
if (title) {
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) {
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;
}

21
server/socket-handlers/status-page-socket-handler.js
View File

@ -71,7 +71,7 @@ module.exports.statusPageSocketHandler = (socket) => {
// Save Status Page
// imgDataUrl Only Accept PNG!
socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => {
socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => {
try {
checkLogin(socket);
@ -97,7 +97,24 @@ module.exports.statusPageSocketHandler = (socket) => {
}
// 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
const groupIDList = [];

6
src/assets/app.scss
View File

@ -163,6 +163,12 @@ textarea.form-control {
border-color: $dark-border-color;
}
.input-group-text {
background-color: #282f39;
border-color: $dark-border-color;
color: $dark-font-color;
}
.form-check-input:checked {
border-color: $primary; // Re-apply bootstrap border
}

22
src/mixins/socket.js
View File

@ -7,9 +7,9 @@ const toast = useToast();
let socket;
const noSocketIOPages = [
"/status-page",
"/status",
"/"
/^\/status-page$/, // /status-page
/^\/status/, // /status**
/^\/$/ // /
];
const favicon = new Favico({
@ -57,9 +57,13 @@ export default {
}
// No need to connect to the socket.io for status page
if (! bypass && noSocketIOPages.includes(location.pathname)) {
if (! bypass && location.pathname) {
for (let page of noSocketIOPages) {
if (location.pathname.match(page)) {
return;
}
}
}
this.socket.initedSocketIO = true;
@ -110,7 +114,6 @@ export default {
});
socket.on("statusPageList", (data) => {
console.log(data);
this.statusPageList = data;
});
@ -443,7 +446,6 @@ export default {
"stats.down"(to, from) {
if (to !== from) {
favicon.badge(to);
console.log(to);
}
},
@ -460,9 +462,15 @@ export default {
// Reconnect the socket io, if status-page to dashboard
"$route.fullPath"(newValue, oldValue) {
if (noSocketIOPages.includes(newValue)) {
if (newValue) {
for (let page of noSocketIOPages) {
if (newValue.match(page)) {
return;
}
}
}
this.initSocketIO();
},

37
src/pages/AddStatusPage.vue Normal file
View 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>

9
src/pages/ManageStatusPage.vue
View File

@ -18,9 +18,14 @@
</div>
<div class="col-lg-6 col-xl-5">
<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 />
{{ $t("Manage") }}
{{ $t("View") }}
</a>
<a :href="'/status/' + statusPage.slug +'?edit'" class="btn btn-dark">
<font-awesome-icon icon="pen" /><br />
{{ $t("Edit") }}
</a>
<router-link to="/" class="btn btn-danger">

186
src/pages/StatusPage.vue
View File

@ -1,5 +1,59 @@
<template>
<div v-if="loadedTheme" class="container mt-3">
<!-- Sidebar for edit mode -->
<div v-if="enableEditMode" class="sidebar">
<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>
<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">
<font-awesome-icon icon="save" />
{{ $t("Save") }}
</button>
<button class="btn btn-danger me-2" @click="discard">
<font-awesome-icon icon="save" />
{{ $t("Discard") }}
</button>
</div>
</div>
<div :class="{ edit: enableEditMode}" class="main">
<!-- Logo & Title -->
<h1 class="mb-4">
<!-- Logo -->
@ -33,61 +87,17 @@
{{ $t("Edit Status Page") }}
</button>
<a href="/dashboard" class="btn btn-info">
<a href="/manage-status-page" class="btn btn-info">
<font-awesome-icon icon="tachometer-alt" />
{{ $t("Go to Dashboard") }}
</a>
</div>
<div v-else>
<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" />
{{ $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>
@ -211,6 +221,7 @@
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
</footer>
</div>
</div>
</template>
<script>
@ -266,6 +277,8 @@ export default {
loadedTheme: false,
loadedData: false,
baseURL: "",
clickedEditButton: false,
domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
};
},
computed: {
@ -306,10 +319,6 @@ export default {
return this.config.published;
},
theme() {
return this.config.theme;
},
tagsVisible() {
return this.config.showTags;
},
@ -386,12 +395,17 @@ export default {
// Set Theme
"config.theme"() {
this.$root.statusPageTheme = this.config.theme;
this.$root.userTheme = this.config.theme;
this.loadedTheme = true;
},
"config.title"(title) {
document.title = title;
},
"config.showTags"(value) {
console.log("here???");
this.changeTagsVisibility(value);
}
},
@ -479,14 +493,36 @@ export default {
edit() {
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.$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;
// 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 {
toast.error(res.msg);
}
@ -514,11 +550,7 @@ export default {
location.reload();
},
changeTheme(name) {
this.config.theme = name;
},
changeTagsVisibilty(newState) {
this.config.showTags = newState;
changeTagsVisibility(show) {
// 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
@ -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
return {
...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 {
text-align: center;
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>

5
src/router.js
View File

@ -19,6 +19,7 @@ import Security from "./components/settings/Security.vue";
import Backup from "./components/settings/Backup.vue";
import About from "./components/settings/About.vue";
import ManageStatusPage from "./pages/ManageStatusPage.vue";
import AddStatusPage from "./pages/AddStatusPage.vue";
const routes = [
{
@ -103,6 +104,10 @@ const routes = [
path: "/manage-status-page",
component: ManageStatusPage,
},
{
path: "/add-status-page",
component: AddStatusPage,
},
],
},
],