feat: 运行环境及容器菜单增加清理构建缓存功能 (#4978)

Co-authored-by: zhoujunhong <1298308460@qq.com>

backend/app/dto/container.go

@@ -123,7 +123,7 @@ type ContainerRename struct {
 }
 
 type ContainerPrune struct {
-	PruneType  string `json:"pruneType" validate:"required,oneof=container image volume network"`
+	PruneType  string `json:"pruneType" validate:"required,oneof=container image volume network buildcache"`
 	WithTagAll bool   `json:"withTagAll"`
 }
 

backend/app/service/container.go

@@ -329,6 +329,13 @@ func (u *ContainerService) Prune(req dto.ContainerPrune) (dto.ContainerPruneRepo
 		}
 		report.DeletedNumber = len(rep.VolumesDeleted)
 		report.SpaceReclaimed = int(rep.SpaceReclaimed)
+	case "buildcache":
+		rep, err := client.BuildCachePrune(context.Background(), types.BuildCachePruneOptions{})
+		if err != nil {
+			return report, err
+		}
+		report.DeletedNumber = len(rep.CachesDeleted)
+		report.SpaceReclaimed = int(rep.SpaceReclaimed)
 	}
 	return report, nil
 }

frontend/src/lang/modules/en.ts

@@ -691,6 +691,9 @@ const message = {
         tag: 'Tag',
         tagHelper: 'one in a row, for example, \nkey1=value1\nkey2=value2',
         imageNameHelper: 'Image name and Tag, for example: nginx:latest',
+        cleanBuildCache: 'Clean Build Cache',
+        delBuildCacheHelper:
+            'Cleaning the build cache will delete all cached artifacts generated during builds. This action cannot be undone. Continue?',
 
         network: 'Network',
         createNetwork: 'Create network',

frontend/src/lang/modules/tw.ts

@@ -672,6 +672,8 @@ const message = {
         tag: '標簽',
         tagHelper: '一行一個，例： \nkey1=value1\nkey2=value2',
         imageNameHelper: '鏡像名稱及 Tag，例：nginx:latest',
+        cleanBuildCache: '清理建置快取',
+        delBuildCacheHelper: '清理建置快取將刪除所有建置所產生的快取，此操作無法回復。是否繼續？',
 
         network: '網絡',
         createNetwork: '創建網絡',

frontend/src/lang/modules/zh.ts

@@ -673,6 +673,8 @@ const message = {
         tag: '标签',
         tagHelper: '一行一个，例： \nkey1=value1\nkey2=value2',
         imageNameHelper: '镜像名称及 Tag，例：nginx:latest',
+        cleanBuildCache: '清理构建缓存',
+        delBuildCacheHelper: '清理构建缓存 将删除所有构建产生的缓存，该操作无法回滚，是否继续？',
 
         network: '网络',
         createNetwork: '创建网络',

frontend/src/views/container/image/index.vue

@@ -19,6 +19,9 @@
                         <el-button type="primary" plain @click="onOpenBuild">
                             {{ $t('container.imageBuild') }}
                         </el-button>
+                        <el-button type="primary" plain @click="onOpenBuildCache()">
+                            {{ $t('container.cleanBuildCache') }}
+                        </el-button>
                         <el-button type="primary" plain @click="onOpenPrune()">
                             {{ $t('container.imagePrune') }}
                         </el-button>
@@ -112,10 +115,19 @@ import Build from '@/views/container/image/build/index.vue';
 import Delete from '@/views/container/image/delete/index.vue';
 import Prune from '@/views/container/image/prune/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
-import { searchImage, listImageRepo, loadDockerStatus, imageRemove, inspect } from '@/api/modules/container';
+import {
+    searchImage,
+    listImageRepo,
+    loadDockerStatus,
+    imageRemove,
+    inspect,
+    containerPrune,
+} from '@/api/modules/container';
 import i18n from '@/lang';
 import router from '@/routers';
 import { GlobalStore } from '@/store';
+import { ElMessageBox } from 'element-plus';
+import { MsgSuccess } from '@/utils/message';
 const globalStore = GlobalStore();
 
 const mobile = computed(() => {
@@ -222,6 +234,29 @@ const onOpenPrune = () => {
     dialogPruneRef.value!.acceptParams();
 };
 
+const onOpenBuildCache = () => {
+    ElMessageBox.confirm(i18n.global.t('container.delBuildCacheHelper'), i18n.global.t('container.cleanBuildCache'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        loading.value = true;
+        let params = {
+            pruneType: 'buildcache',
+            withTagAll: false,
+        };
+        await containerPrune(params)
+            .then((res) => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('container.cleanSuccess', [res.data.deletedNumber]));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
 const onOpenload = () => {
     dialogLoadRef.value!.acceptParams();
 };

frontend/src/views/website/runtime/node/index.vue

@@ -13,6 +13,10 @@
                 <el-button type="primary" @click="openCreate">
                     {{ $t('runtime.create') }}
                 </el-button>
+
+                <el-button type="primary" plain @click="onOpenBuildCache()">
+                    {{ $t('container.cleanBuildCache') }}
+                </el-button>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
@@ -104,6 +108,9 @@ import ComposeLogs from '@/components/compose-log/index.vue';
 import { Promotion } from '@element-plus/icons-vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
+import { ElMessageBox } from 'element-plus';
+import { containerPrune } from '@/api/modules/container';
+import { MsgSuccess } from '@/utils/message';
 
 let timer: NodeJS.Timer | null = null;
 const loading = ref(false);
@@ -222,6 +229,29 @@ const openDelete = async (row: Runtime.Runtime) => {
     });
 };
 
+const onOpenBuildCache = () => {
+    ElMessageBox.confirm(i18n.global.t('container.delBuildCacheHelper'), i18n.global.t('container.cleanBuildCache'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        loading.value = true;
+        let params = {
+            pruneType: 'buildcache',
+            withTagAll: false,
+        };
+        await containerPrune(params)
+            .then((res) => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('container.cleanSuccess', [res.data.deletedNumber]));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
 const openLog = (row: any) => {
     composeLogRef.value.acceptParams({ compose: row.path + '/docker-compose.yml', resource: row.name });
 };

frontend/src/views/website/runtime/php/index.vue

@@ -17,6 +17,10 @@
                 <el-button @click="openExtensions">
                     {{ $t('php.extensions') }}
                 </el-button>
+
+                <el-button type="primary" plain @click="onOpenBuildCache()">
+                    {{ $t('container.cleanBuildCache') }}
+                </el-button>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
@@ -95,6 +99,9 @@ import RouterMenu from '../index.vue';
 import Log from '@/components/log-dialog/index.vue';
 import Extensions from './extensions/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
+import { ElMessageBox } from 'element-plus';
+import { containerPrune } from '@/api/modules/container';
+import { MsgSuccess } from '@/utils/message';
 
 const paginationConfig = reactive({
     cacheSizeKey: 'runtime-page-size',
@@ -190,6 +197,29 @@ const openDelete = async (row: Runtime.Runtime) => {
     });
 };
 
+const onOpenBuildCache = () => {
+    ElMessageBox.confirm(i18n.global.t('container.delBuildCacheHelper'), i18n.global.t('container.cleanBuildCache'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        loading.value = true;
+        let params = {
+            pruneType: 'buildcache',
+            withTagAll: false,
+        };
+        await containerPrune(params)
+            .then((res) => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('container.cleanSuccess', [res.data.deletedNumber]));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
 onMounted(() => {
     search();
     timer = setInterval(() => {