render()

in public/pages/Transforms/containers/Transforms/TransformSettings.tsx [54:129]
69 lines of code
3 McCabe index (conditional complexity)

  render() {
    const { groupsShown, aggregationsShown } = this.props;

    const groupItems = () => {
      return groupsShown.map((group, index) => {
        return (
          <EuiFlexItem key={index}>
            <EuiText size="xs">
              <dt>Group by {group.aggregationMethod}</dt>
              <dd>{group.field.label}</dd>
            </EuiText>
          </EuiFlexItem>
        );
      });
    };

    const aggItems = () => {
      return Object.keys(aggregationsShown).map((key, index) => {
        let aggregationType = Object.keys(aggregationsShown[key])[0];
        let sourceField = "";
        if (aggregationType != TRANSFORM_AGG_TYPE.scripted_metric) {
          sourceField = aggregationsShown[key][aggregationType].field;
        } else {
          sourceField = key;
        }

        return (
          <EuiFlexItem key={index}>
            <EuiText size="xs">
              <dt>{aggregationType}()</dt>
              <dd>{sourceField}</dd>
            </EuiText>
          </EuiFlexItem>
        );
      });
    };

    return (
      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform settings" titleSize="m">
        <div style={{ paddingLeft: "10px" }}>
          <EuiSpacer size="m" />
          <EuiFlexGrid columns={4}>
            {groupItems()}
            {aggItems()}
          </EuiFlexGrid>
          <EuiSpacer size="m" />
        </div>
        <div style={{ padding: "10px" }}>
          <EuiAccordion id={htmlIdGenerator()()} buttonContent="Sample source index and transform result" onClick={this.onClick}>
            <div style={{ padding: "10px" }}>
              <EuiSpacer size={"m"} />

              {/*// TODO: Use the source data preview table from create workflow */}
              <EuiText>
                <h5>Preview result based on sample data</h5>
              </EuiText>
              <EuiSpacer size={"s"} />
              <PreviewTransforms
                onRemoveTransformation={() => {}}
                previewTransform={this.state.previewTransform}
                aggList={[]}
                isReadOnly={true}
              />
            </div>
          </EuiAccordion>
        </div>
      </ContentPanel>
    );
  }

  onClick = async () => {
    // Only call preview when preview transform is empty
    const { previewTransform } = this.state;
    if (!previewTransform.length) await this.previewTransform({ transform: this.props.transformJson.transform });
  };
}