render()

in source/console/src/views/Event.tsx [394:545]

• 149 lines of code
• 6 McCabe index (conditional complexity)

  render() {
    return (
      <div className="view">
        <Container>
          <Row>
            <Col>
              <Breadcrumb>
                <LinkContainer to="/sites" exact>
                  <Breadcrumb.Item>{I18n.get('text.sites')}</Breadcrumb.Item>
                </LinkContainer>
                <LinkContainer to={`/sites/${this.state.siteId}`} exact>
                  <Breadcrumb.Item>{I18n.get('text.areas')}{this.state.siteName}</Breadcrumb.Item>
                </LinkContainer>
                <LinkContainer to={`/areas/${this.state.areaId}/processes`} exact>
                  <Breadcrumb.Item>{I18n.get('info.processes')}{this.state.areaName}</Breadcrumb.Item>
                </LinkContainer>
                <Breadcrumb.Item active>{I18n.get('text.events')}{this.state.processName}</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
          </Row>
          <Row>
            <Col>
              <Form>
                <Form.Row className="justify-content-end">
                  <Button size="sm" variant="primary" onClick={() => this.props.history.push(`/processes/${this.state.processId}/event`)}>{I18n.get('button.add.event')}</Button>
                </Form.Row>
              </Form>
            </Col>
          </Row>
          <EmptyRow />
          <Row>
            <Col>
              <Card>
                <Card.Body>
                  <Card.Title>{this.state.title}</Card.Title>
                  <Form>
                    <Form.Row>
                      <Form.Group as={Col} md={4} controlId="searchKeyword">
                        <Form.Label>{I18n.get('text.search.keyword')}</Form.Label>
                        <Form.Control type="text" placeholder={I18n.get('text.search.event.name')} defaultValue={this.state.searchKeyword} onChange={this.handleSearchKeywordChange} />
                      </Form.Group>
                      <Form.Group as={Col} md={4} controlId="sortBy">
                        <Form.Label>{I18n.get('text.sort.by')}</Form.Label>
                        <Form.Control as="select" defaultValue={this.state.sort} onChange={this.handleSort}>
                          <option value={SortBy.Asc}>A-Z</option>
                          <option value={SortBy.Desc}>Z-A</option>
                        </Form.Control>
                      </Form.Group>
                    </Form.Row>
                  </Form>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          <EmptyRow />
          <Row>
            {
              this.state.events.length === 0 && !this.state.isLoading &&
              <Col>
                <Jumbotron>
                  <p>{I18n.get('text.no.event')}</p>
                </Jumbotron>
              </Col>
            }
            {
              this.state.events.filter((event: IEvent) => event.visible)
                .map((event: IEvent) => {
                  let { priority } = event;
                  priority = I18n.get(`text.priority.${priority}`);

                  if (priority.includes('text.priority')) {
                    priority = I18n.get('text.not.found');
                  }

                  let eventImg;
                  if (event.eventImgKey) {
                    eventImg = (
                      <div className="event-image-thumbnail-container">
                        <AmplifyS3Image
                          key="event-image"
                          className="amplify-s3-image event-image-thumbnail"
                          imgKey={event.eventImgKey} />
                      </div>
                    );
                  } else {
                    eventImg = '';
                  }

                  return (
                    <Col md={4} key={event.id}>
                      <Card className="custom-card">
                        <Card.Body>
                          <Card.Title>
                            {event.name}
                          </Card.Title>
                          <Table striped bordered>
                            <tbody>
                              <tr>
                                <td>{I18n.get('text.description')}</td>
                                <td>{event.description}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.sms')}</td>
                                <td>{event.sms}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.email')}</td>
                                <td>{event.email}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.priority')}</td>
                                <td>{priority}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.type')}</td>
                                <td>{event.eventType}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.rootcauses')}</td>
                                <td>
                                  {
                                    event.rootCauses ? `${event.rootCauses.length} ${I18n.get('text.attached.rootcause')}` : ''
                                  }
                                </td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.event.id')}</td>
                                <td>{event.id}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.event.image')}</td>
                                <td>{eventImg}</td>
                              </tr>
                              <tr>
                                <td>{I18n.get('text.event.alias')}</td>
                                <td>{event.alias}</td>
                              </tr>
                            </tbody>
                          </Table>
                          <Form>
                            <Form.Row className="justify-content-between">
                              <Button id={`deleteEvent_${event.id}`} size="sm" variant="danger"
                                onClick={() => this.openModal(ModalType.Delete, event)}>{I18n.get('button.delete')}</Button>
                              <Button id={`editEvent_${event.id}`} size="sm" variant="primary" onClick={() => this.props.history.push(`/processes/${this.state.processId}/event/${event.id}`)}>{I18n.get('button.edit')}</Button>
                            </Form.Row>
                          </Form>
                        </Card.Body>
                      </Card>
                    </Col>
                  );
                })
            }