1. 首页
  2. 文章中心
  3. [其他] 代码片

日志上下文浏览 - 自定义 Drawer 和 Scroll 实现

137 阅读 0 评论
我是靠谱客的博主 整齐帆布鞋，这篇文章主要介绍日志上下文浏览 - 自定义 Drawer 和 Scroll 实现，现在分享给大家，希望可以做个参考。

1. 前言

    运维系统接入日志查询，开发日志上下文功能方便查看日志。
    参照阿里云日志服务控制台上下文浏览。

图1-1.日志上下文浏览图

2. 效果

    查看日志列表时，选中某条日志查看其上下文，查询指定日志前后紧邻时间的记录。效果是抽屉加滚动列表；element-ui 组件支持InfiniteScroll（无限滚动组件）和Drawer（抽屉组件）实现。此处使用原生HTML 标签及CSS 样式自定义实现Drawer 效果。

图2-1.日志查询列表图
    选中某行日志记录，展开日志可选择查询上下文，上下文查询支持查询紧邻的更早时间记录，更新可查看当前日志时间点之后紧邻的记录。

图2-2.日志查询上下文图

图2-3.日志查询上下文更早日志图

图2-4.日志查询上下文更新日志图

3. 实现

    日志查询模块文件结构如图

图3-1.日志查询文件结构图

    NSTableAnalysisLog.js 和NSTableAnalysisLog.vue 是图2-1.日志查询日志列表图中的日志表单列表效果页。日志上下文效果在index.vue 文件实现。
    此处贴出index.vue 和index.js 文件代码。

3.1 index.vue

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
  <div class="page-operate-analysis-log">
    <ns-table-analysis-log/>
    <!-- <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="rtl">
      <span>我来啦!</span>
    </el-drawer> -->
    <div class="ns-drawer">
      <div :class="drawer?'mask':''"/>
      <div :class="drawer?'open':'close'">
        <ns-button @click="closeDrawer()" class="ns-drawer-close" icon="el-icon-close" circle></ns-button>
        <div class="ns-drawer-header">
          日志上下文浏览
        </div>
        <br/>
        <ns-button class="ns-button" type="info" @click="handleTopMore">更早</ns-button>
        <div class="ns-loading">
          <span v-if="topLoading">加载中...</span>
        </div>
        <div class="ns-data-log" v-for="(dataLog, index) in dataLogList" :key="index">
          <pre>
          <font v-if="dataLog.orderNumber > 0" color=red>【{{dataLog.orderNumber}}】</font><font v-if="dataLog.orderNumber < 0" color=blue>【{{dataLog.orderNumber}}】</font><font v-if="dataLog.orderNumber === 0" color=black>【{{dataLog.orderNumber}}】</font><b>【{{dataLog.time}}】{{dataLog.level}}：{{dataLog.location}}</b>
          <b>日志信息</b>：{{dataLog.message}}
          <b>日志详情</b>：{{dataLog.log}}
          </pre>
        </div>
        <div class="ns-loading">
          <span v-if="buttomLoading">加载中...</span>
          <span v-if="!topLoading && !buttomLoading && dataLogList.length === 0">暂无数据</span>
        </div>
        <ns-button class="ns-button" type="info" @click="handleButtomMore">更新</ns-button>
      </div>
    </div>
  </div>
</template>

<script>
import NsTableAnalysisLog from './NsTableAnalysisLog'
import index from './src'
index.components = {
  NsTableAnalysisLog
}
export default index
</script>
<style>
  pre {
    display: block;
    font-family: -moz-fixed;
    margin: 1em 0;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .ns-button {
    width: 100%;
  }
  .ns-data-log {
    background: #FAFAFA;
    margin: 5px;
  }
  .ns-loading {
     text-align: center;
     font-weight: 700;
     margin: 10px;;
  }
  .ns-drawer {
    .mask {
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .1);
    }
    .close {
      position: absolute;
      z-index: 10;
      left: -800px;
      top: 0;
      width: 800px;
      height: 100%;
      background: #fff;
      transition: left linear 1s;
    }
    .open {
      z-index: 10;
      right: 0;
      top: 0;
      width: 70%;
      height: 100%;
      padding-left: 1%;
      padding-right: 1%;
      float: right;
      overflow-y: auto;
      position: fixed;
      background: #fff;
      transition: left linear 1s;
      .ns-drawer-header {
        margin-top: 10%;
        font-size: 14px;
        font-weight: 700;
        float: right;
      }
      .ns-drawer-close {
        margin-top: 5%;
        position: fixed;
      }
    }
  }
</style>

