1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-11-22 00:38:34 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 优化监控界面无数据时显示样式 (#1147)

Browse source
This commit is contained in:
ssongliu 2023-05-25 18:50:18 +08:00 • committed by GitHub
parent c1acd8f5f0
commit 792e96e95f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/app/service/monitor.go
View file

@ -26,7 +26,6 @@ func NewIMonitorService() IMonitorService {
} }
func (m *MonitorService) Run() { func (m *MonitorService) Run() {
fmt.Printf("开始采集数据了啊我 %s \n", time.Now().Format("2006-01-02 15:04:05"))
monitorStatus, _ := settingRepo.Get(settingRepo.WithByKey("MonitorStatus")) monitorStatus, _ := settingRepo.Get(settingRepo.WithByKey("MonitorStatus"))
if monitorStatus.Value == "disable" { if monitorStatus.Value == "disable" {
return return

105
frontend/src/views/host/monitor/monitor/index.vue
View file

@ -220,13 +220,15 @@ const search = async (param: string) => {
} }
switch (item.param) { switch (item.param) {
case 'base': case 'base':
let baseDate = item.date.map(function (item: any) { let baseDate = item.date.length === 0 ? loadEmptyDate() : item.date;
baseDate = baseDate.map(function (item: any) {
return dateFormatWithoutYear(item); return dateFormatWithoutYear(item);
}); });
if (param === 'cpu' || param === 'all') { if (param === 'cpu' || param === 'all') {
let cpuData = item.value.map(function (item: any) { let cpuData = item.value.map(function (item: any) {
return item.cpu.toFixed(2); return item.cpu.toFixed(2);
}); });
cpuData = cpuData.length === 0 ? loadEmptyData() : cpuData;
let yDatasOfCpu = { let yDatasOfCpu = {
name: 'CPU', name: 'CPU',
type: 'line', type: 'line',
@ -251,6 +253,7 @@ const search = async (param: string) => {
let memoryData = item.value.map(function (item: any) { let memoryData = item.value.map(function (item: any) {
return item.memory.toFixed(2); return item.memory.toFixed(2);
}); });
memoryData = memoryData.length === 0 ? loadEmptyData() : memoryData;
let yDatasOfMem = { let yDatasOfMem = {
name: i18n.global.t('monitor.memory'), name: i18n.global.t('monitor.memory'),
type: 'line', type: 'line',
@ -279,12 +282,14 @@ const search = async (param: string) => {
initIOCharts(item); initIOCharts(item);
break; break;
case 'network': case 'network':
let networkDate = item.date.map(function (item: any) { let networkDate = item.date.length === 0 ? loadEmptyDate() : item.date;
networkDate = networkDate.map(function (item: any) {
return dateFormatWithoutYear(item); return dateFormatWithoutYear(item);
}); });
let networkUp = item.value.map(function (item: any) { let networkUp = item.value.map(function (item: any) {
return item.up.toFixed(2); return item.up.toFixed(2);
}); });
networkUp = networkUp.length === 0 ? loadEmptyData() : networkUp;
let yDatasOfUp = { let yDatasOfUp = {
name: i18n.global.t('monitor.up'), name: i18n.global.t('monitor.up'),
type: 'line', type: 'line',
@ -306,6 +311,7 @@ const search = async (param: string) => {
let networkOut = item.value.map(function (item: any) { let networkOut = item.value.map(function (item: any) {
return item.down.toFixed(2); return item.down.toFixed(2);
}); });
networkOut = networkOut.length === 0 ? loadEmptyData() : networkOut;
let yDatasOfDown = { let yDatasOfDown = {
name: i18n.global.t('monitor.down'), name: i18n.global.t('monitor.down'),
type: 'line', type: 'line',
@ -365,6 +371,27 @@ function initCharts(chartName: string, xDatas: any, yDatas: any, yTitle: string,
} }
function initLoadCharts(item: Monitor.MonitorData) { function initLoadCharts(item: Monitor.MonitorData) {
let itemLoadDate = item.date.length === 0 ? loadEmptyDate() : item.date;
let loadDate = itemLoadDate.map(function (item: any) {
return dateFormatWithoutYear(item);
});
let load1Data = item.value.map(function (item: any) {
return item.cpuLoad1.toFixed(2);
});
load1Data = load1Data.length === 0 ? loadEmptyData() : load1Data;
let load5Data = item.value.map(function (item: any) {
return item.cpuLoad5.toFixed(2);
});
load5Data = load5Data.length === 0 ? loadEmptyData() : load5Data;
let load15Data = item.value.map(function (item: any) {
return item.cpuLoad15.toFixed(2);
});
load15Data = load15Data.length === 0 ? loadEmptyData() : load15Data;
let loadUsage = item.value.map(function (item: any) {
return item.loadUsage.toFixed(2);
});
loadUsage = loadUsage.length === 0 ? loadEmptyData() : loadUsage;
const lineChart = echarts.init(document.getElementById('loadLoadChart') as HTMLElement); const lineChart = echarts.init(document.getElementById('loadLoadChart') as HTMLElement);
const option = { const option = {
zlevel: 1, zlevel: 1,
@ -389,9 +416,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
}, },
grid: { left: '7%', right: '7%', bottom: '20%' }, grid: { left: '7%', right: '7%', bottom: '20%' },
xAxis: { xAxis: {
data: item.date.map(function (item: any) { data: loadDate,
return dateFormatWithoutYear(item);
}),
}, },
yAxis: [ yAxis: [
{ type: 'value', name: i18n.global.t('monitor.loadDetail') + ' ( % )' }, { type: 'value', name: i18n.global.t('monitor.loadDetail') + ' ( % )' },
@ -420,9 +445,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: load1Data,
return item.cpuLoad1.toFixed(2);
}),
}, },
{ {
name: '5 ' + i18n.global.t('monitor.min'), name: '5 ' + i18n.global.t('monitor.min'),
@ -440,9 +463,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: load5Data,
return item.cpuLoad5.toFixed(2);
}),
}, },
{ {
name: '15 ' + i18n.global.t('monitor.min'), name: '15 ' + i18n.global.t('monitor.min'),
@ -460,9 +481,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: load15Data,
return item.cpuLoad15.toFixed(2);
}),
}, },
{ {
name: i18n.global.t('monitor.resourceUsage'), name: i18n.global.t('monitor.resourceUsage'),
@ -480,9 +499,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: loadUsage,
return item.loadUsage.toFixed(2);
}),
yAxisIndex: 1, yAxisIndex: 1,
}, },
], ],
@ -491,6 +508,27 @@ function initLoadCharts(item: Monitor.MonitorData) {
} }
function initIOCharts(item: Monitor.MonitorData) { function initIOCharts(item: Monitor.MonitorData) {
let itemIODate = item.date.length === 0 ? loadEmptyDate() : item.date;
let ioDate = itemIODate.map(function (item: any) {
return dateFormatWithoutYear(item);
});
let ioRead = item.value.map(function (item: any) {
return Number((item.read / 1024).toFixed(2));
});
ioRead = ioRead.length === 0 ? loadEmptyData() : ioRead;
let ioWrite = item.value.map(function (item: any) {
return Number((item.write / 1024).toFixed(2));
});
ioWrite = ioWrite.length === 0 ? loadEmptyData() : ioWrite;
let ioCount = item.value.map(function (item: any) {
return item.count;
});
ioCount = ioCount.length === 0 ? loadEmptyData() : ioCount;
let ioTime = item.value.map(function (item: any) {
return item.time;
});
ioTime = ioTime.length === 0 ? loadEmptyData() : ioTime;
const lineChart = echarts.init(document.getElementById('loadIOChart') as HTMLElement); const lineChart = echarts.init(document.getElementById('loadIOChart') as HTMLElement);
const option = { const option = {
zlevel: 1, zlevel: 1,
@ -535,9 +573,7 @@ function initIOCharts(item: Monitor.MonitorData) {
}, },
grid: { left: '7%', right: '7%', bottom: '20%' }, grid: { left: '7%', right: '7%', bottom: '20%' },
xAxis: { xAxis: {
data: item.date.map(function (item: any) { data: ioDate,
return dateFormatWithoutYear(item);
}),
}, },
yAxis: [ yAxis: [
{ type: 'value', name: '( KB/s )' }, { type: 'value', name: '( KB/s )' },
@ -561,9 +597,7 @@ function initIOCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: ioRead,
return (item.read / 1024).toFixed(2);
}),
}, },
{ {
name: i18n.global.t('monitor.write'), name: i18n.global.t('monitor.write'),
@ -581,9 +615,7 @@ function initIOCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: ioWrite,
return (item.write / 1024).toFixed(2);
}),
}, },
{ {
name: i18n.global.t('monitor.readWriteCount'), name: i18n.global.t('monitor.readWriteCount'),
@ -601,9 +633,7 @@ function initIOCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: ioCount,
return item.count;
}),
yAxisIndex: 1, yAxisIndex: 1,
}, },
{ {
@ -622,9 +652,7 @@ function initIOCharts(item: Monitor.MonitorData) {
]), ]),
}, },
showSymbol: false, showSymbol: false,
data: item.value.map(function (item: any) { data: ioTime,
return item.time;
}),
yAxisIndex: 1, yAxisIndex: 1,
}, },
], ],
@ -632,6 +660,19 @@ function initIOCharts(item: Monitor.MonitorData) {
lineChart.setOption(option, true); lineChart.setOption(option, true);
} }
function loadEmptyDate() {
let dateNow = new Date();
let date1 = new Date(dateNow.getTime() - 3600 * 1000 * 4);
let date2 = new Date(dateNow.getTime() - 3600 * 1000 * 3);
let date3 = new Date(dateNow.getTime() - 3600 * 1000 * 2);
let date4 = new Date(dateNow.getTime() - 3600 * 1000 * 1);
let date5 = dateNow;
return [date1, date2, date3, date4, date5];
}
function loadEmptyData() {
return [0, 0, 0, 0, 0];
}
function changeChartSize() { function changeChartSize() {
echarts.getInstanceByDom(document.getElementById('loadLoadChart') as HTMLElement)?.resize(); echarts.getInstanceByDom(document.getElementById('loadLoadChart') as HTMLElement)?.resize();
echarts.getInstanceByDom(document.getElementById('loadCPUChart') as HTMLElement)?.resize(); echarts.getInstanceByDom(document.getElementById('loadCPUChart') as HTMLElement)?.resize();