render()

in src/QueryEditor.tsx [270:450]

• 173 lines of code
• 24 McCabe index (conditional complexity)

  render() {
    const { isVariable, datasource } = this.props;
    const settings = getDataSourceSrv().getInstanceSettings(datasource.uid)?.jsonData || {};
    const dq = defaults(this.props.query, isVariable ? defaultEidtorQuery : defaultQuery);
    const { query, xcol, ycol, type, logstore, queryType, legendFormat, step, totalLogs, powerSql } = dq;
    const { logstore: defaultLogstore } = settings as SLSDataSourceOptions;
    const { logstoreList } = this.state;
    const variables = getTemplateSrv().getVariables();
    const customLogstore = variables.filter((item) => {
      return item.type === 'custom' && (/logstore/i.test(item?.label ?? '') || /logstore/i.test(item.name));
    });
    let uniqLogstoreList = [...new Set([defaultLogstore, ...logstoreList])].map((i) =>
      i === defaultLogstore
        ? { label: i, value: i, description: 'Default Logstore', id: i }
        : { label: i, value: i, id: i }
    );
    if (customLogstore.length > 0) {
      for (const ls of customLogstore) {
        uniqLogstoreList.unshift({
          label: ls?.label ?? ls.name,
          value: `__custom__@${ls.name}`,
          id: `__custom__@${ls.name}`,
          description: 'Custom Logstore',
        });
      }
    }

    return (
      <>
        <div className="gf-form-inline" style={{ lineHeight: '32px', verticalAlign: 'center' }}>
          <InlineField label={'数据源类型'} labelWidth={24}>
            <Select width={24} options={dataSourceType} onChange={this.onDatasourceTypeChange} value={type} />
          </InlineField>

          <InlineField label={'日志库列表'} labelWidth={24}>
            <Select
              width={24}
              options={uniqLogstoreList}
              onChange={this.onLogstoreChange}
              value={logstore || defaultLogstore}
            />
          </InlineField>

          {!isVariable && (
            <Button
              style={{ float: 'right', marginLeft: '10px' }}
              disabled={this.state.loading}
              fill="outline"
              onClick={() => {
                this.gotoSLS();
              }}
            >
              <Icon name="external-link-alt" />
              {this.state.loading ? ' loading...' : ' goto SLS'}
            </Button>
          )}

          {!isVariable && (this.state.datasourceType === 'logstore' || this.state.datasourceType === 'all') && (
            <InlineField label={'增强Sql'} style={{ marginLeft: '10px' }}>
              <InlineSwitch onChange={this.onPowerSqlChange} value={powerSql} />
            </InlineField>

          )}
        </div>

        <div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
          <ConfirmModal
            isOpen={this.state.showAlert}
            title="配置STS跳转出错"
            body={`原因: ${this.state.message} 点击Confirm按照非STS逻辑跳转`}
            confirmText="Confirm"
            icon="exclamation-triangle"
            onConfirm={() => {
              const newWindow = window.open(this.state.url, '_blank');
              if (newWindow) {
                newWindow.opener = null;
              }
              this.setState({
                showAlert: false,
                message: '',
                url: '',
              });
            }}
            onDismiss={() => {
              this.setState({
                showAlert: false,
              });
            }}
          />
          <InlineFormLabel width={6} className="query-keyword">
            Query
          </InlineFormLabel>
          {version === '' ||
          version.startsWith('8.0') ||
          version.startsWith('8.1') ||
          version.startsWith('8.2') ||
          version.startsWith('7') ? (
            // <input
            //   className="gf-form-input"
            //   value={query}
            //   onChange={this.onQueryTextChange}
            //   onBlur={this.onQueryTextChange}
            //   style={{ fontFamily: 'Menlo, monospace' }}
            // ></input>
            <div style={{ width: '100%' }}>
              <MonacoQueryFieldOld
                onChange={this.onQueryTextChangeString}
                onRunQuery={this.onQueryTextChangeWithRunQuery}
                onBlur={this.onQueryTextChangeString}
                initialValue={query ?? ''}
                languageProvider={{} as any}
                history={[]}
                placeholder={''}
              />
            </div>
          ) : (
            <MonacoQueryField
              onChange={this.onQueryTextChangeString}
              onRunQuery={this.onQueryTextChangeWithRunQuery}
              onBlur={this.onQueryTextChangeString}
              initialValue={query ?? ''}
              languageProvider={{} as any}
              history={[]}
              placeholder={''}
            />
          )}
        </div>

        {type !== 'metricstore' && !isVariable && (
          <div className="gf-form-inline" style={{ lineHeight: '32px', verticalAlign: 'center' }}>
            <InlineField label={'ycol'} labelWidth={12}>
              <Input
                width={60}
                prefix={<Icon name="text-fields" />}
                value={ycol}
                onChange={this.onYChange}
                label="ycol"
                suffix={
                  <Tooltip content={<SelectTips type="ycol" />} interactive theme="info-alt">
                    <Icon name="question-circle" />
                  </Tooltip>
                }
              />
            </InlineField>

            <InlineField label={'xcol'} labelWidth={12}>
              <div style={{ display: 'flex' }}>
                <Select
                  width={20}
                  menuShouldPortal
                  options={xSelectOptions}
                  value={this.autoSelect(xcol ?? 'time')}
                  onChange={(v) => {
                    const { onChange, query, onRunQuery } = this.props;
                    if (v.value !== 'custom') {
                      this.setState({
                        xColDisabled: true,
                      });
                      onChange({ ...query, xcol: v.value });
                      onRunQuery();
                    } else {
                      this.setState({
                        xColDisabled: false,
                      });
                      onChange({ ...query, xcol: 'time' });
                    }
                  }}
                  prefix={<Icon name="palette" />}
                />
                <Input
                  width={this.state.xColDisabled ? 20 : 40}
                  disabled={this.state.xColDisabled}
                  prefix={<Icon name="x" />}
                  value={xcol}
                  onChange={this.onXChange}
                  label="xcol"
                  suffix={
                    <Tooltip content={<SelectTips type="xcol" />} interactive theme="info-alt">
                      <Icon name="question-circle" />
                    </Tooltip>
                  }