From 89e51008f4d8a0ebd19324d85ea1470769da3a79 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Mon, 8 Jul 2024 16:33:10 +0800
Subject: [PATCH] feat: add time pick function for log stream

---
 web/src/components/PGTopo.vue        | 12 ++++++--
 web/src/stores/topo.ts               |  8 +++++-
 web/src/views/TopoDisplay.vue        | 35 +++++++++++++++++++++--
 web/src/views/topoLogs/index.vue     | 28 +++++++++++++++++--
 web/src/views/topoLogs/logStream.vue | 42 +++++++++++++++++++++++-----
 5 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/web/src/components/PGTopo.vue b/web/src/components/PGTopo.vue
index 45b919c..02b6ccf 100644
--- a/web/src/components/PGTopo.vue
+++ b/web/src/components/PGTopo.vue
@@ -178,6 +178,12 @@ const menu = new G6.Menu({
   offsetX: 6,
   offsetY: 10,
   itemTypes: ['node'],
+  shouldBegin(_e: any) {
+    if (_e.item._cfg.model.Type === 'host') {
+      return false;
+    }
+    return true;
+  },
   getContent(_e) {
     const outDiv = document.createElement('div');
     outDiv.style.width = '80px';
@@ -189,12 +195,12 @@ const menu = new G6.Menu({
     return outDiv;
   },
   // _target：界面元素，item：节点内容
-  handleMenuClick(_target, item) {
+  handleMenuClick(_target, item: any) {
     if (item._cfg) {
       let host_name = '' as any; let process_name = '' as any;
-      let node_type = item._cfg.model!.Type;
+      let node_type = item._cfg.model.Type;
       if (node_type === 'process') {
-        process_name = item._cfg.model!.name;
+        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;
diff --git a/web/src/stores/topo.ts b/web/src/stores/topo.ts
index 2daa26c..dff5e3a 100644
--- a/web/src/stores/topo.ts
+++ b/web/src/stores/topo.ts
@@ -12,5 +12,11 @@ export const useTopoStore = defineStore('topo', () => {
   const node_click_info = ref({} as nodeItem) 
   const nodeData = ref({} as any);
   const edgeData = ref({} as any);
-  return {nodeData, node_log_id,node_click_info,topo_data, edgeData}
+
+  const $reset = () => {
+    node_click_info.value.host_name = '';
+    node_click_info.value.node_id = '';
+    node_click_info.value.process_name = '';
+  }
+  return {nodeData, node_log_id,node_click_info,topo_data, edgeData,$reset}
 })
diff --git a/web/src/views/TopoDisplay.vue b/web/src/views/TopoDisplay.vue
index 4a2bc13..7f8f4f1 100644
--- a/web/src/views/TopoDisplay.vue
+++ b/web/src/views/TopoDisplay.vue
@@ -31,15 +31,16 @@
       <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 v-model="dialog" :title="title" width="80%" @close="closeDialog" destroy-on-close>
+      <logStream v-if="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream"
+        v-on:get-time-range-log="getRangeTimeLog" />
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
-import { onMounted, ref, watch, watchEffect, nextTick } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch, watchEffect, nextTick } from 'vue';
 import PGTopo from '@/components/PGTopo.vue';
 import nodeDetail from './nodeDetail.vue';
 import LogChart from './topoLogs/index.vue';
@@ -76,6 +77,11 @@ onMounted(() => {
 
   });
 })
+onBeforeUnmount(() => {
+  // 离开页面，清空点击事件缓存数据
+  useTopoStore().$reset();
+})
+
 
 const goBack = () => {
   if (timer) {
@@ -203,9 +209,15 @@ function topoTimer(request_id: any, interval: string) {
 }
 
 // 请求某一个日志文件流
+interface TimeRange {
+  start: Date,
+  end: Date
+}
 const log_stream = ref([]);
 const logfile_params = ref({} as any);
 const log_total = ref(0);
+const isRangeLog = ref(false);
+const timeRange = ref({} as TimeRange);
 const handleShowLog = (node_info?: any, _size?: number) => {
   logfile_params.value = node_info;
   if (node_info) {
@@ -227,6 +239,10 @@ const handleShowLog = (node_info?: any, _size?: number) => {
   if (_size) {
     log_query.params.size = _size;
   }
+  if (isRangeLog.value) {
+    log_query.params.queryfield_range_gte = timeRange.value.start.getTime()
+    log_query.params.queryfield_range_lte = timeRange.value.end.getTime()
+  }
   getELKProcessLogStream(log_query).then((res: any) => {
     if (res.data.code === 200) {
       if (res.data.data.hits.length > 0) {
@@ -245,6 +261,19 @@ const getMoreLogStream = (size: number) => {
   handleShowLog(logfile_params.value, size);
 }
 
+const getRangeTimeLog = (time_range: TimeRange) => {
+  if (time_range) {
+    isRangeLog.value = true;
+    timeRange.value = time_range;
+    handleShowLog(logfile_params.value, 20);
+  }
+}
+// 关闭日志流弹窗事件
+const closeDialog = () => {
+  isRangeLog.value = false;
+  timeRange.value = { start: new Date(new Date().getTime() - 2 * 60 * 60 * 1000), end: new Date() }
+}
+
 /* 
 * 监听topo图节点右键查看日志事件
 * node_click_info:{host_name:节点|父节点name,node_id:节点id,process_name:进程name}
diff --git a/web/src/views/topoLogs/index.vue b/web/src/views/topoLogs/index.vue
index 2e83281..f910180 100644
--- a/web/src/views/topoLogs/index.vue
+++ b/web/src/views/topoLogs/index.vue
@@ -42,8 +42,9 @@
         <barChart :results="event_logs" />
       </el-tab-pane>
     </el-tabs>
-    <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 v-model="dialog" :title="title" width="80%" @close="closeDialog" destroy-on-close>
+      <logStream v-show="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream"
+        v-on:get-time-range-log="getRangeTimeLog" />
     </el-dialog>
   </div>
 
@@ -211,6 +212,8 @@ const handleGetData = () => {
 const log_stream = ref([]);
 const logfile_params = ref({} as any);
 const log_total = ref(0);
+const isRangeLog = ref(false);
+const timeRange = ref({} as TimeRange);
 const handleShowLog = (_process_info?: any, _size?: number) => {
   logfile_params.value = _process_info;
   if (_process_info) {
@@ -232,6 +235,10 @@ const handleShowLog = (_process_info?: any, _size?: number) => {
   if (_size) {
     log_query.params.size = _size;
   }
+  if (isRangeLog.value) {
+    log_query.params.queryfield_range_gte = timeRange.value.start.getTime()
+    log_query.params.queryfield_range_lte = timeRange.value.end.getTime()
+  }
   getELKProcessLogStream(log_query).then((res: any) => {
     if (res.data.code === 200) {
       if (res.data.data.hits.length > 0) {
@@ -247,6 +254,23 @@ const handleShowLog = (_process_info?: any, _size?: number) => {
 const getMoreLogStream = (size: number) => {
   handleShowLog(logfile_params.value, size);
 }
+interface TimeRange {
+  start: Date,
+  end: Date
+}
+const getRangeTimeLog = (time_range: TimeRange) => {
+  if (time_range) {
+    isRangeLog.value = true;
+    timeRange.value = time_range;
+    handleShowLog(logfile_params.value, 20);
+  }
+}
+
+// 关闭日志流弹窗事件
+const closeDialog = () => {
+  isRangeLog.value = false;
+  timeRange.value = { start: new Date(new Date().getTime() - 2 * 60 * 60 * 1000), end: new Date() }
+}
 
 </script>
 
diff --git a/web/src/views/topoLogs/logStream.vue b/web/src/views/topoLogs/logStream.vue
index 2281cf4..f34d562 100644
--- a/web/src/views/topoLogs/logStream.vue
+++ b/web/src/views/topoLogs/logStream.vue
@@ -1,9 +1,16 @@
 <template>
   <div style="width: 100%;" v-loading="isloading">
     <div class="search">
-      选择等级：<el-select v-model="level_key" placeholder="请选择日志等级" style="width: 240px" @change="searchLevel">
-        <el-option v-for="item in level_options" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
+      <div class="level">
+        选择等级：<el-select v-model="level_key" placeholder="请选择日志等级" style="width: 240px" @change="searchLevel">
+          <el-option v-for="item in level_options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>&emsp;
+      <div class="time">
+        时间范围：
+        <el-date-picker v-model="log_time" type="datetimerange" range-separator="To" start-placeholder="Start date"
+          end-placeholder="End date" @change="ChangeTimeRange" @clear="ChangeTimeRange" />
+      </div>
     </div>
     <div class="infinite-list">
       <p class="head">
@@ -52,7 +59,7 @@ let props = defineProps({
   log_data: {
     type: Array as () => logItem[],
     require: false,
-    default: [{ date: '暂无', level: '暂无', message: '暂无' }]
+    default: []
   },
   log_total: {
     type: Number,
@@ -62,6 +69,9 @@ let props = defineProps({
 })
 onMounted(() => {
   isloading.value = true;
+  if (props.log_data.length == 0) {
+    isloading.value = false;
+  }
 })
 watchEffect(() => {
   if (props.log_data.length > 0) {
@@ -74,9 +84,13 @@ watchEffect(() => {
     }
   }
 })
-
+interface TimeRange {
+  start: Date,
+  end: Date
+}
 let emit = defineEmits<{
-  getMore: [value: number]
+  getMore: [value: number],
+  getTimeRangeLog: [time_range: TimeRange]
 }>()
 
 // 等级搜索功能
@@ -86,11 +100,22 @@ const searchLevel = (level: string) => {
   console.log(level)
 }
 
+// 时间筛选功能
+const log_time = ref<[Date, Date]>([
+  new Date(new Date().getTime() - 2 * 60 * 60 * 1000),
+  new Date(),
+])
+const ChangeTimeRange = (value: any) => {
+  if (value) {
+    log_time.value[0] = value[0]
+    log_time.value[1] = value[1]
+    emit('getTimeRangeLog', { start: value[0], end: value[1] });
+  }
+}
 
 const log_size = ref(20);
 let is_continue = ref(true);
 const load = () => {
-
   if (!total_logs.value || !is_continue.value) return;
   if (log_size.value >= total_logs.value) {
     log_size.value = total_logs.value;
@@ -107,6 +132,9 @@ const load = () => {
 <style scoped lang="scss">
 .search {
   height: 44px;
+  display: flex;
+  align-items: center;
+
 }
 
 .infinite-list {
-- 
Gitee