From 658f2e7ce1c7871cc3a2a57fb11dd95352f1e865 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Mon, 8 Jul 2024 14:29:55 +0800
Subject: [PATCH] feat: add function of display log stream when click topo node

---
 web/src/components/PGTopo.vue           | 13 +++-
 web/src/stores/topo.ts                  |  9 ++-
 web/src/views/TopoDisplay.vue           | 86 ++++++++++++++++++++++---
 web/src/views/topoLogs/barChart.vue     | 14 ++--
 web/src/views/topoLogs/chart_options.ts |  4 +-
 web/src/views/topoLogs/index.vue        | 63 +++++++++---------
 6 files changed, 136 insertions(+), 53 deletions(-)

diff --git a/web/src/components/PGTopo.vue b/web/src/components/PGTopo.vue
index 2c9e940..45b919c 100644
--- a/web/src/components/PGTopo.vue
+++ b/web/src/components/PGTopo.vue
@@ -191,7 +191,18 @@ const menu = new G6.Menu({
   // _target：界面元素，item：节点内容
   handleMenuClick(_target, item) {
     if (item._cfg) {
-      useTopoStore().node_log_id = item._cfg.id!;
+      let host_name = '' as any; let process_name = '' as any;
+      let node_type = item._cfg.model!.Type;
+      if (node_type === 'process') {
+        process_name = item._cfg.model!.name;
+        host_name = graph.getNeighbors(item._cfg.id!)[0]._cfg!.model!.metrics?.Hostname;
+      } else if (node_type === 'host') {
+        process_name = host_name = item._cfg.model!.name;
+      }
+
+      useTopoStore().node_click_info.node_id = item._cfg.id!;
+      useTopoStore().node_click_info.host_name = host_name;
+      useTopoStore().node_click_info.process_name = process_name;
     }
   },
 });
diff --git a/web/src/stores/topo.ts b/web/src/stores/topo.ts
index 149fdc1..2daa26c 100644
--- a/web/src/stores/topo.ts
+++ b/web/src/stores/topo.ts
@@ -1,11 +1,16 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-
+interface nodeItem {
+  host_name: string;
+  node_id: string;
+  process_name: string;
+}
 export const useTopoStore = defineStore('topo', () => {
 
   const topo_data = ref({} as any);
   const node_log_id = ref('');
+  const node_click_info = ref({} as nodeItem) 
   const nodeData = ref({} as any);
   const edgeData = ref({} as any);
-  return {nodeData, node_log_id,topo_data, edgeData}
+  return {nodeData, node_log_id,node_click_info,topo_data, edgeData}
 })
diff --git a/web/src/views/TopoDisplay.vue b/web/src/views/TopoDisplay.vue
index af02a61..4a2bc13 100644
--- a/web/src/views/TopoDisplay.vue
+++ b/web/src/views/TopoDisplay.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="topoContaint" v-loading="loading">
+  <div id="topoDisplay" class="topoContaint" v-loading="loading">
     <el-page-header @back="goBack">
       <template #content>
         <span style="font-size: 14px;"> 拓扑图 </span>
@@ -25,13 +25,15 @@
     <nodeDetail />
     <!-- 嵌套抽屉组件展示日志信息 -->
     <Transition name="fade">
-      <LogChart v-if="showLogChart" />
+      <LogChart v-show="showLogChart" ref="logChart" />
     </Transition>
     <el-icon class="upLog" @click="showLogChart = !showLogChart">
       <ArrowUpBold class="up_log_up" v-if="!showLogChart" />
       <ArrowDownBold class="up_log_down" v-else />
     </el-icon>
-
+    <el-dialog v-model="dialog" :title="title" width="80%" destroy-on-close>
+      <logStream v-if="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream" />
+    </el-dialog>
   </div>
 </template>
 
@@ -41,8 +43,10 @@ import { onMounted, ref, watch, watchEffect, nextTick } from 'vue';
 import PGTopo from '@/components/PGTopo.vue';
 import nodeDetail from './nodeDetail.vue';
 import LogChart from './topoLogs/index.vue';
+import logStream from './topoLogs/logStream.vue';
 
 import { getCustomTopo, getTopoData, getUuidTopo } from "@/request/api";
+import { getELKProcessLogStream } from '@/request/elk';
 import { useTopoStore } from '@/stores/topo';
 import { useConfigStore } from '@/stores/config';
 import router from '@/router';
@@ -57,9 +61,20 @@ let request_type: string
 let request_id: string | number
 
 let showLogChart = ref(false);
+const logChart = ref(null)
 
+const dialog = ref(false);
+const title = ref('日志详情');
 onMounted(() => {
   loading.value = true;
+  document.getElementById('topoDisplay')!.addEventListener('click', function (_event: any) {
+    // 点击画布时，关闭日志弹窗和tab页面 
+    if (_event.target.nodeName === 'CANVAS') {
+      dialog.value = false;
+      showLogChart.value = false;
+    }
+
+  });
 })
 
 const goBack = () => {
@@ -131,12 +146,6 @@ watch(() => timeInterval.value, (newdata) => {
   topoTimer(request_id, newdata);
 })
 
-watch(() => useTopoStore().node_log_id, (new_log_id) => {
-  if (new_log_id) {
-    showLogChart.value = true;
-  }
-})
-
 function changeInterval(command: string) {
   timeInterval.value = command;
 }
@@ -193,6 +202,65 @@ function topoTimer(request_id: any, interval: string) {
   }
 }
 
