whistle.data-checker/src/components/List/index.jsx

data checker for testing

import React, {useEffect, useState} from 'react';
import {Tooltip, Button, Table, Tabs, Empty} from 'antd';
import { RightOutlined, DownOutlined } from '@ant-design/icons';
import {ClearIcon, RecordIcon} from '../Icon';

let timer = null;

export default function List() {
  const [isRecording, setIsRecording] = useState(true);
  const [list, setList] = useState([]);
  const [columns, setColumns] = useState([]);

  const handleToggleRecord = () => {
    setIsRecording(!isRecording);
  };

  const getTableList = () => {
    if (!isRecording) {
      return;
    }

    const len = list.length;
    const lastItem = list[len - 1];
    const reqId = lastItem ? lastItem.reqId : '';
    fetch(`cgi-bin/list?lastId=${reqId || ''}`)
      .then(res => res.json())
      .then((data) => {
        // TODO: 过滤由用户定义规则来实现 http://wproxy.org/whistle/webui/filter.html
        const filterData = data.length && data.filter(item => Boolean(item));
        // console.log(filterData, '有效数据====>');
        if (!filterData) {
          return;
        }
        const newestOne = filterData && filterData[filterData.length - 1];
        if (newestOne) {
          const headers = Object.keys(newestOne).map((item) => {
            return {
              title: item,
              dataIndex: item,
              key: item,
              ellipsis: { showTitle: false },
              render: (address) => (
                <Tooltip placement="topLeft" title={address}>
                  {address}
                </Tooltip>
              ),
            };
          });
          setColumns(headers);
        }

        setList([...filterData]);
      });
  };

  const clearList = () => {
    // 刷新
    fetch('cgi-bin/clear');
  };

  const handleClear = () => {
    setList([]);
    clearList();
    clearInterval(timer);
    timer = setInterval(() => {
      getTableList();
    }, 1000);
  };

  useEffect(() => {
    clearList();
    timer = setInterval(() => {
      getTableList();
    }, 1000);

    // TODO: 页面退出缓存columns，貌似没生效
    return () => {
      localStorage.setItem('WHISTLE_COLUMNS', JSON.stringify(columns));
    };
  }, []);

  // 初始化columns
  useEffect(() => {
    const cacheColumns = localStorage.getItem('WHISTLE_COLUMNS');
    if (cacheColumns) {
      setColumns(JSON.parse(cacheColumns));
    }
  }, []);

  const filterRow = (_, index) => {
    const lastItem = list[list.length - 1];
    const sameTime = list[index].eventTime === lastItem.eventTime;
    // pageId & blockId & dataId都一样
    const repeatReport = list[index].pageId === lastItem.pageId
      && list[index].blockId === lastItem.blockId
      && list[index].dataId === lastItem.dataId;
    // 校验
    const isError = false;
    // 同一批数据【绿色】展示
    if (sameTime) {
      return 'newTow';
    }
    // 重复上报数据【黄色】展示
    if (sameTime && repeatReport) {
      return 'repeatTow';
    }
    // 校验不通过【红色】展示
    if (isError) {
      return 'errorTow';
    }
  };

  return (
    <div>
      <Button disabled icon={isRecording ? <RecordIcon style={{color: 'rgb(255, 102, 102)'}}/> :
        <RecordIcon style={{color: 'rgb(204, 204, 204)'}}/>} onClick={handleToggleRecord}>Record</Button>
      <Button icon={<ClearIcon/>} onClick={handleClear}>Clear</Button>
      {list.length
        ? (
          <Table
            columns={columns}
            rowClassName={filterRow}
            pagination={false}
            rowKey="reqId"
            scroll={{
              y: '90vh',
            }}
            expandable={{
              expandedRowRender: record => (
                <Tabs>
                  <Tabs.TabPane tab="Fields" key="item-1">
                    {
                      columns.map(item => (
                        <p>{item && item.title}: {record[item && item.dataIndex]}</p>
                      ))
                    }
                  </Tabs.TabPane>
                  <Tabs.TabPane tab="Raw" key="item-2">
                    {JSON.stringify(record)}
                  </Tabs.TabPane>
                </Tabs>
              ),
              rowExpandable: () => true,
              expandIcon: ({ expanded, onExpand, record }) => (expanded ? (
                <DownOutlined onClick={e => onExpand(record, e)} />
              ) : (
                <RightOutlined onClick={e => onExpand(record, e)} />
              )),
            }}
            dataSource={list}
          />
        )
        : <Empty/>}
    </div>
  );
}