From 7cb987434e2ebdf82eed8969a48c20aded0f7c33 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:24:29 +0800
Subject: [PATCH] feat(container): Align Container Memory Usage Display with
 Docker Stats (#7435)

---
 agent/app/service/container.go                |   7 +-
 frontend/src/components/back-button/index.vue |   2 -
 frontend/src/components/group/index.vue       | 137 ++++++++----------
 3 files changed, 69 insertions(+), 77 deletions(-)

diff --git a/agent/app/service/container.go b/agent/app/service/container.go
index 88491c7d3..c48f885f0 100644
--- a/agent/app/service/container.go
+++ b/agent/app/service/container.go
@@ -1052,6 +1052,9 @@ func calculateCPUPercentUnix(stats *container.StatsResponse) float64 {
 func calculateMemPercentUnix(memStats container.MemoryStats) float64 {
 	memPercent := 0.0
 	memUsage := float64(memStats.Usage)
+	if memStats.Stats["inactive_file"] > 0 {
+		memUsage = memUsage - float64(memStats.Stats["inactive_file"])
+	}
 	memLimit := float64(memStats.Limit)
 	if memUsage > 0.0 && memLimit > 0.0 {
 		memPercent = (memUsage / memLimit) * 100.0
@@ -1162,8 +1165,8 @@ func loadCpuAndMem(client *client.Client, containerItem string) dto.ContainerLis
 	data.CPUPercent = calculateCPUPercentUnix(stats)
 	data.PercpuUsage = len(stats.CPUStats.CPUUsage.PercpuUsage)
 
-	data.MemoryCache = stats.MemoryStats.Stats["cache"]
-	data.MemoryUsage = stats.MemoryStats.Usage
+	data.MemoryCache = stats.MemoryStats.Stats["inactive_file"]
+	data.MemoryUsage = stats.MemoryStats.Usage - data.MemoryCache
 	data.MemoryLimit = stats.MemoryStats.Limit
 
 	data.MemoryPercent = calculateMemPercentUnix(stats.MemoryStats)
diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/back-button/index.vue
index 65dc1a583..53c09a888 100644
--- a/frontend/src/components/back-button/index.vue
+++ b/frontend/src/components/back-button/index.vue
@@ -1,8 +1,6 @@
 <template>
     <el-page-header :content="header" @back="jump">
         <template v-if="slots.buttons" #content>
-            <!-- <span>{{ header }}</span> -->
-            <!-- <el-divider direction="vertical" /> -->
             <slot name="buttons"></slot>
         </template>
     </el-page-header>
diff --git a/frontend/src/components/group/index.vue b/frontend/src/components/group/index.vue
index f77a4dc7c..389c683fc 100644
--- a/frontend/src/components/group/index.vue
+++ b/frontend/src/components/group/index.vue
@@ -1,83 +1,74 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        v-model="open"
-        size="50%"
-        :close-on-press-escape="false"
-        :before-close="handleClose"
-    >
-        <template #header>
-            <Header :header="$t('website.group')" :back="handleClose"></Header>
+    <DrawerPro v-model="open" :header="$t('website.group')" size="large" :back="handleClose">
+        <template #content>
+            <ComplexTable :data="data" @search="search()">
+                <template #leftToolBar>
+                    <el-button type="primary" @click="openCreate">{{ $t('website.createGroup') }}</el-button>
+                </template>
+                <el-table-column :label="$t('commons.table.name')" prop="name">
+                    <template #default="{ row }">
+                        <div v-if="!row.edit">
+                            <span v-if="row.name === 'default'">
+                                {{ $t('commons.table.default') }}
+                            </span>
+                            <span v-if="row.name !== 'default'">{{ row.name }}</span>
+                            <el-tag v-if="row.isDefault" type="success" class="ml-2" size="small">
+                                ({{ $t('commons.table.default') }})
+                            </el-tag>
+
+                            <el-tag type="warning" size="small" class="ml-4" v-if="row.isDelete">
+                                {{ $t('app.takeDown') }}
+                            </el-tag>
+                        </div>
+
+                        <el-form @submit.prevent ref="groupForm" v-if="row.edit" :model="row">
+                            <el-form-item prop="name" v-if="row.edit" :rules="Rules.name">
+                                <div style="margin-top: 20px; width: 100%"><el-input v-model="row.name" /></div>
+                            </el-form-item>
+                        </el-form>
+                    </template>
+                </el-table-column>
+
+                <el-table-column :label="$t('commons.table.operate')">
+                    <template #default="{ row, $index }">
+                        <div>
+                            <el-button link v-if="row.edit" type="primary" @click="saveGroup(groupForm, row)">
+                                {{ $t('commons.button.save') }}
+                            </el-button>
+                            <el-button link v-if="!row.edit" type="primary" @click="editGroup($index)">
+                                {{ $t('commons.button.edit') }}
+                            </el-button>
+                            <el-button
+                                link
+                                v-if="!row.edit"
+                                :disabled="row.isDefault"
+                                type="primary"
+                                @click="deleteGroup($index)"
+                            >
+                                {{ $t('commons.button.delete') }}
+                            </el-button>
+                            <el-button link v-if="row.edit" type="primary" @click="search()">
+                                {{ $t('commons.button.cancel') }}
+                            </el-button>
+                            <el-button
+                                link
+                                v-if="!row.edit && !row.isDefault && !row.isDelete"
+                                type="primary"
+                                @click="setDefault(row)"
+                            >
+                                {{ $t('website.setDefault') }}
+                            </el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </ComplexTable>
         </template>
-
-        <ComplexTable :data="data" @search="search()">
-            <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">{{ $t('website.createGroup') }}</el-button>
-            </template>
-            <el-table-column :label="$t('commons.table.name')" prop="name">
-                <template #default="{ row }">
-                    <div v-if="!row.edit">
-                        <span v-if="row.name === 'default'">
-                            {{ $t('commons.table.default') }}
-                        </span>
-                        <span v-if="row.name !== 'default'">{{ row.name }}</span>
-                        <el-tag v-if="row.isDefault" type="success" class="ml-2" size="small">
-                            ({{ $t('commons.table.default') }})
-                        </el-tag>
-
-                        <el-tag type="warning" size="small" class="ml-4" v-if="row.isDelete">
-                            {{ $t('app.takeDown') }}
-                        </el-tag>
-                    </div>
-
-                    <el-form @submit.prevent ref="groupForm" v-if="row.edit" :model="row">
-                        <el-form-item prop="name" v-if="row.edit" :rules="Rules.name">
-                            <div style="margin-top: 20px; width: 100%"><el-input v-model="row.name" /></div>
-                        </el-form-item>
-                    </el-form>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="$t('commons.table.operate')">
-                <template #default="{ row, $index }">
-                    <div>
-                        <el-button link v-if="row.edit" type="primary" @click="saveGroup(groupForm, row)">
-                            {{ $t('commons.button.save') }}
-                        </el-button>
-                        <el-button link v-if="!row.edit" type="primary" @click="editGroup($index)">
-                            {{ $t('commons.button.edit') }}
-                        </el-button>
-                        <el-button
-                            link
-                            v-if="!row.edit"
-                            :disabled="row.isDefault"
-                            type="primary"
-                            @click="deleteGroup($index)"
-                        >
-                            {{ $t('commons.button.delete') }}
-                        </el-button>
-                        <el-button link v-if="row.edit" type="primary" @click="search()">
-                            {{ $t('commons.button.cancel') }}
-                        </el-button>
-                        <el-button
-                            link
-                            v-if="!row.edit && !row.isDefault && !row.isDelete"
-                            type="primary"
-                            @click="setDefault(row)"
-                        >
-                            {{ $t('website.setDefault') }}
-                        </el-button>
-                    </div>
-                </template>
-            </el-table-column>
-        </ComplexTable>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
 import i18n from '@/lang';
 import { CreateGroup, DeleteGroup, GetGroupList, UpdateGroup } from '@/api/modules/group';
-import Header from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { Group } from '@/api/interface/group';
 import { Rules } from '@/global/form-rules';