From 98df3806f57784e1ec2442fe0c6b7af25d2b5485 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 11 Aug 2023 22:18:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E6=B8=85=E7=90=86=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF=20(#1927?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  5 +-
 frontend/src/lang/modules/tw.ts               |  5 +-
 frontend/src/lang/modules/zh.ts               |  5 +-
 .../src/views/container/container/index.vue   | 31 ++------
 .../views/container/container/prune/index.vue | 71 +++++++++++++++++++
 5 files changed, 87 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/views/container/container/prune/index.vue

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 2a283c712..1d4bb7b97 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -479,7 +479,10 @@ const message = {
         rename: 'Rename',
         remove: 'Remove',
         containerPrune: 'Container prune',
-        containerPruneHelper: 'Remove all stopped containers. Do you want to continue?',
+        containerPruneHelper1: 'Cleaning containers will delete all containers that are in a stopped state.',
+        containerPruneHelper2:
+            'If the containers are from the app store, after performing the cleanup, you need to go to the [Installed] list in the [App Store] and click the [Rebuild] button to reinstall them.',
+        containerPruneHelper3: 'This operation cannot be rolled back. Do you want to continue?',
         imagePrune: 'Image prune',
         imagePruneSome: 'Clean unlabeled',
         imagePruneSomeHelper: 'Remove all unused and unlabeled container images。',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index a8bb28187..54d46fd8b 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -469,7 +469,10 @@ const message = {
         rename: '重命名',
         remove: '刪除',
         containerPrune: '清理容器',
-        containerPruneHelper: '清理容器 將刪除所有處於停止狀態的容器，該操作無法回滾，是否繼續？',
+        containerPruneHelper1: '清理容器 將刪除所有處於停止狀態的容器。',
+        containerPruneHelper2:
+            '若容器來自於應用商店，在執行清理操作後，您需要前往 [應用商店] 的 [已安裝] 列表，點擊 [重建] 按鈕進行重新安裝。',
+        containerPruneHelper3: '該操作無法回滾，是否繼續？',
         imagePrune: '清理鏡像',
         imagePruneSome: '未標簽鏡像',
         imagePruneSomeHelper: '清理標簽為 none 且未被任何容器使用的鏡像。',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index be73edcd6..01c40d189 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -469,7 +469,10 @@ const message = {
         rename: '重命名',
         remove: '删除',
         containerPrune: '清理容器',
-        containerPruneHelper: '清理容器 将删除所有处于停止状态的容器，该操作无法回滚，是否继续？',
+        containerPruneHelper1: '清理容器 将删除所有处于停止状态的容器。',
+        containerPruneHelper2:
+            '若容器来自于应用商店，在执行清理操作后，您需要前往 [应用商店] 的 [已安装] 列表，点击 [重建] 按钮进行重新安装。',
+        containerPruneHelper3: '该操作无法回滚，是否继续？',
         imagePrune: '清理镜像',
         imagePruneSome: '未标签镜像',
         imagePruneSomeHelper: '清理标签为 none 且未被任何容器使用的镜像。',
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 97f7b3fbb..27fa8d52c 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -157,6 +157,7 @@
         </LayoutContent>
 
         <CodemirrorDialog ref="mydetail" />
+        <PruneDialog @search="search" ref="dialogPruneRef" />
 
         <ReNameDialog @search="search" ref="dialogReNameRef" />
         <ContainerLogDialog ref="dialogContainerLogRef" />
@@ -172,6 +173,7 @@
 <script lang="ts" setup>
 import Tooltip from '@/components/tooltip/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
+import PruneDialog from '@/views/container/container/prune/index.vue';
 import ReNameDialog from '@/views/container/container/rename/index.vue';
 import OperateDialog from '@/views/container/container/operate/index.vue';
 import UpgraeDialog from '@/views/container/container/upgrade/index.vue';
@@ -185,7 +187,6 @@ import { reactive, onMounted, ref, computed } from 'vue';
 import {
     containerListStats,
     containerOperator,
-    containerPrune,
     inspect,
     loadContainerInfo,
     loadDockerStatus,
@@ -196,7 +197,6 @@ import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import router from '@/routers';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
-import { computeSize } from '@/utils/util';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
@@ -264,6 +264,7 @@ const mydetail = ref();
 
 const dialogContainerLogRef = ref();
 const dialogReNameRef = ref();
+const dialogPruneRef = ref();
 
 const search = async (column?: any) => {
     let filterItem = props.filters ? props.filters : '';
@@ -360,31 +361,7 @@ const onInspect = async (id: string) => {
 };
 
 const onClean = () => {
-    ElMessageBox.confirm(i18n.global.t('container.containerPruneHelper'), i18n.global.t('container.containerPrune'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'info',
-    }).then(async () => {
-        loading.value = true;
-        let params = {
-            pruneType: 'container',
-            withTagAll: false,
-        };
-        await containerPrune(params)
-            .then((res) => {
-                loading.value = false;
-                MsgSuccess(
-                    i18n.global.t('container.cleanSuccessWithSpace', [
-                        res.data.deletedNumber,
-                        computeSize(res.data.spaceReclaimed),
-                    ]),
-                );
-                search();
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
+    dialogPruneRef.value!.acceptParams();
 };
 
 const checkStatus = (operation: string, row: Container.ContainerInfo | null) => {
diff --git a/frontend/src/views/container/container/prune/index.vue b/frontend/src/views/container/container/prune/index.vue
new file mode 100644
index 000000000..588cf0013
--- /dev/null
+++ b/frontend/src/views/container/container/prune/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <el-dialog v-model="dialogVisiable" :title="$t('container.containerPrune')" :destroy-on-close="true" width="30%">
+        <div>
+            <ul class="help-ul">
+                <li lineClass style="color: red">{{ $t('container.containerPruneHelper1') }}</li>
+                <li class="lineClass">{{ $t('container.containerPruneHelper2') }}</li>
+                <li class="lineClass">{{ $t('container.containerPruneHelper3') }}</li>
+            </ul>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button :disabled="loading" @click="dialogVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onClean()">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { containerPrune } from '@/api/modules/container';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { ref } from 'vue';
+import { computeSize } from '@/utils/util';
+
+const loading = ref(false);
+const dialogVisiable = ref<boolean>(false);
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+const onClean = async () => {
+    loading.value = true;
+    let params = {
+        pruneType: 'container',
+        withTagAll: false,
+    };
+    await containerPrune(params)
+        .then((res) => {
+            loading.value = false;
+            MsgSuccess(
+                i18n.global.t('container.cleanSuccessWithSpace', [
+                    res.data.deletedNumber,
+                    computeSize(res.data.spaceReclaimed),
+                ]),
+            );
+            dialogVisiable.value = false;
+            emit('search');
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
+const acceptParams = (): void => {
+    dialogVisiable.value = true;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+
+<style lang="scss" scoped>
+.lineClass {
+    line-height: 30px;
+}
+</style>