mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
cb1dfbeeb4
commit
2442532f57
@ -8,7 +8,7 @@ import {
|
|||||||
updateDatasourcePluginJsonDataOption,
|
updateDatasourcePluginJsonDataOption,
|
||||||
updateDatasourcePluginResetOption,
|
updateDatasourcePluginResetOption,
|
||||||
} from '@grafana/data/src';
|
} 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 { config } from 'app/core/config';
|
||||||
|
|
||||||
import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants';
|
import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants';
|
||||||
@ -18,8 +18,6 @@ import { InfluxFluxConfig } from './InfluxFluxConfig';
|
|||||||
import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig';
|
import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig';
|
||||||
import { InfluxSqlConfig } from './InfluxSQLConfig';
|
import { InfluxSqlConfig } from './InfluxSQLConfig';
|
||||||
|
|
||||||
const { Input } = LegacyForms;
|
|
||||||
|
|
||||||
const versions: Array<SelectableValue<InfluxVersion>> = [
|
const versions: Array<SelectableValue<InfluxVersion>> = [
|
||||||
{
|
{
|
||||||
label: 'InfluxQL',
|
label: 'InfluxQL',
|
||||||
@ -132,21 +130,19 @@ export class ConfigEditor extends PureComponent<Props, State> {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h3 className="page-heading">Query Language</h3>
|
<FieldSet>
|
||||||
<div className="gf-form-group">
|
<h3 className="page-heading">Query language</h3>
|
||||||
<div className="gf-form-inline">
|
<Field>
|
||||||
<div className="gf-form">
|
<Select
|
||||||
<Select
|
aria-label="Query language"
|
||||||
aria-label="Query language"
|
className="width-30"
|
||||||
className="width-30"
|
value={this.getQueryLanguageDropdownValue(options.jsonData.version)}
|
||||||
value={this.getQueryLanguageDropdownValue(options.jsonData.version)}
|
options={config.featureToggles.influxdbSqlSupport ? versionsWithSQL : versions}
|
||||||
options={config.featureToggles.influxdbSqlSupport ? versionsWithSQL : versions}
|
defaultValue={versions[0]}
|
||||||
defaultValue={versions[0]}
|
onChange={this.onVersionChanged}
|
||||||
onChange={this.onVersionChanged}
|
/>
|
||||||
/>
|
</Field>
|
||||||
</div>
|
</FieldSet>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{options.jsonData.version !== InfluxVersion.InfluxQL && (
|
{options.jsonData.version !== InfluxVersion.InfluxQL && (
|
||||||
<Alert severity="info" title={this.versionNotice[options.jsonData.version!]}>
|
<Alert severity="info" title={this.versionNotice[options.jsonData.version!]}>
|
||||||
@ -172,34 +168,29 @@ export class ConfigEditor extends PureComponent<Props, State> {
|
|||||||
onChange={onOptionsChange}
|
onChange={onOptionsChange}
|
||||||
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
|
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
|
||||||
/>
|
/>
|
||||||
|
<FieldSet>
|
||||||
<div className="gf-form-group">
|
<h3 className="page-heading">InfluxDB Details</h3>
|
||||||
<div>
|
|
||||||
<h3 className="page-heading">InfluxDB Details</h3>
|
|
||||||
</div>
|
|
||||||
{this.renderJsonDataOptions()}
|
{this.renderJsonDataOptions()}
|
||||||
<div className="gf-form-inline">
|
<InlineField
|
||||||
<InlineField
|
labelWidth={20}
|
||||||
labelWidth={20}
|
label="Max series"
|
||||||
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."
|
||||||
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
|
||||||
<Input
|
placeholder="1000"
|
||||||
placeholder="1000"
|
type="number"
|
||||||
type="number"
|
className="width-20"
|
||||||
className="width-20"
|
value={this.state.maxSeries}
|
||||||
value={this.state.maxSeries}
|
onChange={(event: { currentTarget: { value: string } }) => {
|
||||||
onChange={(event) => {
|
// We duplicate this state so that we allow to write freely inside the input. We don't have
|
||||||
// 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.
|
||||||
// any influence over saving so this seems to be only way to do this.
|
this.setState({ maxSeries: event.currentTarget.value });
|
||||||
this.setState({ maxSeries: event.currentTarget.value });
|
const val = parseInt(event.currentTarget.value, 10);
|
||||||
const val = parseInt(event.currentTarget.value, 10);
|
updateDatasourcePluginJsonDataOption(this.props, 'maxSeries', Number.isFinite(val) ? val : undefined);
|
||||||
updateDatasourcePluginJsonDataOption(this.props, 'maxSeries', Number.isFinite(val) ? val : undefined);
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
</InlineField>
|
||||||
</InlineField>
|
</FieldSet>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user