Skip to content

Commit 0a85a18

Browse files
ThisSeanZhangThisSeanZhang
committed
Update styling of the container start
1 parent 52bf295 commit 0a85a18

File tree

1 file changed

+133
-105
lines changed

1 file changed

+133
-105
lines changed

‎landscape-webui/src/components/docker/ContainerRunModal.vue‎

Lines changed: 133 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -50,41 +50,6 @@ async function save_config() {
5050
}
5151
}
5252
53-
function add_redirect_id() {
54-
if (formModel.value) {
55-
if (formModel.value.labels) {
56-
for (const label of formModel.value.labels) {
57-
if (label.key === LAND_REDIRECT_ID_KEY) {
58-
// 提示
59-
notification.info({
60-
content: "已经存在标签了",
61-
duration: 2500,
62-
keepAliveOnHover: true,
63-
});
64-
break;
65-
}
66-
}
67-
68-
formModel.value.labels.unshift({
69-
key: LAND_REDIRECT_ID_KEY,
70-
value: "",
71-
});
72-
}
73-
}
74-
}
75-
76-
const show_add_redirect_id_btn = computed(() => {
77-
if (formModel.value?.labels) {
78-
for (const label of formModel.value.labels) {
79-
if (label.key === LAND_REDIRECT_ID_KEY) {
80-
return true;
81-
}
82-
}
83-
}
84-
85-
return false;
86-
});
87-
8853
enum DockerRestartPolicy {
8954
NO = "no",
9055
ON_FAILURE = "on-failure",
@@ -115,6 +80,45 @@ const restrt_options = [
11580
value: DockerRestartPolicy.UNLESS_STOPPED,
11681
},
11782
];
83+
84+
const has_edge_label = computed({
85+
get() {
86+
if (formModel.value?.labels) {
87+
for (const label of formModel.value.labels) {
88+
if (label.key === LAND_REDIRECT_ID_KEY) {
89+
return true;
90+
}
91+
}
92+
}
93+
94+
return false;
95+
},
96+
set(new_value) {
97+
if (new_value) {
98+
if (formModel.value?.labels) {
99+
formModel.value?.labels.unshift({
100+
key: LAND_REDIRECT_ID_KEY,
101+
value: "",
102+
});
103+
} else {
104+
if (formModel.value) {
105+
formModel.value.labels = [
106+
{
107+
key: LAND_REDIRECT_ID_KEY,
108+
value: "",
109+
},
110+
];
111+
}
112+
}
113+
} else {
114+
if (formModel.value?.labels) {
115+
formModel.value.labels = formModel.value.labels.filter(
116+
(e) => e.key !== LAND_REDIRECT_ID_KEY
117+
);
118+
}
119+
}
120+
},
121+
});
118122
</script>
119123

