render()

in source/console/src/views/IssuesReport.tsx [281:432]
151 lines of code
7 McCabe index (conditional complexity)

  render() {
    const headers = [
      { name: I18n.get('text.process.name'), key: 'processName' },
      { name: I18n.get('text.event.description'), key: 'eventDescription' },
      { name: I18n.get('text.device.name'), key: 'deviceName' },
      { name: I18n.get('text.status'), key: 'status' },
      { name: I18n.get('text.rootcause'), key: 'rootCause' },
      { name: I18n.get('text.comment'), key: 'comment' },
      { name: I18n.get('text.openfor'), key: 'openFor', callFunction: convertSecondsToHms, keyType: 'number' },
      { name: I18n.get('text.created.at'), key: 'createdAt' },
      { name: I18n.get('text.closed.at'), key: 'closed' },
      { name: I18n.get('text.createdby'), key: 'createdBy' },
      { name: I18n.get('text.acknowledgedby'), key: 'acknowledgedBy' },
      { name: I18n.get('text.closedby'), key: 'closedBy' },
    ];

    return (
      <div className="view">
        <Container>
          <Row>
            <Col>
              <Breadcrumb>
                <Breadcrumb.Item active>{I18n.get('text.issues.report')}</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
          </Row>
          <Row>
            <Col>
              <Card>
                <Card.Header><strong>{I18n.get('text.issues.report.24hourSummary')}</strong></Card.Header>
                <Card.Body>
                  <Row>
                    <Col><h6 id="totalIssues">{I18n.get('text.issues.report.TotalIssues')} : {this.state.prevDayIssuesStats.open + this.state.prevDayIssuesStats.acknowledged + this.state.prevDayIssuesStats.closed}</h6></Col>
                    <Col><h6 id="issuesOpen">{I18n.get('text.issues.report.Open')} : {this.state.prevDayIssuesStats.open}</h6></Col>
                    <Col><h6 id="issuesAck">{I18n.get('text.issues.report.Acknowledged')} : {this.state.prevDayIssuesStats.acknowledged}</h6></Col>
                    <Col><h6 id="issuesClosed">{I18n.get('text.issues.report.Closed')} : {this.state.prevDayIssuesStats.closed}</h6></Col>
                    <Col><h6 id="issuesOpenedLast3Hours">{I18n.get('text.issues.report.OpenedLast3Hours')} : {this.state.prevDayIssuesStats.lastThreeHours}</h6></Col>
                  </Row>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          <EmptyRow />
          <Row>
            <Col>
              <Card>
                <Card.Header><strong>{I18n.get('text.search.title')}</strong></Card.Header>
                <Card.Body>
                  <Form onSubmit={this.getIssuesByQuery}>
                    <Form.Row>
                      <Form.Group as={Col} md={2} controlId="siteSelect">
                        <Form.Label>{I18n.get('text.select.site.issues')}</Form.Label>
                        <Form.Control as="select" name="siteName" value={this.state.selectedSite.name} onChange={this.handleSiteChange} required>
                          <option data-key="" key="none-site" value="">{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={3} controlId="areaSelect">
                        <Form.Label>{I18n.get('text.select.area.issues')}</Form.Label>
                        <Form.Control as="select" disabled={this.state.selectedSite.id === '' ? true : false} name="siteArea" value={this.state.selectedArea.name} onChange={this.handleAreaChange}>
                          <option data-key="" key="none-area" value="">{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} md={2} controlId="startDate">
                        <Form.Label>{I18n.get('text.select.dates')}</Form.Label>
                        <Col><Form.Control type="date" name="startDate" placeholder="Start Date" onChange={this.setStartDate} max={this.state.currentDate} required /></Col>
                      </Form.Group>
                      <Form.Group as={Col} md={2} controlId="endDate">
                        <Form.Label><EmptyRow></EmptyRow></Form.Label>
                        <Col><Form.Control type="date" name="endDate" placeholder="End Date" min={this.state.startDate} max={this.state.currentDate} required /></Col>
                      </Form.Group>
                      <Form.Group as={Col} md={2} controlId="downloadIssues">
                        <Form.Label><EmptyRow></EmptyRow></Form.Label>
                        <InputGroup className="mb-3">
                          <Button className='ml-2 mr-2' id="getIssues" type="submit">{I18n.get('button.submit')}</Button>
                            {
                              this.state.issues.length > 0 &&
                              <CSVLink id="downloadIssues" data={this.state.issues} className="btn btn-primary">{I18n.get('button.download.csv.data')}</CSVLink>
                            }
                            {
                              this.state.issues.length == 0 &&
                              <Button id="downloadIssuesDisabled" className="btn btn-primary" disabled>{I18n.get('button.download.csv.data')}</Button>
                            }
                        </InputGroup>
                      </Form.Group>
                    </Form.Row>
                  </Form>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          {
            this.state.showIssuesTable &&
            <div>
              <EmptyRow />
              <Row>
                <Col>
                  <Card className="custom-card-big">
                    <Card.Body>
                      <DataTable headers={headers} data={this.state.issues} initialSort={{ key: 'count', order: SortBy.Desc, keyType: 'number' }}
                        handleNotification={this.props.handleNotification} />
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
            </div>
          }
          {
            !this.state.showIssuesTable &&
            <div>
              <EmptyRow />
              <Card className="text-center">
                <Card.Header id="issuesTableEmptyState">{I18n.get('text.search.help')} </Card.Header>
              </Card>
            </div>
          }
          {
            this.state.isLoading &&
            <Row>
              <Col>
                <ProgressBar animated now={100} />
              </Col>
            </Row>
          }
          {
            this.state.error &&
            <Row>
              <Col>
                <Alert variant="danger">
                  <strong>{I18n.get('error')}:</strong><br />
                  {this.state.error}
                </Alert>
              </Col>
            </Row>
          }
        </Container>
      </div>
    );
  }