WDSTransLog.jsx 2.78 KB
import React, { Component, Fragment } from 'react'
import { Table, Modal, Button } from 'antd'
import guidepost from './resources/images/guidepost.png'
import data from './resources/json/dataList.json'

class WDSTransLog extends Component {
  state = { visible: false, message: '' }

  _handleShowModal = data => {
    this.setState({
      visible: true,
      message: data,
    })
  }

  _handleOk = e => {
    this.setState({
      visible: false,
      message: '',
    })
  }

  _handleCancel = e => {
    this.setState({
      visible: false,
      message: '',
    })
  }

  _showTotal = total => {
    return `Total ${total} items`
  }

  render() {
    const colums = [
      {
        title: 'Log ID',
        dataIndex: 'logID',
        key: 'logID',
      },
      {
        title: 'Username',
        dataIndex: 'username',
        key: 'username',
      },
      {
        title: 'Mobile ID',
        dataIndex: 'mobileID',
        key: 'mobileID',
      },
      {
        title: 'Device Type',
        dataIndex: 'deviceType',
        key: 'deviceType',
      },
      {
        title: 'Screen',
        dataIndex: 'screen',
        key: 'screen',
      },
      {
        title: 'Action',
        dataIndex: 'action',
        key: 'action',
      },
      {
        title: 'Transaction Message',
        dataIndex: 'transactionMessage',
        key: 'transactionMessage',
      },
      {
        title: 'Request Time',
        dataIndex: 'requestTime',
        key: 'requestTime',
      },
      {
        title: 'Using Time(ms)',
        dataIndex: 'usingTime',
        key: 'usingTime',
      },
      {
        title: 'Result From',
        dataIndex: 'resultFrom',
        key: 'resultFrom',
      },
      {
        title: 'Result',
        dataIndex: 'result',
        key: 'result',
      },
      {
        title: 'Http Status',
        dataIndex: 'httpStatus',
        key: 'httpStatus',
      },
      {
        title: 'Result Message',
        dataIndex: 'resultMessage',
        key: 'resultMessage',
      },
      {
        title: 'In/Out',
        dataIndex: 'inOut',
        key: 'inOut',
        render: (text, row) => (
          <a href="#" onClick={() => this._handleShowModal(row.logID)}>
            <img src={guidepost} />
          </a>
        ),
      },
    ]

    return (
      <Fragment>
        <Table
          dataSource={data}
          columns={colums}
          pagination={{
            pageSize: 5,
            showTotal: this._showTotal,
            total: data.length,
            size: 'small',
          }}
        />
        <Modal
          title="Warning"
          visible={this.state.visible}
          onOk={this._handleOk}
          onCancel={this._handleCancel}>
          <p>{this.state.message}</p>
        </Modal>
      </Fragment>
    )
  }
}

export default WDSTransLog