render()

in public/pages/Transforms/containers/Transforms/TransformDetails.tsx [195:353]
150 lines of code
3 McCabe index (conditional complexity)

  render() {
    const {
      id,
      enabled,
      enabledAt,
      updatedAt,
      description,
      sourceIndex,
      targetIndex,
      sourceIndexFilter,
      interval,
      intervalTimeUnit,
      pageSize,
      metadata,
      transformJson,
      groupsShown,
      aggregationsShown,
      isDeleteModalOpen,
      isModalOpen,
      isPopOverOpen,
    } = this.state;

    let scheduleText = "Every " + interval + " " + intervalTimeUnit.toLowerCase();
    const actionButton = (
      <EuiButton iconType="arrowDown" iconSide="right" disabled={false} onClick={this.onActionButtonClick} data-test-subj="actionButton">
        Actions
      </EuiButton>
    );

    const actionItems = [
      <EuiContextMenuItem
        key="enable"
        icon="empty"
        disabled={enabled}
        data-test-subj="enableButton"
        onClick={() => {
          this.closePopover();
          this.onEnable();
        }}
      >
        Enable job
      </EuiContextMenuItem>,
      <EuiContextMenuItem
        key="disable"
        icon="empty"
        disabled={!enabled}
        data-test-subj="disableButton"
        onClick={() => {
          this.closePopover();
          this.onDisable();
        }}
      >
        Disable job
      </EuiContextMenuItem>,
      <EuiContextMenuItem
        key="view"
        icon="empty"
        disabled={false}
        data-test-subj="viewButton"
        onClick={() => {
          this.closePopover();
          this.showJsonModal();
        }}
      >
        View JSON
      </EuiContextMenuItem>,
      <EuiContextMenuItem
        key="delete"
        icon="empty"
        disabled={false}
        data-test-subj="deleteButton"
        onClick={() => {
          this.closePopover();
          this.showDeleteModal();
        }}
      >
        <EuiTextColor color="danger">Delete</EuiTextColor>
      </EuiContextMenuItem>,
    ];

    return (
      <div style={{ padding: "5px 50px" }}>
        <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
          <EuiFlexItem grow={false}>
            <EuiTitle size="m">
              <h2>{id}</h2>
            </EuiTitle>
          </EuiFlexItem>

          <EuiFlexItem grow={false}>
            <EuiFlexGroup alignItems="center" gutterSize="s">
              <EuiFlexItem grow={false}>
                <EuiPopover
                  id="action"
                  button={actionButton}
                  isOpen={isPopOverOpen}
                  closePopover={this.closePopover}
                  panelPaddingSize="none"
                  anchorPosition="downLeft"
                  data-test-subj="actionPopover"
                >
                  <EuiContextMenuPanel items={actionItems} />
                </EuiPopover>
              </EuiFlexItem>
            </EuiFlexGroup>
          </EuiFlexItem>
        </EuiFlexGroup>

        <EuiSpacer />
        <GeneralInformation
          id={id}
          description={description}
          sourceIndex={sourceIndex}
          targetIndex={targetIndex}
          sourceIndexFilter={sourceIndexFilter}
          scheduledText={scheduleText}
          pageSize={pageSize}
          enabledAt={enabledAt}
          updatedAt={updatedAt}
          onEdit={this.onEdit}
        />
        <EuiSpacer />
        <TransformStatus metadata={metadata} />
        <EuiSpacer />
        <EuiSpacer />
        <TransformSettings
          {...this.props}
          transformService={this.props.transformService}
          transformId={id}
          sourceIndex={sourceIndex}
          transformJson={transformJson}
          groupsShown={groupsShown}
          aggregationsShown={aggregationsShown}
        />

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

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

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

        {isDeleteModalOpen && <DeleteModal item={id} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />}
      </div>
    );
  }