更新日志监控

acs/hd/nladmin-system/src/main/java/org/nl/modules/loki/service/impl/LokiServiceImpl.java

@@ -20,6 +20,9 @@ public class LokiServiceImpl implements LokiService {
     @Value("${loki.url}")
     private String lokiUrl;
 
+    @Value("${loki.systemName}")
+    private String systemName;
+
     @Override
     public JSONObject getLabels() {
         String result = HttpUtil.get(lokiUrl + "/labels", CharsetUtil.CHARSET_UTF_8);
@@ -58,7 +61,7 @@ public class LokiServiceImpl implements LokiService {
          * http://localhost:3100/loki/api/v1/query_range?query={host="localhost"} |= ``&limit=1500&start=1641453208415000000&end=1660027623419419002
          */
         JSONObject parse = null;
-        String query = lokiUrl + "/query_range?query={" + logLabel + "=\"" + logLabelValue + "\"} |= `" + text + "`";
+        String query = lokiUrl + "/query_range?query={system=\"" + systemName + "\", " + logLabel + "=\"" + logLabelValue + "\"} |= `" + text + "`";
         String result = "";
         if (start==0L) {
             result = HttpUtil.get(query + "&limit=" + limit + "&direction=" + direction, CharsetUtil.CHARSET_UTF_8);

acs/hd/nladmin-system/src/main/resources/config/application-dev.yml

@@ -161,4 +161,5 @@ jetcache:
         - redis://127.0.0.1:6379
 loki:
   url: http://localhost:3100/loki/api/v1
+  systemName: acs
 

acs/hd/nladmin-system/src/main/resources/logback-spring.xml

@@ -15,7 +15,9 @@ https://juejin.cn/post/6844903775631572999
               value="%black(%contextName-) %red(%d{yyyy-MM-dd HH:mm:ss}) %green([%thread]) %highlight(%-5level) %boldMagenta(%logger{36}) - %gray(%msg%n)"/>
     <springProperty scope="context" name="logPath" source="logging.file.path" defaultValue="logs"/>
     <springProperty scope="context" name="lokiUrl" source="loki.url"/>
+    <springProperty scope="context" name="systemName" source="loki.systemName"/>
     <property name="LOKI_URL" value="${lokiUrl}"/>
+    <property name="SYSTEM_NAME" value="${systemName}"/>
     <!--定义日志文件的存储地址 勿在 LogBack 的配置中使用相对路径-->
     <property name="LOG_HOME" value="${logPath}"/>
     <!--引入默认的一些设置-->
@@ -70,7 +72,7 @@ https://juejin.cn/post/6844903775631572999
         </http>
         <format>
             <label>
-                <pattern>root=root,level=%level,logType=%X{log_file_type:-logType},device=%X{device_code_log:-device}</pattern>
+                <pattern>system=${SYSTEM_NAME},level=%level,logType=%X{log_file_type:-logType},device=%X{device_code_log:-device}</pattern>
             </label>
             <message>
                 <pattern>${log.pattern}</pattern>

acs/qd/src/views/monitor/logback/index.vue

@@ -120,7 +120,7 @@ export default {
       logLabelValue: '',
       timeRange: '',
       text: '',
-      limits: '',
+      limits: 100,
       direction: 'backward',
       pickerOptions: {
         shortcuts: [{
@@ -271,9 +271,9 @@ export default {
       })
     },
     queryData() {
+      console.log('参数：', queryParam)
       // 清空查询数据
       this.clearParam()
-      console.log(this.timeRange)
       if (this.logLabel !== '') {
         queryParam.logLabel = this.logLabel
       }
@@ -298,19 +298,32 @@ export default {
         queryParam.text = this.text
       }
       if (this.limits !== '') {
+        console.log(this.limits)
         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 !== 0) {
+        if (res.data.result.length === 1) {
           this.logs = res.data.result[0].values
-          var ansi_up = new AnsiUp()
           for (const i in res.data.result[0].values) {
             this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
           }
+        } else if (res.data.result.length > 1) {
+          // 清空
+          this.logs = []
+          for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
+            for (const values_index in res.data.result[j].values) {
+              this.logs.push(res.data.result[j].values[values_index])
+            }
+          }
+          console.log(this.logs)
+          for (const k in this.logs) {
+            this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
+          }
         } else {
           this.showEmpty = true
           this.emptyText = '暂无日志信息，请选择时间段试试'
@@ -350,16 +363,32 @@ export default {
           queryParam.start = this.logs[this.logs.length - 1][0]
           queryParam.end = (parseFloat(this.logs[this.logs.length - 1][0]) + parseFloat((queryParam.end - queryParam.start).toString())).toString()
         }
+        var ansi_up = new AnsiUp()
         logOperation.getLogData(queryParam).then(res => {
           console.log(res)
           this.showEmpty = false
-          if (res.data.result.length !== 0) {
+          if (res.data.result.length === 1) {
             const log = res.data.result[0].values
-            var ansi_up = new AnsiUp()
             for (const i in res.data.result[0].values) {
               log[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
               this.logs.push(log[i])
             }
+          } else if (res.data.result.length > 1) {
+            const tempArray = [] // 数据需要处理，由于是追加数组，所以需要用额外变量来存放
+            // 刷新就是添加，不清空原数组
+            for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
+              for (const values_index in res.data.result[j].values) {
+                tempArray.push(res.data.result[j].values[values_index])
+              }
+            }
+            console.log(tempArray)
+            for (const k in tempArray) {
+              tempArray[k][1] = ansi_up.ansi_to_html(tempArray[k][1]) // 数据转换
+              this.logs.push(tempArray[k]) // 追加数据
+            }
+          } else {
+            this.showEmpty = true
+            this.emptyText = '暂无日志信息，请选择时间段试试'
           }
         })
       }
@@ -377,11 +406,13 @@ export default {
       }
     },
     intervalLogs() {
+      console.log('定时的参数：', queryParam)
+      // 组织参数
       // 设置开始时间和结束时间
       // 开始为现在时间
       const start = new Date()
       const end = new Date()
-      // 时区判断
+      // 时差判断
       const zone = queryParam.end - queryParam.start
       if (zone === 0) {
         start.setTime(start.getTime() - 3600 * 1000 * 6)
@@ -389,22 +420,30 @@ export default {
       } else {
         queryParam.start = (start.getTime() * 1000000 - zone).toString()
       }
-      // console.log((start.getTime() * 1000000).toString())
-      // console.log((end.getTime() * 1000000).toString())
-      // this.direction = 'backward'
-      // queryParam.direction = this.direction
       queryParam.end = (end.getTime() * 1000000).toString()
-      console.log(queryParam.start)
-      console.log(queryParam.end)
+      queryParam.limits = this.limits
+      var ansi_up = new AnsiUp() // 后端日志格式转化
       logOperation.getLogData(queryParam).then(res => {
-        console.log('in', res)
+        console.log('res', res)
         this.showEmpty = false
-        if (res.data.result.length !== 0) {
+        debugger
+        if (res.data.result.length === 1) {
           this.logs = res.data.result[0].values
-          var ansi_up = new AnsiUp()
-          for (const i in res.data.result[0].values) {
+          for (const i in res.data.result[0].values) { // 格式转换
             this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
           }
+        } else if (res.data.result.length > 1) {
+          // 清空
+          this.logs = []
+          for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
+            for (const values_index in res.data.result[j].values) {
+              this.logs.push(res.data.result[j].values[values_index])
+            }
+          }
+          console.log(this.logs)
+          for (const k in this.logs) {
+            this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
+          }
         } else {
           this.showEmpty = true
           this.emptyText = '暂无日志信息，请选择时间段试试'