Chore: Remove gf-forms from alertmanager and graphite datasources (#88933)

This commit is contained in:
Joao Silva 2024-06-12 10:13:13 +01:00 committed by GitHub
parent b7120c5a30
commit dc03798c34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 44 additions and 65 deletions

View File

@ -7998,12 +7998,6 @@ exports[`no gf-form usage`] = {
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/plugins/datasource/alertmanager/ConfigEditor.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
@ -8037,14 +8031,6 @@ exports[`no gf-form usage`] = {
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],

View File

@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
import { DataSourceHttpSettings, InlineField, InlineFormLabel, InlineSwitch, Select, Text } from '@grafana/ui';
import { Box, DataSourceHttpSettings, InlineField, InlineSwitch, Select, Text } from '@grafana/ui';
import { config } from 'app/core/config';
import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from './types';
@ -47,50 +47,45 @@ export const ConfigEditor = (props: Props) => {
return (
<>
<h3 className="page-heading">Alertmanager</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel width={13}>Implementation</InlineFormLabel>
<Select
width={40}
options={IMPL_OPTIONS}
value={options.jsonData.implementation || AlertManagerImplementation.mimir}
onChange={(value) =>
onOptionsChange({
...options,
jsonData: {
...options.jsonData,
implementation: value.value,
},
<Box marginBottom={5}>
<InlineField label="Implementation" labelWidth={26}>
<Select
width={40}
options={IMPL_OPTIONS}
value={options.jsonData.implementation || AlertManagerImplementation.mimir}
onChange={(value) =>
onOptionsChange({
...options,
jsonData: {
...options.jsonData,
implementation: value.value,
},
})
}
/>
</InlineField>
<InlineField
label="Receive Grafana Alerts"
tooltip="When enabled, Grafana-managed alerts are sent to this Alertmanager."
labelWidth={26}
>
<InlineSwitch
value={options.jsonData.handleGrafanaManagedAlerts ?? false}
onChange={(e) => {
onOptionsChange(
produce(options, (draft) => {
draft.jsonData.handleGrafanaManagedAlerts = e.currentTarget.checked;
})
}
/>
</div>
</div>
<div className="gf-form-inline">
<InlineField
label="Receive Grafana Alerts"
tooltip="When enabled, Grafana-managed alerts are sent to this Alertmanager."
labelWidth={26}
>
<InlineSwitch
value={options.jsonData.handleGrafanaManagedAlerts ?? false}
onChange={(e) => {
onOptionsChange(
produce(options, (draft) => {
draft.jsonData.handleGrafanaManagedAlerts = e.currentTarget.checked;
})
);
}}
/>
</InlineField>
</div>
);
}}
/>
</InlineField>
{options.jsonData.handleGrafanaManagedAlerts && (
<Text variant="bodySmall" color="secondary">
Make sure to enable the alert forwarding on the <Link to="/alerting/admin">settings page</Link>.
</Text>
)}
</div>
</Box>
<DataSourceHttpSettings
defaultUrl={''}
dataSourceConfig={options}

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { InlineFormLabel, Input, TagsInput } from '@grafana/ui';
import { Box, InlineField, Input, TagsInput } from '@grafana/ui';
import { GraphiteDatasource } from '../datasource';
import { GraphiteQuery, GraphiteOptions } from '../types';
@ -34,23 +34,21 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
};
return (
<div className="gf-form-group">
<div className="gf-form">
<InlineFormLabel width={12}>Graphite Query</InlineFormLabel>
<Box marginBottom={5}>
<InlineField label="Graphite Query" labelWidth={24} grow>
<Input
value={target}
onChange={(e) => setTarget(e.currentTarget.value || '')}
onBlur={() => updateValue('target', target)}
placeholder="Example: statsd.application.counters.*.count"
/>
</div>
</InlineField>
<h5 className="section-heading">Or</h5>
<div className="gf-form">
<InlineFormLabel width={12}>Graphite events tags</InlineFormLabel>
<InlineField label="Graphite events tags" labelWidth={24}>
<TagsInput id="tags-input" width={50} tags={tags} onChange={onTagsChange} placeholder="Example: event_tag" />
</div>
</div>
</InlineField>
</Box>
);
};

View File

@ -1,6 +1,6 @@
import React, { ChangeEvent, useState } from 'react';
import { Button, Icon, InlineField, InlineFieldRow, Input } from '@grafana/ui';
import { Box, Button, Icon, InlineField, InlineFieldRow, Input } from '@grafana/ui';
import MappingsHelp from './MappingsHelp';
@ -27,7 +27,7 @@ export const MappingsConfiguration = (props: Props): JSX.Element => {
)}
{props.showHelp && <MappingsHelp onDismiss={props.onDismiss} />}
<div className="gf-form-group">
<Box marginBottom={5}>
{mappings.map((mapping, i) => (
<InlineFieldRow key={i}>
<InlineField label={`Mapping (${i + 1})`}>
@ -71,7 +71,7 @@ export const MappingsConfiguration = (props: Props): JSX.Element => {
>
Add label mapping
</Button>
</div>
</Box>
</div>
);
};