Blame view

ant-design-vue-base/src/views/modules/monitor/HttpTrace.vue 4.45 KB
1a2d344e   wxy   初始化项目
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
137
138
139
140
141
142
143
144
145
146
147
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 }} </a-tag>
            <a-tag v-else-if="text < 201" color="green">{{ text }} </a-tag>
            <a-tag v-else-if="text < 399" color="cyan">{{ text }} </a-tag>
            <a-tag v-else-if="text < 403" color="orange">{{ text }} </a-tag>
            <a-tag v-else-if="text < 501" color="red">{{ text }} </a-tag>
            <span v-else>{{ text }}</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>