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

Alerting: Remove deprecated InputControl (#84793)

Browse Source
This commit is contained in:
Alex Khomenko 2024-03-21 11:59:41 +01:00 committed by GitHub
parent f67e56939a
commit b41ad688f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 49 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
View File

@ -1,10 +1,10 @@
import { css } from '@emotion/css';
import { sortBy } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useFormContext, FieldErrors, FieldValues } from 'react-hook-form';
import { useFormContext, FieldErrors, FieldValues, Controller } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Alert, Button, Field, InputControl, Select, useStyles2 } from '@grafana/ui';
import { Alert, Button, Field, Select, useStyles2 } from '@grafana/ui';
import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
import { ChannelValues, CommonSettingsComponentType } from '../../../types/receiver-form';
@ -134,7 +134,7 @@ export function ChannelSubForm<R extends ChannelValues>({
<div className={styles.topRow}>
<div>
<Field label="Integration" htmlFor={contactPointTypeInputId} data-testid={`${pathPrefix}type`}>
<InputControl
<Controller
name={fieldName('type')}
defaultValue={defaultValues.type}
render={({ field: { ref, onChange, ...field } }) => (

12
public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
View File

@ -1,10 +1,10 @@
import { css } from '@emotion/css';
import { isEmpty } from 'lodash';
import React, { FC, useEffect } from 'react';
import { useFormContext, FieldError, DeepMap } from 'react-hook-form';
import { useFormContext, FieldError, DeepMap, Controller } from 'react-hook-form';
import { GrafanaTheme2 } from '@grafana/data';
import { Checkbox, Field, Input, InputControl, RadioButtonList, Select, TextArea, useStyles2 } from '@grafana/ui';
import { Checkbox, Field, Input, RadioButtonList, Select, TextArea, useStyles2 } from '@grafana/ui';
import { NotificationChannelOption } from 'app/types';
import { KeyValueMapInput } from './KeyValueMapInput';
@ -134,7 +134,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
case 'select':
return (
<InputControl
<Controller
render={({ field: { onChange, ref, ...field } }) => (
<Select
disabled={readOnly}
@ -158,7 +158,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
return (
<>
<legend className={styles.legend}>{option.label}</legend>
<InputControl
<Controller
render={({ field: { ref, ...field } }) => (
<RadioButtonList disabled={readOnly} options={option.selectOptions ?? []} {...field} />
)}
@ -192,7 +192,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
);
case 'string_array':
return (
<InputControl
<Controller
render={({ field: { value, onChange } }) => (
<StringArrayInput readOnly={readOnly} value={value} onChange={onChange} />
)}
@ -202,7 +202,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
);
case 'key_value_map':
return (
<InputControl
<Controller
render={({ field: { value, onChange } }) => (
<KeyValueMapInput readOnly={readOnly} value={value} onChange={onChange} />
)}

6
public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { FieldArrayWithId, useFormContext } from 'react-hook-form';
import { FieldArrayWithId, useFormContext, Controller } from 'react-hook-form';
import { InputControl, Text, Stack } from '@grafana/ui';
import { Text, Stack } from '@grafana/ui';
import { RuleFormValues } from '../../types/rule-form';
import { Annotation, annotationDescriptions, annotationLabels } from '../../utils/constants';
@ -25,7 +25,7 @@ const AnnotationHeaderField = ({
<Stack direction="column" gap={0}>
<label>
{
<InputControl
<Controller
name={`annotations.${index}.key`}
defaultValue={annotationField.key}
render={({ field: { ref, ...field } }) => {

6
public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import React from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { GrafanaTheme2 } from '@grafana/data';
import { Field, Input, InputControl, Select, useStyles2 } from '@grafana/ui';
import { Field, Input, Select, useStyles2 } from '@grafana/ui';
import { RuleFormType, RuleFormValues } from '../../types/rule-form';
import { timeOptions } from '../../utils/time';
@ -37,7 +37,7 @@ export const CloudEvaluationBehavior = () => {
width={8}
/>
</Field>
<InputControl
<Controller
name="forTimeUnit"
render={({ field: { onChange, ref, ...field } }) => (
<Select

20
public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
View File

@ -1,22 +1,10 @@
import { css } from '@emotion/css';
import { debounce, take, uniqueId } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { FormProvider, useForm, useFormContext } from 'react-hook-form';
import { FormProvider, useForm, useFormContext, Controller } from 'react-hook-form';
import { AppEvents, GrafanaTheme2, SelectableValue } from '@grafana/data';
import {
AsyncSelect,
Box,
Button,
Field,
Input,
InputControl,
Label,
Modal,
Stack,
Text,
useStyles2,
} from '@grafana/ui';
import { AsyncSelect, Box, Button, Field, Input, Label, Modal, Stack, Text, useStyles2 } from '@grafana/ui';
import appEvents from 'app/core/app_events';
import { contextSrv } from 'app/core/services/context_srv';
import { createFolder } from 'app/features/manage-dashboards/state/actions';
@ -160,7 +148,7 @@ export function FolderAndGroup({
<Stack direction="row" alignItems="center">
{(!isCreatingFolder && (
<>
<InputControl
<Controller
render={({ field: { ref, ...field } }) => (
<div style={{ width: 420 }}>
<RuleFolderPicker
@ -218,7 +206,7 @@ export function FolderAndGroup({
error={errors.group?.message}
invalid={!!errors.group?.message}
>
<InputControl
<Controller
render={({ field: { ref, ...field }, fieldState }) => (
<AsyncSelect
disabled={!folder || loading}

22
public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
View File

@ -1,21 +1,9 @@
import { css } from '@emotion/css';
import React, { useCallback, useEffect, useState } from 'react';
import { RegisterOptions, useFormContext } from 'react-hook-form';
import { RegisterOptions, useFormContext, Controller } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import {
Field,
Icon,
IconButton,
Input,
InputControl,
Label,
Stack,
Switch,
Text,
Tooltip,
useStyles2,
} from '@grafana/ui';
import { Field, Icon, IconButton, Input, Label, Stack, Switch, Text, Tooltip, useStyles2 } from '@grafana/ui';
import { CombinedRuleGroup, CombinedRuleNamespace } from '../../../../../types/unified-alerting';
import { LogMessages, logInfo } from '../../Analytics';
@ -250,7 +238,7 @@ export function GrafanaEvaluationBehavior({
{existing && (
<Field htmlFor="pause-alert-switch">
<InputControl
<Controller
render={() => (
<Stack gap={1} direction="row" alignItems="center">
<Switch
@ -281,7 +269,7 @@ export function GrafanaEvaluationBehavior({
{showErrorHandling && (
<>
<Field htmlFor="no-data-state-input" label="Alert state if no data or all values are null">
<InputControl
<Controller
render={({ field: { onChange, ref, ...field } }) => (
<GrafanaAlertStatePicker
{...field}
@ -296,7 +284,7 @@ export function GrafanaEvaluationBehavior({
/>
</Field>
<Field htmlFor="exec-err-state-input" label="Alert state if execution error or timeout">
<InputControl
<Controller
render={({ field: { onChange, ref, ...field } }) => (
<GrafanaAlertStatePicker
{...field}

8
public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import React, { useEffect, useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Field, InputControl, useStyles2, VirtualizedSelect } from '@grafana/ui';
import { Field, useStyles2, VirtualizedSelect } from '@grafana/ui';
import { useDispatch } from 'app/types';
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@ -56,7 +56,7 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
error={errors.namespace?.message}
invalid={!!errors.namespace?.message}
>
<InputControl
<Controller
render={({ field: { onChange, ref, ...field } }) => (
<VirtualizedSelect
{...field}
@ -81,7 +81,7 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
/>
</Field>
<Field data-testid="group-picker" label="Group" error={errors.group?.message} invalid={!!errors.group?.message}>
<InputControl
<Controller
render={({ field: { ref, ...field } }) => (
<VirtualizedSelect
{...field}

18
public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
View File

@ -1,19 +1,9 @@
import { css, cx } from '@emotion/css';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { useFieldArray, UseFieldArrayAppend, useFormContext } from 'react-hook-form';
import { useFieldArray, UseFieldArrayAppend, useFormContext, Controller } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import {
Button,
Field,
InlineLabel,
Input,
InputControl,
LoadingPlaceholder,
Stack,
Text,
useStyles2,
} from '@grafana/ui';
import { Button, Field, InlineLabel, Input, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
import { useDispatch } from 'app/types';
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@ -156,7 +146,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
error={errors.labels?.[index]?.key?.message}
data-testid={`label-key-${index}`}
>
<InputControl
<Controller
name={`labels.${index}.key`}
control={control}
rules={{ required: Boolean(labels[index]?.value) ? 'Required.' : false }}
@ -183,7 +173,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
error={errors.labels?.[index]?.value?.message}
data-testid={`label-value-${index}`}
>
<InputControl
<Controller
control={control}
name={`labels.${index}.value`}
rules={{ required: Boolean(labels[index]?.value) ? 'Required.' : false }}

5
public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
View File

@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css';
import React, { useCallback, useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import {
@ -8,7 +8,6 @@ import {
Field,
FieldValidationMessage,
IconButton,
InputControl,
Select,
Stack,
TextLink,
@ -79,7 +78,7 @@ export function ContactPointSelector({
<Stack direction="column">
<Stack direction="row" alignItems="center">
<Field label="Contact point" data-testid="contact-point-picker">
<InputControl
<Controller
render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
<>
<div className={styles.contactPointsSelector}>

6
public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { SelectableValue } from '@grafana/data';
import { Field, InputControl, MultiSelect, useStyles2 } from '@grafana/ui';
import { Field, MultiSelect, useStyles2 } from '@grafana/ui';
import { alertmanagerApi } from 'app/features/alerting/unified/api/alertmanagerApi';
import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
import { timeIntervalToString } from 'app/features/alerting/unified/utils/alertmanager';
@ -29,7 +29,7 @@ export function MuteTimingFields({ alertManager }: MuteTimingFieldsProps) {
description="Select a mute timing to define when not to send notifications for this alert rule"
invalid={!!errors.contactPoints?.[alertManager]?.muteTimeIntervals}
>
<InputControl
<Controller
render={({ field: { onChange, ref, ...field } }) => (
<MultiSelect
aria-label="Mute timings"

16
public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx
View File

@ -1,19 +1,9 @@
import { css } from '@emotion/css';
import React, { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import {
Field,
FieldValidationMessage,
InlineField,
InputControl,
MultiSelect,
Stack,
Switch,
Text,
useStyles2,
} from '@grafana/ui';
import { Field, FieldValidationMessage, InlineField, MultiSelect, Stack, Switch, Text, useStyles2 } from '@grafana/ui';
import { MultiValueRemove, MultiValueRemoveProps } from '@grafana/ui/src/components/Select/MultiValue';
import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
import {
@ -82,7 +72,7 @@ export const RoutingSettings = ({ alertManager }: RoutingSettingsProps) => {
invalid={!!errors.contactPoints?.[alertManager]?.groupBy}
className={styles.optionalContent}
>
<InputControl
<Controller
rules={{
validate: (value: string[]) => {
if (!value || value.length === 0) {

6
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import React from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { Field, InputControl, useStyles2 } from '@grafana/ui';
import { Field, useStyles2 } from '@grafana/ui';
import { RuleFormType, RuleFormValues } from '../../../types/rule-form';
import { CloudRulesSourcePicker } from '../CloudRulesSourcePicker';
@ -33,7 +33,7 @@ export const CloudDataSourceSelector = ({ disabled, onChangeCloudDatasource }: C
error={errors.dataSourceName?.message}
invalid={!!errors.dataSourceName?.message}
>
<InputControl
<Controller
render={({ field: { onChange, ref, ...field } }) => (
<CloudRulesSourcePicker
{...field}

18
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
View File

@ -1,24 +1,12 @@
import { css } from '@emotion/css';
import { cloneDeep } from 'lodash';
import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { useFormContext, Controller } from 'react-hook-form';
import { getDefaultRelativeTimeRange, GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config, getDataSourceSrv } from '@grafana/runtime';
import {
Alert,
Button,
Dropdown,
Field,
Icon,
InputControl,
Menu,
MenuItem,
Stack,
Tooltip,
useStyles2,
} from '@grafana/ui';
import { Alert, Button, Dropdown, Field, Icon, Menu, MenuItem, Stack, Tooltip, useStyles2 } from '@grafana/ui';
import { Text } from '@grafana/ui/src/components/Text/Text';
import { isExpressionQuery } from 'app/features/expressions/guards';
import { ExpressionDatasourceUID, ExpressionQueryType, expressionTypes } from 'app/features/expressions/types';
@ -414,7 +402,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
{isCloudAlertRuleType && dataSourceName && (
<Stack direction="column">
<Field error={errors.expression?.message} invalid={!!errors.expression?.message}>
<InputControl
<Controller
name="expression"
render={({ field: { ref, ...field } }) => {
return (

6
public/app/features/alerting/unified/components/silences/MatchersField.tsx
View File

@ -1,9 +1,9 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import { useFormContext, useFieldArray } from 'react-hook-form';
import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, Field, Input, IconButton, InputControl, useStyles2, Select } from '@grafana/ui';
import { Button, Field, Input, IconButton, useStyles2, Select } from '@grafana/ui';
import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
import { SilenceFormFields } from '../../types/silence-form';
@ -46,7 +46,7 @@ const MatchersField = ({ className }: Props) => {
/>
</Field>
<Field label={'Operator'}>
<InputControl
<Controller
control={control}
render={({ field: { onChange, ref, ...field } }) => (
<Select