chore(76107): Remove legacy form from InfluxConfigEditor (#76382)

Remove legacy form from InfluxConfigEditor

With this commit, legacy form components are remvoed from influxdb
config eidtor page. Form is now using FieldSet instead.
This commit is contained in:
Shabeeb Khalid 2023-10-12 21:03:21 +03:00 committed by GitHub
parent cb1dfbeeb4
commit 2442532f57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -8,7 +8,7 @@ import {
updateDatasourcePluginJsonDataOption,
updateDatasourcePluginResetOption,
} from '@grafana/data/src';
import { Alert, DataSourceHttpSettings, InlineField, LegacyForms, Select } from '@grafana/ui/src';
import { Alert, DataSourceHttpSettings, InlineField, Select, Field, Input, FieldSet } from '@grafana/ui/src';
import { config } from 'app/core/config';
import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants';
@ -18,8 +18,6 @@ import { InfluxFluxConfig } from './InfluxFluxConfig';
import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig';
import { InfluxSqlConfig } from './InfluxSQLConfig';
const { Input } = LegacyForms;
const versions: Array<SelectableValue<InfluxVersion>> = [
{
label: 'InfluxQL',
@ -132,21 +130,19 @@ export class ConfigEditor extends PureComponent<Props, State> {
return (
<>
<h3 className="page-heading">Query Language</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<Select
aria-label="Query language"
className="width-30"
value={this.getQueryLanguageDropdownValue(options.jsonData.version)}
options={config.featureToggles.influxdbSqlSupport ? versionsWithSQL : versions}
defaultValue={versions[0]}
onChange={this.onVersionChanged}
/>
</div>
</div>
</div>
<FieldSet>
<h3 className="page-heading">Query language</h3>
<Field>
<Select
aria-label="Query language"
className="width-30"
value={this.getQueryLanguageDropdownValue(options.jsonData.version)}
options={config.featureToggles.influxdbSqlSupport ? versionsWithSQL : versions}
defaultValue={versions[0]}
onChange={this.onVersionChanged}
/>
</Field>
</FieldSet>
{options.jsonData.version !== InfluxVersion.InfluxQL && (
<Alert severity="info" title={this.versionNotice[options.jsonData.version!]}>
@ -172,34 +168,29 @@ export class ConfigEditor extends PureComponent<Props, State> {
onChange={onOptionsChange}
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
/>
<div className="gf-form-group">
<div>
<h3 className="page-heading">InfluxDB Details</h3>
</div>
<FieldSet>
<h3 className="page-heading">InfluxDB Details</h3>
{this.renderJsonDataOptions()}
<div className="gf-form-inline">
<InlineField
labelWidth={20}
label="Max series"
tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
>
<Input
placeholder="1000"
type="number"
className="width-20"
value={this.state.maxSeries}
onChange={(event) => {
// We duplicate this state so that we allow to write freely inside the input. We don't have
// any influence over saving so this seems to be only way to do this.
this.setState({ maxSeries: event.currentTarget.value });
const val = parseInt(event.currentTarget.value, 10);
updateDatasourcePluginJsonDataOption(this.props, 'maxSeries', Number.isFinite(val) ? val : undefined);
}}
/>
</InlineField>
</div>
</div>
<InlineField
labelWidth={20}
label="Max series"
tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
>
<Input
placeholder="1000"
type="number"
className="width-20"
value={this.state.maxSeries}
onChange={(event: { currentTarget: { value: string } }) => {
// We duplicate this state so that we allow to write freely inside the input. We don't have
// any influence over saving so this seems to be only way to do this.
this.setState({ maxSeries: event.currentTarget.value });
const val = parseInt(event.currentTarget.value, 10);
updateDatasourcePluginJsonDataOption(this.props, 'maxSeries', Number.isFinite(val) ? val : undefined);
}}
/>
</InlineField>
</FieldSet>
</>
);
}