Alerting: Add label and state filters to alert instance components (#42550)

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@@ -16,6 +16,7 @@ export interface RadioButtonProps {
   active: boolean;
   id: string;
   onChange: () => void;
+  onClick: () => void;
   fullWidth?: boolean;
   'aria-label'?: StringSelector;
   children?: React.ReactNode;
@@ -29,6 +30,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
       disabled = false,
       size = 'md',
       onChange,
+      onClick,
       id,
       name = undefined,
       description,
@@ -46,6 +48,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
           type="radio"
           className={styles.radio}
           onChange={onChange}
+          onClick={onClick}
           disabled={disabled}
           id={id}
           checked={active}

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -13,6 +13,7 @@ export interface RadioButtonGroupProps<T> {
   disabledOptions?: T[];
   options: Array<SelectableValue<T>>;
   onChange?: (value: T) => void;
+  onClick?: (value: T) => void;
   size?: RadioButtonSize;
   fullWidth?: boolean;
   className?: string;
@@ -23,6 +24,7 @@ export function RadioButtonGroup<T>({
   options,
   value,
   onChange,
+  onClick,
   disabled,
   disabledOptions,
   size = 'md',
@@ -40,6 +42,16 @@ export function RadioButtonGroup<T>({
     },
     [onChange]
   );
+  const handleOnClick = useCallback(
+    (option: SelectableValue) => {
+      return () => {
+        if (onClick) {
+          onClick(option.value);
+        }
+      };
+    },
+    [onClick]
+  );
   const id = uniqueId('radiogroup-');
   const groupName = useRef(id);
   const styles = useStyles2(getStyles);
@@ -63,6 +75,7 @@ export function RadioButtonGroup<T>({
             key={`o.label-${i}`}
             aria-label={o.ariaLabel}
             onChange={handleOnChange(o)}
+            onClick={handleOnClick(o)}
             id={`option-${o.value}-${id}`}
             name={groupName.current}
             description={o.description}