render()

in source/console/src/views/Client.tsx [1222:1372]

• 148 lines of code
• 11 McCabe index (conditional complexity)

  render() {
    const nonAutomatedEvents = this.state.events.filter(e => e.eventType !== 'automated');

    return (
      <div className="view">
        <Container>
          <Row>
            <Col>
              <Breadcrumb>
                <Breadcrumb.Item active>{I18n.get('menu.client')}</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
          </Row>
          <Row>
            <Col>
              <Card>
                <Card.Body>
                  <Form>
                    <Form.Row>
                      <Form.Group as={Col} xs={6} sm={3} md={2} controlId="siteSelect">
                        <Form.Label>{I18n.get('text.site.name')}</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} xs={6} sm={3} md={2} controlId="areaSelect">
                        <Form.Label>{I18n.get('text.area.name')}</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.areas.map((area: IGeneralQueryData) => {
                              return (
                                <option data-key={area.id} key={area.id} value={area.name}>{area.name}</option>
                              );
                            })
                          }
                        </Form.Control>
                      </Form.Group>
                      <Form.Group as={Col} xs={6} sm={3} md={2} controlId="processSelect">
                        <Form.Label>{I18n.get('text.process.name')}</Form.Label>
                        <Form.Control as="select" value={this.state.selectedProcess.name} onChange={this.handleProcessChange}>
                          <option data-key="" key="none-process" value="" disabled>{I18n.get('text.select.process')}</option>
                          {
                            this.state.processes.map((process: IGeneralQueryData) => {
                              return (
                                <option data-key={process.id} key={process.id} value={process.name}>{process.name}</option>
                              );
                            })
                          }
                        </Form.Control>
                      </Form.Group>
                      <Form.Group as={Col} xs={6} sm={3} md={2} controlId="stationSelect">
                        <Form.Label>{I18n.get('text.station.name')}</Form.Label>
                        <Form.Control as="select" value={this.state.selectedStation.name} onChange={this.handleStationChange}>
                          <option data-key="" key="none-station" value="" disabled>{I18n.get('text.select.station')}</option>
                          {
                            this.state.stations.map((station: IGeneralQueryData) => {
                              return (
                                <option data-key={station.id} key={station.id} value={station.name}>{station.name}</option>
                              );
                            })
                          }
                        </Form.Control>
                      </Form.Group>
                      <Form.Group as={Col} xs={6} sm={3} md={2} controlId="deviceSelect">
                        <Form.Label>{I18n.get('text.device.name')}</Form.Label>
                        <Form.Control as="select" value={this.state.selectedDevice.name} onChange={this.handleDeviceChange}>
                          <option data-key="" key="none-device" value="" disabled>{I18n.get('text.select.device')}</option>
                          {
                            this.state.devices.map((device: IGeneralQueryData) => {
                              return (
                                <option data-key={device.id} key={device.id} value={device.name}>{device.name}</option>
                              );
                            })
                          }
                        </Form.Control>
                      </Form.Group>
                    </Form.Row>
                  </Form>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          <EmptyRow />
          <Row>
            <Col>
              {
                this.state.showEvent && this.state.events.length === 0 && !this.state.isLoading &&
                <Jumbotron>
                  <p>{I18n.get('text.no.events.for.process')}</p>
                </Jumbotron>
              }
              {
                nonAutomatedEvents.some(e => e.parentId === this.state.selectedProcess.id) &&
                <Card className="custom-card-big">
                  <Row>
                    {
                      nonAutomatedEvents
                        .filter(e => e.parentId === this.state.selectedProcess.id)
                        .map((event: IEvent) => {
                          let className = 'custom-card-event';
                          if (event.isOpen || this.hasOpenSubEvents(event.id!)) {
                            className = className.concat(' ', 'event-open');
                          } else if (event.isAcknowledged || this.hasAcknowledgedSubEvents(event.id!)) {
                            className = className.concat(' ', 'event-acknowledged');
                          } else if (event.isClosedRejected) {
                            className = className.concat(' ', 'event-closed-rejected');
                          }

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

                          return (
                            <Col xs={6} sm={3} md={3} key={event.id} className='custom-card-event-col'>
                              <Card className={className} onClick={async () => this.handleEventClick(event)}>
                                <Card.Body className='client-event-card-body'>
                                  <Card.Title>
                                    {this.outputEventNameForCardTitle(event)}
                                  </Card.Title>
                                  <Card.Text>
                                    {event.description}
                                  </Card.Text>
                                  {eventImg}
                                </Card.Body>
                              </Card>
                            </Col>
                          );
                        })
                    }
                  </Row>
                </Card>
              }