feat: 增加 iptables 设置修改提示信息 (#925)

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',

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: '中开启',

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;