You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
283 lines
7.6 KiB
283 lines
7.6 KiB
<template>
|
|
<div>
|
|
<el-form label-width="100px">
|
|
<el-tabs v-model="activedTabItem">
|
|
<el-tab-pane
|
|
label="应用信息"
|
|
name="application"
|
|
>
|
|
<el-form-item label="应用名称">
|
|
<el-input
|
|
v-model="auditLog.applicationName"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="租户标识">
|
|
<el-input
|
|
v-model="auditLog.tenantId"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="租户名称">
|
|
<el-input
|
|
v-model="auditLog.tenantName"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="auditLog.impersonatorTenantId !== null"
|
|
label="模拟租户"
|
|
>
|
|
<el-input
|
|
v-model="auditLog.impersonatorTenantId"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
label="用户信息"
|
|
name="userInfo"
|
|
>
|
|
<el-form-item label="用户标识">
|
|
<el-input
|
|
v-model="auditLog.userId"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="auditLog.impersonatorUserId !== null"
|
|
label="模拟用户"
|
|
>
|
|
<el-input
|
|
v-model="auditLog.impersonatorUserId"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="用户名称">
|
|
<el-input
|
|
v-model="auditLog.userName"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="客户端标识">
|
|
<el-input
|
|
v-model="auditLog.clientId"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="客户端名称">
|
|
<el-input
|
|
v-model="auditLog.clientName"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="客户端地址">
|
|
<el-input
|
|
v-model="auditLog.clientIpAddress"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="浏览器信息">
|
|
<el-input
|
|
v-model="auditLog.browserInfo"
|
|
type="textarea"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
label="操作信息"
|
|
name="operation"
|
|
>
|
|
<el-form-item label="请求路径">
|
|
<el-input
|
|
v-model="auditLog.url"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="操作方法">
|
|
<el-input
|
|
v-model="auditLog.httpMethod"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="调用时间">
|
|
<el-input
|
|
:value="getFormatDateTime(auditLog.executionTime)"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="响应时间">
|
|
<el-input
|
|
v-model="auditLog.executionDuration"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="响应状态">
|
|
<el-input
|
|
v-model="auditLog.httpStatusCode"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="调用链标识">
|
|
<el-input
|
|
v-model="auditLog.correlationId"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
label="调用方法"
|
|
name="methodInvoke"
|
|
style="height:300px;overflow-y:auto;overflow-x:hidden;"
|
|
>
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(action, index) in getActions"
|
|
:key="index"
|
|
:timestamp="getFormatDateTime(action.executionTime)"
|
|
:type="auditLog.httpStatusCode | httpStatusCodeFilter"
|
|
placement="top"
|
|
>
|
|
<el-card>
|
|
<el-form-item label="调用服务">
|
|
<el-input
|
|
v-model="action.serviceName"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="方法名称">
|
|
<el-input
|
|
v-model="action.methodName"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="响应时间">
|
|
<el-input
|
|
v-model="action.executionDuration"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="参数列表">
|
|
<json-editor
|
|
:value="getFormatJsonValue(action.parameters)"
|
|
/>
|
|
</el-form-item>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
v-if="hasException"
|
|
label="异常信息"
|
|
name="exception"
|
|
>
|
|
<el-form-item label="异常堆栈">
|
|
<el-input
|
|
v-model="auditLog.exceptions"
|
|
type="textarea"
|
|
:rows="15"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
v-if="hasExtraProperties"
|
|
label="附加信息"
|
|
name="extraProperties"
|
|
>
|
|
<el-form-item
|
|
v-for="(key, index) in Object.keys(auditLog.extraProperties)"
|
|
:key="index"
|
|
:label="key"
|
|
>
|
|
<el-input
|
|
v-model="auditLog.extraProperties[key]"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
|
|
import { Action, AuditLog } from '@/api/auditing'
|
|
import { dateFormat } from '@/utils'
|
|
import JsonEditor from '@/components/JsonEditor/index.vue'
|
|
|
|
@Component({
|
|
name: 'AuditLogProfile',
|
|
components: {
|
|
JsonEditor
|
|
},
|
|
filters: {
|
|
httpStatusCodeFilter(httpStatusCode: number) {
|
|
if (httpStatusCode >= 200 && httpStatusCode < 300) {
|
|
return 'success'
|
|
}
|
|
if (httpStatusCode >= 300 && httpStatusCode < 500) {
|
|
return 'warning'
|
|
}
|
|
if (httpStatusCode >= 500) {
|
|
return 'danger'
|
|
}
|
|
return 'primary'
|
|
}
|
|
},
|
|
computed: {
|
|
getFormatDateTime() {
|
|
return (dateTime: any) => {
|
|
return dateFormat(new Date(dateTime), 'YYYY-mm-dd HH:MM:SS:NS')
|
|
}
|
|
},
|
|
getFormatJsonValue() {
|
|
return (jsonString: string) => {
|
|
if (jsonString !== '') {
|
|
return JSON.parse(jsonString)
|
|
}
|
|
return null
|
|
}
|
|
}
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
@Prop({
|
|
default: () => { return {} }
|
|
})
|
|
private auditLog!: AuditLog
|
|
|
|
private activedTabItem = 'application'
|
|
|
|
@Watch('auditLog')
|
|
private onAuditLogChanged() {
|
|
this.activedTabItem = 'application'
|
|
}
|
|
|
|
get hasExtraProperties() {
|
|
if (this.auditLog.extraProperties) {
|
|
return Object.keys(this.auditLog.extraProperties).length > 0
|
|
}
|
|
return false
|
|
}
|
|
|
|
get hasException() {
|
|
if (this.auditLog.exceptions) {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
get getActions() {
|
|
if (this.auditLog.actions && this.auditLog.actions.length > 0) {
|
|
return this.auditLog.actions.reverse()
|
|
}
|
|
return new Array<Action>()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|
|
|