diff --git a/web/src/stores/los.ts b/web/src/stores/log.ts similarity index 72% rename from web/src/stores/los.ts rename to web/src/stores/log.ts index b18bb92005fcbed5768147b408dfb36dce8849b4..40b440e2066aefd845a53db64f5e554bf2027db2 100644 --- a/web/src/stores/los.ts +++ b/web/src/stores/log.ts @@ -1,17 +1,15 @@ import { ref } from 'vue' import { defineStore } from 'pinia' -interface LogSearchObj { +interface LogSearchList { + ip:string, timeRange:[Date,Date]; level:string; - service:{label:string,value:string;} -} -interface LogSearchList { - ip:string; - search_obj:LogSearchObj; + service:{label:string,value:string}; + realTime:boolean; } export const useLogStore = defineStore('log', () => { const search_list = ref([] as LogSearchList[]); - + const ws_isOpen = ref(false); const updateLogList = (param:any) => { let ip_index = search_list.value.findIndex(item => item.ip === param.ip); ip_index !== -1 ? search_list.value[ip_index] = param : search_list.value.push(param); @@ -19,6 +17,7 @@ export const useLogStore = defineStore('log', () => { const $reset = () => { search_list.value = []; + ws_isOpen.value = false; } - return {search_list,updateLogList,$reset} + return {ws_isOpen,search_list,updateLogList,$reset} }) \ No newline at end of file diff --git a/web/src/utils/socket.ts b/web/src/utils/socket.ts index 080d74f2ee6848111a456afceea291339d9346b6..bab31c627933fce6e54ef8baeb8a3e4fa844ae0f 100644 --- a/web/src/utils/socket.ts +++ b/web/src/utils/socket.ts @@ -1,3 +1,4 @@ +import { useLogStore } from '@/stores/log' import { ElMessage } from 'element-plus' interface socket { websocket: any @@ -18,10 +19,9 @@ interface socket { close: () => void reconnect: () => void } - const socket: socket = { websocket: null, - connectURL: `wss://10.41.107.29:8888/plugin/ws/logs?clientId=${parseInt(Math.random() * 1000 + '')}`, + connectURL: `wss://10.41.107.29:8888/plugin/ws/logs`, // 开启标识 socket_open: false, // 心跳timer @@ -50,8 +50,8 @@ const socket: socket = { /* if (socket.websocket) { return socket.websocket } */ - - socket.websocket = new WebSocket(socket.connectURL) + let random = parseInt(Math.random() * 100000+''); + socket.websocket = new WebSocket(socket.connectURL+`?clientId=${random}`) socket.websocket.onmessage = (e: any) => { if (receiveMessage) { receiveMessage(e) @@ -60,6 +60,7 @@ const socket: socket = { socket.websocket.onclose = (e: any) => { console.log('检测到关闭',e) + useLogStore().ws_isOpen = false; clearInterval(socket.hearbeat_interval) socket.socket_open = false @@ -84,6 +85,7 @@ const socket: socket = { // 连接成功 socket.websocket.onopen = function () { console.log('ws连接成功') + useLogStore().ws_isOpen = true; socket.socket_open = true socket.is_reonnect = false // 开启心跳 @@ -93,6 +95,7 @@ const socket: socket = { // 连接发生错误 socket.websocket.onerror = function (e:any) { console.log('连接发生错误',e) + useLogStore().ws_isOpen = false; } }, @@ -141,7 +144,6 @@ const socket: socket = { }, close: () => { - console.log('关闭ws') clearInterval(socket.hearbeat_interval) socket.is_reonnect = false socket.websocket.close() diff --git a/web/src/views/TopoDisplay.vue b/web/src/views/TopoDisplay.vue index b21951700964212241b0ead62efc30d47800e00f..3f3b883aebcd9f3dd7cd699479b68efadcc7d24d 100644 --- a/web/src/views/TopoDisplay.vue +++ b/web/src/views/TopoDisplay.vue @@ -39,7 +39,7 @@ @@ -77,7 +77,7 @@ import { useConfigStore } from "@/stores/config"; import router from "@/router"; import socket from "@/utils/socket"; import { formatDate } from "@/utils/dateFormat"; -import { useLogStore } from "@/stores/los"; +import { useLogStore } from "@/stores/log"; const graphMode = ref("default"); const timeInterval = ref("关闭"); @@ -305,18 +305,16 @@ interface logItem { const serviceList = ref([] as any); const pluginlog_stream = ref([] as logItem[]); const pluginlog_total = ref(0); -const getPluginLogStream = () => { - socket.init(receiveMessage, ""); - setTimeout(() => { - if (socket.socket_open) { - socket.send({ - type: 1, - joptions: null, - data: useTopoStore().node_click_info.target_ip + ":9995", - }); - } - }, 500); -}; + +watch(()=>useLogStore().ws_isOpen,newV => { + if(newV) { + socket.send({ + type: 1, + joptions: null, + data: useTopoStore().node_click_info.target_ip + ":9995", + }); + } +},{immediate:true}) const receiveMessage = (message: any) => { let result = JSON.parse(message.data); @@ -380,6 +378,7 @@ const getWsLogs = (params: any) => { from: params.from, size: params.size ? params.size : null, } as any; + if(!serviceList.value) return; let selected_service = serviceList.value.find((group: any) => group.options.some((option: any) => option.label == params.service) ); @@ -404,6 +403,7 @@ const closeDialog = () => { socket.close(); pluginlog_stream.value = []; pluginlog_total.value = 0; + serviceList.value = []; }; /* @@ -413,7 +413,6 @@ const closeDialog = () => { watch( () => useTopoStore().node_click_info, (node_click_info) => { - console.log("监听到新节点:", node_click_info); if (node_click_info.node_id) { dialog.value = true; if (log_type.value === "elk") { @@ -424,7 +423,7 @@ watch( }; handleShowLog(query_params); } else { - getPluginLogStream(); + socket.init(receiveMessage, ""); } } }, diff --git a/web/src/views/topoLogs/logStream_plugin.vue b/web/src/views/topoLogs/logStream_plugin.vue index e6ca2b1ff711231e501bcff1e926aa2ce4d60d67..a0fbcafb0695f16f31fbaf62d8288a6588a3db69 100644 --- a/web/src/views/topoLogs/logStream_plugin.vue +++ b/web/src/views/topoLogs/logStream_plugin.vue @@ -35,7 +35,7 @@ 选择服务: -   +    查询
@@ -111,9 +111,11 @@