diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx index 76ec7d4a250..ae7f9a1a142 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx +++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx @@ -14,6 +14,8 @@ import { Select, Switch, useStyles2, + Badge, + VerticalGroup, } from '@grafana/ui'; import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes'; import { @@ -56,73 +58,85 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, {({ fields, append, remove }) => ( <> -
Matching labels
-
- {fields.map((field, index) => { - const localPath = `object_matchers[${index}]`; - return ( - - - - - - ( - - )} - defaultValue={field.operator} - control={control} - name={`${localPath}.operator` as const} - rules={{ required: { value: true, message: 'Required.' } }} - /> - - - - - remove(index)} - > - Remove - - - ); - })} -
- + + + ( + + + remove(index)} + > + Remove + + + ); + })} + + )} + + )}
@@ -376,5 +390,8 @@ const getStyles = (theme: GrafanaTheme2) => { margin-left: ${theme.spacing(1.5)}; } `, + noMatchersWarning: css` + padding: ${theme.spacing(1)} ${theme.spacing(2)}; + `, }; }; diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx index c25f812d57a..8719728235e 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx +++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx @@ -90,7 +90,13 @@ export const AmRoutesTable: FC = ({ id: 'matchingCriteria', label: 'Matching labels', // eslint-disable-next-line react/display-name - renderCell: (item) => , + renderCell: (item) => { + return item.data.object_matchers.length ? ( + + ) : ( + Matches all alert instances + ); + }, size: 10, }, {