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

backend/app/api/v1/terminal.go

@@ -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)

frontend/src/views/container/container/monitor/index.vue

@@ -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({

frontend/src/views/container/container/terminal/index.vue

@@ -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>