新增路由监控功能

sop-admin/sop-admin-vue/src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
 import Layout from '@/layout'
@@ -73,18 +73,18 @@ export const constantRoutes = [
         component: () => import('@/views/service/route'),
         meta: { title: '路由管理' }
       },
+      {
+        path: 'monitor',
+        name: 'Monitor',
+        component: () => import('@/views/service/monitor'),
+        meta: { title: '路由监控' }
+      },
       {
         path: 'limit',
         name: 'Limit',
         component: () => import('@/views/service/limit'),
         meta: { title: '限流管理' }
       },
-      {
-        path: 'log',
-        name: 'Log',
-        component: () => import('@/views/service/log'),
-        meta: { title: '监控日志' }
-      },
       {
         path: 'blacklist',
         name: 'Blacklist',
@@ -123,19 +123,19 @@ export const constantRoutes = [
   },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
-]
+];
 
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
-})
+});
 
-const router = createRouter()
+const router = createRouter();
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-  const newRouter = createRouter()
+  const newRouter = createRouter();
   router.matcher = newRouter.matcher // reset router
 }
 

sop-admin/sop-admin-vue/src/views/service/monitor.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini">
+      <el-form-item label="接口名">
+        <el-input v-model="searchFormData.routeId" :clearable="true" placeholder="输入接口名或版本号" style="width: 250px;" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="loadTable">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-alert
+      title="监控数据保存在网关服务器，重启网关数据会清空。"
+      type="info"
+      :closable="false"
+      style="margin-bottom: 10px"
+    />
+    <el-table
+      :data="tableData"
+      border
+      :default-expand-all="false"
+      row-key="id"
+      height="500"
+      empty-text="无数据"
+    >
+      <el-table-column
+        fixed
+        prop="instanceId"
+        label="网关实例"
+        width="200"
+      >
+        <template slot-scope="scope">
+          <span v-if="!scope.row.children">{{ scope.row.instanceId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed
+        prop="name"
+        label="接口名 (版本号)"
+        width="280"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.name + (scope.row.version ? ' (' + scope.row.version + ')' : '') }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="serviceId"
+        label="serviceId"
+        width="170"
+      />
+      <el-table-column
+        prop="maxTime"
+        label="最大耗时(ms)"
+        width="125"
+      >
+        <template slot="header">
+          最大耗时(ms)
+          <i
+            class="el-icon-question"
+            style="cursor: pointer"
+            @click="$alert('耗时计算：签名验证成功后开始，微服务返回结果后结束')"
+          ></i>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="minTime"
+        label="最小耗时(ms)"
+        width="120"
+      />
+      <el-table-column
+        prop="avgTime"
+        label="平均耗时(ms)"
+        width="120"
+      />
+      <el-table-column
+        prop="totalCount"
+        label="总调用次数"
+        width="100"
+      />
+      <el-table-column
+        prop="successCount"
+        label="成功次数"
+        width="100"
+      />
+      <el-table-column
+        prop="errorCount"
+        label="失败次数"
+        width="100"
+      >
+        <template slot="header">
+          失败次数
+          <i
+            class="el-icon-question"
+            style="cursor: pointer"
+            @click="$alert('只统计微服务返回的未知错误，JSR-303验证错误算作成功')"
+          ></i>
+        </template>
+        <template slot-scope="scope">
+          <el-link
+            v-if="scope.row.errorCount > 0"
+            :underline="false"
+            type="danger"
+            style="text-decoration: underline;"
+            @click="onShowErrorDetail(scope.row)"
+          >
+            {{ scope.row.errorCount }}
+          </el-link>
+          <span v-if="scope.row.errorCount === 0">0</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- dialog -->
+    <el-dialog
+      title="错误详情"
+      :visible.sync="logDetailVisible"
+      width="60%"
+    >
+      <div style="overflow-x: auto" v-html="errorMsgDetail"></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="logDetailVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchFormData: {
+        routeId: ''
+      },
+      tableData: [],
+      logDetailVisible: false,
+      errorMsgDetail: ''
+    }
+  },
+  created() {
+    this.loadTable()
+  },
+  methods: {
+    loadTable: function() {
+      this.post('monitor.data.list', this.searchFormData, function(resp) {
+        const data = resp.data
+        this.tableData = data.monitorInfoData
+      })
+    },
+    onShowErrorDetail: function(row) {
+      const errorMsgList = row.errorMsgList
+      this.errorMsgDetail = errorMsgList.length > 0 ? errorMsgList.join('<br>') : '无内容'
+      this.logDetailVisible = true
+    }
+  }
+}
+</script>