0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 运维管理 日志管理 访问日志/系统日志

This commit is contained in:
jackhoo_98 2023-02-01 17:01:11 +08:00
parent 6879397b77
commit 888bb5b961
8 changed files with 567 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/link/log.ts Normal file
View File

@ -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);

255
src/views/Log/Access/index.vue Normal file
View File

@ -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>

246
src/views/Log/System/index.vue Normal file
View File

@ -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>

28
src/views/Log/index.vue Normal file
View File

@ -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>

31
src/views/Log/typings.d.ts vendored Normal file
View File

@ -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;
};

6
src/views/link/Log/Access/index.vue
View File

@ -1,6 +0,0 @@
<template>
<div>访问日志</div>
</template>
<script lang="ts" setup name="SystemLog">
</script>

6
src/views/link/Log/System/index.vue
View File

@ -1,6 +0,0 @@
<template>
<div>系统日志</div>
</template>
<script lang="ts" setup name="AccessLog">
</script>

17
src/views/link/Log/index.vue
View File

@ -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>