IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-20 11:48:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Remove Form usage from alerting config components (#81681)

Browse Source 
* Chore: Replace InputControl in BaseSettings

* Chore: Replace InputControl and FormAPI in OptionElement.tsx

* Update ConfigEditor.tsx
This commit is contained in:
Alex Khomenko 2024-02-13 11:51:54 +01:00 committed by GitHub
parent d07aa25512
commit 55d17c7fcb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 78 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/features/alerting/components/BasicSettings.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { Controller } from 'react-hook-form';
import { SelectableValue } from '@grafana/data';
import { Field, Input, InputControl, Select } from '@grafana/ui';
import { Field, Input, Select } from '@grafana/ui';
import { NotificationChannelSecureFields, NotificationChannelType } from '../../../types';
@ -31,7 +32,7 @@ export const BasicSettings = ({
<Input {...register('name', { required: 'Name is required' })} />
</Field>
<Field label="Type">
<InputControl
<Controller
name="type"
render={({ field: { ref, ...field } }) => <Select {...field} options={channels} />}
control={control}

7
public/app/features/alerting/components/OptionElement.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import { Controller, UseFormReturn } from 'react-hook-form';
import { FormAPI, Input, InputControl, Select, TextArea } from '@grafana/ui';
import { Input, Select, TextArea } from '@grafana/ui';
import { NotificationChannelOption } from '../../../types';
interface Props extends Pick<FormAPI<any>, 'register' | 'control'> {
interface Props extends Pick<UseFormReturn<any>, 'register' | 'control'> {
option: NotificationChannelOption;
invalid?: boolean;
}
@ -27,7 +28,7 @@ export const OptionElement = ({ control, option, register, invalid }: Props) =>
case 'select':
return (
<InputControl
<Controller
control={control}
name={`${modelValue}`}
render={({ field: { ref, ...field } }) => (

141
public/app/features/alerting/unified/components/admin/ConfigEditor.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { useForm } from 'react-hook-form';
import { Button, CodeEditor, ConfirmModal, Field, Form, HorizontalGroup } from '@grafana/ui';
import { Button, CodeEditor, ConfirmModal, Field, Stack } from '@grafana/ui';
import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
@ -29,77 +30,77 @@ export const ConfigEditor = ({
onConfirmReset,
onDismiss,
}: ConfigEditorProps) => {
const {
handleSubmit,
formState: { errors },
setValue,
register,
} = useForm({ defaultValues });
register('configJSON', {
required: { value: true, message: 'Required' },
validate: (value: string) => {
try {
JSON.parse(value);
return true;
} catch (e) {
return e instanceof Error ? e.message : 'JSON is invalid';
}
},
});
return (
<Form defaultValues={defaultValues} onSubmit={onSubmit} key={defaultValues.configJSON}>
{({ errors, setValue, register }) => {
register('configJSON', {
required: { value: true, message: 'Required' },
validate: (value: string) => {
try {
JSON.parse(value);
return true;
} catch (e) {
return e instanceof Error ? e.message : 'JSON is invalid';
}
},
});
<form onSubmit={handleSubmit(onSubmit)} key={defaultValues.configJSON}>
<Field
disabled={loading}
label="Configuration"
invalid={!!errors.configJSON}
error={errors.configJSON?.message}
data-testid={readOnly ? 'readonly-config' : 'config'}
>
<CodeEditor
language="json"
width="100%"
height={500}
showLineNumbers={true}
value={defaultValues.configJSON}
showMiniMap={false}
onSave={(value) => {
setValue('configJSON', value);
}}
onBlur={(value) => {
setValue('configJSON', value);
}}
readOnly={readOnly}
/>
</Field>
return (
<>
<Field
disabled={loading}
label="Configuration"
invalid={!!errors.configJSON}
error={errors.configJSON?.message}
data-testid={readOnly ? 'readonly-config' : 'config'}
>
<CodeEditor
language="json"
width="100%"
height={500}
showLineNumbers={true}
value={defaultValues.configJSON}
showMiniMap={false}
onSave={(value) => {
setValue('configJSON', value);
}}
onBlur={(value) => {
setValue('configJSON', value);
}}
readOnly={readOnly}
/>
</Field>
{!readOnly && (
<Stack gap={1}>
<Button type="submit" variant="primary" disabled={loading}>
Save configuration
</Button>
{onReset && (
<Button type="button" disabled={loading} variant="destructive" onClick={onReset}>
Reset configuration
</Button>
)}
</Stack>
)}
{!readOnly && (
<HorizontalGroup>
<Button type="submit" variant="primary" disabled={loading}>
Save configuration
</Button>
{onReset && (
<Button type="button" disabled={loading} variant="destructive" onClick={onReset}>
Reset configuration
</Button>
)}
</HorizontalGroup>
)}
{Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
<ConfirmModal
isOpen={true}
title="Reset Alertmanager configuration"
body={`Are you sure you want to reset configuration ${
alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME
? 'for the Grafana Alertmanager'
: `for "${alertManagerSourceName}"`
}? Contact points and notification policies will be reset to their defaults.`}
confirmText="Yes, reset configuration"
onConfirm={onConfirmReset}
onDismiss={onDismiss}
/>
)}
</>
);
}}
</Form>
{Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
<ConfirmModal
isOpen={true}
title="Reset Alertmanager configuration"
body={`Are you sure you want to reset configuration ${
alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME
? 'for the Grafana Alertmanager'
: `for "${alertManagerSourceName}"`
}? Contact points and notification policies will be reset to their defaults.`}
confirmText="Yes, reset configuration"
onConfirm={onConfirmReset}
onDismiss={onDismiss}
/>
)}
</form>
);
};