render()

in source/console/src/components/DataTable.tsx [493:582]
89 lines of code
10 McCabe index (conditional complexity)

  render() {
    const { headers, data, currentPage, pageSize } = this.state;
    const startIndex = currentPage * pageSize - pageSize;
    const endIndex = currentPage * pageSize;

    return (
      <div>
        <Row>
          <Col>
            <Form>
              <Form.Row className="justify-content-between">
                <Col md={3}>
                  <Form.Group as={Row} controlId="showCountId">
                    <Form.Label column sm={6}>
                      {I18n.get('text.page.size')}
                    </Form.Label>
                    <Col sm={6}>
                      <Form.Control as="select" defaultValue={pageSize} onChange={this.handlePageSizeChange}>
                        <option value={10}>10</option>
                        <option value={25}>25</option>
                        <option value={50}>50</option>
                        <option value={100}>100</option>
                      </Form.Control>
                    </Col>
                  </Form.Group>
                </Col>
                <Col md={3}>
                  <Form.Control id="searchKeyword" placeholder={I18n.get('text.search.keyword')} onChange={this.handleSearchKeywordChange} />
                </Col>
              </Form.Row>
            </Form>
          </Col>
        </Row>
        <Row>
          <Col>
            {
              headers.length === 0 &&
              <Jumbotron>
                <p>{I18n.get('text.no.header.datatable')}</p>
              </Jumbotron>
            }
            {
              headers.length > 0 &&
              <div>
                <Table striped bordered>
                  <thead>
                    <tr>
                      {
                        headers.map(header => {
                          return (
                            <th key={`thead-${header.key}`} onClick={() => this.handleSort(header.key, header.keyType)}>{header.name} &nbsp;
                              {(() => {
                                if (this.state.sort.key === header.key) {
                                  return (this.state.sort.order === 'asc') ? <GrAscend /> : <GrDescend />
                                } else {
                                  return <GrSort />
                                }
                              })()}
                            </th>
                          );
                        })
                      }
                    </tr>
                  </thead>
                  <tbody>
                    {
                      data.filter(datum => datum.visible).slice(startIndex, endIndex).length === 0 &&
                      <tr>
                        <td colSpan={headers.length}>{I18n.get('text.no.data')}</td>
                      </tr>
                    }
                    {
                      data.filter(datum => datum.visible).slice(startIndex, endIndex).map(datum => {
                        return (
                          <tr id={datum.id} key={uuid.v4()}>
                            {
                              headers.map(header => {
                                const key = header.key;
                                const value = datum[key] ? datum[key] : '';
                                return (
                                  <td key={`tbody-${key}`}>{header.callFunction ? header.callFunction(value) : value}
                                    {(key === 'rootCause' && datum.status === 'closed') ? <Button className="float-sm-right" variant="link" size="sm" onClick={async () => this.handleEditRootcause(datum)}><GoPencil /></Button> : ''}
                                  </td>
                                );
                              })
                            }
                          </tr>
                        )
                      })
                    }