+// 请求某一个日志文件流
+const log_stream = ref([]);
+const logfile_params = ref({} as any);
+const log_total = ref(0);
+const handleShowLog = (node_info?: any, _size?: number) => {
+  logfile_params.value = node_info;
+  if (node_info) {
+    dialog.value = true;
+    title.value = node_info.process_name + '日志流';
+  }
+  let log_query = {
+    id: "log_stream",
+    params: {
+      queryfield_datastream_dataset: "application",
+      queryfield_range_gte: new Date().getTime() - 2 * 60 * 60 * 1000,
+      queryfield_range_lte: new Date().getTime(),
+      queryfield_hostname: node_info.host_name,
+      queryfield_processname: node_info.process_name,
+      from: 0,
+      size: 20
+    }
+  }
+  if (_size) {
+    log_query.params.size = _size;
+  }
+  getELKProcessLogStream(log_query).then((res: any) => {
+    if (res.data.code === 200) {
+      if (res.data.data.hits.length > 0) {
+        log_stream.value = res.data.data.hits;
+        log_total.value = res.data.data.total;
+      } else {
+        ElMessage.info('当前文件无日志数据')
+      }
+    } else {
+      ElMessage.error(res.data.msg)
+    }
+  })
+}
+
+const getMoreLogStream = (size: number) => {
+  handleShowLog(logfile_params.value, size);
+}
+
+/* 
+* 监听topo图节点右键查看日志事件
+* node_click_info:{host_name:节点|父节点name,node_id:节点id,process_name:进程name}
+*/
+watch(() => useTopoStore().node_click_info, (node_click_info) => {
+  if (node_click_info.node_id) {
+    dialog.value = true;
+    let query_params = {
+      process_name: node_click_info.process_name,
+      value: [new Date().getTime() - 60 * 1000],
+      host_name: node_click_info.host_name,
+    };
+    handleShowLog(query_params);
+  }
+
+}, { immediate: true, deep: true })
 </script>
 
 <style scoped lang="scss">
diff --git a/web/src/views/topoLogs/barChart.vue b/web/src/views/topoLogs/barChart.vue
index 695651d..b433390 100644
--- a/web/src/views/topoLogs/barChart.vue
+++ b/web/src/views/topoLogs/barChart.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { markRaw, nextTick, onMounted, ref, watchEffect } from 'vue';
+import { markRaw, nextTick, onMounted, ref, watchEffect, watch } from 'vue';
 import bar_option from './chart_options';
 import * as echarts from 'echarts';
 import type { logData } from '@/types/index';
@@ -25,12 +25,6 @@ let props = defineProps({
     default: 'first'
   }
 })
-watchEffect(() => {
-  if (props.clickChange === 'first') {
-    isSecondClick.value = false;
-    bar_option.title.text = '集群';
-  }
-})
 
 let emit = defineEmits(["firstClick", "secondClick"]);
 
