|
@ -1,5 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<h1 class="mb-3"> |
|
|
<h1 class="my-3"> |
|
|
{{ pageName }} |
|
|
{{ pageName }} |
|
|
</h1> |
|
|
</h1> |
|
|
<form @submit.prevent="submit"> |
|
|
<form @submit.prevent="submit"> |
|
@ -8,7 +8,7 @@ |
|
|
<div class="col-md-6"> |
|
|
<div class="col-md-6"> |
|
|
<h2>General</h2> |
|
|
<h2>General</h2> |
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
<div class="my-3"> |
|
|
<label for="type" class="form-label">Monitor Type</label> |
|
|
<label for="type" class="form-label">Monitor Type</label> |
|
|
<select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example"> |
|
|
<select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example"> |
|
|
<option value="http"> |
|
|
<option value="http"> |
|
@ -26,17 +26,17 @@ |
|
|
</select> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
<div class="my-3"> |
|
|
<label for="name" class="form-label">Friendly Name</label> |
|
|
<label for="name" class="form-label">Friendly Name</label> |
|
|
<input id="name" v-model="monitor.name" type="text" class="form-control" required> |
|
|
<input id="name" v-model="monitor.name" type="text" class="form-control" required> |
|
|
</div> |
|
|
</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> |
|
|
<label for="url" class="form-label">URL</label> |
|
|
<input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required> |
|
|
<input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required> |
|
|
</div> |
|
|
</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> |
|
|
<label for="keyword" class="form-label">Keyword</label> |
|
|
<input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required> |
|
|
<input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required> |
|
|
<div class="form-text"> |
|
|
<div class="form-text"> |
|
@ -44,22 +44,22 @@ |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
<label for="hostname" class="form-label">Hostname</label> |
|
|
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required> |
|
|
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required> |
|
|
</div> |
|
|
</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> |
|
|
<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"> |
|
|
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
<div class="my-3"> |
|
|
<label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label> |
|
|
<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"> |
|
|
<input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
<div class="my-3"> |
|
|
<label for="maxRetries" class="form-label">Retries</label> |
|
|
<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"> |
|
|
<input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1"> |
|
|
<div class="form-text"> |
|
|
<div class="form-text"> |
|
@ -67,16 +67,16 @@ |
|
|
</div> |
|
|
</div> |
|
|
</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=""> |
|
|
<input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value=""> |
|
|
<label class="form-check-label" for="ignore-tls"> |
|
|
<label class="form-check-label" for="ignore-tls"> |
|
|
Ignore TLS/SSL error for HTTPS websites |
|
|
Ignore TLS/SSL error for HTTPS websites |
|
|
</label> |
|
|
</label> |
|
|
</div> |
|
|
</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"> |
|
|
<input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox"> |
|
|
<label class="form-check-label" for="upside-down"> |
|
|
<label class="form-check-label" for="upside-down"> |
|
|
Upside Down Mode |
|
|
Upside Down Mode |
|
@ -86,6 +86,24 @@ |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
<div> |
|
|
<button class="btn btn-primary" type="submit" :disabled="processing"> |
|
|
<button class="btn btn-primary" type="submit" :disabled="processing"> |
|
|
Save |
|
|
Save |
|
@ -101,7 +119,7 @@ |
|
|
Not available, please setup. |
|
|
Not available, please setup. |
|
|
</p> |
|
|
</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"> |
|
|
<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"> |
|
|
<label class="form-check-label" :for=" 'notification' + notification.id"> |
|
@ -124,18 +142,31 @@ |
|
|
<script> |
|
|
<script> |
|
|
import NotificationDialog from "../components/NotificationDialog.vue"; |
|
|
import NotificationDialog from "../components/NotificationDialog.vue"; |
|
|
import { useToast } from "vue-toastification" |
|
|
import { useToast } from "vue-toastification" |
|
|
|
|
|
import VueMultiselect from "vue-multiselect" |
|
|
const toast = useToast() |
|
|
const toast = useToast() |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
NotificationDialog, |
|
|
NotificationDialog, |
|
|
|
|
|
VueMultiselect |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
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 { |
|
|
return { |
|
|
processing: false, |
|
|
processing: false, |
|
|
monitor: { |
|
|
monitor: { |
|
|
notificationIDList: {}, |
|
|
notificationIDList: {}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
acceptedStatusCodeOptions, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
@ -170,6 +201,8 @@ export default { |
|
|
notificationIDList: {}, |
|
|
notificationIDList: {}, |
|
|
ignoreTls: false, |
|
|
ignoreTls: false, |
|
|
upsideDown: false, |
|
|
upsideDown: false, |
|
|
|
|
|
maxredirects: 10, |
|
|
|
|
|
accepted_statuscodes: ["200-299"], |
|
|
} |
|
|
} |
|
|
} else if (this.isEdit) { |
|
|
} else if (this.isEdit) { |
|
|
this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => { |
|
|
this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => { |
|
@ -209,6 +242,18 @@ export default { |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</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> |
|
|
<style scoped> |
|
|
.shadow-box { |
|
|
.shadow-box { |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
|