Fix: Use ActionSelect for Docker Host & validate input (#3864)
* Fix: Use ActionSelect Docker Host & validate input * Fix: Handle docker host deleted while editing * UI: Use add for ActionSelect & prevent delete instead
This commit is contained in:
Nelson Chan
GitHub
parent
fdfb572e09
commit
b534fde265
|
|
@ -673,8 +673,6 @@ class Monitor extends BeanModel {
|
|||
} else if (this.type === "docker") {
|
||||
log.debug("monitor", `[${this.name}] Prepare Options for Axios`);
|
||||
|
||||
const dockerHost = await R.load("docker_host", this.docker_host);
|
||||
|
||||
const options = {
|
||||
url: `/containers/${this.docker_container}/json`,
|
||||
timeout: this.interval * 1000 * 0.8,
|
||||
|
|
@ -690,6 +688,12 @@ class Monitor extends BeanModel {
|
|||
}),
|
||||
};
|
||||
|
||||
const dockerHost = await R.load("docker_host", this.docker_host);
|
||||
|
||||
if (!dockerHost) {
|
||||
throw new Error("Failed to load docker host config");
|
||||
}
|
||||
|
||||
if (dockerHost._dockerType === "socket") {
|
||||
options.socketPath = dockerHost._dockerDaemon;
|
||||
} else if (dockerHost._dockerType === "tcp") {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="input-group mb-3">
|
||||
<select ref="select" v-model="model" class="form-select" :disabled="disabled">
|
||||
<option v-for="option in options" :key="option" :value="option.value">{{ option.label }}</option>
|
||||
<select ref="select" v-model="model" class="form-select" :disabled="disabled" :required="required">
|
||||
<option v-for="option in options" :key="option" :value="option.value" :disabled="option.disabled">{{ option.label }}</option>
|
||||
</select>
|
||||
<a class="btn btn-outline-primary" @click="action()">
|
||||
<a class="btn btn-outline-primary" :class="{ disabled: actionDisabled }" @click="action()">
|
||||
<font-awesome-icon :icon="icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -50,6 +50,22 @@ export default {
|
|||
action: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
/**
|
||||
* Whether the action button is disabled.
|
||||
* @example true
|
||||
*/
|
||||
actionDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* Whether the select field is required.
|
||||
* @example true
|
||||
*/
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
emits: [ "update:modelValue" ],
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
Confirm,
|
||||
},
|
||||
props: {},
|
||||
emits: [ "added" ],
|
||||
emits: [ "added", "deleted" ],
|
||||
data() {
|
||||
return {
|
||||
modal: null,
|
||||
|
|
@ -178,6 +178,7 @@ export default {
|
|||
this.processing = false;
|
||||
|
||||
if (res.ok) {
|
||||
this.$emit("deleted", this.id);
|
||||
this.modal.hide();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -383,6 +383,8 @@
|
|||
"Setup Docker Host": "Setup Docker Host",
|
||||
"Connection Type": "Connection Type",
|
||||
"Docker Daemon": "Docker Daemon",
|
||||
"noDockerHostMsg": "Not Available. Setup a Docker Host First.",
|
||||
"DockerHostRequired": "Please set the Docker Host for this monitor.",
|
||||
"deleteDockerHostMsg": "Are you sure want to delete this docker host for all monitors?",
|
||||
"socket": "Socket",
|
||||
"tcp": "TCP / HTTP",
|
||||
|
|
|
|||
|
|
@ -288,22 +288,17 @@
|
|||
<!-- Docker Host -->
|
||||
<!-- For Docker Type -->
|
||||
<div v-if="monitor.type === 'docker'" class="my-3">
|
||||
<h2 class="mb-2">{{ $t("Docker Host") }}</h2>
|
||||
<p v-if="$root.dockerHostList.length === 0">
|
||||
{{ $t("Not available, please setup.") }}
|
||||
</p>
|
||||
|
||||
<div v-else class="mb-3">
|
||||
<div class="mb-3">
|
||||
<label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
|
||||
<select id="docket-host" v-model="monitor.docker_host" class="form-select">
|
||||
<option v-for="host in $root.dockerHostList" :key="host.id" :value="host.id">{{ host.name }}</option>
|
||||
</select>
|
||||
<a href="#" @click="$refs.dockerHostDialog.show(monitor.docker_host)">{{ $t("Edit") }}</a>
|
||||
<ActionSelect
|
||||
v-model="monitor.docker_host"
|
||||
:options="dockerHostOptionsList"
|
||||
:disabled="$root.dockerHostList == null || $root.dockerHostList.length === 0"
|
||||
:icon="'plus'"
|
||||
:action="() => $refs.dockerHostDialog.show()"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary me-2" type="button" @click="$refs.dockerHostDialog.show()">
|
||||
{{ $t("Setup Docker Host") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- MQTT -->
|
||||
|
|
@ -1115,6 +1110,21 @@ message HealthCheckResponse {
|
|||
return list;
|
||||
},
|
||||
|
||||
dockerHostOptionsList() {
|
||||
if (this.$root.dockerHostList && this.$root.dockerHostList.length > 0) {
|
||||
return this.$root.dockerHostList.map((host) => {
|
||||
return {
|
||||
label: host.name,
|
||||
value: host.id
|
||||
};
|
||||
});
|
||||
} else {
|
||||
return [{
|
||||
label: this.$t("noDockerHostMsg"),
|
||||
value: null,
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"$root.proxyList"() {
|
||||
|
|
@ -1352,6 +1362,12 @@ message HealthCheckResponse {
|
|||
return false;
|
||||
}
|
||||
}
|
||||
if (this.monitor.type === "docker") {
|
||||
if (this.monitor.docker_host == null) {
|
||||
toast.error(this.$t("DockerHostRequired"));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue