jeecg-boot 2.0 模块开发版本发布

ant-design-jeecg-vue/src/views/modules/monitor/HttpTrace.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-skeleton active :loading="loading" :paragraph="{rows: 17}">
+    <a-card :bordered="false" class="card-area">
+
+      <a-alert type="info" :showIcon="true">
+        <div slot="message">
+          共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
+          <a-divider type="vertical"/>
+          <a @click="handleClickUpdate">立即刷新</a>
+        </div>
+      </a-alert>
+
+      <!-- 表格区域 -->
+      <a-table
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :loading="tableLoading"
+        :scroll="{ x: 900 }"
+        style="margin-top: 20px;"
+        @change="handleTableChange">
+
+        <template slot="timeTaken" slot-scope="text">
+          <a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
+          <a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
+          <a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
+          <a-tag v-else color="red">{{ text }} ms</a-tag>
+        </template>
+
+        <template slot="responseStatus" slot-scope="text">
+          <a-tag v-if="text < 200" color="pink">{{ text }} ms</a-tag>
+          <a-tag v-else-if="text < 201" color="green">{{ text }} ms</a-tag>
+          <a-tag v-else-if="text < 399" color="cyan">{{ text }} ms</a-tag>
+          <a-tag v-else-if="text < 403" color="orange">{{ text }} ms</a-tag>
+          <a-tag v-else-if="text < 501" color="red">{{ text }} ms</a-tag>
+          <span v-else>{{ text }} ms</span>
+        </template>
+
+        <template slot="requestMethod" slot-scope="text">
+          <a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
+          <a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
+          <a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
+          <a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
+          <span v-else>{{ text }} ms</span>
+        </template>
+
+      </a-table>
+
+    </a-card>
+  </a-skeleton>
+</template>
+
+<script>
+  import moment from 'moment'
+  import { getAction } from '@/api/manage'
+
+  moment.locale('zh-cn')
+
+  export default {
+    data() {
+      return {
+        advanced: false,
+        dataSource: [],
+        pagination: {
+          defaultPageSize: 10,
+          defaultCurrent: 1,
+          pageSizeOptions: ['10', '20', '30', '40', '100'],
+          showQuickJumper: true,
+          showSizeChanger: true,
+          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
+        },
+        loading: true,
+        tableLoading: true
+      }
+    },
+    computed: {
+      columns() {
+        return [{
+          title: '请求时间',
+          dataIndex: 'timestamp',
+          customRender(text) {
+            return moment(text).format('YYYY-MM-DD HH:mm:ss')
+          }
+        }, {
+          title: '请求方法',
+          dataIndex: 'request.method',
+          scopedSlots: { customRender: 'requestMethod' },
+          filters: [
+            { text: 'GET', value: 'GET' },
+            { text: 'POST', value: 'POST' },
+            { text: 'PUT', value: 'PUT' },
+            { text: 'DELETE', value: 'DELETE' }
+          ],
+          filterMultiple: true,
+          onFilter: (value, record) => record.request.method.includes(value)
+        }, {
+          title: '请求URL',
+          dataIndex: 'request.uri',
+          customRender(text) {
+            return text.split('?')[0]
+          }
+        }, {
+          title: '响应状态',
+          dataIndex: 'response.status',
+          scopedSlots: { customRender: 'responseStatus' }
+        }, {
+          title: '请求耗时',
+          dataIndex: 'timeTaken',
+          scopedSlots: { customRender: 'timeTaken' }
+        }]
+      }
+    },
+    mounted() {
+      this.fetch()
+    },
+    methods: {
+
+      handleClickUpdate() {
+        this.fetch()
+      },
+
+      handleTableChange() {
+        this.fetch()
+      },
+
+      fetch() {
+        this.tableLoading = true
+        getAction('actuator/httptrace').then((data) => {
+          let filterData = []
+          for (let d of data.traces) {
+            if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
+              filterData.push(d)
+            }
+          }
+          this.dataSource = filterData
+        }).catch((e) => {
+          console.error(e)
+          this.$message.error('获取HTTP信息失败')
+        }).finally(() => {
+          this.loading = false
+          this.tableLoading = false
+        })
+      }
+
+    }
+  }
+</script>
+<style></style>