loki修改

2022-10-11 15:36:35 +08:00
parent 28abb527d9
commit b44858bf9b
7 changed files with 102 additions and 123 deletions
--- a/nladmin-ui/src/views/loki/api/loki.js
+++ b/nladmin-ui/src/views/loki/api/loki.js
@@ -1,20 +1,5 @@
 import request from '@/utils/request'

-export function getAllLabels() {
-  return request({
-    url: 'api/loki/labels',
-    method: 'get'
-  })
-}
-
-export function getAllValues(label) {
-  return request({
-    url: 'api/loki/values',
-    method: 'post',
-    data: label
-  })
-}
-
 export function getLogData(param) {
  return request({
    url: 'api/loki/logs',
@@ -23,4 +8,11 @@ export function getLogData(param) {
  })
 }

-export default { getAllLabels, getAllValues, getLogData }
+export function labelsValues() {
+  return request({
+    url: 'api/loki/labels/values',
+    method: 'get'
+  })
+}
+
+export default { getLogData, labelsValues }
--- a/nladmin-ui/src/views/loki/view/index.vue
+++ b/nladmin-ui/src/views/loki/view/index.vue
@@ -2,34 +2,23 @@
  <div class="app-container">
    <div class="head-container">
      <!--工具栏-->
-      <el-form :inline="true" class="demo-form-inline">
-        <el-form-item label="标签">
-          <el-select v-model="logLabel" filterable placeholder="请选择标签" size="mini" @change="getValues">
-            <el-option
-              v-for="item in labelOptions"
-              :key="item.index"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
+      <el-form :inline="true" class="demo-form-inline" label-suffix=":" label-width="80px">
+        <el-form-item label="日志标签">
+          <el-cascader
+            v-model="labelAndValue"
+            :options="labelsOptions"
+            @change="queryData"
+            placeholder="请选择标签"/>
        </el-form-item>
-        <el-form-item label="=">
-          <el-select v-model="logLabelValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
-            <el-option
-              v-for="item in labelValueOptions"
-              :key="item.index"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
+        <el-form-item label="关键字">
+          <el-input
+            v-model="text"
+            size="mini"
+            placeholder="请输入内容"
+            clearable
+          />
        </el-form-item>
-        <el-form-item label="方向">
-          <el-radio-group v-model="direction" size="mini" @change="queryData">
-            <el-radio label="backward">backward</el-radio>
-            <el-radio label="forward">forward</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="时间范围" style="margin-left: 10px" v-show="!showOptions">
+        <el-form-item label="时间范围" v-show="!showOptions">
          <el-date-picker
            @change="queryData"
            @blur="queryData"
@@ -43,7 +32,7 @@
            align="right"
          />
        </el-form-item>
-        <el-form-item v-show="showOptions" label="时差" style="margin-left: 10px">
+        <el-form-item v-show="showOptions" label="时间段">
          <el-select v-model="timeZoneValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
            <el-option
              v-for="item in timeZoneOptions"
@@ -58,18 +47,13 @@
            <span class="el-icon-sort" @click="changeShow" />
          </el-tooltip>
        </el-form-item>
-      </el-form>
-      <el-form :inline="true" class="demo-form-inline">
-        <el-form-item label="关键字">
-          <el-input
-            v-model="text"
-            style="width: 300px"
-            size="mini"
-            placeholder="请输入内容"
-            clearable
-          />
+        <el-form-item label="方向">
+          <el-radio-group v-model="direction" size="mini" @change="queryData">
+            <el-radio label="backward">backward</el-radio>
+            <el-radio label="forward">forward</el-radio>
+          </el-radio-group>
        </el-form-item>
-        <el-form-item label="条数" style="margin-left: 10px">
+        <el-form-item label="显示条数">
          <el-input-number
            v-model="limits"
            size="mini"
@@ -79,7 +63,7 @@
            :step="100"
          />
        </el-form-item>
-        <el-form-item label="滚动步数" style="margin-left: 10px">
+        <el-form-item label="滚动步数">
          <el-input-number
            v-model="scrollStep"
            size="mini"
@@ -132,10 +116,8 @@ export default {
  name: 'Loki',
  data() {
    return {
-      labelOptions: [], // 标签数据
-      labelValueOptions: [], // 标签值
-      logLabel: '',
-      logLabelValue: '',
+      labelAndValue: [], // 搜索的值
+      labelsOptions: [], // 所有标签和对应所有值数据
      timeRange: [],
      text: '',
      limits: 100,
@@ -214,7 +196,7 @@ export default {
    window.addEventListener('scroll', this.handleScroll)
  },
  created() {
-    this.initLabelOptions()
+    this.initLabelsValues()
  },
  // 关闭定时器 - 加了缓存就必须使用deactivated
  deactivated() {
@@ -230,25 +212,18 @@ export default {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
-    initLabelOptions() { // 获取lables
-      logOperation.getAllLabels().then(res => {
-        this.labelOptions = res.data
-      })
-    },
-    getValues() {
-      this.logLabelValue = null
-      logOperation.getAllValues(this.logLabel).then(res => {
-        this.labelValueOptions = res.data
+    initLabelsValues() {
+      logOperation.labelsValues().then(res => {
+        this.labelsOptions = res
      })
    },
    queryData() {
+      console.log(this.labelAndValue)
      // 清空查询数据
      this.clearParam()
-      if (this.logLabel !== '') { // 标签
-        queryParam.logLabel = this.logLabel
-      }
-      if (this.logLabelValue !== '') { // 标签值
-        queryParam.logLabelValue = this.logLabelValue
+      if (this.labelAndValue.length > 0) {
+        queryParam.logLabel = this.labelAndValue[0]
+        queryParam.logLabelValue = this.labelAndValue[1]
      }
      if (queryParam.logLabelValue === null) { // 判空
        this.$message({
@@ -263,14 +238,8 @@ export default {
      if (this.timeRange.length !== 0) { // 如果是输入时间范围
        queryParam.start = (new Date(this.timeRange[0]).getTime() * 1000000).toString()
        queryParam.end = (new Date(this.timeRange[1]).getTime() * 1000000).toString()
-        console.log(queryParam.start)
-        console.log('-----------------------------')
-        console.log(queryParam.end)
      }
      if (this.timeZoneValue) {
-        // console.log('时差：', this.timeZoneValue)
-        // console.log('start时间：', new Date().getTime() - this.timeZoneValue)
-        // console.log('end时间：', new Date().getTime())
        const time = new Date()
        queryParam.start = ((time.getTime() - this.timeZoneValue) * 1000000).toString()
        queryParam.end = (time.getTime() * 1000000).toString()
@@ -282,10 +251,8 @@ export default {
        queryParam.limits = this.limits
      }
      queryParam.direction = this.direction
-      console.log('最后参数：', queryParam)
      var ansi_up = new AnsiUp()
      logOperation.getLogData(queryParam).then(res => {
-        console.log('结果', res)
        this.showEmpty = false
        if (res.data.result.length === 1) {
          this.logs = res.data.result[0].values
@@ -331,7 +298,6 @@ export default {
      const scrollHeight = document.documentElement.scrollHeight// 内容高度
      const bottomest = Math.ceil(scrollTop + clientHeight)
      if (bottomest >= scrollHeight) {
-        console.log(1)
        // 加载新数据
        queryParam.limits = this.scrollStep
        queryParam.direction = this.direction
@@ -346,7 +312,6 @@ export default {
        if (zone === 0) {
          zone = 3600 * 1000 * 6
        }
-        console.log('时间差:', zone)
        if (this.direction === 'backward') { // 设置时间区间
          queryParam.start = (this.logs[this.logs.length - 1][0] - zone).toString()
          queryParam.end = this.logs[this.logs.length - 1][0]
@@ -354,7 +319,6 @@ export default {
          queryParam.start = this.logs[this.logs.length - 1][0]
          queryParam.end = (parseFloat(this.logs[this.logs.length - 1][0]) + parseFloat(zone.toString())).toString()
        }
-        console.log('滚动的参数：', queryParam)
        var ansi_up = new AnsiUp()
        logOperation.getLogData(queryParam).then(res => {
          this.showEmpty = false
@@ -471,7 +435,7 @@ export default {

 <style scoped>
 .log-warpper {
-  word-break: break-all;
+  word-break: break-word;
  word-wrap: break-word
 }
 </style>