mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-02-28 19:14:13 +08:00
fix: Fix the issue of abnormal display on the monitoring page (#8007)
This commit is contained in:
ssongliu
GitHub
parent
1f716cb85d
commit
1289e15776
@ -338,7 +338,7 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: 'Container',
|
||||
cronjob: 'Cronjob',
|
||||
host: 'Host',
|
||||
system: 'System',
|
||||
security: 'Security',
|
||||
files: 'File',
|
||||
monitor: 'Monitor',
|
||||
|
||||
@ -332,7 +332,6 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: 'コンテナ|コンテナ',
|
||||
cronjob: 'クロンジョブ|クロンの仕事',
|
||||
host: 'ホスト|ホスト',
|
||||
system: 'システム',
|
||||
security: '安全',
|
||||
files: 'ファイル',
|
||||
|
||||
@ -333,7 +333,6 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: '컨테이너 | 컨테이너들',
|
||||
cronjob: '크론 작업 | 크론 작업들',
|
||||
host: '호스트 | 호스트들',
|
||||
system: '시스템',
|
||||
security: '보안',
|
||||
files: '파일',
|
||||
|
||||
@ -339,7 +339,6 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: 'Container | Containers',
|
||||
cronjob: 'Cron Job | Cron Jobs',
|
||||
host: 'Host | Hosts',
|
||||
system: 'System',
|
||||
security: 'Security',
|
||||
files: 'Files',
|
||||
|
||||
@ -337,7 +337,6 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: 'Container | Containers',
|
||||
cronjob: 'Tarefa Cron | Tarefas Cron',
|
||||
host: 'Host | Hosts',
|
||||
system: 'Sistema',
|
||||
security: 'Segurança',
|
||||
files: 'Arquivos',
|
||||
|
||||
@ -333,7 +333,6 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: 'Контейнер | Контейнеры',
|
||||
cronjob: 'Cron | Задачи Cron',
|
||||
host: 'Хост | Хосты',
|
||||
system: 'Система',
|
||||
security: 'Безопасность',
|
||||
files: 'Файлы',
|
||||
|
||||
@ -332,7 +332,7 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: '容器',
|
||||
cronjob: '計劃任務',
|
||||
host: '主機',
|
||||
system: '系統',
|
||||
files: '文件',
|
||||
monitor: '監控',
|
||||
terminal: '終端',
|
||||
|
||||
@ -330,7 +330,7 @@ const message = {
|
||||
aiTools: 'AI',
|
||||
container: '容器',
|
||||
cronjob: '计划任务',
|
||||
host: '主机',
|
||||
system: '系统',
|
||||
files: '文件',
|
||||
monitor: '监控',
|
||||
terminal: '终端',
|
||||
|
||||
@ -7,7 +7,7 @@ const hostRouter = {
|
||||
redirect: '/hosts/security',
|
||||
meta: {
|
||||
icon: 'p-host',
|
||||
title: 'menu.host',
|
||||
title: 'menu.system',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<template #header-r>
|
||||
<el-popover placement="left" :width="226" trigger="click">
|
||||
<el-input size="small" v-model="filter" clearable @input="loadOption()" />
|
||||
<el-table :show-header="false" :data="options" stripe max-height="500px">
|
||||
<el-table :show-header="false" :data="options" max-height="500px">
|
||||
<el-table-column prop="key" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="name">
|
||||
<template #default="{ row }">
|
||||
|
||||
@ -4,25 +4,26 @@
|
||||
|
||||
<div class="content-container__search">
|
||||
<el-card>
|
||||
<span style="font-size: 14px">{{ $t('monitor.globalFilter') }}</span>
|
||||
<el-date-picker
|
||||
@change="searchGlobal()"
|
||||
v-model="timeRangeGlobal"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%; margin-left: 10px"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
|
||||
<el-date-picker
|
||||
@change="searchGlobal()"
|
||||
v-model="timeRangeGlobal"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
|
||||
<span class="title">{{ $t('monitor.avgLoad') }}</span>
|
||||
<el-date-picker
|
||||
@change="search('load')"
|
||||
@ -54,7 +55,7 @@
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
|
||||
<span class="title">CPU</span>
|
||||
<el-date-picker
|
||||
@change="search('cpu')"
|
||||
@ -84,7 +85,7 @@
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
|
||||
<span class="title">{{ $t('monitor.memory') }}</span>
|
||||
<el-date-picker
|
||||
@change="search('memory')"
|
||||
@ -116,8 +117,8 @@
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<span class="title">{{ $t('monitor.disk') }} IO</span>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
|
||||
<span class="title">{{ $t('monitor.disk') }} I/O</span>
|
||||
<el-date-picker
|
||||
@change="search('io')"
|
||||
v-model="timeRangeIO"
|
||||
@ -146,23 +147,22 @@
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
|
||||
<div>
|
||||
<span class="title">{{ $t('monitor.network') }} IO:</span>
|
||||
<el-dropdown max-height="300px" @command="onChangeNetwork">
|
||||
<span class="title">{{ $t('monitor.network') }}{{ $t('commons.colon') }}</span>
|
||||
<el-dropdown>
|
||||
<span class="networkOption">
|
||||
{{ networkChoose === 'all' ? $t('commons.table.all') : networkChoose }}
|
||||
<el-icon>
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<div v-for="item in netOptions" :key="item">
|
||||
<el-dropdown-item v-if="item === 'all'" command="all">
|
||||
<el-dropdown-item v-if="item === 'all'" @click="changeNetwork('all')">
|
||||
{{ $t('commons.table.all') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-else :command="item">{{ item }}</el-dropdown-item>
|
||||
<el-dropdown-item v-else @click="changeNetwork(item)">
|
||||
{{ item }}
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
@ -246,11 +246,6 @@ const searchGlobal = () => {
|
||||
search('network');
|
||||
};
|
||||
|
||||
const onChangeNetwork = (command: string) => {
|
||||
networkChoose.value = command;
|
||||
search('network');
|
||||
};
|
||||
|
||||
const search = async (param: string) => {
|
||||
searchInfo.param = param;
|
||||
switch (param) {
|
||||
@ -366,6 +361,11 @@ const search = async (param: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
const changeNetwork = (item: string) => {
|
||||
networkChoose.value = item;
|
||||
search('network');
|
||||
};
|
||||
|
||||
const loadNetworkOptions = async () => {
|
||||
const res = await getNetworkOptions();
|
||||
netOptions.value = res.data;
|
||||
@ -399,15 +399,15 @@ function initLoadCharts(item: Host.MonitorData) {
|
||||
xData: loadDate,
|
||||
yData: [
|
||||
{
|
||||
name: '1 ' + i18n.global.t('commons.units.minute'),
|
||||
name: '1 ' + i18n.global.t('commons.units.minute', 1),
|
||||
data: load1Data,
|
||||
},
|
||||
{
|
||||
name: '5 ' + i18n.global.t('commons.units.minute'),
|
||||
name: '5 ' + i18n.global.t('commons.units.minute', 5),
|
||||
data: load5Data,
|
||||
},
|
||||
{
|
||||
name: '15 ' + i18n.global.t('commons.units.minute'),
|
||||
name: '15 ' + i18n.global.t('commons.units.minute', 15),
|
||||
data: load15Data,
|
||||
},
|
||||
{
|
||||
@ -417,7 +417,7 @@ function initLoadCharts(item: Host.MonitorData) {
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{ type: 'value', name: i18n.global.t('monitor.loadDetail') + ' ( % )' },
|
||||
{ type: 'value', name: i18n.global.t('monitor.loadDetail') },
|
||||
{
|
||||
type: 'value',
|
||||
name: i18n.global.t('monitor.resourceUsage') + ' ( % )',
|
||||
@ -426,7 +426,22 @@ function initLoadCharts(item: Host.MonitorData) {
|
||||
},
|
||||
],
|
||||
grid: mobile.value ? { left: '15%', right: '15%', bottom: '20%' } : null,
|
||||
formatStr: '%',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas: any) {
|
||||
let res = datas[0].name + '<br/>';
|
||||
for (const item of datas) {
|
||||
if (item.seriesName === i18n.global.t('monitor.resourceUsage')) {
|
||||
res +=
|
||||
item.marker + ' ' + item.seriesName + i18n.global.t('commons.colon') + item.data + '%<br/>';
|
||||
} else {
|
||||
res +=
|
||||
item.marker + ' ' + item.seriesName + i18n.global.t('commons.colon') + item.data + '<br/>';
|
||||
}
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -482,14 +497,20 @@ function initIOCharts(item: Host.MonitorData) {
|
||||
item.seriesName === i18n.global.t('monitor.read') ||
|
||||
item.seriesName === i18n.global.t('monitor.write')
|
||||
) {
|
||||
res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
|
||||
res +=
|
||||
item.marker +
|
||||
' ' +
|
||||
item.seriesName +
|
||||
i18n.global.t('commons.colon') +
|
||||
computeSizeFromKBs(item.data) +
|
||||
'<br/>';
|
||||
}
|
||||
if (item.seriesName === i18n.global.t('monitor.readWriteCount')) {
|
||||
res +=
|
||||
item.marker +
|
||||
' ' +
|
||||
item.seriesName +
|
||||
'：' +
|
||||
i18n.global.t('commons.colon') +
|
||||
item.data +
|
||||
' ' +
|
||||
i18n.global.t('commons.units.time') +
|
||||
@ -497,7 +518,14 @@ function initIOCharts(item: Host.MonitorData) {
|
||||
'<br/>';
|
||||
}
|
||||
if (item.seriesName === i18n.global.t('monitor.readWriteTime')) {
|
||||
res += item.marker + ' ' + item.seriesName + '：' + item.data + ' ms' + '<br/>';
|
||||
res +=
|
||||
item.marker +
|
||||
' ' +
|
||||
item.seriesName +
|
||||
i18n.global.t('commons.colon') +
|
||||
item.data +
|
||||
' ms' +
|
||||
'<br/>';
|
||||
}
|
||||
}
|
||||
return res;
|
||||
@ -550,7 +578,7 @@ onMounted(() => {
|
||||
.networkOption {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
{{ $t('menu.terminal') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="router_card_button" size="large" value="host">
|
||||
{{ $t('menu.host') }}
|
||||
{{ $t('terminal.host') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="router_card_button" size="large" value="command">
|
||||
{{ $t('terminal.quickCommand') }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user