fix: 解决容器监控数据缓存的问题

This commit is contained in:
ssongliu 2023-03-13 10:16:49 +08:00 committed by ssongliu
parent aa608ff891
commit 95bc5cc902
3 changed files with 15 additions and 152 deletions

View file

@ -9,7 +9,6 @@ import (
"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
"github.com/1Panel-dev/1Panel/backend/constant"
"github.com/1Panel-dev/1Panel/backend/global"
"github.com/1Panel-dev/1Panel/backend/utils/cmd"
"github.com/1Panel-dev/1Panel/backend/utils/copier"
"github.com/1Panel-dev/1Panel/backend/utils/ssh"
"github.com/1Panel-dev/1Panel/backend/utils/terminal"
@ -157,15 +156,6 @@ func (b *BaseApi) ContainerWsSsh(c *gin.Context) {
}
defer wsConn.Close()
cmds := fmt.Sprintf("docker exec %s %s", containerID, command)
if len(user) != 0 {
cmds = fmt.Sprintf("docker exec -u %s %s %s", user, containerID, command)
}
stdout, err := cmd.Exec(cmds)
if wshandleError(wsConn, errors.WithMessage(err, stdout)) {
return
}
commands := fmt.Sprintf("docker exec -it %s %s", containerID, command)
if len(user) != 0 {
commands = fmt.Sprintf("docker exec -it -u %s %s %s", user, containerID, command)

View file

@ -1,5 +1,11 @@
<template>
<el-drawer v-model="monitorVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<el-drawer
v-model="monitorVisiable"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.monitor')" :back="handleClose" />
</template>
@ -23,7 +29,6 @@
:option="chartsOption['cpuChart']"
v-if="chartsOption['cpuChart']"
/>
<!-- <div id="cpuChart" style="width: 100%; height: 200px"></div> -->
</el-card>
<el-card style="margin-top: 10px">
<v-charts
@ -33,7 +38,6 @@
:option="chartsOption['memoryChart']"
v-if="chartsOption['memoryChart']"
/>
<!-- <div id="memoryChart" style="width: 100%; height: 200px"></div> -->
</el-card>
<el-card style="margin-top: 10px">
<v-charts
@ -43,7 +47,6 @@
:option="chartsOption['ioChart']"
v-if="chartsOption['ioChart']"
/>
<!-- <div id="ioChart" style="width: 100%; height: 200px"></div> -->
</el-card>
<el-card style="margin-top: 10px">
<v-charts
@ -53,7 +56,6 @@
:option="chartsOption['networkChart']"
v-if="chartsOption['networkChart']"
/>
<!-- <div id="networkChart" style="width: 100%; height: 200px"></div> -->
</el-card>
</el-drawer>
</template>
@ -78,12 +80,6 @@ const dialogData = ref<DialogProps>({
containerID: '',
});
// function changeChartSize() {
// echarts.getInstanceByDom(document.getElementById('cpuChart') as HTMLElement)?.resize();
// echarts.getInstanceByDom(document.getElementById('memoryChart') as HTMLElement)?.resize();
// echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
// echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
// }
const acceptParams = async (params: DialogProps): Promise<void> => {
monitorVisiable.value = true;
dialogData.value.containerID = params.containerID;
@ -98,7 +94,6 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
timeInterval.value = 5;
isInit.value = true;
loadData();
// window.addEventListener('resize', changeChartSize);
timer = setInterval(async () => {
if (monitorVisiable.value) {
isInit.value = false;
@ -220,140 +215,12 @@ const loadData = async () => {
],
formatStr: 'KB/s',
};
// let cpuYDatas = {
// name: 'CPU',
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: cpuDatas.value,
// showSymbol: false,
// };
// freshChart('cpuChart', ['CPU'], timeDatas.value, [cpuYDatas], 'CPU', '%');
// let memoryYDatas = {
// name: i18n.global.t('monitor.memory'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: memDatas.value,
// showSymbol: false,
// };
// let cacheYDatas = {
// name: i18n.global.t('container.cache'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: cacheDatas.value,
// showSymbol: false,
// };
// freshChart(
// 'memoryChart',
// [i18n.global.t('monitor.memory'), i18n.global.t('monitor.cache')],
// timeDatas.value,
// [memoryYDatas, cacheYDatas],
// i18n.global.t('monitor.memory'),
// ' MB',
// );
// let ioReadYDatas = {
// name: i18n.global.t('monitor.read'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: ioReadDatas.value,
// showSymbol: false,
// };
// let ioWriteYDatas = {
// name: i18n.global.t('monitor.write'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: ioWriteDatas.value,
// showSymbol: false,
// };
// freshChart(
// 'ioChart',
// [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
// timeDatas.value,
// [ioReadYDatas, ioWriteYDatas],
// i18n.global.t('monitor.disk') + ' IO',
// 'MB',
// );
// let netTxYDatas = {
// name: i18n.global.t('monitor.up'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: netTxDatas.value,
// showSymbol: false,
// };
// let netRxYDatas = {
// name: i18n.global.t('monitor.down'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: netRxDatas.value,
// showSymbol: false,
// };
// freshChart(
// 'networkChart',
// [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
// timeDatas.value,
// [netTxYDatas, netRxYDatas],
// i18n.global.t('monitor.network'),
// 'KB/s',
// );
};
// function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
// if (isInit.value) {
// echarts.init(document.getElementById(chartName) as HTMLElement);
// }
// let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
// const option = {
// title: [
// {
// left: 'center',
// text: yTitle,
// },
// ],
// zlevel: 1,
// z: 1,
// tooltip: {
// trigger: 'axis',
// formatter: function (datas: any) {
// let res = datas[0].name + '<br/>';
// for (const item of datas) {
// res += item.marker + ' ' + item.seriesName + '' + item.data + formatStr + '<br/>';
// }
// return res;
// },
// },
// grid: { left: '7%', right: '7%', bottom: '20%' },
// legend: {
// data: legendDatas,
// right: 10,
// },
// xAxis: { data: xDatas, boundaryGap: false },
// yAxis: { name: '( ' + formatStr + ' )' },
// series: yDatas,
// };
// itemChart?.setOption(option, true);
// }
const handleClose = async () => {
monitorVisiable.value = false;
clearInterval(Number(timer));
timer = null;
// window.removeEventListener('resize', changeChartSize);
chartsOption.value = { cpuChart: null, memoryChart: null, ioChart: null, networkChart: null };
};
defineExpose({

View file

@ -1,5 +1,11 @@
<template>
<el-drawer v-model="terminalVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<el-drawer
v-model="terminalVisiable"
@close="handleClose"
:destroy-on-close="true"
:close-on-click-modal="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.containerTerminal')" :back="handleClose" />
</template>