perf: Change container overview page disk usage to asynchronous requests (#11148)

Author: ssongliu

agent/app/api/v2/container.go

@@ -264,13 +264,19 @@ func (b *BaseApi) ContainerListStats(c *gin.Context) {
 }
 
 // @Summary Load container stats size
+// @Accept json
+// @Param request body dto.OperationWithName true "request"
 // @Success 200 {object} dto.ContainerItemStats
 // @Security ApiKeyAuth
 // @Security Timestamp
-// @Router /containers/item/stats/:id [get]
+// @Router /containers/item/stats [post]
 func (b *BaseApi) ContainerItemStats(c *gin.Context) {
-	containerID := c.Param("id")
-	data, err := containerService.ContainerItemStats(containerID)
+	var req dto.OperationWithName
+	if err := helper.CheckBindAndValidate(&req, c); err != nil {
+		return
+	}
+
+	data, err := containerService.ContainerItemStats(req)
 	if err != nil {
 		helper.InternalServer(c, err)
 		return

agent/app/dto/container.go

@@ -63,15 +63,6 @@ type ContainerStatus struct {
 	NetworkCount         int `json:"networkCount"`
 	VolumeCount          int `json:"volumeCount"`
 	RepoCount            int `json:"repoCount"`
-
-	ContainerUsage        int64 `json:"containerUsage"`
-	ContainerReclaimable  int64 `json:"containerReclaimable"`
-	ImageUsage            int64 `json:"imageUsage"`
-	ImageReclaimable      int64 `json:"imageReclaimable"`
-	VolumeUsage           int64 `json:"volumeUsage"`
-	VolumeReclaimable     int64 `json:"volumeReclaimable"`
-	BuildCacheUsage       int64 `json:"buildCacheUsage"`
-	BuildCacheReclaimable int64 `json:"buildCacheReclaimable"`
 }
 type ResourceLimit struct {
 	CPU    int    `json:"cpu"`
@@ -129,6 +120,15 @@ type ContainerUpgrade struct {
 type ContainerItemStats struct {
 	SizeRw     int64 `json:"sizeRw"`
 	SizeRootFs int64 `json:"sizeRootFs"`
+
+	ContainerUsage        int64 `json:"containerUsage"`
+	ContainerReclaimable  int64 `json:"containerReclaimable"`
+	ImageUsage            int64 `json:"imageUsage"`
+	ImageReclaimable      int64 `json:"imageReclaimable"`
+	VolumeUsage           int64 `json:"volumeUsage"`
+	VolumeReclaimable     int64 `json:"volumeReclaimable"`
+	BuildCacheUsage       int64 `json:"buildCacheUsage"`
+	BuildCacheReclaimable int64 `json:"buildCacheReclaimable"`
 }
 type ContainerListStats struct {
 	ContainerID string `json:"containerID"`

agent/app/service/container.go

@@ -70,7 +70,7 @@ type IContainerService interface {
 	ContainerUpgrade(req dto.ContainerUpgrade) error
 	ContainerInfo(req dto.OperationWithName) (*dto.ContainerOperate, error)
 	ContainerListStats() ([]dto.ContainerListStats, error)
-	ContainerItemStats(containerID string) (dto.ContainerItemStats, error)
+	ContainerItemStats(req dto.OperationWithName) (dto.ContainerItemStats, error)
 	LoadResourceLimit() (*dto.ResourceLimit, error)
 	ContainerRename(req dto.ContainerRename) error
 	ContainerCommit(req dto.ContainerCommit) error
@@ -199,34 +199,8 @@ func (u *ContainerService) LoadStatus() (dto.ContainerStatus, error) {
 	defer client.Close()
 	c := context.Background()
 
-	usage, err := client.DiskUsage(c, types.DiskUsageOptions{})
-	if err != nil {
-		return data, err
-	}
-
-	data.ImageCount = len(usage.Images)
-	data.VolumeCount = len(usage.Volumes)
-	for _, item := range usage.Images {
-		data.ImageUsage += item.Size
-		if item.Containers < 1 {
-			data.ImageReclaimable += item.Size
-		}
-	}
-	for _, item := range usage.Containers {
-		data.ContainerUsage += item.SizeRw
-		if item.State != "running" {
-			data.ContainerReclaimable += item.SizeRw
-		}
-	}
-	for _, item := range usage.Volumes {
-		data.VolumeUsage += item.UsageData.Size
-		if item.UsageData.RefCount == 0 {
-			data.VolumeReclaimable += item.UsageData.Size
-		}
-	}
-	for _, item := range usage.BuildCache {
-		data.BuildCacheUsage += item.Size
-	}
+	images, _ := client.ImageList(c, image.ListOptions{All: true})
+	data.ImageCount = len(images)
 	repo, _ := imageRepoRepo.List()
 	data.RepoCount = len(repo)
 	templates, _ := composeRepo.List()
@@ -236,8 +210,9 @@ func (u *ContainerService) LoadStatus() (dto.ContainerStatus, error) {
 	volumes, _ := client.VolumeList(c, volume.ListOptions{})
 	data.VolumeCount = len(volumes.Volumes)
 	data.ComposeCount = loadComposeCount(client)
-	data.ContainerCount = len(usage.Containers)
-	for _, item := range usage.Containers {
+	containers, _ := client.ContainerList(c, container.ListOptions{All: true})
+	data.ContainerCount = len(containers)
+	for _, item := range containers {
 		switch item.State {
 		case "created":
 			data.Created++
@@ -257,19 +232,48 @@ func (u *ContainerService) LoadStatus() (dto.ContainerStatus, error) {
 	}
 	return data, nil
 }
-func (u *ContainerService) ContainerItemStats(containerID string) (dto.ContainerItemStats, error) {
+func (u *ContainerService) ContainerItemStats(req dto.OperationWithName) (dto.ContainerItemStats, error) {
 	var data dto.ContainerItemStats
 	client, err := docker.NewDockerClient()
 	if err != nil {
 		return data, err
 	}
-	defer client.Close()
-	containerInfo, _, err := client.ContainerInspectWithRaw(context.Background(), containerID, true)
+	if req.Name != "system" {
+		defer client.Close()
+		containerInfo, _, err := client.ContainerInspectWithRaw(context.Background(), req.Name, true)
+		if err != nil {
+			return data, err
+		}
+		data.SizeRw = *containerInfo.SizeRw
+		data.SizeRootFs = *containerInfo.SizeRootFs
+		return data, nil
+	}
+
+	usage, err := client.DiskUsage(context.Background(), types.DiskUsageOptions{})
 	if err != nil {
 		return data, err
 	}
-	data.SizeRw = *containerInfo.SizeRw
-	data.SizeRootFs = *containerInfo.SizeRootFs
+	for _, item := range usage.Images {
+		data.ImageUsage += item.Size
+		if item.Containers < 1 {
+			data.ImageReclaimable += item.Size
+		}
+	}
+	for _, item := range usage.Containers {
+		data.ContainerUsage += item.SizeRw
+		if item.State != "running" {
+			data.ContainerReclaimable += item.SizeRw
+		}
+	}
+	for _, item := range usage.Volumes {
+		data.VolumeUsage += item.UsageData.Size
+		if item.UsageData.RefCount == 0 {
+			data.VolumeReclaimable += item.UsageData.Size
+		}
+	}
+	for _, item := range usage.BuildCache {
+		data.BuildCacheUsage += item.Size
+	}
 	return data, nil
 }
 func (u *ContainerService) ContainerListStats() ([]dto.ContainerListStats, error) {

agent/router/ro_container.go

@@ -24,7 +24,7 @@ func (s *ContainerRouter) InitRouter(Router *gin.RouterGroup) {
 		baRouter.POST("/list/byimage", baseApi.ListContainerByImage)
 		baRouter.GET("/status", baseApi.LoadContainerStatus)
 		baRouter.GET("/list/stats", baseApi.ContainerListStats)
-		baRouter.GET("/item/stats/:id", baseApi.ContainerItemStats)
+		baRouter.POST("/item/stats", baseApi.ContainerItemStats)
 		baRouter.GET("/search/log", baseApi.ContainerStreamLogs)
 		baRouter.POST("/download/log", baseApi.DownloadContainerLogs)
 		baRouter.GET("/limit", baseApi.LoadResourceLimit)

frontend/src/api/interface/container.ts

@@ -137,6 +137,15 @@ export namespace Container {
     export interface ContainerItemStats {
         sizeRw: number;
         sizeRootFs: number;
+
+        containerUsage: number;
+        containerReclaimable: number;
+        imageUsage: number;
+        imageReclaimable: number;
+        volumeUsage: number;
+        volumeReclaimable: number;
+        buildCacheUsage: number;
+        buildCacheReclaimable: number;
     }
     export interface ContainerListStats {
         containerID: string;

frontend/src/api/modules/container.ts

@@ -44,7 +44,7 @@ export const cleanContainerLog = (containerName: string, operateNode?: string) =
     return http.post(`/containers/clean/log${params}`, { name: containerName });
 };
 export const containerItemStats = (containerID: string) => {
-    return http.get<Container.ContainerItemStats>(`/containers/item/stats/${containerID}`);
+    return http.post<Container.ContainerItemStats>(`/containers/item/stats`, { name: containerID }, TimeoutEnum.T_60S);
 };
 export const containerListStats = () => {
     return http.get<Array<Container.ContainerListStats>>(`/containers/list/stats`);

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

@@ -90,7 +90,13 @@
 
             <CardWithHeader :header="$t('container.diskUsage')" class="card-interval">
                 <template #body>
-                    <el-descriptions direction="vertical" align="center" :column="4" class="mt-2">
+                    <el-descriptions
+                        direction="vertical"
+                        align="center"
+                        v-loading="usageLoading"
+                        :column="4"
+                        class="mt-2"
+                    >
                         <el-descriptions-item label-width="25%" align="center" :label="$t('container.image')">
                             {{
                                 $t('container.usage', [
@@ -188,7 +194,7 @@
 </template>
 
 <script lang="ts" setup>
-import { containerPrune, loadContainerStatus, loadDaemonJson } from '@/api/modules/container';
+import { containerItemStats, containerPrune, loadContainerStatus, loadDaemonJson } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import { getSettingInfo } from '@/api/modules/setting';
 import { computeSize2, newUUID } from '@/utils/util';
@@ -200,6 +206,7 @@ import i18n from '@/lang';
 const taskLogRef = ref();
 
 const loading = ref();
+const usageLoading = ref(false);
 const isActive = ref(false);
 const isExist = ref(false);
 const countItem = reactive({
@@ -237,6 +244,7 @@ const search = () => {
         return;
     }
     loadContainerCount();
+    loadUsage();
     loadContainerSetting();
 };
 
@@ -269,6 +277,24 @@ const loadContainerCount = async () => {
     });
 };
 
+const loadUsage = async () => {
+    usageLoading.value = true;
+    await containerItemStats('system')
+        .then((res) => {
+            countItem.containerUsage = res.data.containerUsage;
+            countItem.containerReclaimable = res.data.containerReclaimable;
+            countItem.imageUsage = res.data.imageUsage;
+            countItem.imageReclaimable = res.data.imageReclaimable;
+            countItem.volumeUsage = res.data.volumeUsage;
+            countItem.volumeReclaimable = res.data.volumeReclaimable;
+            countItem.buildCacheUsage = res.data.buildCacheUsage;
+            countItem.buildCacheReclaimable = res.data.buildCacheReclaimable;
+        })
+        .finally(() => {
+            usageLoading.value = false;
+        });
+};
+
 const loadContainerSetting = async () => {
     const res = await loadDaemonJson();
     countItem.mirrors = res.data.registryMirrors || [];

frontend/src/views/container/template/detail/index.vue

@@ -5,7 +5,7 @@
             v-model="detailInfo"
             mode="yaml"
             :heightDiff="160"
-            :disabled="true"
+            :readonly="true"
         ></CodemirrorPro>
         <template #footer>
             <span class="dialog-footer">