render()

in public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx [285:413]
120 lines of code
6 McCabe index (conditional complexity)

  render() {
    const {
      rollupId,
      description,
      sourceIndex,
      targetIndex,
      continuousJob,
      continuousDefinition,
      interval,
      intervalTimeunit,
      cronExpression,
      pageSize,
      lastUpdated,
      metadata,

      timestamp,
      histogramInterval,
      timezone,
      selectedDimensionField,
      selectedMetrics,
      metricsShown,
      dimensionsShown,
      isModalOpen,
      rollupJSON,
      enabled,
      isDeleteModalVisible,
    } = this.state;

    let scheduleText = "";
    if (rollupJSON.rollup != null) {
      scheduleText =
        rollupJSON.rollup.schedule.interval != null
          ? buildIntervalScheduleText(rollupJSON.rollup.continuous, interval, intervalTimeunit)
          : buildCronScheduleText(rollupJSON.rollup.continuous, rollupJSON.rollup.schedule.cron.expression);
    }

    return (
      <div style={{ padding: "5px 50px" }}>
        <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
          <EuiFlexItem grow={false}>
            <EuiTitle size="m">
              <h2>{rollupId}</h2>
            </EuiTitle>
          </EuiFlexItem>
          <EuiFlexItem>
            {enabled ? (
              <EuiHealth color="success">{"Enabled on " + lastUpdated}</EuiHealth>
            ) : (
              <EuiHealth color="danger">Disabled</EuiHealth>
            )}
          </EuiFlexItem>

          <EuiFlexItem grow={false}>
            <EuiFlexGroup alignItems="center" gutterSize="s">
              <EuiFlexItem grow={false}>
                <EuiButton disabled={!enabled} onClick={this.onDisable} data-test-subj="disableButton">
                  Disable
                </EuiButton>
              </EuiFlexItem>
              <EuiFlexItem grow={false}>
                <EuiButton disabled={enabled} onClick={this.onEnable} data-test-subj="enableButton">
                  Enable
                </EuiButton>
              </EuiFlexItem>
              <EuiFlexItem grow={false}>
                <EuiButton onClick={this.showModal}>View JSON</EuiButton>
              </EuiFlexItem>
              <EuiFlexItem grow={false}>
                <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
                  Delete
                </EuiButton>
              </EuiFlexItem>
            </EuiFlexGroup>
          </EuiFlexItem>
        </EuiFlexGroup>

        <EuiSpacer />
        <GeneralInformation
          rollupId={rollupId}
          description={description}
          sourceIndex={sourceIndex}
          targetIndex={targetIndex}
          scheduleText={scheduleText}
          pageSize={pageSize}
          lastUpdated={lastUpdated}
          onEdit={this.onEdit}
        />
        <EuiSpacer />
        <RollupStatus metadata={metadata} />
        <EuiSpacer />
        <AggregationAndMetricsSettings
          timestamp={timestamp}
          histogramInterval={histogramInterval}
          timezone={timezone}
          selectedDimensionField={selectedDimensionField}
          selectedMetrics={selectedMetrics}
          metricsShown={metricsShown}
          dimensionsShown={dimensionsShown}
          onChangeMetricsShown={this.onChangeMetricsShown}
          onChangeDimensionsShown={this.onChangeDimensionsShown}
        />
        <EuiSpacer />

        {isModalOpen && (
          <EuiOverlayMask>
            <EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
              <EuiModalHeader>
                <EuiModalHeaderTitle>{"View JSON of " + rollupId} </EuiModalHeaderTitle>
              </EuiModalHeader>

              <EuiModalBody>
                <EuiCodeBlock language="json" fontSize="m" paddingSize="m" overflowHeight={600} inline={false} isCopyable>
                  {JSON.stringify(rollupJSON, null, 4)}
                </EuiCodeBlock>
              </EuiModalBody>

              <EuiModalFooter>
                <EuiButtonEmpty onClick={this.closeModal}>Close</EuiButtonEmpty>
              </EuiModalFooter>
            </EuiModal>
          </EuiOverlayMask>
        )}

        {isDeleteModalVisible && (
          <DeleteModal rollupId={rollupId} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />
        )}
      </div>
    );
  }