public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: remove gf-forms and LegacyForms from Graphite ConfigEditor (#76038)

Browse Source 
* Chore: remove gf-forms and LegacyForms from Graphite ConfigEditor

* Use Field instead of InlineField

* Remove unused imports
This commit is contained in:
Tobias Skarhed
2023-10-13 19:58:03 +02:00
committed by GitHub
parent 7f89251dc9
commit 335b73d9ae
1 changed files with 41 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
+41 -56
View File
@@ -6,7 +6,7 @@ import {
onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceJsonDataOptionChecked,
} from '@grafana/data';
import { Alert, DataSourceHttpSettings, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
import { Alert, DataSourceHttpSettings, Field, FieldSet, Select, Switch } from '@grafana/ui';
import { config } from 'app/core/config';
import store from 'app/core/store';
@@ -16,7 +16,6 @@ import { DEFAULT_GRAPHITE_VERSION, GRAPHITE_VERSIONS } from '../versions';
import { MappingsConfiguration } from './MappingsConfiguration';
import { fromString, toString } from './parseLokiLabelMappings';
const { Switch } = LegacyForms;
export const SHOW_MAPPINGS_HELP_KEY = 'grafana.datasources.graphite.config.showMappingsHelp';
const graphiteVersions = GRAPHITE_VERSIONS.map((version) => ({ label: `${version}.x`, value: version }));
@@ -40,20 +39,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
};
}
renderTypeHelp = () => {
return (
<p>
There are different types of Graphite compatible backends. Here you can specify the type you are using. If you
are using{' '}
<a href="https://github.com/grafana/metrictank" className="pointer" target="_blank" rel="noreferrer">
Metrictank
</a>{' '}
then select that here. This will enable Metrictank specific features like query processing meta data. Metrictank
is a multi-tenant timeseries engine for Graphite and friends.
</p>
);
};
componentDidMount() {
updateDatasourcePluginJsonDataOption(this.props, 'graphiteVersion', this.currentGraphiteVersion);
}
@@ -77,48 +62,48 @@ export class ConfigEditor extends PureComponent<Props, State> {
onChange={onOptionsChange}
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
/>
<h3 className="page-heading">Graphite details</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
Version
</InlineFormLabel>
<Select
aria-label="Graphite version"
value={currentVersion}
options={graphiteVersions}
className="width-8"
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel tooltip={this.renderTypeHelp}>Type</InlineFormLabel>
<Select
aria-label="Graphite backend type"
options={graphiteTypes}
value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
className="width-8"
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
/>
</div>
</div>
<FieldSet>
<legend className="page-heading">Graphite details</legend>
<Field
label="Version"
description="This option controls what functions are available in the Graphite query editor."
>
<Select
id="graphite-version"
aria-label="Graphite version"
value={currentVersion}
options={graphiteVersions}
width={16}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
/>
</Field>
<Field
label="Graphite backend type"
description="There are different types of Graphite compatible backends. Here you can specify the type you are using. For Metrictank, this will enable specific features, like query processing meta data. Metrictank
is a multi-tenant timeseries engine for Graphite and friends."
>
<Select
id="backend-type"
options={graphiteTypes}
value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
width={16}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
/>
</Field>
{options.jsonData.graphiteType === GraphiteType.Metrictank && (
<div className="gf-form-inline">
<div className="gf-form">
<Switch
label="Rollup indicator"
labelClass={'width-10'}
tooltip="Shows up as an info icon in panel headers when data is aggregated"
checked={!!options.jsonData.rollupIndicatorEnabled}
onChange={onUpdateDatasourceJsonDataOptionChecked(this.props, 'rollupIndicatorEnabled')}
/>
</div>
</div>
<Field
label="Rollup indicator"
description="Shows up as an info icon in panel headers when data is aggregated."
>
<Switch
id="rollup-indicator"
value={!!options.jsonData.rollupIndicatorEnabled}
onChange={onUpdateDatasourceJsonDataOptionChecked(this.props, 'rollupIndicatorEnabled')}
/>
</Field>
)}
</div>
</FieldSet>
<MappingsConfiguration
mappings={(options.jsonData.importConfiguration?.loki?.mappings || []).map(toString)}
showHelp={this.state.showMappingsHelp}