perf: 运维痕迹

src/pages/log/loginLog/index.js

@@ -16,7 +16,7 @@ import moment from 'moment';
 import { post, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
 
-const ServiceLog = () => {
+const LoginLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
   const [data0, setData0] = useState([]); // 源数据
   const [LoginNameFilters, setLoginNameFilters] = useState([]); // 用户列筛选
@@ -76,8 +76,6 @@ const ServiceLog = () => {
   }, [startTime, endTime]);
   const getData = () => {
     post(`${PUBLISH_SERVICE}/LogCenter/GetLoginLog`, {
-      PageIndex: 1,
-      PageSize: 1000,
       DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
       DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
@@ -88,17 +86,17 @@ const ServiceLog = () => {
     })
       .then(res => {
         if (res.code === 0) {
-          setData0(res.data.list);
+          setData0(res.data);
           // 过滤LoginName
-          let arr1 = res.data.list.map(item => item.LoginName);
+          let arr1 = res.data.map(item => item.LoginName);
           arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
           setLoginNameFilters(arr1.map(item => ({ text: item, value: item })));
           // 过滤ShowName
-          let arr2 = res.data.list.map(item => item.ShowName);
+          let arr2 = res.data.map(item => item.ShowName);
           arr2 = arr2.filter((value, index) => arr2.indexOf(value) === index);
           setShowNameFilters(arr2.map(item => ({ text: item, value: item })));
           // 过滤系统类型SystemType
-          let arr3 = res.data.list.map(item => item.SystemType);
+          let arr3 = res.data.map(item => item.SystemType);
           arr3 = arr3.filter((value, index) => arr3.indexOf(value) === index);
           setSystemTypeFilters(arr3.map(item => ({ text: item, value: item })));
         } else {
@@ -114,30 +112,6 @@ const ServiceLog = () => {
         setLoading(false);
       });
   };
-  // const dataTransforrm = data => {
-  //   data.map((item, index) => {
-  //     item.key = index;
-  //     return item;
-  //   });
-
-  //   const dv1 = new DataSet.View().source(data);
-  //   dv1
-  //     .transform({
-  //       type: 'aggregate', // 别名summary
-  //       fields: ['IP'], // 统计字段集
-  //       operations: ['count'], // 统计操作集
-  //       as: ['计数'], // 存储字段集
-  //       groupBy: ['IP'], // 分组字段集
-  //     })
-  //     .transform({
-  //       type: 'sort-by',
-  //       fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-  //       order: 'DESC', // 默认为 ASC，DESC 则为逆序
-  //     });
-  //   console.log(dv1.rows);
-  //   setIPCount(dv1.rows.slice(0, 20));
-  // };
-
   // DatePicker改变点击确定时
   const changeStartTime = time => {
     setStartTime(time);
@@ -170,7 +144,7 @@ const ServiceLog = () => {
               onChange={changeStartTime}
               allowClear={false}
             />
-            <SwapRightOutlined style={{ lineHeight: 2 }} />
+            <SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
             <DatePicker
               showTime
               format="YYYY-MM-DD HH:mm:ss"
@@ -189,27 +163,6 @@ const ServiceLog = () => {
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
-          {/* <Row className={styles.chart}>
-            <Col span={12}>
-              <Chart
-                height={316}
-                width={400}
-                autoFit
-                data={IPCount}
-                interactions={['active-region']}
-                padding="auto"
-              >
-                <Axis
-                  name="IP"
-                  label="null"
-                  title={{ offset: 20, position: 'end' }}
-                />
-                <Axis name="计数" title />
-                <Interval position="IP*计数" />
-                <Tooltip shared />
-              </Chart>
-            </Col>
-          </Row> */}
           <div className={styles.table}>
             <Table
               size="small"
@@ -232,4 +185,4 @@ const ServiceLog = () => {
     </>
   );
 };
-export default ServiceLog;
+export default LoginLog;

src/pages/log/omsLog/index.js

 import React, { useState, useEffect } from 'react';
 import {
   DatePicker,
+  Input,
   Table,
   Row,
   Col,
   Button,
-  Select,
-  Input,
   notification,
   message,
   Spin,
 } from 'antd';
 import { SwapRightOutlined } from '@ant-design/icons';
-import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts';
-// import { DataSet } from '@antv/data-set';
 import moment from 'moment';
-import { post, PUBLISH_SERVICE } from '@/services/index';
+import { get, CITY_SERVICE } from '@/services/index';
 import styles from './index.less';
-const { Option } = Select;
-const { Search } = Input;
 
-const ServiceLog = () => {
+const OmsLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
-  const [dataTable, setDataTable] = useState([]); // 源数据
-  const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
-  const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
-  const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
-  const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔，1/2/3/4（每分钟/5分钟/小时/天），默认每小时
-  // const [scale, setScale] = useState({}); // 坐标轴别名
-  // const [pageSize, setPageSize] = useState(100); // 分页大小
-  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值，当天0点00:00:00
+  const [data, setData] = useState([]); // 源数据
+  const [levelFilters, setLevelFilters] = useState([]); // 优先级筛选
+  const [functionName, setFunctionName] = useState(''); // 接口名称筛选
+  const [label, setLabel] = useState(''); // 标签筛选
+  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
   const [endTime, setEndTime] = useState(
-    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
-  const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
-  const [searchWord, setSearchWord] = useState(''); // 关键字
-
-  // 计算时间间隔（分钟）
-  const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
-  const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
-  const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
-  if (minuteInterval <= 0) {
-    notification.error({
-      message: '时间设置有误',
-      description: '起始时间应该早于结束时间',
-    });
-  }
-  const countInterval = () => {
-    if (minuteInterval > 0 && minuteInterval <= 30) {
-      setTimeInterval('1');
-    } else if (minuteInterval > 30 && minuteInterval <= 120) {
-      setTimeInterval('2');
-    } else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
-      setTimeInterval('3');
-    } else {
-      setTimeInterval('4');
-    }
-  };
 
   const columns = [
     {
-      title: '接口名称',
-      dataIndex: 'Path',
-      key: 'Path',
-      fixed: 'left',
-    },
-    {
-      title: '调用时间',
-      dataIndex: 'CallTime',
-      key: 'CallTime',
-    },
-    {
-      title: 'IP',
-      dataIndex: 'DownstreamRequest',
-      key: 'DownstreamRequest',
+      title: '操作时间',
+      dataIndex: 'logTime',
+      key: 'logTime',
+      // defaultSortOrder: 'descend',
+      sorter: (a, b) =>
+        new Date(b.logTime).getTime() - new Date(a.logTime).getTime(),
     },
     {
-      title: '返回状态',
-      dataIndex: 'Result',
-      key: 'Result',
-      // render: record => {
-      //   if (record === 0) {
-      //     return '正常';
-      //   }
-      //   return '错误';
-      // },
-    },
-    {
-      title: '错误信息',
-      dataIndex: 'ErrorMsg',
-      key: 'ErrorMsg',
-      render: record => {
-        if (!record) {
-          return '-';
-        }
-        return record;
-      },
+      title: '接口名称',
+      dataIndex: 'functionName',
+      key: 'functionName',
+      // filters: functionNameFilters,
+      // onFilter: (value, record) => record.functionName === value,
     },
     {
-      title: '请求方法',
-      dataIndex: 'Method',
-      key: 'Method',
+      title: '标签',
+      dataIndex: 'label',
+      key: 'label',
+      width: 300,
     },
-    // {
-    //   title: '查询参数',
-    //   dataIndex: 'QueryString',
-    //   key: 'QueryString',
-    // },
-    // {
-    //   title: '请求体',
-    //   dataIndex: 'Body',
-    //   key: 'Body',
-    // },
     {
-      title: '耗时/ms',
-      dataIndex: 'ConsumerTime',
-      key: 'ConsumerTime',
-      fixed: 'right',
-      defaultSortOrder: 'descend',
-      sorter: (a, b) => a.ConsumerTime - b.ConsumerTime,
+      title: '优先级',
+      dataIndex: 'level',
+      key: 'level',
+      width: 100,
+      filters: levelFilters,
+      onFilter: (value, record) => record.level === value,
     },
     {
-      title: '返回体大小/byte',
-      dataIndex: 'ResponseSize',
-      key: 'ResponseSize',
-      fixed: 'right',
-      sorter: (a, b) => a.ResponseSize - b.ResponseSize,
+      title: '详情',
+      dataIndex: 'shortInfo',
+      key: 'shortInfo',
+      ellipsis: 'true',
+      width: 300,
     },
   ];
-  // 在起止时间任意一个变化后获取数据,且起止时间应该早于结束时间
+  // 在起止时间任意一个变化后获取数据
   useEffect(() => {
-    if (startTime && endTime && end - start > 0) {
-      countInterval(); // 根据起止时间计算时间间隔
-    }
-  }, [startTime, endTime]);
-  useEffect(() => {
-    if (startTime && endTime && end - start > 0) {
+    if (startTime && endTime) {
       setLoading(true);
-      getData('/TrafficStatistics', setVisitedCount); // 访问量统计
+      getData();
     }
-  }, [startTime, endTime, logType, timeInterval]);
-  useEffect(() => {
-    if (startTime && endTime && end - start > 0) {
-      setLoading(true);
-      getData('/TopCountList', setPathCount); // 接口调用频次统计
-      getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
-      getData('/GetOMSLog', setDataTable); // 接口调用记录
-    }
-  }, [startTime, endTime, logType]);
-
-  // 封装接口请求，参数url/设置方法set
-  const getData = (url, set) => {
-    post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
-      // 获取日志表数据时PageSize设置为200，其他接口默认值20
-      PageIndex: 1,
-      PageSize: url === '/GetOMSLog' ? 1000 : 20,
-      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
-      IP: '',
-      Module: url === '/GetOMSLog' ? searchWord : '',
-      LogType: +logType,
-      Description: '',
-      LoginName: '',
-      UserName: '',
-      StaticsType: +timeInterval,
+  }, [startTime, endTime]);
+  const getData = () => {
+    get(`${CITY_SERVICE}/OMS.svc/S_GetOMSLog`, {
+      _version: 9999,
+      _dc: Date.now(),
+      logType: 'operationLog',
+      startDate: startTime.format('YYYY-MM-DD'),
+      endDate: endTime.format('YYYY-MM-DD'),
+      startTime: startTime.format('HH:mm'),
+      endTime: endTime.format('HH:mm'),
+      function: functionName,
+      label,
     })
       .then(res => {
-        if (res.code === 0) {
-          if (!res.data) {
-            set([]);
+        if (res.success) {
+          if (!res.root) {
+            setData([]);
           } else {
-            const result = url === '/GetOMSLog' ? res.data.list : res.data;
-            set(
-              result.map((item, index) => {
-                item.key = index;
-                if (url === '/TrafficStatistics') {
-                  item.StartTime = item.StartTime.replace(' ', '-');
-                }
-                return item;
-              }),
-            );
+            setData(res.root);
+            // 过滤优先级
+            let arr1 = res.root.map(item => item.level);
+            arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
+            setLevelFilters(arr1.map(item => ({ text: item, value: item })));
           }
         } else {
           notification.error({
             message: '数据获取失败',
-            description: res.msg,
+            description: res.message,
           });
         }
         setLoading(false);
@@ -194,7 +107,6 @@ const ServiceLog = () => {
         setLoading(false);
       });
   };
-
   // DatePicker改变点击确定时
   const changeStartTime = time => {
     setStartTime(time);
@@ -202,37 +114,23 @@ const ServiceLog = () => {
   const changeEndTime = time => {
     setEndTime(time);
   };
-  // 近1/6/12/24小时,同时设置对应的时间间隔
-  const setTime = (time, value) => {
-    setTimeInterval(value);
+  // 近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 * 1000),
+        new Date(new Date().getTime() - time * 60 * 60 * 1000),
         'YYYY-MM-DD HH:mm:ss',
       ),
     );
   };
-  // 设置返回状态
-  const changeStatus = value => {
-    setLogType(value);
-  };
-  // 设置时间间隔
-  const selectChange = value => {
-    setTimeInterval(value);
-  };
-  // 获取搜索框的值
-  const handleSearch = e => {
-    setSearchWord(e.target.value);
-    // console.log(e.target.value);
-  };
 
   return (
     <>
-      <div className={styles.serviceLog}>
+      <div className={styles.omsLog}>
         <Row className={styles.head}>
           <Col span={24}>
-            <span>时间：</span>
+            <span style={{ lineHeight: 2 }}>时间：</span>
             <DatePicker
               showTime
               format="YYYY-MM-DD HH:mm:ss"
@@ -251,112 +149,44 @@ const ServiceLog = () => {
               style={{ marginRight: '10px' }}
               allowClear={false}
             />
-            <Button onClick={() => setTime(15, '1')}>近15分钟</Button>
-            <Button onClick={() => setTime(60, '2')}>近1小时</Button>
-            <Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
-            <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
-            <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
-            <span style={{ marginLeft: '20px' }}>返回状态：</span>
-            <Select defaultValue="正常" onChange={changeStatus}>
-              <Option value="9999">全部</Option>
-              <Option value="0">正常</Option>
-              <Option value="-1">错误</Option>
-            </Select>
-            <Search
-              allowClear
-              style={{ width: 200, marginLeft: '20px' }}
+            <Button onClick={() => setTime(1)}>近1小时</Button>
+            {/* <Button onClick={() => setTime(6)}>近6小时</Button> */}
+            <Button onClick={() => setTime(24)}>近1天</Button>
+            <Button onClick={() => setTime(24 * 7)}>近1周</Button>
+            <Button onClick={() => setTime(14 * 24)}>近2周</Button>
+            {/* <Button onClick={() => setTime(30 * 24)}>近1月</Button> */}
+            <span style={{ marginLeft: '10px' }}>接口查询：</span>
+            <Input
+              style={{ width: '120px' }}
               placeholder="请输入接口名称"
-              onSearch={() => {
-                getData('/GetOMSLog', setDataTable);
+              onChange={e => {
+                setFunctionName(e.target.value);
+              }}
+            />
+            <span style={{ marginLeft: '10px' }}>标签查询：</span>
+            <Input
+              style={{ width: '120px' }}
+              placeholder="请输入标签"
+              onChange={e => {
+                setLabel(e.target.value);
               }}
-              onChange={e => handleSearch(e)}
-              enterButton
-              value={searchWord}
             />
+            <Button
+              type="primary"
+              style={{ marginLeft: '10px' }}
+              onClick={getData}
+            >
+              查询
+            </Button>
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
-          <Row style={{ background: 'white' }}>
-            <Col offset={6} style={{ paddingTop: '8px' }}>
-              <span>间隔：</span>
-              <Select
-                defaultValue="每小时"
-                value={timeInterval}
-                size="small"
-                onChange={selectChange}
-              >
-                <Option value="1">每分钟</Option>
-                <Option value="2">每5分钟</Option>
-                <Option value="3">每小时</Option>
-                <Option value="4">每天</Option>
-              </Select>
-            </Col>
-          </Row>
-          <Row className={styles.chart}>
-            <Col span={8}>
-              <Chart
-                height={300}
-                autoFit
-                data={visitedCount}
-                interactions={['active-region']}
-                padding="auto"
-                renderer="svg"
-                scale={{
-                  Count: { alias: '计数' },
-                  StartTime: { alias: '访问量统计' },
-                }}
-              >
-                <Axis name="StartTime" label="" title={{ offset: 20 }} />
-                <Axis name="Count" title />
-                <Line shape="smooth" position="StartTime*Count" />
-                <Tooltip shared />
-              </Chart>
-            </Col>
-            <Col span={7} offset={1}>
-              <Chart
-                height={300}
-                autoFit
-                data={pathCount}
-                interactions={['active-region']}
-                padding="auto"
-                renderer="svg"
-                scale={{
-                  Count: { alias: '计数' },
-                  Path: { alias: '接口调用频次统计' },
-                }}
-              >
-                <Axis name="Path" label="" title={{ offset: 20 }} />
-                <Axis name="Count" title />
-                <Interval position="Path*Count" />
-                <Tooltip shared />
-              </Chart>
-            </Col>
-            <Col span={7} offset={1}>
-              <Chart
-                height={300}
-                autoFit
-                data={reponseTime}
-                interactions={['active-region']}
-                padding="auto"
-                renderer="svg"
-                scale={{
-                  AvgTime: { alias: '响应时长/ms' },
-                  Path: { alias: '接口平均耗时统计' },
-                }}
-              >
-                <Axis name="Path" label="" title={{ offset: 20 }} />
-                <Axis name="AvgTime" title />
-                <Interval position="Path*AvgTime" />
-                <Tooltip shared />
-              </Chart>
-            </Col>
-          </Row>
           <div className={styles.table}>
             <Table
               size="small"
               bordered
               columns={columns}
-              dataSource={dataTable}
+              dataSource={data}
               scroll={{ x: 'max-content' }}
               pagination={{
                 showTotal: (total, range) =>
@@ -373,4 +203,4 @@ const ServiceLog = () => {
     </>
   );
 };
-export default ServiceLog;
+export default OmsLog;

src/pages/log/omsLog/index.less

-.serviceLog{
+.omsLog{
     .head{
         padding: 10px;
         background: white;
@@ -6,7 +6,7 @@
         min-width: 1030px;
     }
     .chart{
-        padding: 10px;
+        padding: 16px;
         background: white;
     }
     .table{
@@ -17,9 +17,12 @@
             color:rgba(0,0,0,0.85);
         }
         .ant-table-content{
-            height:calc(100vh - 520px);
+            height:calc(100vh - 172px);
             border-right: white;
             overflow: auto !important;
+            .ant-table-tbody{
+                overflow: scroll !important;
+            }
         }
         .ant-pagination{
             z-index: 999;

src/pages/log/serviceLog/index.js

@@ -265,7 +265,7 @@ const ServiceLog = () => {
             <Select defaultValue="异常" onChange={changeStatus}>
               <Option value="9999">全部</Option>
               <Option value="0">正常</Option>
-              <Option value="-1">错误</Option>
+              <Option value="-1">异常</Option>
             </Select>
             <Search
               allowClear