diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 18663ae5..55226173 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -47,50 +47,51 @@
</div>
</div>
- <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3">
+ <!-- TCP Port / Ping / DNS only -->
+ <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' " class="my-3">
<label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
</div>
+ <!-- For TCP Port Type -->
<div v-if="monitor.type === 'port' " class="my-3">
<label for="port" class="form-label">{{ $t("Port") }}</label>
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
</div>
- <div v-if="monitor.type === 'dns'" 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 === 'dns'" class="my-3">
- <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
- <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
- <div class="form-text">
- {{ $t("resoverserverDescription") }}
+ <!-- For DNS Type -->
+ <template v-if="monitor.type === 'dns'">
+ <div class="my-3">
+ <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
+ <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
+ <div class="form-text">
+ {{ $t("resoverserverDescription") }}
+ </div>
</div>
- </div>
- <div v-if="monitor.type === 'dns'" class="my-3">
- <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
+ <div class="my-3">
+ <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
- <VueMultiselect
- id="dns_resolve_type"
- v-model="monitor.dns_resolve_type"
- :options="dnsresolvetypeOptions"
- :multiple="false"
- :close-on-select="true"
- :clear-on-select="false"
- :preserve-search="false"
- placeholder="Pick a RR-Type..."
- :preselect-first="false"
- :max-height="500"
- :taggable="false"
- ></VueMultiselect>
+ <!-- :allow-empty="false" is not working, set a default value instead https://github.com/shentao/vue-multiselect/issues/336 -->
+ <VueMultiselect
+ id="dns_resolve_type"
+ v-model="monitor.dns_resolve_type"
+ :options="dnsresolvetypeOptions"
+ :multiple="false"
+ :close-on-select="true"
+ :clear-on-select="false"
+ :preserve-search="false"
+ placeholder="Pick a RR-Type..."
+ :preselect-first="false"
+ :max-height="500"
+ :taggable="false"
+ ></VueMultiselect>
- <div class="form-text">
- {{ $t("rrtypeDescription") }}
+ <div class="form-text">
+ {{ $t("rrtypeDescription") }}
+ </div>
</div>
- </div>
+ </template>
<div class="my-3">
<label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
@@ -124,35 +125,38 @@
</div>
</div>
- <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
- <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
- <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
- <div class="form-text">
- {{ $t("maxRedirectDescription") }}
+ <!-- HTTP / Keyword only -->
+ <template v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
+ <div class="my-3">
+ <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
+ <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+ <div class="form-text">
+ {{ $t("maxRedirectDescription") }}
+ </div>
</div>
- </div>
- <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
- <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
+ <div class="my-3">
+ <label for="acceptedStatusCodes" class="form-label">{{ $t("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"
- :max-height="600"
- :taggable="true"
- ></VueMultiselect>
+ <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"
+ :max-height="600"
+ :taggable="true"
+ ></VueMultiselect>
- <div class="form-text">
- {{ $t("acceptedStatusCodesDescription") }}
+ <div class="form-text">
+ {{ $t("acceptedStatusCodesDescription") }}
+ </div>
</div>
- </div>
+ </template>
<div class="mt-5 mb-1">
<button class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
@@ -207,6 +211,7 @@ export default {
processing: false,
monitor: {
notificationIDList: {},
+ // Do not add default value here, please check init() method
},
acceptedStatusCodeOptions: [],
dnsresolvetypeOptions: [],
@@ -288,6 +293,7 @@ export default {
upsideDown: false,
maxredirects: 10,
accepted_statuscodes: ["200-299"],
+ dns_resolve_type: "A",
dns_resolve_server: "1.1.1.1",
}
} else if (this.isEdit) {