renderParserStep()

in web-console/src/views/load-data-view/load-data-view.tsx [1510:1708]

• 191 lines of code
• 27 McCabe index (conditional complexity)

  renderParserStep() {
    const { columnFilter, specialColumnsOnly, parserQueryState, selectedFlattenField } = this.state;
    const spec = this.getEffectiveSpec();
    const inputFormat: InputFormat = deepGet(spec, 'spec.ioConfig.inputFormat') || EMPTY_OBJECT;
    const flattenFields: FlattenField[] = getFlattenSpec(spec)?.fields || EMPTY_ARRAY;

    const canHaveNestedData = inputFormatCanProduceNestedData(inputFormat);

    let mainFill: JSX.Element | string;
    if (parserQueryState.isInit()) {
      mainFill = (
        <CenterMessage>
          Please enter the parser details on the right <Icon icon={IconNames.ARROW_RIGHT} />
        </CenterMessage>
      );
    } else {
      const data = parserQueryState.getSomeData();
      mainFill = (
        <div className="table-with-control">
          <div className="table-control">
            <ClearableInput
              value={columnFilter}
              onValueChange={columnFilter => this.setState({ columnFilter })}
              placeholder="Search columns"
            />
            {canHaveNestedData && (
              <Switch
                checked={specialColumnsOnly}
                label="Flattened columns only"
                onChange={() => this.setState({ specialColumnsOnly: !specialColumnsOnly })}
                disabled={!flattenFields.length}
              />
            )}
          </div>
          {data && (
            <ParseDataTable
              sampleResponse={data}
              columnFilter={columnFilter}
              canFlatten={canHaveNestedData}
              flattenedColumnsOnly={specialColumnsOnly}
              flattenFields={flattenFields}
              onFlattenFieldSelect={this.onFlattenFieldSelect}
            />
          )}
          {parserQueryState.isLoading() && <Loader />}
          {parserQueryState.error && (
            <CenterMessage>{parserQueryState.getErrorMessage()}</CenterMessage>
          )}
        </div>
      );
    }

    let suggestedFlattenFields: FlattenField[] | undefined;
    if (canHaveNestedData && !flattenFields.length && parserQueryState.data) {
      suggestedFlattenFields = computeFlattenPathsForData(
        filterMap(parserQueryState.data.data, r => r.input),
        'ignore-arrays',
      );
    }

    const specType = getSpecType(spec);
    const inputFormatFields = isStreamingSpec(spec)
      ? STREAMING_INPUT_FORMAT_FIELDS
      : BATCH_INPUT_FORMAT_FIELDS;

    const possibleSystemFields = getPossibleSystemFieldsForSpec(spec);

    const normalInputAutoForm = (
      <AutoForm
        fields={inputFormatFields}
        model={inputFormat}
        onChange={p => this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))}
      />
    );

    return (
      <>
        <div className="main">{mainFill}</div>
        <div className="control">
          <ParserMessage />
          {!selectedFlattenField && (
            <>
              {!isKafkaOrKinesis(specType) ? (
                normalInputAutoForm
              ) : (
                <>
                  {!isKafkaOrKinesis(inputFormat?.type) ? (
                    normalInputAutoForm
                  ) : (
                    <AutoForm
                      fields={inputFormatFields}
                      model={inputFormat?.valueFormat}
                      onChange={p =>
                        this.updateSpecPreview(
                          deepSet(spec, 'spec.ioConfig.inputFormat.valueFormat', p),
                        )
                      }
                    />
                  )}
                  <FormGroup className="parse-metadata">
                    <Switch
                      label={
                        specType === 'kafka'
                          ? 'Parse Kafka metadata (ts, headers, key)'
                          : 'Parse Kinesis metadata (ts, partition key)'
                      }
                      checked={isKafkaOrKinesis(inputFormat?.type)}
                      onChange={() => {
                        this.updateSpecPreview(
                          isKafkaOrKinesis(inputFormat?.type)
                            ? deepMove(
                                spec,
                                'spec.ioConfig.inputFormat.valueFormat',
                                'spec.ioConfig.inputFormat',
                              )
                            : deepSet(spec, 'spec.ioConfig.inputFormat', {
                                type: specType,
                                valueFormat: inputFormat,
                              }),
                        );
                      }}
                    />
                  </FormGroup>
                  {inputFormat?.type === 'kafka' && (
                    <AutoForm
                      fields={KAFKA_METADATA_INPUT_FORMAT_FIELDS}
                      model={inputFormat}
                      onChange={p =>
                        this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))
                      }
                    />
                  )}
                  {inputFormat?.type === 'kinesis' && (
                    <AutoForm
                      fields={KINESIS_METADATA_INPUT_FORMAT_FIELDS}
                      model={inputFormat}
                      onChange={p =>
                        this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))
                      }
                    />
                  )}
                </>
              )}
              {possibleSystemFields.length > 0 && (
                <AutoForm
                  fields={[
                    {
                      name: 'spec.ioConfig.inputSource.systemFields',
                      label: 'System fields',
                      type: 'string-array',
                      suggestions: possibleSystemFields,
                      info: 'JSON array of system fields to return as part of input rows.',
                    },
                  ]}
                  model={spec}
                  onChange={this.updateSpecPreview}
                />
              )}
              {this.renderApplyButtonBar(
                parserQueryState,
                AutoForm.issueWithModel(inputFormat, inputFormatFields) ||
                  (inputFormat?.type === 'kafka'
                    ? AutoForm.issueWithModel(inputFormat, KAFKA_METADATA_INPUT_FORMAT_FIELDS)
                    : undefined),
              )}
            </>
          )}
          {canHaveNestedData && this.renderFlattenControls()}
          {suggestedFlattenFields && suggestedFlattenFields.length ? (
            <FormGroup>
              <Button
                icon={IconNames.LIGHTBULB}
                text={`Auto add ${pluralIfNeeded(suggestedFlattenFields.length, 'flatten spec')}`}
                onClick={() => {
                  this.updateSpec(changeFlattenSpec(spec, { fields: suggestedFlattenFields }));
                }}
              />
            </FormGroup>
          ) : undefined}
        </div>
        {this.renderNextBar({
          disabled: !parserQueryState.data,
          onNextStep: () => {
            if (!parserQueryState.data) return false;
            const possibleTimestampSpec = isDruidSource(spec)
              ? {
                  column: TIME_COLUMN,
                  format: 'auto',
                }
              : getTimestampSpec(parserQueryState.data);

            const newSpec = deepSet(spec, 'spec.dataSchema.timestampSpec', possibleTimestampSpec);
            this.updateSpec(newSpec);
            return true;
          },
        })}
      </>
    );
  }