feat: 运维管理 日志管理 访问日志/系统日志
This commit is contained in:
jackhoo_98
parent
6879397b77
commit
888bb5b961
|
|
@ -0,0 +1,7 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
export const queryAccess = (data: object) =>
|
||||
server.post(`/logger/access/_query`, data);
|
||||
|
||||
export const querySystem = (data: object) =>
|
||||
server.post(`/logger/system/_query`, data);
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div>
|
||||
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="queryAccess"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'responseTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #requestTime="slotProps">
|
||||
{{
|
||||
moment(slotProps.requestTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</template>
|
||||
<template #responseTime="slotProps">
|
||||
<a-tag color="purple">
|
||||
{{ slotProps.responseTime - slotProps.requestTime }} ms
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #username="slotProps">
|
||||
<a-tag color="geekblue">
|
||||
{{ slotProps.context.userName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
<a-modal
|
||||
:width="1100"
|
||||
v-model:visible="visible"
|
||||
title="详情"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-descriptions :data="descriptionsData" title="" bordered :column="2">
|
||||
<a-descriptions-item label="URL">
|
||||
{{ descriptionsData?.url }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="请求方法">
|
||||
{{ descriptionsData?.httpMethod }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="动作">
|
||||
{{ descriptionsData?.action }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="类名">
|
||||
{{ descriptionsData?.target }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="方法名">
|
||||
{{ descriptionsData?.method }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="IP">
|
||||
{{ descriptionsData?.ip }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="请求时间">
|
||||
{{
|
||||
moment(descriptionsData?.requestTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="请求耗时">
|
||||
{{
|
||||
descriptionsData?.responseTime -
|
||||
descriptionsData?.requestTime +
|
||||
'ms'
|
||||
}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="请求头" :span="2">
|
||||
{{ descriptionsData?.httpHeaders }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="请求参数" :span="2">
|
||||
{{ descriptionsData?.parameters }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="异常信息" :span="2">
|
||||
<a-textarea
|
||||
v-model:value="descriptionsData.exception"
|
||||
placeholder="暂无数据"
|
||||
:auto-size="{ minRows: 3, maxRows: 20 }"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessLog">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import type { AccessLogItem } from '../typings';
|
||||
import { queryAccess } from '@/api/link/log';
|
||||
import moment from 'moment';
|
||||
|
||||
import { modifySearchColumnValue } from '@/utils/comm';
|
||||
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'IP',
|
||||
dataIndex: 'ip',
|
||||
key: 'ip',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
scopedSlots: true,
|
||||
width: 150,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '请求路径',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
// width: 200,
|
||||
},
|
||||
{
|
||||
title: '请求方法',
|
||||
dataIndex: 'httpMethod',
|
||||
key: 'httpMethod',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: 'POST',
|
||||
value: 'POST',
|
||||
},
|
||||
{
|
||||
label: 'GET',
|
||||
value: 'GET',
|
||||
},
|
||||
{
|
||||
label: 'PATCH',
|
||||
value: 'PATCH',
|
||||
},
|
||||
{
|
||||
label: 'DELETE',
|
||||
value: 'DELETE',
|
||||
},
|
||||
{
|
||||
label: 'PUT',
|
||||
value: 'PUT',
|
||||
},
|
||||
],
|
||||
},
|
||||
scopedSlots: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求时间',
|
||||
dataIndex: 'requestTime',
|
||||
key: 'requestTime',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '请求耗时',
|
||||
dataIndex: 'responseTime',
|
||||
key: 'responseTime',
|
||||
scopedSlots: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求用户',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
width: 150,
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const descriptionsData = ref<AccessLogItem>();
|
||||
const visible = ref<boolean>(false);
|
||||
|
||||
const handleOk = (e: MouseEvent) => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
key: 'eye',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: (data: AccessLogItem) => {
|
||||
descriptionsData.value = data;
|
||||
visible.value = true;
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const column = {
|
||||
username: 'context.username',
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
* @param params
|
||||
*/
|
||||
const handleSearch = (e: any) => {
|
||||
params.value = modifySearchColumnValue(e, column);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<div>
|
||||
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="querySystem"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #level="slotProps">
|
||||
<a-tag
|
||||
:color="
|
||||
slotProps.level === 'WARN'
|
||||
? 'orange'
|
||||
: slotProps.level === 'ERROR'
|
||||
? 'red'
|
||||
: slotProps.level === 'DEBUG'
|
||||
? 'blue'
|
||||
: 'green'
|
||||
"
|
||||
>
|
||||
{{ slotProps.level }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
{{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
<template #server="slotProps">
|
||||
{{ slotProps.context.server }}
|
||||
</template>
|
||||
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
<a-modal
|
||||
:width="1100"
|
||||
v-model:visible="visible"
|
||||
title="详情"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<div>
|
||||
<span class="mr-10">[{{ descriptionsData?.threadName }}]</span>
|
||||
<span class="mr-10">{{
|
||||
moment(descriptionsData?.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
<span>{{ descriptionsData?.className }}</span>
|
||||
</div>
|
||||
<div class="mb-10">
|
||||
<a-tag
|
||||
:color="
|
||||
descriptionsData?.level === 'WARN'
|
||||
? 'orange'
|
||||
: descriptionsData?.level === 'ERROR'
|
||||
? 'red'
|
||||
: descriptionsData?.level === 'DEBUG'
|
||||
? 'blue'
|
||||
: 'green'
|
||||
"
|
||||
>
|
||||
{{ descriptionsData?.level }}
|
||||
</a-tag>
|
||||
<span>{{ descriptionsData?.message }}</span>
|
||||
</div>
|
||||
<a-textarea
|
||||
v-model:value="descriptionsData.exceptionStack"
|
||||
placeholder="暂无数据"
|
||||
:auto-size="{ minRows: 24, maxRows: 28 }"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup name="SystemLog">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import type { SystemLogItem } from '../typings';
|
||||
import { querySystem } from '@/api/link/log';
|
||||
import moment from 'moment';
|
||||
|
||||
import { modifySearchColumnValue } from '@/utils/comm';
|
||||
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
scopedSlots: true,
|
||||
width: 400,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '日志级别',
|
||||
dataIndex: 'level',
|
||||
key: 'level',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: 'ERROR',
|
||||
value: 'ERROR',
|
||||
},
|
||||
{
|
||||
label: 'INFO',
|
||||
value: 'INFO',
|
||||
},
|
||||
{
|
||||
label: 'DEBUG',
|
||||
value: 'DEBUG',
|
||||
},
|
||||
{
|
||||
label: 'WARN',
|
||||
value: 'WARN',
|
||||
},
|
||||
],
|
||||
},
|
||||
scopedSlots: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '日志内容',
|
||||
dataIndex: 'message',
|
||||
key: 'message',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
scopedSlots: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '服务名',
|
||||
dataIndex: 'server',
|
||||
key: 'server',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
scopedSlots: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const descriptionsData = ref<SystemLogItem>();
|
||||
const visible = ref<boolean>(false);
|
||||
|
||||
const handleOk = (e: MouseEvent) => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
key: 'eye',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: (data: SystemLogItem) => {
|
||||
descriptionsData.value = data;
|
||||
visible.value = true;
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const column = {
|
||||
server: 'context.server',
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
* @param params
|
||||
*/
|
||||
const handleSearch = (e: any) => {
|
||||
params.value = modifySearchColumnValue(e, column);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<page-container :tabList="list" @tabChange="onTabChange">
|
||||
<AccessLog v-if="activeKey === '1'" />
|
||||
<SystemLog v-else />
|
||||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="LogPage">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import AccessLog from './Access/index.vue';
|
||||
import SystemLog from './System/index.vue';
|
||||
|
||||
const activeKey = ref('1');
|
||||
|
||||
const list = [
|
||||
{
|
||||
key: '1',
|
||||
tab: '访问日志',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '系统日志',
|
||||
},
|
||||
];
|
||||
|
||||
const onTabChange = (e: string) => {
|
||||
activeKey.value = e;
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
export type AccessLogItem = {
|
||||
id: string;
|
||||
context: any;
|
||||
describe: string;
|
||||
exception: string;
|
||||
httpHeaders: any;
|
||||
httpMethod: string;
|
||||
ip: string;
|
||||
method: string;
|
||||
parameters: any;
|
||||
requestTime: number;
|
||||
responseTime: number;
|
||||
target: string;
|
||||
url: string;
|
||||
action: string;
|
||||
};
|
||||
|
||||
export type SystemLogItem = {
|
||||
id: string;
|
||||
className: string;
|
||||
context: any;
|
||||
createTime: number;
|
||||
exceptionStack: string;
|
||||
level: string;
|
||||
lineNumber: number;
|
||||
message: string;
|
||||
methodName: string;
|
||||
name: string;
|
||||
threadId: string;
|
||||
threadName: string;
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<template>
|
||||
<div>访问日志</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SystemLog">
|
||||
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<template>
|
||||
<div>系统日志</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessLog">
|
||||
|
||||
</script>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="访问日志">
|
||||
<AccessLog />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="系统日志" force-render>
|
||||
<SystemLog />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<script lang="ts" setup name="LogPage">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import AccessLog from './Access/index.vue';
|
||||
import SystemLog from './System/index.vue';
|
||||
|
||||
const activeKey = ref('1');
|
||||
</script>
|
||||
Loading…
Reference in New Issue