render()

in source/console/src/views/Observer.tsx [527:624]

• 98 lines of code
• 8 McCabe index (conditional complexity)

  render() {
    return (
      <div className="view">
        <Container>
          <Row>
            <Col>
              <Breadcrumb>
                <Breadcrumb.Item active>{I18n.get('menu.observer')}</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
          </Row>
          <Row>
            <Col>
              <Card>
                <Card.Body>
                  <Form>
                    <Form.Row>
                      <Form.Group as={Col} md={6} controlId="siteSelect">
                        <Form.Label>{I18n.get('text.select.site.issues')}</Form.Label>
                        <Form.Control as="select" value={this.state.selectedSite.name} onChange={this.handleSiteChange}>
                          <option data-key="" key="none-site" value="" disabled>{I18n.get('text.select.site')}</option>
                          {
                            this.state.sites.map((site: IGeneralQueryData) => {
                              return (
                                <option data-key={site.id} key={site.id} value={site.name}>{site.name}</option>
                              );
                            })
                          }
                        </Form.Control>
                      </Form.Group>
                      <Form.Group as={Col} md={6} controlId="areaSelect">
                        <Form.Label>{I18n.get('text.select.area.issues')}</Form.Label>
                        <Form.Control as="select" value={this.state.selectedArea.name} onChange={this.handleAreaChange}>
                          <option data-key="" key="none-area" value="" disabled>{I18n.get('text.select.area')}</option>
                          {
                            this.state.selectedSite.name !== "" && <option data-key="all" key="all" value="all">{I18n.get('text.select.area.all')}</option>
                          }
                          {
                            this.state.areas.map((area: IGeneralQueryData) => {
                              return (
                                <option data-key={area.id} key={area.id} value={area.name}>{area.name}</option>
                              );
                            })
                          }
                        </Form.Control>
                      </Form.Group>
                    </Form.Row>
                  </Form>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          <EmptyRow />
          <Row>
            <Col>
              {
                this.state.showIssue && this.state.issues.filter(issue => issue.visible).length === 0 && !this.state.isLoading &&
                <Jumbotron>
                  <p>{I18n.get('text.no.issues.currently')}</p>
                </Jumbotron>
              }
              {
                this.state.issues.filter(issue => issue.visible).length > 0 &&
                <Card className="custom-card-big">
                  <Row>
                    {
                      this.state.issues.filter((issue: IIssue) => issue.visible)
                        .map((issue: IIssue) => {
                          return (
                            <Col xs={6} sm={4} md={4} key={issue.id}>
                              <Card className="custom-card-issue">
                                <Card.Header>
                                  <p><strong>{issue.eventDescription}</strong></p>
                                  <p>{issue.deviceName} - {issue.stationName}</p>
                                  <p>{this.calculateTimeSinceIssueCreated(issue.createdAt)}</p>
                                </Card.Header>
                                <Card.Body>
                                  <Card.Title>
                                    <h6>{I18n.get('text.process.name')} - {issue.processName}</h6>
                                  </Card.Title>
                                  <Form>
                                    {
                                      issue.status === 'open' &&
                                      <Form.Row className="justify-content-between">
                                        <Button variant="success" size="sm" onClick={async () => this.handleUpdateIssue(issue, 'acknowledged')}>{I18n.get('button.acknowledge')}</Button>
                                        <Button variant="secondary" size="sm" onClick={async () => this.handleUpdateIssue(issue, 'rejected')}>{I18n.get('button.reject')}</Button>
                                      </Form.Row>
                                    }
                                    {
                                      issue.status === 'acknowledged' &&
                                      <Button variant="warning" size="sm" onClick={async () => this.handleClose(issue)}>{I18n.get('button.close')}</Button>
                                    }
                                  </Form>
                                </Card.Body>
                              </Card>
                            </Col>
                          );
                        })