Skip to content

C
CivManage
Commit ff41f57e authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: log

parent 0e528f06
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 107 deletions
src/pages/log/omsLog/index.js 0 → 100644
View file @ ff41f57e
import React, { useState, useEffect } from 'react';
import {
DatePicker,
Table,
Row,
Col,
Button,
Select,
notification,
message,
Spin,
} from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
import { DataSet } from '@antv/data-set';
import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';
const { Option } = Select;
const ServiceLog = () => {
const [loading, setLoading] = useState(false); // 源数据
const [data0, setData0] = useState([]); // 源数据
const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
const [scale, setScale] = useState({}); // 坐标轴别名
const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
const [endTime, setEndTime] = useState(
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
);
const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
const columns = [
{
title: '接口名称',
dataIndex: 'Path',
key: 'Path',
fixed: 'left',
},
{
title: '调用时间',
dataIndex: 'CallTime',
key: 'CallTime',
// filters: orgFilters,
// onFilter: (value, record) => record.OUName === value,
},
{
title: 'IP',
dataIndex: 'IP',
key: 'IP',
},
{
title: '请求方法',
dataIndex: 'Method',
key: 'Method',
},
{
title: '查询参数',
dataIndex: 'QueryString',
key: 'QueryString',
},
{
title: '请求体',
dataIndex: 'Body',
key: 'Body',
},
{
title: '状态码',
dataIndex: 'Result',
key: 'Result',
},
{
title: '错误信息',
dataIndex: 'ErrorMsg',
key: 'ErrorMsg',
},
{
title: '耗时/ms',
dataIndex: 'ConsumerTime',
key: 'ConsumerTime',
fixed: 'right',
defaultSortOrder: 'descend',
sorter: (a, b) => a.ConsumerTime - b.ConsumerTime,
},
{
title: '返回体大小/byte',
dataIndex: 'ResponseSize',
key: 'ResponseSize',
fixed: 'right',
sorter: (a, b) => a.ResponseSize - b.ResponseSize,
},
];
// 在起止时间任意一个变化后获取数据
useEffect(() => {
if (startTime && endTime) {
setLoading(true);
getData();
}
}, [startTime, endTime, logType]);
const getData = () => {
post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
PageIndex: 0,
PageSize: 0,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
Module: '',
LogType: +logType,
Description: '',
LoginName: '',
UserName: '',
})
.then(res => {
if (res.code === 0) {
setData0(res.data);
dataTransforrm(res.data);
console.log(res.data);
} else {
notification.error({
message: '数据获取失败',
description: res.message,
});
}
setLoading(false);
})
.catch(err => {
message.error(err);
setLoading(false);
});
};
const dataTransforrm = data => {
data.map((item, index) => {
item.key = index;
return item;
});
const scale1 = {
Path: {
alias: '接口名称', // 别名
},
响应时长: {
alias: '响应时长/ms', // 别名
},
};
setScale(scale1);
const dv1 = new DataSet.View().source(data);
dv1
.transform({
type: 'aggregate', // 别名summary
fields: ['Path'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv1.rows);
setPathCount(dv1.rows.slice(0, 20));
const dv2 = new DataSet.View().source(data);
dv2
.transform({
type: 'aggregate', // 别名summary
fields: ['ConsumerTime'], // 统计字段集
operations: ['mean'], // 统计操作集
as: ['响应时长'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv2.rows);
setReponseTime(dv2.rows.slice(0, 20));
};
// DatePicker改变点击确定时
const changeStartTime = time => {
setStartTime(time);
};
const changeEndTime = time => {
setEndTime(time);
};
// 近1/6/12/24小时
const setTime = time => {
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime(
moment(
new Date(new Date().getTime() - time * 60 * 60 * 1000),
'YYYY-MM-DD HH:mm:ss',
),
);
};
// 设置日志类型
const selectChange = value => {
setLogType(value);
};
return (
<>
<div className={styles.serviceLog}>
<Row className={styles.head}>
<Col span={24}>
<span>时间：</span>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="起始时间"
value={startTime}
onChange={changeStartTime}
allowClear={false}
/>
<SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="结束时间"
value={endTime}
onChange={changeEndTime}
style={{ marginRight: '10px' }}
allowClear={false}
/>
<Button onClick={() => setTime(1)}>近1小时</Button>
<Button onClick={() => setTime(6)}>近6小时</Button>
<Button onClick={() => setTime(12)}>近12小时</Button>
<Button onClick={() => setTime(24)}>近1天</Button>
<Button onClick={() => setTime(24 * 7)}>近1周</Button>
<span style={{ marginLeft: '20px' }}>日志类型：</span>
<Select defaultValue="正常" onChange={selectChange}>
<Option value="9999">全部</Option>
<Option value="0">正常</Option>
<Option value="-1">错误</Option>
</Select>
</Col>
</Row>
<Spin spinning={loading} tip="loading">
<Row className={styles.chart}>
<Col span={12}>
<Chart
height={300}
width={400}
autoFit
data={pathCount}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis
name="Path"
// label={{ autoEllipsis: 'true', autoHide: 'true' }}
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="Path*计数" />
<Tooltip shared />
</Chart>
</Col>
<Col span={12}>
<Chart
height={300}
width={400}
autoFit
data={reponseTime}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis
name="Path"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="响应时长" title />
<Interval position="Path*响应时长" />
<Tooltip shared />
</Chart>
</Col>
</Row>
<div className={styles.table}>
<Table
size="small"
bordered
columns={columns}
dataSource={data0}
scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</div>
</Spin>
</div>
</>
);
};
export default ServiceLog;
src/pages/log/omsLog/index.less 0 → 100644
View file @ ff41f57e
.serviceLog{
.head{
padding: 10px;
background: white;
margin-bottom: 2px;
min-width: 1030px;
}
.chart{
padding: 16px;
background: white;
}
.table{
height:calc(100vh - 452px);
overflow: auto;
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-pagination{
z-index: 999;
background: white;
margin: 2px 0px;
padding:6px 10px;
}
}
}
\ No newline at end of file
src/pages/log/serviceLog/index.js
View file @ ff41f57e
...@@ -15,6 +15,7 @@ import { Chart, Interval, Tooltip, Axis } from 'bizcharts'; ...@@ -15,6 +15,7 @@ import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
import { DataSet } from '@antv/data-set'; import { DataSet } from '@antv/data-set';
import moment from 'moment'; import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index'; import { post, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';
const { Option } = Select; const { Option } = Select;
const ServiceLog = () => { const ServiceLog = () => {
...@@ -202,107 +203,104 @@ const ServiceLog = () => { ...@@ -202,107 +203,104 @@ const ServiceLog = () => {
return ( return (
<> <>
<Row <div className={styles.serviceLog}>
style={{ <Row className={styles.head}>
padding: '10px', <Col span={24}>
background: 'white', <span>时间：</span>
marginBottom: '2px', <DatePicker
minWidth: '1030px', showTime
}} format="YYYY-MM-DD HH:mm:ss"
> placeholder="起始时间"
<Col span={24}> value={startTime}
<span>时间：</span> onChange={changeStartTime}
<DatePicker allowClear={false}
showTime />
format="YYYY-MM-DD HH:mm:ss" <SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
placeholder="起始时间" <DatePicker
value={startTime} showTime
onChange={changeStartTime} format="YYYY-MM-DD HH:mm:ss"
allowClear={false} placeholder="结束时间"
/> value={endTime}
<SwapRightOutlined style={{ verticalAlign: '0.125em' }} /> onChange={changeEndTime}
<DatePicker style={{ marginRight: '10px' }}
showTime allowClear={false}
format="YYYY-MM-DD HH:mm:ss" />
placeholder="结束时间" <Button onClick={() => setTime(1)}>近1小时</Button>
value={endTime} <Button onClick={() => setTime(6)}>近6小时</Button>
onChange={changeEndTime} <Button onClick={() => setTime(12)}>近12小时</Button>
style={{ marginRight: '10px' }} <Button onClick={() => setTime(24)}>近1天</Button>
allowClear={false} <Button onClick={() => setTime(24 * 7)}>近1周</Button>
/> <span style={{ marginLeft: '20px' }}>日志类型：</span>
<Button onClick={() => setTime(1)}>近1小时</Button> <Select defaultValue="正常" onChange={selectChange}>
<Button onClick={() => setTime(6)}>近6小时</Button> <Option value="9999">全部</Option>
<Button onClick={() => setTime(12)}>近12小时</Button> <Option value="0">正常</Option>
<Button onClick={() => setTime(24)}>近1天</Button> <Option value="-1">错误</Option>
<Button onClick={() => setTime(24 * 7)}>近1周</Button> </Select>
<span style={{ marginLeft: '20px' }}>日志类型：</span>
<Select defaultValue="正常" onChange={selectChange}>
<Option value="9999">全部</Option>
<Option value="0">正常</Option>
<Option value="-1">错误</Option>
</Select>
</Col>
</Row>
<Spin spinning={loading} tip="loading">
<Row style={{ padding: '16px', background: 'white' }}>
<Col span={12}>
<Chart
height={300}
width={400}
autoFit
data={pathCount}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis
name="Path"
// label={{ autoEllipsis: 'true', autoHide: 'true' }}
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="Path*计数" />
<Tooltip shared />
</Chart>
</Col>
<Col span={12}>
<Chart
height={300}
width={400}
autoFit
data={reponseTime}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis
name="Path"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="响应时长" title />
<Interval position="Path*响应时长" />
<Tooltip shared />
</Chart>
</Col> </Col>
</Row> </Row>
<Table <Spin spinning={loading} tip="loading">
size="small" <Row className={styles.chart}>
bordered <Col span={12}>
columns={columns} <Chart
dataSource={data0} height={300}
scroll={{ x: 'max-content' }} width={400}
pagination={{ autoFit
showTotal: (total, range) => data={pathCount}
`第${range[0]}-${range[1]} 条/共 ${total} 条`, interactions={['active-region']}
pageSizeOptions: [10, 20, 50, 100], padding="auto"
defaultPageSize: 10, scale={scale}
showQuickJumper: true, >
showSizeChanger: true, <Axis
}} name="Path"
/> // label={{ autoEllipsis: 'true', autoHide: 'true' }}
</Spin> label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="Path*计数" />
<Tooltip shared />
</Chart>
</Col>
<Col span={12}>
<Chart
height={300}
width={400}
autoFit
data={reponseTime}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis
name="Path"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="响应时长" title />
<Interval position="Path*响应时长" />
<Tooltip shared />
</Chart>
</Col>
</Row>
<div className={styles.table}>
<Table
size="small"
bordered
columns={columns}
dataSource={data0}
scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</div>
</Spin>
</div>
</> </>
); );
}; };
......
src/pages/log/serviceLog/index.less 0 → 100644
View file @ ff41f57e
.serviceLog{
.head{
padding: 10px;
background: white;
margin-bottom: 2px;
min-width: 1030px;
}
.chart{
padding: 16px;
background: white;
}
.table{
height:calc(100vh - 452px);
overflow: auto;
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-pagination{
z-index: 999;
background: white;
margin: 2px 0px;
padding:6px 10px;
}
}
}
\ No newline at end of file
src/routes/config.js
View file @ ff41f57e
...@@ -24,6 +24,7 @@ import RoleManage from '@/pages/userCenter/roleManage/RoleManage'; ...@@ -24,6 +24,7 @@ import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
import SiteManage from '../pages/userCenter/siteManage/SiteManage'; import SiteManage from '../pages/userCenter/siteManage/SiteManage';
import ServiceLog from '../pages/log/serviceLog'; import ServiceLog from '../pages/log/serviceLog';
import LoginLog from '../pages/log/loginLog'; import LoginLog from '../pages/log/loginLog';
import OmsLog from '../pages/log/omsLog';
// import DefaultComponent from '../pages/orgnazation/DefaultComponent'; // import DefaultComponent from '../pages/orgnazation/DefaultComponent';
import TestTable from '../pages/orgnazation/TestTable'; import TestTable from '../pages/orgnazation/TestTable';
import WebConfigPage from '@/pages/webConfig'; import WebConfigPage from '@/pages/webConfig';
...@@ -239,14 +240,9 @@ export default { ...@@ -239,14 +240,9 @@ export default {
component: LoginLog, component: LoginLog,
}, },
{ {
path: '/log/omsOperation', path: '/log/omsLog',
name: '运维操作日志', name: '运维日志',
component: Welcome, component: OmsLog,
},
{
path: '/log/omsError',
name: '运维错误日志',
component: Welcome,
}, },
], ],
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment