mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-08-11 23:52:31 +08:00
init
This commit is contained in:
LouisLam
128
src/pages/Dashboard.vue
Normal file
128
src/pages/Dashboard.vue
Normal file
@@ -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>
|
||||
123
src/pages/DashboardHome.vue
Normal file
123
src/pages/DashboardHome.vue
Normal file
@@ -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>
|
||||
162
src/pages/Details.vue
Normal file
162
src/pages/Details.vue
Normal file
@@ -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>
|
||||
123
src/pages/EditMonitor.vue
Normal file
123
src/pages/EditMonitor.vue
Normal file
@@ -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>
|
||||
111
src/pages/Settings.vue
Normal file
111
src/pages/Settings.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user