IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 36 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx
View File

@ -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>
</> </>
); );
} }