render()

in public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx [218:335]

• 114 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const { fieldsOption, selectedDimensionField } = this.props;
    const {
      allSelectedFields,
      isModalVisible,
      dimensionFrom,
      dimensionSize,
      dimensionSortDirection,
      dimensionSortField,
      dimensionsShown,
    } = this.state;
    const dimensionPage = Math.floor(dimensionFrom / dimensionSize);

    const dimensionPagination: Pagination = {
      pageIndex: dimensionPage,
      pageSize: dimensionSize,
      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
      totalItemCount: selectedDimensionField.length,
    };

    const dimensionSorting: EuiTableSortingType<DimensionItem> = {
      sort: {
        direction: dimensionSortDirection,
        field: dimensionSortField,
      },
    };

    const selection: EuiTableSelectionType<FieldItem> = {
      onSelectionChange: this.onSelectionChange,
      initialSelected: allSelectedFields,
    };

    const aggregationColumns: EuiTableFieldDataColumnType<DimensionItem>[] = [
      {
        field: "sequence",
        name: "Sequence",
        sortable: true,
        dataType: "number",
        align: "left",
      },
      {
        field: "field.label",
        name: "Field name",
        align: "left",
      },
      {
        field: "field.type",
        name: "Field type",
        align: "left",
        render: (type) => (type == null ? "-" : type),
      },
      {
        field: "aggregationMethod",
        name: "Aggregation method",
        align: "left",
        render: (aggregationMethod, item) => (
          <EuiForm>
            <EuiFormRow compressed={true}>
              <EuiSelect
                compressed={true}
                value={aggregationMethod}
                disabled={!isNumericMapping(item.field.type)}
                options={[
                  { value: "terms", text: "Terms" },
                  { value: "histogram", text: "Histogram" },
                ]}
                onChange={(e) => this.onChangeAggregationMethod(e, item)}
                data-test-subj={`aggregationMethodSelect-${item.field.label}`}
              />
            </EuiFormRow>
          </EuiForm>
        ),
      },
      {
        field: "interval",
        name: "Interval",
        dataType: "number",
        align: "left",
        render: (interval: number, item) =>
          interval == null ? (
            "-"
          ) : (
            <EuiForm>
              <EuiFormRow>
                <EuiFieldNumber
                  min={1}
                  value={interval}
                  onChange={(e) => this.onChangeInterval(e, item)}
                  data-test-subj={`interval-${item.field.label}`}
                />
              </EuiFormRow>
            </EuiForm>
          ),
      },
      {
        field: "sequence",
        name: "",
        align: "center",
        render: (sequence, item: DimensionItem) => {
          return (
            <EuiFlexGroup justifyContent="spaceBetween">
              <EuiFlexItem grow={false}>
                {item.sequence != 1 && (
                  <EuiLink color="primary" onClick={() => this.moveUp(item)} data-test-subj={`moveUp-${item.field.label}`}>
                    Move up
                  </EuiLink>
                )}
              </EuiFlexItem>
              <EuiFlexItem grow={false}>
                {item.sequence != selectedDimensionField.length && (
                  <EuiLink color="primary" onClick={() => this.moveDown(item)} data-test-subj={`moveDown-${item.field.label}`}>
                    Move down
                  </EuiLink>
                )}
              </EuiFlexItem>
            </EuiFlexGroup>
          );
        },