LouisLam
4 years ago
17 changed files with 1533 additions and 0 deletions
@ -0,0 +1,33 @@ |
|||
const dayjs = require("dayjs"); |
|||
const {BeanModel} = require("redbean-node/dist/bean-model"); |
|||
|
|||
class Monitor extends BeanModel { |
|||
|
|||
toJSON() { |
|||
return { |
|||
id: this.id, |
|||
name: this.name, |
|||
url: this.url, |
|||
upRate: this.upRate, |
|||
active: this.active, |
|||
type: this.type, |
|||
interval: this.interval, |
|||
}; |
|||
} |
|||
|
|||
start(io) { |
|||
const beat = () => { |
|||
console.log(`Monitor ${this.id}: Heartbeat`) |
|||
io.to(this.user_id).emit("heartbeat", dayjs().unix()); |
|||
} |
|||
|
|||
beat(); |
|||
this.heartbeatInterval = setInterval(beat, this.interval * 1000); |
|||
} |
|||
|
|||
stop() { |
|||
clearInterval(this.heartbeatInterval) |
|||
} |
|||
} |
|||
|
|||
module.exports = Monitor; |
|||
@ -0,0 +1,379 @@ |
|||
const express = require('express'); |
|||
const app = express(); |
|||
const http = require('http'); |
|||
const server = http.createServer(app); |
|||
const { Server } = require("socket.io"); |
|||
const io = new Server(server); |
|||
const axios = require('axios'); |
|||
const dayjs = require("dayjs"); |
|||
const {R} = require("redbean-node"); |
|||
const passwordHash = require('password-hash'); |
|||
const jwt = require('jsonwebtoken'); |
|||
const Monitor = require("./model/monitor"); |
|||
const {sleep} = require("./util"); |
|||
|
|||
|
|||
let stop = false; |
|||
let interval = 6000; |
|||
let totalClient = 0; |
|||
let jwtSecret = null; |
|||
let loadFromDatabase = true; |
|||
let monitorList = {}; |
|||
|
|||
(async () => { |
|||
|
|||
R.setup('sqlite', { |
|||
filename: '../data/kuma.db' |
|||
}); |
|||
R.freeze(true) |
|||
await R.autoloadModels("./model"); |
|||
|
|||
await initDatabase(); |
|||
|
|||
app.use('/', express.static("public")); |
|||
|
|||
io.on('connection', async (socket) => { |
|||
console.log('a user connected'); |
|||
totalClient++; |
|||
|
|||
socket.on('disconnect', () => { |
|||
console.log('user disconnected'); |
|||
totalClient--; |
|||
}); |
|||
|
|||
// Public API
|
|||
|
|||
socket.on("loginByToken", async (token, callback) => { |
|||
|
|||
try { |
|||
let decoded = jwt.verify(token, jwtSecret); |
|||
|
|||
console.log("Username from JWT: " + decoded.username) |
|||
|
|||
let user = await R.findOne("user", " username = ? AND active = 1 ", [ |
|||
decoded.username |
|||
]) |
|||
|
|||
if (user) { |
|||
await afterLogin(socket, user) |
|||
|
|||
callback({ |
|||
ok: true, |
|||
}) |
|||
} else { |
|||
callback({ |
|||
ok: false, |
|||
msg: "The user is inactive or deleted." |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
callback({ |
|||
ok: false, |
|||
msg: "Invalid token." |
|||
}) |
|||
} |
|||
|
|||
}); |
|||
|
|||
socket.on("login", async (data, callback) => { |
|||
console.log("Login") |
|||
|
|||
let user = await R.findOne("user", " username = ? AND active = 1 ", [ |
|||
data.username |
|||
]) |
|||
|
|||
if (user && passwordHash.verify(data.password, user.password)) { |
|||
|
|||
await afterLogin(socket, user) |
|||
|
|||
callback({ |
|||
ok: true, |
|||
token: jwt.sign({ |
|||
username: data.username |
|||
}, jwtSecret) |
|||
}) |
|||
} else { |
|||
callback({ |
|||
ok: false, |
|||
msg: "Incorrect username or password." |
|||
}) |
|||
} |
|||
|
|||
}); |
|||
|
|||
socket.on("logout", async (callback) => { |
|||
socket.leave(socket.userID) |
|||
socket.userID = null; |
|||
callback(); |
|||
}); |
|||
|
|||
// Auth Only API
|
|||
|
|||
socket.on("add", async (monitor, callback) => { |
|||
try { |
|||
checkLogin(socket) |
|||
|
|||
let bean = R.dispense("monitor") |
|||
bean.import(monitor) |
|||
bean.user_id = socket.userID |
|||
await R.store(bean) |
|||
|
|||
callback({ |
|||
ok: true, |
|||
msg: "Added Successfully.", |
|||
monitorID: bean.id |
|||
}); |
|||
|
|||
await sendMonitorList(socket); |
|||
|
|||
} catch (e) { |
|||
callback({ |
|||
ok: false, |
|||
msg: e.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
socket.on("getMonitor", async (monitorID, callback) => { |
|||
try { |
|||
checkLogin(socket) |
|||
|
|||
console.log(`Get Monitor: ${monitorID} User ID: ${socket.userID}`) |
|||
|
|||
let bean = await R.findOne("monitor", " id = ? AND user_id = ? ", [ |
|||
monitorID, |
|||
socket.userID, |
|||
]) |
|||
|
|||
callback({ |
|||
ok: true, |
|||
monitor: bean.toJSON(), |
|||
}); |
|||
|
|||
} catch (e) { |
|||
callback({ |
|||
ok: false, |
|||
msg: e.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// Start or Resume the monitor
|
|||
socket.on("resumeMonitor", async (monitorID, callback) => { |
|||
try { |
|||
checkLogin(socket) |
|||
await startMonitor(socket.userID, monitorID); |
|||
await sendMonitorList(socket); |
|||
|
|||
callback({ |
|||
ok: true, |
|||
msg: "Paused Successfully." |
|||
}); |
|||
|
|||
} catch (e) { |
|||
callback({ |
|||
ok: false, |
|||
msg: e.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
socket.on("pauseMonitor", async (monitorID, callback) => { |
|||
try { |
|||
checkLogin(socket) |
|||
await pauseMonitor(socket.userID, monitorID) |
|||
await sendMonitorList(socket); |
|||
|
|||
callback({ |
|||
ok: true, |
|||
msg: "Paused Successfully." |
|||
}); |
|||
|
|||
|
|||
} catch (e) { |
|||
callback({ |
|||
ok: false, |
|||
msg: e.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
socket.on("deleteMonitor", async (monitorID, callback) => { |
|||
try { |
|||
checkLogin(socket) |
|||
|
|||
console.log(`Delete Monitor: ${monitorID} User ID: ${socket.userID}`) |
|||
|
|||
if (monitorID in monitorList) { |
|||
monitorList[monitorID].stop(); |
|||
delete monitorList[monitorID] |
|||
} |
|||
|
|||
await R.exec("DELETE FROM monitor WHERE id = ? AND user_id = ? ", [ |
|||
monitorID, |
|||
socket.userID |
|||
]); |
|||
|
|||
callback({ |
|||
ok: true, |
|||
msg: "Deleted Successfully." |
|||
}); |
|||
|
|||
await sendMonitorList(socket); |
|||
|
|||
} catch (e) { |
|||
callback({ |
|||
ok: false, |
|||
msg: e.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
socket.on("changePassword", async (password, callback) => { |
|||
try { |
|||
checkLogin(socket) |
|||
|
|||
if (! password.currentPassword) { |
|||
throw new Error("Invalid new password") |
|||
} |
|||
|
|||
let user = await R.findOne("user", " id = ? AND active = 1 ", [ |
|||
socket.userID |
|||
]) |
|||
|
|||
if (user && passwordHash.verify(password.currentPassword, user.password)) { |
|||
|
|||
await R.exec("UPDATE `user` SET password = ? WHERE id = ? ", [ |
|||
passwordHash.generate(password.newPassword), |
|||
socket.userID |
|||
]); |
|||
|
|||
callback({ |
|||
ok: true, |
|||
msg: "Password has been updated successfully." |
|||
}) |
|||
} else { |
|||
throw new Error("Incorrect current password") |
|||
} |
|||
|
|||
} catch (e) { |
|||
callback({ |
|||
ok: false, |
|||
msg: e.message |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
server.listen(3001, () => { |
|||
console.log('Listening on 3001'); |
|||
startMonitors(); |
|||
}); |
|||
|
|||
})(); |
|||
|
|||
async function checkOwner(userID, monitorID) { |
|||
let row = await R.getRow("SELECT id FROM monitor WHERE id = ? AND user_id = ? ", [ |
|||
monitorID, |
|||
userID, |
|||
]) |
|||
|
|||
if (! row) { |
|||
throw new Error("You do not own this monitor."); |
|||
} |
|||
} |
|||
|
|||
async function sendMonitorList(socket) { |
|||
io.to(socket.userID).emit("monitorList", await getMonitorJSONList(socket.userID)) |
|||
} |
|||
|
|||
async function afterLogin(socket, user) { |
|||
socket.userID = user.id; |
|||
socket.join(user.id) |
|||
socket.emit("monitorList", await getMonitorJSONList(user.id)) |
|||
} |
|||
|
|||
async function getMonitorJSONList(userID) { |
|||
let result = []; |
|||
|
|||
let monitorList = await R.find("monitor", " user_id = ? ORDER BY weight DESC ", [ |
|||
userID |
|||
]) |
|||
|
|||
for (let monitor of monitorList) { |
|||
result.push(monitor.toJSON()) |
|||
} |
|||
|
|||
return result; |
|||
} |
|||
|
|||
function checkLogin(socket) { |
|||
if (! socket.userID) { |
|||
throw new Error("You are not logged in."); |
|||
} |
|||
} |
|||
|
|||
async function initDatabase() { |
|||
let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [ |
|||
"jwtSecret" |
|||
]); |
|||
|
|||
if (! jwtSecretBean) { |
|||
console.log("JWT secret is not found, generate one.") |
|||
jwtSecretBean = R.dispense("setting") |
|||
jwtSecretBean.key = "jwtSecret" |
|||
|
|||
jwtSecretBean.value = passwordHash.generate(dayjs() + "") |
|||
await R.store(jwtSecretBean) |
|||
} else { |
|||
console.log("Load JWT secret from database.") |
|||
} |
|||
|
|||
jwtSecret = jwtSecretBean.value; |
|||
} |
|||
|
|||
async function startMonitor(userID, monitorID) { |
|||
await checkOwner(userID, monitorID) |
|||
|
|||
console.log(`Resume Monitor: ${monitorID} User ID: ${userID}`) |
|||
|
|||
await R.exec("UPDATE monitor SET active = 1 WHERE id = ? AND user_id = ? ", [ |
|||
monitorID, |
|||
userID |
|||
]); |
|||
|
|||
let monitor = await R.findOne("monitor", " id = ? ", [ |
|||
monitorID |
|||
]) |
|||
|
|||
monitorList[monitor.id] = monitor; |
|||
monitor.start(io) |
|||
} |
|||
|
|||
async function pauseMonitor(userID, monitorID) { |
|||
await checkOwner(userID, monitorID) |
|||
|
|||
console.log(`Pause Monitor: ${monitorID} User ID: ${userID}`) |
|||
|
|||
await R.exec("UPDATE monitor SET active = 0 WHERE id = ? AND user_id = ? ", [ |
|||
monitorID, |
|||
userID |
|||
]); |
|||
|
|||
if (monitorID in monitorList) { |
|||
monitorList[monitorID].stop(); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Resume active monitors |
|||
*/ |
|||
async function startMonitors() { |
|||
let list = await R.find("monitor", " active = 1 ") |
|||
|
|||
for (let monitor of list) { |
|||
monitor.start(io) |
|||
monitorList[monitor.id] = monitor; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
exports.sleep = (ms) => { |
|||
return new Promise(resolve => setTimeout(resolve, ms)); |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
@import "vars.scss"; |
|||
@import "node_modules/bootstrap/scss/bootstrap"; |
|||
|
|||
#app { |
|||
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; |
|||
} |
|||
|
|||
.shadow-box { |
|||
overflow: hidden; |
|||
box-shadow: 0 15px 70px rgba(0, 0, 0, .1); |
|||
padding: 10px; |
|||
border-radius: 10px; |
|||
|
|||
&.big-padding { |
|||
padding: 20px; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
padding-left: 20px; |
|||
padding-right: 20px; |
|||
} |
|||
|
|||
.btn-primary { |
|||
color: white; |
|||
|
|||
&:hover, &:active, &:focus, &.active { |
|||
color: white; |
|||
background-color: $highlight; |
|||
border-color: $highlight; |
|||
} |
|||
} |
|||
|
|||
.hp-bar-big { |
|||
white-space: nowrap; |
|||
margin-top: 4px; |
|||
text-align: center; |
|||
direction: rtl; |
|||
margin-bottom: 10px; |
|||
transition: all ease-in-out 0.15s; |
|||
position: relative; |
|||
|
|||
div { |
|||
display: inline-block; |
|||
background-color: $primary; |
|||
width: 1%; |
|||
height: 30px; |
|||
margin: 0.3%; |
|||
border-radius: 50rem; |
|||
transition: all ease-in-out 0.15s; |
|||
|
|||
&:hover { |
|||
opacity: 0.8; |
|||
transform: scale(1.5); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
$primary: #5CDD8B; |
|||
$link-color: #111; |
|||
$border-radius: 50rem; |
|||
|
|||
$highlight: #7ce8a4; |
|||
$highlight-white: #e7faec; |
|||
@ -0,0 +1,50 @@ |
|||
<template> |
|||
<div class="modal fade" tabindex="-1" ref="modal"> |
|||
<div class="modal-dialog"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalLabel">Confirm</h5> |
|||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<slot></slot> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn" :class="btnStyle" @click="yes" data-bs-dismiss="modal">Yes</button> |
|||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Modal } from 'bootstrap' |
|||
|
|||
export default { |
|||
props: { |
|||
btnStyle: { |
|||
type: String, |
|||
default: "btn-primary" |
|||
} |
|||
}, |
|||
data: () => ({ |
|||
modal: null |
|||
}), |
|||
mounted() { |
|||
this.modal = new Modal(this.$refs.modal) |
|||
}, |
|||
methods: { |
|||
show() { |
|||
this.modal.show() |
|||
}, |
|||
yes() { |
|||
this.$emit('yes'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<div class="form-container"> |
|||
<div class="form"> |
|||
<form @submit.prevent="submit"> |
|||
|
|||
<h1 class="h3 mb-3 fw-normal"></h1> |
|||
|
|||
<div class="form-floating"> |
|||
<input type="text" class="form-control" id="floatingInput" placeholder="Username" v-model="username"> |
|||
<label for="floatingInput">Username</label> |
|||
</div> |
|||
|
|||
<div class="form-floating mt-3"> |
|||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" v-model="password"> |
|||
<label for="floatingPassword">Password</label> |
|||
</div> |
|||
|
|||
<div class="form-check mb-3 mt-3"> |
|||
<label> |
|||
<input type="checkbox" value="remember-me" class="form-check-input" id="remember" v-model="remember"> |
|||
|
|||
<label class="form-check-label" for="remember"> |
|||
Remember me |
|||
</label> |
|||
</label> |
|||
</div> |
|||
<button class="w-100 btn btn-primary" type="submit" :disabled="processing">Login</button> |
|||
|
|||
<div class="alert alert-danger mt-3" role="alert" v-if="res && !res.ok"> |
|||
{{ res.msg }} |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
processing: false, |
|||
username: "", |
|||
password: "", |
|||
remember: true, |
|||
res: null, |
|||
} |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
this.processing = true; |
|||
this.$root.login(this.username, this.password, (res) => { |
|||
this.processing = false; |
|||
this.res = res; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
.form-container { |
|||
display: flex; |
|||
align-items: center; |
|||
padding-top: 40px; |
|||
padding-bottom: 40px; |
|||
} |
|||
|
|||
.form { |
|||
|
|||
width: 100%; |
|||
max-width: 330px; |
|||
padding: 15px; |
|||
margin: auto; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
|
|||
<div class="lost-connection" v-if="! $root.socket.connected && ! $root.socket.firstConnect"> |
|||
<div class="container-fluid"> |
|||
Lost connection to the socket server. Reconnecting... |
|||
</div> |
|||
</div> |
|||
|
|||
<header 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"> |
|||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> |
|||
<span class="fs-4 title">Uptime Kuma</span> |
|||
</router-link> |
|||
|
|||
<ul class="nav nav-pills"> |
|||
<li class="nav-item"><router-link to="/dashboard" class="nav-link">📊 Dashboard</router-link></li> |
|||
<li class="nav-item"><router-link to="/settings" class="nav-link">⚙ Settings</router-link></li> |
|||
</ul> |
|||
|
|||
</header> |
|||
|
|||
<main> |
|||
<router-view v-if="$root.loggedIn" /> |
|||
<Login v-if="! $root.loggedIn && $root.allowLoginDialog" /> |
|||
</main> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import Login from "../components/Login.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
Login |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
$route (to, from) { |
|||
this.init(); |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
if (this.$route.name === "root") { |
|||
this.$router.push("/dashboard") |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.title { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.nav { |
|||
margin-right: 25px; |
|||
} |
|||
|
|||
.lost-connection { |
|||
padding: 5px; |
|||
background-color: crimson; |
|||
color: white; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
import {createApp, h} from "vue"; |
|||
import {createRouter, createWebHistory} from 'vue-router' |
|||
|
|||
import App from './App.vue' |
|||
import Layout from './layouts/Layout.vue' |
|||
import Settings from "./pages/Settings.vue"; |
|||
import Dashboard from "./pages/Dashboard.vue"; |
|||
import DashboardHome from "./pages/DashboardHome.vue"; |
|||
import Details from "./pages/Details.vue"; |
|||
import socket from "./mixins/socket" |
|||
import "./assets/app.scss" |
|||
import EditMonitor from "./pages/EditMonitor.vue"; |
|||
import Toast from "vue-toastification"; |
|||
import "vue-toastification/dist/index.css"; |
|||
import "bootstrap" |
|||
|
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
component: Layout, |
|||
children: [ |
|||
{ |
|||
name: "root", |
|||
path: '', |
|||
component: Dashboard, |
|||
children: [ |
|||
{ |
|||
name: "DashboardHome", |
|||
path: '/dashboard', |
|||
component: DashboardHome, |
|||
children: [ |
|||
{ |
|||
path: ':id', |
|||
component: Details, |
|||
}, |
|||
{ |
|||
path: '/add', |
|||
component: EditMonitor, |
|||
}, |
|||
{ |
|||
path: '/edit/:id', |
|||
component: EditMonitor, |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
path: '/settings', |
|||
component: Settings, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
} |
|||
] |
|||
|
|||
const router = createRouter({ |
|||
linkActiveClass: 'active', |
|||
history: createWebHistory(), |
|||
routes, |
|||
}) |
|||
|
|||
const app = createApp({ |
|||
mixins: [ |
|||
socket, |
|||
], |
|||
render: ()=>h(App) |
|||
}) |
|||
|
|||
app.use(router) |
|||
|
|||
const options = { |
|||
position: "bottom-right" |
|||
}; |
|||
|
|||
app.use(Toast, options); |
|||
|
|||
app.mount('#app') |
|||
|
|||
@ -0,0 +1,121 @@ |
|||
import {io} from "socket.io-client"; |
|||
import { useToast } from 'vue-toastification' |
|||
const toast = useToast() |
|||
|
|||
let storage = localStorage; |
|||
let socket; |
|||
|
|||
export default { |
|||
|
|||
data() { |
|||
return { |
|||
socket: { |
|||
token: null, |
|||
firstConnect: true, |
|||
connected: false, |
|||
}, |
|||
allowLoginDialog: false, // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
|
|||
loggedIn: false, |
|||
monitorList: [ |
|||
|
|||
], |
|||
importantHeartbeatList: [ |
|||
|
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
socket = io("http://localhost:3001", { |
|||
transports: ['websocket'] |
|||
}); |
|||
|
|||
socket.on('monitorList', (data) => { |
|||
this.monitorList = data; |
|||
}); |
|||
|
|||
socket.on('disconnect', () => { |
|||
this.socket.connected = false; |
|||
}); |
|||
|
|||
socket.on('connect', () => { |
|||
this.socket.connected = true; |
|||
this.socket.firstConnect = false; |
|||
|
|||
if (storage.token) { |
|||
this.loginByToken(storage.token) |
|||
} else { |
|||
this.allowLoginDialog = true; |
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
getSocket() { |
|||
return socket; |
|||
}, |
|||
toastRes(res) { |
|||
if (res.ok) { |
|||
toast.success(res.msg); |
|||
} else { |
|||
toast.error(res.msg); |
|||
} |
|||
}, |
|||
login(username, password, callback) { |
|||
socket.emit("login", { |
|||
username, |
|||
password, |
|||
}, (res) => { |
|||
|
|||
if (res.ok) { |
|||
storage.token = res.token; |
|||
this.socket.token = res.token; |
|||
this.loggedIn = true; |
|||
|
|||
// Trigger Chrome Save Password
|
|||
history.pushState({}, '') |
|||
} |
|||
|
|||
callback(res) |
|||
}) |
|||
}, |
|||
loginByToken(token) { |
|||
socket.emit("loginByToken", token, (res) => { |
|||
this.allowLoginDialog = true; |
|||
|
|||
if (! res.ok) { |
|||
this.logout() |
|||
console.log(res.msg) |
|||
} else { |
|||
this.loggedIn = true; |
|||
} |
|||
}) |
|||
}, |
|||
logout() { |
|||
storage.removeItem("token"); |
|||
this.socket.token = null; |
|||
this.loggedIn = false; |
|||
|
|||
socket.emit("logout", () => { |
|||
toast.success("Logout Successfully") |
|||
}) |
|||
}, |
|||
add(monitor, callback) { |
|||
socket.emit("add", monitor, callback) |
|||
}, |
|||
deleteMonitor(monitorID, callback) { |
|||
socket.emit("deleteMonitor", monitorID, callback) |
|||
}, |
|||
loadMonitor(monitorID) { |
|||
|
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
@ -0,0 +1,128 @@ |
|||
<template> |
|||
|
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-12 col-xl-4"> |
|||
<div> |
|||
<router-link to="/add" class="btn btn-primary">Add New Monitor</router-link> |
|||
</div> |
|||
|
|||
<div class="shadow-box list"> |
|||
|
|||
<span v-if="$root.monitorList.length === 0">No Monitors, please <router-link to="/add">add one</router-link>.</span> |
|||
|
|||
<router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in $root.monitorList"> |
|||
|
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
|
|||
<div class="info"> |
|||
<span class="badge rounded-pill bg-primary">{{ item.upRate }}%</span> |
|||
{{ item.name }} |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-6"> |
|||
<div class="hp-bar"> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</router-link> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-xl-8"> |
|||
<router-view /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
monitorURL(id) { |
|||
return "/dashboard/" + id; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../assets/vars.scss"; |
|||
|
|||
.container-fluid { |
|||
width: 98% |
|||
} |
|||
|
|||
.list { |
|||
margin-top: 25px; |
|||
|
|||
.item { |
|||
display: block; |
|||
text-decoration: none; |
|||
padding: 15px 15px 12px 15px; |
|||
border-radius: 10px; |
|||
transition: all ease-in-out 0.15s; |
|||
|
|||
&.disabled { |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.info { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
&:hover { |
|||
background-color: $highlight-white; |
|||
} |
|||
|
|||
&.active { |
|||
background-color: #cdf8f4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hp-bar { |
|||
white-space: nowrap; |
|||
margin-top: 4px; |
|||
text-align: right; |
|||
|
|||
div { |
|||
display: inline-block; |
|||
background-color: $primary; |
|||
width: 0.35rem; |
|||
height: 1rem; |
|||
margin: 0.15rem; |
|||
border-radius: 50rem; |
|||
transition: all ease-in-out 0.15s; |
|||
|
|||
&:hover { |
|||
opacity: 0.8; |
|||
transform: scale(1.5); |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
|
|||
<div v-if="$route.name === 'DashboardHome'"> |
|||
<h1 class="mb-3">Quick Stats</h1> |
|||
|
|||
<div class="shadow-box big-padding text-center"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12"> |
|||
<div class="hp-bar-big"> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col"> |
|||
<h3>Up</h3> |
|||
<span class="num">2</span> |
|||
</div> |
|||
<div class="col"> |
|||
<h3>Down</h3> |
|||
<span class="num text-danger">0</span> |
|||
</div> |
|||
<div class="col"> |
|||
<h3>Pause</h3> |
|||
<span class="num">0</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-8"> |
|||
<h4>Latest Incident</h4> |
|||
|
|||
<div class="shadow-box bg-danger text-light"> |
|||
MySQL was down. |
|||
</div> |
|||
|
|||
<div class="shadow-box bg-primary text-light"> |
|||
No issues was found. |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-4"> |
|||
|
|||
<h4>Overall Uptime</h4> |
|||
|
|||
<div class="shadow-box"> |
|||
<div>100.00% (24 hours)</div> |
|||
<div>100.00% (7 days)</div> |
|||
<div>100.00% (30 days)</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<router-view ref="child" /> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
computed: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../assets/vars"; |
|||
|
|||
.num { |
|||
font-size: 30px; |
|||
color: $primary; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<h1>{{ monitor.name }}</h1> |
|||
<h2>{{ monitor.url }}</h2> |
|||
|
|||
<div class="functions"> |
|||
<button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button> |
|||
<button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active">Resume</button> |
|||
<router-link :to=" '/edit/' + monitor.id " class="btn btn-light">Edit</router-link> |
|||
<button class="btn btn-danger" @click="deleteDialog">Delete</button> |
|||
</div> |
|||
|
|||
<div class="shadow-box"> |
|||
|
|||
<div class="hp-bar-big"> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
<div></div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-8"> |
|||
|
|||
</div> |
|||
<div class="col-md-4"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<Confirm ref="confirmPause" @yes="pauseMonitor"> |
|||
Are you sure want to pause? |
|||
</Confirm> |
|||
|
|||
<Confirm ref="confirmDelete" btnStyle="btn-danger" @yes="deleteMonitor"> |
|||
Are you sure want to delete this monitor? |
|||
</Confirm> |
|||
</template> |
|||
|
|||
<script> |
|||
import { useToast } from 'vue-toastification' |
|||
const toast = useToast() |
|||
import Confirm from "../components/Confirm.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
Confirm |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
monitor() { |
|||
let id = parseInt(this.$route.params.id) |
|||
|
|||
for (let monitor of this.$root.monitorList) { |
|||
if (monitor.id === id) { |
|||
return monitor; |
|||
} |
|||
} |
|||
return {}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
pauseDialog() { |
|||
this.$refs.confirmPause.show(); |
|||
}, |
|||
resumeMonitor() { |
|||
this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => { |
|||
this.$root.toastRes(res) |
|||
}) |
|||
}, |
|||
pauseMonitor() { |
|||
this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => { |
|||
this.$root.toastRes(res) |
|||
}) |
|||
}, |
|||
deleteDialog() { |
|||
this.$refs.confirmDelete.show(); |
|||
}, |
|||
deleteMonitor() { |
|||
this.$root.deleteMonitor(this.monitor.id, (res) => { |
|||
if (res.ok) { |
|||
toast.success(res.msg); |
|||
this.$router.push("/dashboard") |
|||
} else { |
|||
toast.error(res.msg); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../assets/vars.scss"; |
|||
|
|||
h2 { |
|||
color: $primary; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.functions { |
|||
button, a { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
|
|||
.shadow-box { |
|||
padding: 20px; |
|||
margin-top: 25px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<h1 class="mb-3">{{ pageName }}</h1> |
|||
<form @submit.prevent="submit"> |
|||
|
|||
<div class="shadow-box"> |
|||
<div class="row"> |
|||
<div class="col-md-6"> |
|||
<h2>General</h2> |
|||
|
|||
<div class="mb-3"> |
|||
<label for="type" class="form-label">Monitor Type</label> |
|||
<select class="form-select" aria-label="Default select example" id="type" v-model="monitor.type"> |
|||
<option value="http">HTTP(s)</option> |
|||
<option value="port">TCP Port</option> |
|||
<option value="ping">Ping</option> |
|||
<option value="keyword">HTTP(s) - Keyword</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="mb-3"> |
|||
<label for="name" class="form-label">Friendly Name</label> |
|||
<input type="text" class="form-control" id="name" v-model="monitor.name" required> |
|||
</div> |
|||
|
|||
<div class="mb-3"> |
|||
<label for="url" class="form-label">URL</label> |
|||
<input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required> |
|||
</div> |
|||
|
|||
<div class="mb-3"> |
|||
<label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label> |
|||
<input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="20"> |
|||
</div> |
|||
|
|||
<div> |
|||
<button class="btn btn-primary" type="submit" :disabled="processing">Save</button> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<h2>Notifications</h2> |
|||
<p>Not available, please setup in Settings page.</p> |
|||
<a class="btn btn-primary me-2" href="/settings" target="_blank">Go to Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { useToast } from 'vue-toastification' |
|||
const toast = useToast() |
|||
|
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
if (this.isAdd) { |
|||
this.monitor = { |
|||
type: "http", |
|||
name: "", |
|||
url: "https://", |
|||
interval: 60, |
|||
} |
|||
} else { |
|||
this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => { |
|||
if (res.ok) { |
|||
this.monitor = res.monitor; |
|||
} else { |
|||
toast.error(res.msg) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
processing: false, |
|||
monitor: { } |
|||
} |
|||
}, |
|||
computed: { |
|||
pageName() { |
|||
return (this.isAdd) ? "Add New Monitor" : "Edit" |
|||
}, |
|||
isAdd() { |
|||
return this.$route.path === "/add"; |
|||
} |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
this.processing = true; |
|||
|
|||
if (this.isAdd) { |
|||
this.$root.add(this.monitor, (res) => { |
|||
this.processing = false; |
|||
|
|||
if (res.ok) { |
|||
toast.success(res.msg); |
|||
this.$router.push("/dashboard/" + res.monitorID) |
|||
} else { |
|||
toast.error(res.msg); |
|||
} |
|||
|
|||
}) |
|||
} else { |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.shadow-box { |
|||
padding: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<h1 class="mb-3">Settings</h1> |
|||
|
|||
<div class="shadow-box"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-md-6"> |
|||
<h2>General</h2> |
|||
<form class="mb-3"> |
|||
<div class="mb-3"> |
|||
<label for="timezone" class="form-label">Timezone</label> |
|||
<select class="form-select" aria-label="Default select example" id="timezone"> |
|||
<option value="1">One</option> |
|||
<option value="2">Two</option> |
|||
<option value="3">Three</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div> |
|||
<button class="btn btn-primary" type="submit">Save</button> |
|||
</div> |
|||
</form> |
|||
|
|||
<h2>Change Password</h2> |
|||
<form class="mb-3" @submit.prevent="savePassword"> |
|||
<div class="mb-3"> |
|||
<label for="current-password" class="form-label">Current Password</label> |
|||
<input type="password" class="form-control" id="current-password" required v-model="password.currentPassword"> |
|||
</div> |
|||
|
|||
<div class="mb-3"> |
|||
<label for="new-password" class="form-label">New Password</label> |
|||
<input type="password" class="form-control" id="new-password" required v-model="password.newPassword"> |
|||
</div> |
|||
|
|||
<div class="mb-3"> |
|||
<label for="repeat-new-password" class="form-label">Repeat New Password</label> |
|||
<input type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" id="repeat-new-password" required v-model="password.repeatNewPassword"> |
|||
<div class="invalid-feedback"> |
|||
The repeat password is not match. |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<button class="btn btn-primary" type="submit">Update Password</button> |
|||
</div> |
|||
</form> |
|||
|
|||
<div> |
|||
<button class="btn btn-danger" @click="$root.logout">Logout</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<h2>Notifications</h2> |
|||
<p>Empty</p> |
|||
<button class="btn btn-primary" type="submit">Add Notification</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
invalidPassword: false, |
|||
password: { |
|||
currentPassword: "", |
|||
newPassword: "", |
|||
repeatNewPassword: "", |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
savePassword() { |
|||
if (this.password.newPassword !== this.password.repeatNewPassword) { |
|||
this.invalidPassword = true; |
|||
} else { |
|||
this.$root.getSocket().emit("changePassword", this.password, (res) => { |
|||
this.$root.toastRes(res) |
|||
if (res.ok) { |
|||
this.password.currentPassword = "" |
|||
this.password.newPassword = "" |
|||
this.password.repeatNewPassword = "" |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
watch: { |
|||
"password.repeatNewPassword"() { |
|||
this.invalidPassword = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.shadow-box { |
|||
padding: 20px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue