From 900e141297f20234df483914588a2e72df4fa5f7 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Mon, 8 May 2023 14:57:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20iptables=20?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=BF=AE=E6=94=B9=E6=8F=90=E7=A4=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=20(#925)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  3 ++
 frontend/src/lang/modules/zh.ts               |  3 ++
 .../src/views/container/setting/index.vue     | 37 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index cb1e03609..3e52c1b20 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -580,6 +580,9 @@ const message = {
         liveHelper:
             'Allows the running container state to be preserved in case of unexpected shutdown or crash of the Docker daemon',
         liveWithSwarmHelper: 'live-restore daemon configuration is incompatible with swarm mode.',
+        iptablesDisable: 'Close iptables',
+        iptablesHelper1: 'This setting will disable Docker automatic configuration of iptables rules, which may cause ',
+        iptablesHelper2: 'the container is unable to communicate with the external network',
         daemonJsonPath: 'Conf Path',
         serviceUnavailable: 'Docker service is not started at present, please click',
         startIn: ' to start',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 77b4a474f..40d61d0be 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -593,6 +593,9 @@ const message = {
         registries: '私有仓库',
         liveHelper: '允许在 Docker 守护进程发生意外停机或崩溃时保留正在运行的容器状态',
         liveWithSwarmHelper: 'live-restore 守护进程配置与 Swarm 模式不兼容',
+        iptablesDisable: '关闭 iptables',
+        iptablesHelper1: '该设置将关闭 Docker 对 iptables 规则的自动配置，这可能会导致',
+        iptablesHelper2: '容器无法与外部网络通信',
         daemonJsonPath: '配置路径',
         serviceUnavailable: '当前未启动 Docker 服务，请在',
         startIn: '中开启',
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index ed284b8f7..4afa0a47c 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -63,7 +63,7 @@
                                 />
                             </el-form-item>
                             <el-form-item label="iptables" prop="iptables">
-                                <el-switch v-model="form.iptables"></el-switch>
+                                <el-switch v-model="form.iptables" @change="onChangeIptables"></el-switch>
                             </el-form-item>
                             <el-form-item label="live-restore" prop="liveRestore">
                                 <el-switch :disabled="form.isSwarm" v-model="form.liveRestore"></el-switch>
@@ -126,6 +126,28 @@
             </template>
         </el-dialog>
 
+        <el-dialog
+            v-model="iptablesVisiable"
+            :title="$t('container.iptablesDisable')"
+            width="30%"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :show-close="false"
+        >
+            <span>{{ $t('container.iptablesHelper1') }}</span>
+            <span style="color: red; font-weight: 500">{{ $t('container.iptablesHelper2') }}</span>
+            !
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="onSaveIptables(true)">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button type="primary" @click="onSaveIptables(false)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
     </div>
 </template>
@@ -172,6 +194,8 @@ const stopVisiable = ref();
 const stopSocket = ref();
 const stopService = ref();
 
+const iptablesVisiable = ref();
+
 const onSave = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
@@ -194,6 +218,17 @@ const onSaveFile = async () => {
     confirmDialogRef.value!.acceptParams(params);
 };
 
+const onChangeIptables = () => {
+    if (!form.iptables) {
+        iptablesVisiable.value = true;
+    }
+};
+
+const onSaveIptables = (status: boolean) => {
+    form.iptables = status;
+    iptablesVisiable.value = false;
+};
+
 const onOperator = async (operation: string) => {
     if (operation === 'stop') {
         stopVisiable.value = true;