apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Alerting: Remove deprecated InputControl (#84793)

Browse Source
pull/84889/head
Alex Khomenko 1 year ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
  2. 12
      public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
  3. 6
      public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
  4. 6
      public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
  5. 20
      public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
  6. 22
      public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
  7. 8
      public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
  8. 18
      public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
  9. 5
      public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
  10. 6
      public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx
  11. 16
      public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx
  12. 6
      public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
  13. 18
      public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
  14. 6
      public/app/features/alerting/unified/components/silences/MatchersField.tsx

6
public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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

Write Preview
Loading…
Cancel
Save