120124
<template>
@@ -132,82 +136,105 @@ const restrt_options = [
132136
aria-modal="true"
133137
>
134138
<n-form v-if="formModel" :model="formModel" label-width="120px">
135-
<n-form-item label="镜像名称" path="imageName">
136-
<n-input
137-
:disabled="true"
138-
v-model:value="formModel.image_name"
139-
placeholder="请输入镜像名称"
140-
/>
141-
</n-form-item>
142-
<n-form-item label="重启策略" path="containerName">
143-
<n-input-group>
144-
<n-select
145-
v-model:value="formModel.restart"
146-
:options="restrt_options"
139+
<n-grid :cols="6" :x-gap="12">
140+
<n-form-item-gi :span="3" label="容器名称" path="containerName">
141+
<n-input
142+
v-model:value="formModel.container_name"
143+
placeholder="请输入容器名称 (可选)"
147144
/>
148-
<n-input-number
149-
v-if="
150-
formModel.restart ===
151-
DockerRestartPolicy.ON_FAILURE_WITH_MAX_RETRIES
152-
"
153-
v-model:value="formModel.restart_max_retries"
154-
placeholder=""
145+
</n-form-item-gi>
146+
147+
<n-form-item-gi
148+
:offset="1"
149+
:span="2"
150+
label="用作 Flow 出口"
151+
path="imageName"
152+
>
153+
<n-switch v-model:value="has_edge_label"> </n-switch>
154+
</n-form-item-gi>
155+
<n-form-item-gi :span="6" label="重启策略" path="containerName">
156+
<n-input-group>
157+
<n-select
158+
v-model:value="formModel.restart"
159+
:options="restrt_options"
160+
/>
161+
<n-input-number
162+
v-if="
163+
formModel.restart ===
164+
DockerRestartPolicy.ON_FAILURE_WITH_MAX_RETRIES
165+
"
166+
v-model:value="formModel.restart_max_retries"
167+
placeholder=""
168+
/>
169+
</n-input-group>
170+
</n-form-item-gi>
171+
172+
<n-form-item-gi :span="6" label="entrypoint" path="containerName">
173+
<n-input
174+
v-model:value="formModel.entrypoint"
175+
placeholder="请输入 entrypoint (可选)"
155176
/>
156-
</n-input-group>
157-
</n-form-item>
158-
<n-form-item label="容器名称" path="containerName">
159-
<n-input
160-
v-model:value="formModel.container_name"
161-
placeholder="请输入容器名称 (可选)"
162-
/>
163-
</n-form-item>
164-
<n-form-item label="entrypoint" path="containerName">
165-
<n-input
166-
v-model:value="formModel.entrypoint"
167-
placeholder="请输入 entrypoint (可选)"
168-
/>
169-
</n-form-item>
170-
<!-- <n-form-item label="entrypoint params" path="containerName">
177+
</n-form-item-gi>
178+
<!-- <n-form-item-gi label="entrypoint params" path="containerName">
171179
<n-input
172180
v-model:value="formModel.params"
173181
placeholder="请输入entrypoint params (可选)"
174182
/>
175-
</n-form-item> -->
176-
<n-form-item label="端口映射" path="ports">
177-
<n-dynamic-input
178-
v-model:value="formModel.ports"
179-
preset="pair"
180-
separator=":"
181-
key-placeholder="主机端口"
182-
value-placeholder="容器端口"
183-
/>
184-
</n-form-item>
185-
<n-form-item label="环境变量" path="environment">
186-
<n-dynamic-input
187-
v-model:value="formModel.environment"
188-
preset="pair"
189-
separator=":"
190-
key-placeholder="变量名"
191-
value-placeholder="变量值"
192-
/>
193-
</n-form-item>
194-
<n-form-item label="卷映射" path="volumes">
195-
<n-dynamic-input
196-
v-model:value="formModel.volumes"
197-
preset="pair"
198-
separator=":"
199-
key-placeholder="主机目录"
200-
value-placeholder="容器目录"
201-
/>
202-
</n-form-item>
203-
<n-form-item label="标签">
204-
<n-flex style="flex: 1" vertical>
205-
<n-button
206-
:disabled="show_add_redirect_id_btn"
207-
@click="add_redirect_id"
183+
</n-form-item-gi> -->
184+
<n-form-item-gi :span="6" label="端口映射" path="ports">
185+
<n-dynamic-input
186+
v-model:value="formModel.ports"
187+
preset="pair"
188+
separator=":"
189+
key-placeholder="主机端口"
190+
value-placeholder="容器端口"
191+
/>
192+
</n-form-item-gi>
193+
<n-form-item-gi :span="6" label="环境变量" path="environment">
194+
<n-dynamic-input
195+
v-model:value="formModel.environment"
196+
preset="pair"
197+
separator=":"
198+
key-placeholder="变量名"
199+
value-placeholder="变量值"
200+
/>
201+
</n-form-item-gi>
202+
<n-form-item-gi :span="6" label="卷映射" path="volumes">
203+
<n-dynamic-input
204+
v-model:value="formModel.volumes"
205+
preset="pair"
206+
separator=":"
207+
key-placeholder="主机目录"
208+
value-placeholder="容器目录"
209+
/>
210+
</n-form-item-gi>
211+
<!-- <n-form-item-gi label-style="width: 100%;" content-style="width: 100%;">
212+
<template #label>
213+
<n-flex
214+
align="center"
215+
justify="space-between"
216+
:wrap="false"
217+
@click.stop
208218
>
209-
运行容器为 Flow 出口
210-
</n-button>
219+
<n-flex> 标签 </n-flex>
220+
<n-flex>
221+
<button
222+
style="
223+
width: 0;
224+
height: 0;
225+
overflow: hidden;
226+
opacity: 0;
227+
position: absolute;
228+
"
229+
></button>
230+
<n-switch v-model:value="has_edge_label">
231+
<template #checked> 已添加 edge 标签 </template>
232+
<template #unchecked> 未添加 edge 标签 </template>
233+
</n-switch>
234+
</n-flex>
235+
</n-flex>
236+
</template>
237+
<n-flex style="flex: 1" vertical>
211238
<n-dynamic-input
212239
v-model:value="formModel.labels"
213240
preset="pair"
@@ -216,7 +243,8 @@ const restrt_options = [
216243
value-placeholder="value"
217244
/>
218245
</n-flex>
219-
</n-form-item>
246+
</n-form-item-gi> -->
247+
</n-grid>
220248
</n-form>
221249
<template #footer>
222250
<n-flex justify="end">

0 commit comments

Comments
 (0)