7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-11 01:39:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Implement MaxRedirects & StatusCodes

Browse Source
This commit is contained in:
Nelson Chan
2021-08-05 19:04:38 +08:00
parent 2c2ac9dc59
commit 8f7885e58a
8 changed files with 184 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/EditMonitor.vue
View File

@@ -1,5 +1,5 @@
<template>
<h1 class="mb-3">
<h1 class="my-3">
{{ pageName }}
</h1>
<form @submit.prevent="submit">
@@ -8,7 +8,7 @@
<div class="col-md-6">
<h2>General</h2>
<div class="mb-3">
<div class="my-3">
<label for="type" class="form-label">Monitor Type</label>
<select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example">
<option value="http">
@@ -26,17 +26,17 @@
</select>
</div>
<div class="mb-3">
<div class="my-3">
<label for="name" class="form-label">Friendly Name</label>
<input id="name" v-model="monitor.name" type="text" class="form-control" required>
</div>
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3">
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
<label for="url" class="form-label">URL</label>
<input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
</div>
<div v-if="monitor.type === 'keyword' " class="mb-3">
<div v-if="monitor.type === 'keyword' " class="my-3">
<label for="keyword" class="form-label">Keyword</label>
<input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
<div class="form-text">
@@ -44,22 +44,22 @@
</div>
</div>
<div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="mb-3">
<div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3">
<label for="hostname" class="form-label">Hostname</label>
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
</div>
<div v-if="monitor.type === 'port' " class="mb-3">
<div v-if="monitor.type === 'port' " class="my-3">
<label for="port" class="form-label">Port</label>
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
</div>
<div class="mb-3">
<div class="my-3">
<label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
<input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1">
</div>
<div class="mb-3">
<div class="my-3">
<label for="maxRetries" class="form-label">Retries</label>
<input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
<div class="form-text">
@@ -67,16 +67,16 @@
</div>
</div>
<h2>Advanced</h2>
<h2 class="my-3">Advanced</h2>
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3 form-check">
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
<input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
<label class="form-check-label" for="ignore-tls">
Ignore TLS/SSL error for HTTPS websites
</label>
</div>
<div class="mb-3 form-check">
<div class="my-3 form-check">
<input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
<label class="form-check-label" for="upside-down">
Upside Down Mode
@@ -86,6 +86,24 @@
</div>
</div>
<div class="my-3">
<label for="maxRedirects" class="form-label">Max. Redirects</label>
<input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
<div class="form-text">
Maximum number of redirects to follow. Set to 0 to disable redirects.
</div>
</div>
<div class="my-3">
<label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
<VueMultiselect id="acceptedStatusCodes" v-model="monitor.accepted_statuscodes" :options="acceptedStatusCodeOptions" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick Accepted Status Codes..." :preselect-first="false">
<template #selection="{ values, isOpen }"><span v-if="values.length && !isOpen" class="multiselect__single">{{ values.length }} options selected</span></template>
</VueMultiselect>
<div class="form-text">
Select status codes which are considered as a successful response.
</div>
</div>
<div>
<button class="btn btn-primary" type="submit" :disabled="processing">
Save
@@ -101,7 +119,7 @@
Not available, please setup.
</p>
<div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch mb-3">
<div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
<input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
<label class="form-check-label" :for=" 'notification' + notification.id">
@@ -124,18 +142,31 @@
<script>
import NotificationDialog from "../components/NotificationDialog.vue";
import { useToast } from "vue-toastification"
import VueMultiselect from "vue-multiselect"
const toast = useToast()
export default {
components: {
NotificationDialog,
VueMultiselect
},
data() {
let acceptedStatusCodeOptions = [
"100-199",
"200-299",
"300-399",
"400-499",
"500-599",
];
for (let i = 100; i <= 999; i++) {
acceptedStatusCodeOptions.push(i.toString());
}
return {
processing: false,
monitor: {
notificationIDList: {},
},
acceptedStatusCodeOptions,
}
},
computed: {
@@ -170,6 +201,8 @@ export default {
notificationIDList: {},
ignoreTls: false,
upsideDown: false,
maxredirects: 10,
accepted_statuscodes: ["200-299"],
}
} else if (this.isEdit) {
this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
@@ -209,6 +242,18 @@ export default {
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style>
.multiselect__tags {
border-radius: 2rem;
border: 1px solid #ced4da;
}
.multiselect--active .multiselect__tags {
border-radius: 1rem;
}
</style>
<style scoped>
.shadow-box {
padding: 20px;