Skip to content

Commit dda8fac

Browse files
wu-clanwu-clan
committed
feat: add the server monitor view
1 parent 93742f0 commit dda8fac

File tree

3 files changed

+200
-8
lines changed

3 files changed

+200
-8
lines changed

‎apps/web-antd/src/adapter/vxe-table.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ setupVbenVxeTable({
2121
columnConfig: {
2222
resizable: true,
2323
},
24-
minHeight: 320,
24+
minHeight: 180,
2525
formConfig: {
2626
// 全局禁用vxe-table的表单配置，使用formOptions
2727
enabled: false,

‎apps/web-antd/src/views/monitor/redis/index.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ watch(redisInfo, (val) => {
105105
</script>
106106

107107
<template>
108-
<div class="container mx-auto p-4">
109-
<div class="mb-2 rounded-lg p-2 shadow-md">
108+
<div class="flex flex-col items-center px-4">
109+
<div class="mt-4 w-full">
110110
<a-card :title="$t('page.monitor.redis.desc.title')" :loading="loading">
111111
<a-descriptions>
112112
<a-descriptions-item
@@ -119,16 +119,16 @@ watch(redisInfo, (val) => {
119119
</a-descriptions>
120120
</a-card>
121121
</div>
122-
<div class="flex flex-col gap-2 md:flex-row">
123-
<div class="rounded-lg p-2 shadow-md md:w-1/2">
122+
<div class="mt-4 flex w-full space-x-4">
123+
<div class="flex-1">
124124
<a-card
125125
:title="$t('page.monitor.redis.cards.commands.title')"
126126
:loading="loading"
127127
>
128128
<CommandsSeries :stats="redisStats" />
129129
</a-card>
130130
</div>
131-
<div class="rounded-lg p-2 shadow-md md:w-1/2">
131+
<div class="flex-1">
132132
<a-card
133133
:title="$t('page.monitor.redis.cards.memory.title')"
134134
:loading="loading"

‎apps/web-antd/src/views/monitor/server/index.vue

Lines changed: 194 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,197 @@
1+
<script lang="ts" setup>
2+
import { computed, onMounted, ref } from 'vue';
3+
4+
import { useVbenVxeGrid } from '#/adapter/vxe-table';
5+
import { getServerMonitor } from '#/api';
6+
7+
const loading = ref<boolean>(false);
8+
9+
const setServerData = ref<Record<string, any>>({});
10+
11+
const diskData = ref<any[]>([]);
12+
13+
const cpuData = computed(() => {
14+
return {
15+
usage: setServerData.value.cpu?.usage,
16+
current_freq: setServerData.value.cpu?.current_freq,
17+
max_freq: setServerData.value.cpu?.max_freq,
18+
min_freq: setServerData.value.cpu?.min_freq,
19+
logical_num: setServerData.value.cpu?.logical_num,
20+
physical_num: setServerData.value.cpu?.physical_num,
21+
};
22+
});
23+
24+
const memData = computed(() => {
25+
return {
26+
total: setServerData.value.memory?.total,
27+
used: setServerData.value.memory?.used,
28+
free: setServerData.value.memory?.free,
29+
usage: setServerData.value.memory?.usage,
30+
};
31+
});
32+
33+
const serviceData = computed(() => {
34+
const data: any[] = [];
35+
if (setServerData.value.service) {
36+
Object.keys(setServerData.value.service).forEach((key) => {
37+
data.push({
38+
label: key,
39+
value: setServerData.value.service[key],
40+
});
41+
});
42+
}
43+
return data;
44+
});
45+
46+
const osData = computed(() => {
47+
const data: any[] = [];
48+
if (setServerData.value.system) {
49+
Object.keys(setServerData.value.system).forEach((key) => {
50+
data.push({
51+
label: key,
52+
value: setServerData.value.system[key],
53+
});
54+
});
55+
}
56+
return data;
57+
});
58+
59+
const usageStyle = (type: string) => {
60+
let num = 0;
61+
if (type === 'cpu') {
62+
num = cpuData.value.usage;
63+
} else if (type === 'memory') {
64+
num = memData.value.usage;
65+
}
66+
if (num < 50) {
67+
return { color: '#32CD32' };
68+
}
69+
if (num < 80) {
70+
return { color: '#FFD700' };
71+
}
72+
return { color: '#DC143C' };
73+
};
74+
75+
const fetchServerData = async () => {
76+
loading.value = true;
77+
try {
78+
const res = await getServerMonitor();
79+
setServerData.value.cpu = res.cpu;
80+
setServerData.value.memory = res.mem;
81+
setServerData.value.system = res.sys;
82+
setServerData.value.service = res.service;
83+
diskData.value = res.disk;
84+
} catch (error) {
85+
console.error(error);
86+
} finally {
87+
loading.value = false;
88+
}
89+
};
90+
91+
const [Grid, gridApi] = useVbenVxeGrid({
92+
gridOptions: {
93+
columns: [
94+
{ field: 'dir', title: '路径' },
95+
{ field: 'type', title: '类型' },
96+
{ field: 'device', title: '设备' },
97+
{ field: 'total', title: '总计' },
98+
{ field: 'free', title: '空闲' },
99+
{ field: 'used', title: '已使用' },
100+
{ field: 'usage', title: '使用率' },
101+
],
102+
stripe: true,
103+
pagerConfig: {
104+
enabled: false,
105+
},
106+
},
107+
});
108+
109+
onMounted(async () => {
110+
await fetchServerData();
111+
gridApi.setGridOptions({ data: diskData.value });
112+
});
113+
</script>
114+
1115
<template>
2-
<div>
3-
<h1>home page</h1>
116+
<div class="flex flex-col items-center px-6">
117+
<div class="mt-6 flex w-full space-x-6">
118+
<div class="flex-1">
119+
<a-card :loading="loading" title="CPU">
120+
<div class="mt-6 flex w-full space-x-6 px-6">
121+
<div class="flex-1">
122+
<a-statistic
123+
title="使用率"
124+
:value="cpuData.usage"
125+
:value-style="usageStyle('cpu')"
126+
suffix=" %"
127+
/>
128+
</div>
129+
<div class="flex-1">
130+
<a-statistic
131+
title="当前频率"
132+
:value="cpuData.current_freq"
133+
suffix=" MHz"
134+
/>
135+
</div>
136+
<div class="flex-1">
137+
<a-statistic title="逻辑核心数" :value="cpuData.logical_num" />
138+
</div>
139+
<div class="flex-1">
140+
<a-statistic title="物理核心数" :value="cpuData.physical_num" />
141+
</div>
142+
</div>
143+
</a-card>
144+
</div>
145+
<div class="flex-1">
146+
<a-card :loading="loading" title="内存">
147+
<div class="mt-6 flex w-full space-x-6 px-6">
148+
<div class="flex-1">
149+
<a-statistic title="总量" :value="memData.total" suffix=" GB" />
150+
</div>
151+
<div class="flex-1">
152+
<a-statistic title="已使用" :value="memData.used" suffix=" GB" />
153+
</div>
154+
<div class="flex-1">
155+
<a-statistic title="空闲" :value="memData.free" suffix=" GB" />
156+
</div>
157+
<div class="flex-1">
158+
<a-statistic
159+
title="使用率"
160+
:value="memData.usage"
161+
:value-style="usageStyle('memory')"
162+
suffix=" %"
163+
/>
164+
</div>
165+
</div>
166+
</a-card>
167+
</div>
168+
</div>
169+
<div class="mt-6 w-full space-y-6">
170+
<a-card :loading="loading" title="服务">
171+
<a-descriptions>
172+
<a-descriptions-item
173+
v-for="item in serviceData"
174+
:label="item.label"
175+
:key="item.label"
176+
>
177+
{{ item.value }}
178+
</a-descriptions-item>
179+
</a-descriptions>
180+
</a-card>
181+
<a-card :loading="loading" title="系统">
182+
<a-descriptions size="middle" :column="4">
183+
<a-descriptions-item
184+
v-for="item in osData"
185+
:label="item.label"
186+
:key="item.label"
187+
>
188+
{{ item.value }}
189+
</a-descriptions-item>
190+
</a-descriptions>
191+
</a-card>
192+
<a-card :loading="loading" title="磁盘">
193+
<Grid />
194+
</a-card>
195+
</div>
4196
</div>
5197
</template>

0 commit comments

Comments
 (0)