mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-12 19:05:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

enhance: record node analytic

Browse source
This commit is contained in:
0xJacky 2023-05-18 10:50:28 +08:00
parent aee3b87076
commit 228a36b079
No known key found for this signature in database
GPG key ID: B6E4A6E4A561BAF0
13 changed files with 203 additions and 4978 deletions
Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/views/dashboard/components/NodeAnalyticItem.vue
View file

@ -10,50 +10,44 @@ const props = defineProps(['item'])
<template>
<div class="hardware-monitor">
<a-row>
<a-col :xs="12" :md="10">
<div class="hardware-monitor-item longer">
<div>
<line-chart-outlined/>
<span class="load-avg-describe">1min:</span>{{ ' ' + item.avg_load?.load1?.toFixed(2) }} ·
<span class="load-avg-describe">5min:</span>{{ item.avg_load?.load5?.toFixed(2) }} ·
<span class="load-avg-describe">15min:</span>{{ item.avg_load?.load15?.toFixed(2) }}
</div>
<div>
<arrow-up-outlined/>
{{ bytesToSize(item?.network?.bytesSent) }}
<arrow-down-outlined/>
{{ bytesToSize(item?.network?.bytesRecv) }}
</div>
</div>
</a-col>
<a-col :xs="12" :md="14">
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.cpu_percent">
<template #icon>
<Icon :component="cpu"/>
</template>
<span>{{ item.cpu_num }} CPU</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.memory_percent">
<template #icon>
<Icon :component="memory"/>
</template>
<span>{{ item.memory_total }}</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.disk_percent">
<template #icon>
<database-outlined/>
</template>
<span>{{ item.disk_total }}</span>
</usage-progress-line>
</div>
</a-col>
</a-row>
<div class="hardware-monitor-item longer">
<div>
<line-chart-outlined/>
<span class="load-avg-describe">1min:</span>{{ ' ' + item.avg_load?.load1?.toFixed(2) }} ·
<span class="load-avg-describe">5min:</span>{{ item.avg_load?.load5?.toFixed(2) }} ·
<span class="load-avg-describe">15min:</span>{{ item.avg_load?.load15?.toFixed(2) }}
</div>
<div>
<arrow-up-outlined/>
{{ bytesToSize(item?.network?.bytesSent) }}
<arrow-down-outlined/>
{{ bytesToSize(item?.network?.bytesRecv) }}
</div>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.cpu_percent">
<template #icon>
<Icon :component="cpu"/>
</template>
<span>{{ item.cpu_num }} CPU</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.memory_percent">
<template #icon>
<Icon :component="memory"/>
</template>
<span>{{ item.memory_total }}</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.disk_percent">
<template #icon>
<database-outlined/>
</template>
<span>{{ item.disk_total }}</span>
</usage-progress-line>
</div>
</div>
</template>
@ -61,13 +55,16 @@ const props = defineProps(['item'])
.hardware-monitor {
display: flex;
:deep(.ant-col) {
display: flex;
@media (max-width: 900px) {
display: block;
}
.hardware-monitor-item {
width: 150px;
margin-right: 30px;
@media (max-width: 900px) {
margin-bottom: 5px;
}
}
.longer {
@ -76,7 +73,7 @@ const props = defineProps(['item'])
}
.load-avg-describe {
@media (max-width: 1200px) {
@media (max-width: 1200px) and (min-width: 600px) {
display: none;
}
}