DEV-48578 make a checkbox in grafana for rca

public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx

@@ -5,7 +5,7 @@ import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, Field, Input, Text, TextArea, useStyles2, Stack } from '@grafana/ui';
+import { Button, Field, Input, Text, TextArea, useStyles2, Stack, Checkbox } from '@grafana/ui';
 
 import { DashboardModel } from '../../../../dashboard/state';
 import { RuleFormValues } from '../../types/rule-form';
@@ -41,6 +41,21 @@ const AnnotationsStep = () => {
 
   const { dashboardModel, isFetching: isDashboardFetching } = useDashboardQuery(selectedDashboardUid);
 
+// LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
+  const handleChangeRCA = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.checked ? 'on' : '';
+    const updatedAnnotations = produce(annotations, (draft) => {
+      const rcaAnnotation = draft.find((a) => a.key === Annotation.logzioRCA);
+      if (rcaAnnotation) {
+        rcaAnnotation.value = value;
+      } else {
+        draft.push({ key: Annotation.logzioRCA, value });
+      }
+    });
+    setValue('annotations', updatedAnnotations);
+  }
+// LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
+
   useEffect(() => {
     if (isDashboardFetching || !dashboardModel) {
       return;
@@ -113,6 +128,10 @@ const AnnotationsStep = () => {
     <RuleEditorSection stepNo={5} title="Add annotations" description={getAnnotationsSectionDescription()} fullWidth>
       <Stack direction="column" gap={1}>
         {fields.map((annotationField, index: number) => {
+          const isRcaEnabled = (window as any).logzio.configs.featureFlags.AlertsRca;
+          if (annotationField.key === Annotation.logzioRCA && !isRcaEnabled) {
+            return null;
+          }
           const isUrl = annotations[index]?.key?.toLocaleLowerCase().endsWith('url');
           const ValueInputComponent = isUrl ? Input : TextArea;
           // eslint-disable-next-line
@@ -147,6 +166,13 @@ const AnnotationsStep = () => {
                       invalid={!!errors.annotations?.[index]?.value?.message}
                       error={errors.annotations?.[index]?.value?.message}
                     >
+                      {annotationField.key === Annotation.logzioRCA ? ( // LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
+                        <Checkbox
+                          data-testid={`annotation-value-${index}`}
+                          {...register(`annotations.${index}.value`, {onChange: handleChangeRCA })}
+                          label="Activate Automatic AI RCA"
+                        />
+                      ) : (
                       <ValueInputComponent
                         data-testid={`annotation-value-${index}`}
                         className={cx(styles.annotationValueInput, { [styles.textarea]: !isUrl })}
@@ -159,6 +185,7 @@ const AnnotationsStep = () => {
                         }
                         defaultValue={annotationField.value}
                       />
+                      )}
                     </Field>
                     {!annotationLabels[annotation] && (
                       <Button

public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx

@@ -5,11 +5,21 @@ import { useStyles2 } from '@grafana/ui';
 
 import { useAnnotationLinks } from '../../utils/annotations';
 import { AnnotationDetailsField } from '../AnnotationDetailsField';
+import { DetailsField } from '../DetailsField';
 
 type Props = {
   annotations: Array<[string, string]>;
 };
 
+// LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
+const RcaAnnotionRow: React.FC = () => {
+  return (
+    <DetailsField label="RCA Annotations" horizontal={true}>
+    on
+    </DetailsField>
+  );
+}
+
 export function RuleDetailsAnnotations(props: Props): JSX.Element | null {
   const styles = useStyles2(getStyles);
 
@@ -22,8 +32,8 @@ export function RuleDetailsAnnotations(props: Props): JSX.Element | null {
 
   return (
     <div className={styles.annotations}>
-      {annotations.map(([key, value]) => (
-        <AnnotationDetailsField key={key} annotationKey={key} value={value} valueLink={annotationLinks.get(key)} />
+      {annotations.map(([key, value]) => ( // LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
+          key === '__logzioAlertRCA__' ? <RcaAnnotionRow key={key} /> : (<AnnotationDetailsField key={key} annotationKey={key} value={value} valueLink={annotationLinks.get(key)} />)
       ))}
     </div>
   );

public/app/features/alerting/unified/utils/constants.ts

@@ -19,6 +19,7 @@ export enum Annotation {
   alertId = '__alertId__',
   dashboardUID = '__dashboardUid__',
   panelID = '__panelId__',
+  logzioRCA = '__logzioRCA__', // LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
 }
 
 export const annotationLabels: Record<Annotation, string> = {
@@ -28,6 +29,7 @@ export const annotationLabels: Record<Annotation, string> = {
   [Annotation.dashboardUID]: 'Dashboard UID',
   [Annotation.panelID]: 'Panel ID',
   [Annotation.alertId]: 'Alert ID',
+  [Annotation.logzioRCA]: 'AI Agent Analysis',
 };
 
 export const annotationDescriptions: Record<Annotation, string> = {
@@ -37,10 +39,12 @@ export const annotationDescriptions: Record<Annotation, string> = {
   [Annotation.dashboardUID]: '',
   [Annotation.panelID]: '',
   [Annotation.alertId]: '',
+  [Annotation.logzioRCA]: '',
 };
 
 export const defaultAnnotations = [
   { key: Annotation.summary, value: '' },
   { key: Annotation.description, value: '' },
   { key: Annotation.runbookURL, value: '' },
+  { key: Annotation.logzioRCA, value: 'off' }, // LOGZ.IO GRAFANA CHANGE :: DEV-48578 - rca checkbox
 ];