@@ -61,6 +55,10 @@ const resize = () => {
 }
 
 watchEffect(() => {
+  if (props.clickChange === 'first') {
+    isSecondClick.value = false;
+    bar_option.title.text = '集群';
+  }
   if (props.results) {
     nextTick(() => {
       handleBarData(props.results);
@@ -103,7 +101,7 @@ const handleBarData = (_data: logData[]) => {
 
 <style scoped>
 #main {
-  width: 94%;
+  width: 1300px;
   height: 350px;
   margin: 0 auto;
 }
diff --git a/web/src/views/topoLogs/chart_options.ts b/web/src/views/topoLogs/chart_options.ts
index fed60cd..09b6603 100644
--- a/web/src/views/topoLogs/chart_options.ts
+++ b/web/src/views/topoLogs/chart_options.ts
@@ -31,8 +31,8 @@ bar_option = {
     }
   },
   legend: {
-    left: '10%',
-    right:'30%'
+    left: '6%',
+    type:'scroll'
   },
   grid: {
     left: '0',
diff --git a/web/src/views/topoLogs/index.vue b/web/src/views/topoLogs/index.vue
index 635a7ba..2e83281 100644
--- a/web/src/views/topoLogs/index.vue
+++ b/web/src/views/topoLogs/index.vue
@@ -42,16 +42,15 @@
         <barChart :results="event_logs" />
       </el-tab-pane>
     </el-tabs>
-    <el-dialog v-model="dialog" :title="title" width="80%">
-      <logStream v-if="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream"
-        destroy-on-close />
+    <el-dialog v-model="dialog" :title="title" width="80%" destroy-on-close>
+      <logStream v-show="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream" />
     </el-dialog>
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, nextTick } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import { Search, Back } from '@element-plus/icons-vue'
 
@@ -112,41 +111,40 @@ const handleParams = (_params?: any) => {
   let log_query = {
     id: 'log_clusterhost_timeaxis',
     params: {
-      query_data_stream_dataset: "system.syslog",
-      query_range_gte: 1719226716185,
-      query_range_lte: 1719226836185,
-      aggs_field: "host.hostname",
+      queryfield_datastream_dataset: "system.syslog",
+      queryfield_range_gte: 1719226716185,
+      queryfield_range_lte: 1719226836185,
+      aggsfield: "host.hostname",
       size: 0,
       fixed_interval: "5s",
     }
   }
   if (_params) {
     log_query.id = 'log_hostprocess_timeaxis';
-    // log_query.params.aggs_field = 'process.name';
-    Object.assign(log_query.params, { 'hostname': _params.seriesName })
-    Object.assign(log_query.params, { 'aggs_1-1_field': 'process.name' })
+    log_query.params.aggsfield = 'process.name';
+    Object.assign(log_query.params, { 'queryfield_hostname': _params.seriesName })
+    // Object.assign(log_query.params, { 'aggs_1-1_field': 'process.name' })
   }
 
 
   switch (log_type.value) {
     case 'log':
-      log_query.params.query_range_gte = log_time.value[0].getTime();
-      log_query.params.query_range_lte = log_time.value[1].getTime();
+      log_query.params.queryfield_range_gte = log_time.value[0].getTime();
+      log_query.params.queryfield_range_lte = log_time.value[1].getTime();
       log_query.params.fixed_interval = calculate_interval(log_time.value[0], log_time.value[1]) + 's';
       break;
 
     default:
-      log_query.params.query_range_gte = event_time.value[0].getTime();
-      log_query.params.query_range_lte = event_time.value[1].getTime();
+      log_query.params.queryfield_range_gte = event_time.value[0].getTime();
+      log_query.params.queryfield_range_lte = event_time.value[1].getTime();
       log_query.params.fixed_interval = calculate_interval(event_time.value[0], event_time.value[1]) + 's';
       break;
   }
   return log_query;
-
 }
 
 // 请求日志数据
-const bar_params = ref({} as any); // 记录每次点击柱状图的参数
+const bar_params = ref({ hostname: '' } as any); // 记录每次点击柱状图的参数
 const getLogData = (_params?: any) => {
   bar_params.value = _params;
   switch (log_type.value) {
@@ -155,9 +153,14 @@ const getLogData = (_params?: any) => {
         // 第一次点击,请求进程信息
         back_btn.value = true;
         clickChange.value = 'second';
+        console.log('请求进程图表')
         getELKProcessLogData(handleParams(_params)).then(res => {
           if (res.data.code === 200) {
-            logs.value = res.data.data;
+            if (res.data.data.length > 0) {
+              logs.value = res.data.data;
+            } else {
+              ElMessage.info('无数据，请稍后重试')
+            }
           } else {
             ElMessage.error(res.data.msg)
           }
@@ -166,7 +169,11 @@ const getLogData = (_params?: any) => {
         // 初始，请求集群信息
         getELKLogData(handleParams()).then(res => {
           if (res.data.code === 200) {
-            logs.value = res.data.data;
+            if (res.data.data.length > 0) {
+              logs.value = res.data.data;
+            } else {
+              ElMessage.info('无数据，请稍后重试')
+            }
           } else {
             ElMessage.error(res.data.msg)
           }
@@ -204,7 +211,7 @@ const handleGetData = () => {
 const log_stream = ref([]);
 const logfile_params = ref({} as any);
 const log_total = ref(0);
-const handleShowLog = (_process_info: any, _size?: number) => {
+const handleShowLog = (_process_info?: any, _size?: number) => {
   logfile_params.value = _process_info;
   if (_process_info) {
     dialog.value = true;
@@ -213,11 +220,11 @@ const handleShowLog = (_process_info: any, _size?: number) => {
   let log_query = {
     id: "log_stream",
     params: {
-      query_data_stream_dataset: "system.syslog",
-      query_range_gte: _process_info.value[0],
-      query_range_lte: _process_info.value[0] + 1000 * 60,
-      hostname: bar_params.value.seriesName,
-      processname: _process_info.seriesName,
+      queryfield_datastream_dataset: "system.syslog",
+      queryfield_range_gte: _process_info.value[0],
+      queryfield_range_lte: _process_info.value[0] + 1000 * 60,
+      queryfield_hostname: bar_params.value.hostname ? bar_params.value.hostname : bar_params.value.seriesName,
+      queryfield_processname: _process_info.seriesName,
       from: 0,
       size: 20
     }
@@ -241,12 +248,6 @@ const getMoreLogStream = (size: number) => {
   handleShowLog(logfile_params.value, size);
 }
 
-watch(() => useTopoStore().node_log_id, (new_node_id) => {
-  if (new_node_id) {
-    // 发送接口请求
-    getLogData();
-  }
-})
 </script>
 
 
-- 
Gitee