fix: 修复了概览页未显示挂载磁盘信息的问题 (#442)

backend/app/dto/dashboard.go

@@ -58,6 +58,18 @@ type DashboardCurrent struct {
 	IOReadTime   uint64 `json:"ioReadTime"`
 	IOWriteTime  uint64 `json:"ioWriteTime"`
 
+	DiskData []DiskInfo `json:"diskData"`
+
+	NetBytesSent uint64 `json:"netBytesSent"`
+	NetBytesRecv uint64 `json:"netBytesRecv"`
+
+	ShotTime time.Time `json:"shotTime"`
+}
+
+type DiskInfo struct {
+	Path        string  `json:"path"`
+	Type        string  `json:"type"`
+	Device      string  `json:"device"`
 	Total       uint64  `json:"total"`
 	Free        uint64  `json:"free"`
 	Used        uint64  `json:"used"`
@@ -67,9 +79,4 @@ type DashboardCurrent struct {
 	InodesUsed        uint64  `json:"inodesUsed"`
 	InodesFree        uint64  `json:"inodesFree"`
 	InodesUsedPercent float64 `json:"inodesUsedPercent"`
-
-	NetBytesSent uint64 `json:"netBytesSent"`
-	NetBytesRecv uint64 `json:"netBytesRecv"`
-
-	ShotTime time.Time `json:"shotTime"`
 }

backend/app/service/dashboard.go

@@ -120,15 +120,7 @@ func (u *DashboardService) LoadCurrentInfo(ioOption string, netOption string) *d
 	currentInfo.MemoryUsed = memoryInfo.Used
 	currentInfo.MemoryUsedPercent = memoryInfo.UsedPercent
 
-	state, _ := disk.Usage("/")
-	currentInfo.Total = state.Total
-	currentInfo.Free = state.Free
-	currentInfo.Used = state.Used
-	currentInfo.UsedPercent = state.UsedPercent
-	currentInfo.InodesTotal = state.InodesTotal
-	currentInfo.InodesUsed = state.InodesUsed
-	currentInfo.InodesFree = state.InodesFree
-	currentInfo.InodesUsedPercent = state.InodesUsedPercent
+	currentInfo.DiskData = loadDiskInfo()
 
 	if ioOption == "all" {
 		diskInfo, _ := disk.IOCounters()
@@ -169,3 +161,39 @@ func (u *DashboardService) LoadCurrentInfo(ioOption string, netOption string) *d
 	currentInfo.ShotTime = time.Now()
 	return &currentInfo
 }
+
+func loadDiskInfo() []dto.DiskInfo {
+	var datas []dto.DiskInfo
+	parts, err := disk.Partitions(false)
+	if err != nil {
+		return datas
+	}
+	var excludes = []string{"/mnt/cdrom", "/boot", "/boot/efi", "/dev", "/dev/shm", "/run/lock", "/run", "/run/shm", "/run/user"}
+	for _, part := range parts {
+		isExclude := false
+		for _, exclude := range excludes {
+			if part.Mountpoint == exclude {
+				isExclude = true
+				break
+			}
+		}
+		if isExclude {
+			continue
+		}
+		state, _ := disk.Usage("/")
+		var itemData dto.DiskInfo
+		itemData.Path = part.Mountpoint
+		itemData.Type = part.Fstype
+		itemData.Device = part.Device
+		itemData.Total = state.Total
+		itemData.Free = state.Free
+		itemData.Used = state.Used
+		itemData.UsedPercent = state.UsedPercent
+		itemData.InodesTotal = state.InodesTotal
+		itemData.InodesUsed = state.InodesUsed
+		itemData.InodesFree = state.InodesFree
+		itemData.InodesUsedPercent = state.InodesUsedPercent
+		datas = append(datas, itemData)
+	}
+	return datas
+}

frontend/src/api/interface/dashboard.ts

@@ -53,6 +53,17 @@ export namespace Dashboard {
         ioReadTime: number;
         ioWriteTime: number;
 
+        diskData: Array<DiskInfo>;
+
+        netBytesSent: number;
+        netBytesRecv: number;
+
+        shotTime: Date;
+    }
+    export interface DiskInfo {
+        path: string;
+        type: string;
+        device: string;
         total: number;
         free: number;
         used: number;
@@ -62,10 +73,5 @@ export namespace Dashboard {
         inodesUsed: number;
         inodesFree: number;
         inodesUsedPercent: number;
-
-        netBytesSent: number;
-        netBytesRecv: number;
-
-        shotTime: Date;
     }
 }

frontend/src/lang/modules/en.ts

@@ -229,6 +229,7 @@ const message = {
         kernelArch: 'Kernel arch',
         network: 'Network',
         io: 'Disk IO',
+        baseInfo: 'Base info',
         totalSend: 'Total send',
         totalRecv: 'Total recv',
         rwPerSecond: 'IO times',
@@ -251,6 +252,7 @@ const message = {
         loadAverage: 'Average load in the last {0} minutes',
         load: 'Load',
         mount: 'Mount point',
+        fileSystem: 'File system',
         total: 'Total',
         used: 'Used',
         free: 'Free',

frontend/src/lang/modules/zh.ts

@@ -233,6 +233,7 @@ const message = {
         kernelArch: '系统类型',
         network: '流量',
         io: '磁盘 IO',
+        baseInfo: '基本信息',
         totalSend: '总发送',
         totalRecv: '总接收',
         rwPerSecond: '读写次数',
@@ -255,6 +256,7 @@ const message = {
         loadAverage: '最近 {0} 分钟平均负载',
         load: '负载',
         mount: '挂载点',
+        fileSystem: '文件系统',
         total: '总数',
         used: '已用',
         free: '可用',

frontend/src/views/home/index.vue

@@ -286,15 +286,7 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
     ioReadTime: 0,
     ioWriteTime: 0,
 
-    total: 0,
-    free: 0,
-    used: 0,
-    usedPercent: 0,
-
-    inodesTotal: 0,
-    inodesUsed: 0,
-    inodesFree: 0,
-    inodesUsedPercent: 0,
+    diskData: [],
 
     netBytesSent: 0,
     netBytesRecv: 0,

frontend/src/views/home/status/index.vue

@@ -60,45 +60,48 @@
             </el-popover>
             <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
         </el-col>
-        <el-col :span="6" align="center">
-            <el-popover placement="bottom" :width="260" trigger="hover">
+        <el-col :span="6" align="center" v-for="(item, index) of currentInfo.diskData" :key="index">
+            <el-popover placement="bottom" :width="300" trigger="hover">
                 <el-row :gutter="5">
                     <el-col :span="12">
-                        <el-tag>{{ $t('home.mount') }}: /</el-tag>
-                        <div><el-tag class="tagClass">iNode</el-tag></div>
-                        <el-tag class="tagClass">{{ $t('home.total') }}: {{ currentInfo.inodesTotal }}</el-tag>
-                        <el-tag class="tagClass">{{ $t('home.used') }}: {{ currentInfo.inodesUsed }}</el-tag>
-                        <el-tag class="tagClass">{{ $t('home.free') }}: {{ currentInfo.inodesFree }}</el-tag>
+                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
+                        <el-tag class="tagClass">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
+                        <el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
+                        <el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
+                        <div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
+                        <el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
+                        <el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
+                        <el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
                         <el-tag class="tagClass">
-                            {{ $t('home.percent') }}: {{ formatNumber(currentInfo.inodesUsedPercent) }}%
+                            {{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
                         </el-tag>
                     </el-col>
 
                     <el-col :span="12">
                         <div>
-                            <el-tag style="margin-top: 27px">{{ $t('monitor.disk') }}</el-tag>
+                            <el-tag style="margin-top: 108px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
                         </div>
                         <el-tag class="tagClass">
-                            {{ $t('home.total') }}: {{ formatNumber(currentInfo.total / 1024 / 1024 / 1024) }} GB
+                            {{ $t('home.total') }}: {{ formatNumber(item.total / 1024 / 1024 / 1024) }} GB
                         </el-tag>
                         <el-tag class="tagClass">
-                            {{ $t('home.used') }}: {{ formatNumber(currentInfo.used / 1024 / 1024 / 1024) }} GB
+                            {{ $t('home.used') }}: {{ formatNumber(item.used / 1024 / 1024 / 1024) }} GB
                         </el-tag>
                         <el-tag class="tagClass">
-                            {{ $t('home.free') }}: {{ formatNumber(currentInfo.free / 1024 / 1024 / 1024) }} GB
+                            {{ $t('home.free') }}: {{ formatNumber(item.free / 1024 / 1024 / 1024) }} GB
                         </el-tag>
                         <el-tag class="tagClass">
-                            {{ $t('home.percent') }}: {{ formatNumber(currentInfo.usedPercent) }}%
+                            {{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
                         </el-tag>
                     </el-col>
                 </el-row>
                 <template #reference>
-                    <div id="disk" class="chartClass"></div>
+                    <div :id="`disk${index}`" class="chartClass"></div>
                 </template>
             </el-popover>
             <span class="input-help">
-                ( {{ formatNumber(currentInfo.used / 1024 / 1024 / 1024) }} /
-                {{ formatNumber(currentInfo.total / 1024 / 1024 / 1024) }} ) GB
+                ( {{ formatNumber(item.used / 1024 / 1024 / 1024) }} /
+                {{ formatNumber(item.total / 1024 / 1024 / 1024) }} ) GB
             </span>
         </el-col>
     </el-row>
@@ -161,18 +164,11 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
 
     ioReadBytes: 0,
     ioWriteBytes: 0,
-    ioTime: 0,
     ioCount: 0,
+    ioReadTime: 0,
+    ioWriteTime: 0,
 
-    total: 0,
-    free: 0,
-    used: 0,
-    usedPercent: 0,
-
-    inodesTotal: 0,
-    inodesUsed: 0,
-    inodesFree: 0,
-    inodesUsedPercent: 0,
+    diskData: [],
 
     netBytesSent: 0,
     netBytesRecv: 0,
@@ -185,7 +181,13 @@ const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo):
     freshChart('cpu', 'CPU', formatNumber(currentInfo.value.cpuUsedPercent));
     freshChart('memory', i18n.global.t('monitor.memory'), formatNumber(currentInfo.value.MemoryUsedPercent));
     freshChart('load', i18n.global.t('home.load'), formatNumber(currentInfo.value.loadUsagePercent));
-    freshChart('disk', i18n.global.t('monitor.disk'), formatNumber(currentInfo.value.usedPercent));
+    for (let i = 0; i < currentInfo.value.diskData.length; i++) {
+        freshChart(
+            'disk' + i,
+            currentInfo.value.diskData[i].path,
+            formatNumber(currentInfo.value.diskData[i].usedPercent),
+        );
+    }
 };
 
 const freshChart = (chartName: string, Title: string, Data: number) => {