3.2 index.js

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import NsTableAnalysisLog from '../NsTableAnalysisLog'
// import InfiniteScroll from 'vue-infinite-scroll'
// import drawer from 'drawer'
export default {
  name: 'OperateAnalysisLog',
  components: {
    NsTableAnalysisLog
  },
  data () {
    return {
      // 记录日志库
      platformSLSType: '',
      startTime: '',
      endTime: '',
      dataLogList: [],
      // 加载中
      topLoading: false,
      topNoMore: false,
      buttomLoading: false,
      buttomNoMore: false,
      // 抽屉
      drawer: false
    }
  },
  methods: {
    showDrawer (row, platformSLSType, date) {
      this.buttomLoading = true
      this.platformSLSType = platformSLSType
      this.startTime = date[0]
      this.endTime = date[1]
      this.drawer = true
      let type = 0
      this.handleCursorLogContext(row, type)
    },
    closeDrawer () {
      this.buttomLoading = false
      this.topLoading = false
      this.drawer = false
      this.dataLogList = []
    },
    handleButtomMore () {
      this.buttomLoading = true
      // 查询之后的日志
      let type = 0
      let size = this.dataLogList.length - 1
      let row = this.dataLogList[size]
      this.handleCursorLogContext(row, type)
    },
    handleTopMore () {
      this.topLoading = true
      // 查询更早的日志
      let type = 1
      let row = this.dataLogList[0]
      this.handleCursorLogContext(row, type)
    },
    // 上下文查询，type = 0 更新，type = 1 更早
    handleCursorLogContext (row, type) {
      if (row === undefined || row === null) {
        this.$notify.warning('当前日志上下文暂无数据！')
        this.buttomLoading = false
        this.topLoading = false
        return
      }
      if (this.dataLogList.length > 300) {
        this.$notify.warning('当前日志上下文已超出300条记录！')
        this.buttomLoading = false
        this.topLoading = false
        return
      }
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        fromTime: row.time,
        logStore: this.platformSLSType,
        type: type
      }
      this.$http.fetch(this.$api.operate.analysisLog.findCursorLogList, params)
        .then((resp) => {
          let resultLength = resp.result.length
          let dataLogListLength = this.dataLogList.length
          if (type === 0) {
            let resultData = []
            for (var index = 0; index < resultLength; index++) {
              let resultIndex = resp.result[index]
              let indexOfFlag = false
              for (let dataLog of this.dataLogList) {
                if (dataLog.level === resultIndex.level && dataLog.location === resultIndex.location && dataLog.log === resultIndex.log && dataLog.message === resultIndex.message && dataLog.time === resultIndex.time) {
                  indexOfFlag = true
                }
              }
              if (indexOfFlag) {
                continue
              }
              if (index === 0 && this.dataLogList.length === 0) {
                resultIndex.orderNumber = 0
              } else if (index === 0 && this.dataLogList.length > 0) {
                resultIndex.orderNumber = this.dataLogList[this.dataLogList.length - 1].orderNumber + 1
              } else if (index > 0) {
                resultIndex.orderNumber = resp.result[index - 1].orderNumber + 1
              }
              resultData.push(resultIndex)
            }
            this.dataLogList = this.dataLogList.concat(resultData)
          } else if (type === 1) {
            for (var i = resultLength - 1; i > 0; i--) {
              if (this.dataLogList.indexOf(resp.result[i]) !== -1) {
                continue
              }
              // 清空临时数据
              let tempData = []
              if (i === resultLength - 1 && this.dataLogList.length === 0) {
                resp.result[i].orderNumber = 0
              } else if (i === resultLength - 1 && this.dataLogList.length > 0) {
                resp.result[i].orderNumber = this.dataLogList[0].orderNumber - 1
                tempData.push(resp.result[i])
                this.dataLogList = tempData.concat(this.dataLogList)
              } else if (i > 0) {
                resp.result[i].orderNumber = resp.result[i + 1].orderNumber - 1
                tempData.push(resp.result[i])
                this.dataLogList = tempData.concat(this.dataLogList)
              }
            }
          }
          if (dataLogListLength === this.dataLogList.length) {
            this.$notify.warning('暂无更多数据！')
          }
        }).catch((resp) => {
          this.$notify.warning(resp.msg)
        }).finally(() => {
          this.buttomLoading = false
          this.topLoading = false
        })
    }
  }
}

3.3 附件：日志记录实体类SLSMessageVo.java

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import io.swagger.annotations.ApiModelProperty;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Setter
@Getter
@ToString
public class SLSMessageVo {

    @ApiModelProperty(value = "日志级别")
    private String level;
    @ApiModelProperty(value = "location")
    private String location;
    @ApiModelProperty(value = "日志信息")
    private String message;
    @ApiModelProperty(value = "日志时间")
    private String time;
    @ApiModelProperty(value = "日志详情")
    private String log;
    @ApiModelProperty(value = "序号")
    private Integer orderNumber;
}

The End

最后

以上就是整齐帆布鞋最近收集整理的关于日志上下文浏览 - 自定义 Drawer 和 Scroll 实现的全部内容，更多相关日志上下文浏览内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(91)

相关文章

ELK 7.5.0（九）ELK+Filebeat采集多个源日志（自定义索引名称）
ELK 7.5.0（九）ELK+Filebeat采集多个源日志（自定义索引名称）
filebeat介绍
filebeat介绍
日志系统 Loki vs ELK
日志系统 Loki vs ELK
分布式日志系统
分布式日志系统
日志上下文浏览 - 自定义 Drawer 和 Scroll 实现
日志上下文浏览 - 自定义 Drawer 和 Scroll 实现
NETDMIS5.0测量斜孔2023
NETDMIS5.0测量斜孔2023
NETDMIS5.0螺纹孔测量2023
NETDMIS5.0螺纹孔测量2023
NETDMIS5.0手动元素测量2023
NETDMIS5.0手动元素测量2023

评论列表共有 0 条评论

立即
投稿
返回
顶部