feat: notification inhibition

src/api/types/notifications.ts

@@ -4,6 +4,32 @@ import { HealthCheck } from "./health";
 import { Topology } from "./topology";
 import { Team, User } from "./users";
 
+export type NotificationInhibition = {
+  // Direction specifies the traversal direction in relation to the "From" resource.
+  // - "outgoing": Looks for child resources originating from the "From" resource.
+  //   Example: If "From" is "Kubernetes::Deployment", "To" could be ["Kubernetes::Pod", "Kubernetes::ReplicaSet"].
+  // - "incoming": Looks for parent resources related to the "From" resource.
+  //   Example: If "From" is "Kubernetes::Deployment", "To" could be ["Kubernetes::HelmRelease", "Kubernetes::Namespace"].
+  // - "all": Considers both incoming and outgoing relationships.
+  direction: "outgoing" | "incoming" | "all";
+
+  // Soft, when true, relates using soft relationships.
+  // Example: Deployment to Pod is hard relationship, But Node to Pod is soft relationship.
+  soft?: boolean;
+
+  // Depth defines how many levels of child or parent resources to traverse.
+  depth?: number;
+
+  // From specifies the starting resource type (for example, "Kubernetes::Deployment").
+  from: string;
+
+  // To specifies the target resource types, which are determined based on the Direction.
+  // Example:
+  //   - If Direction is "outgoing", these are child resources.
+  //   - If Direction is "incoming", these are parent resources.
+  to: string[];
+};
+
 export type NotificationRules = {
   id: string;
   namespace?: string;
@@ -43,6 +69,7 @@ export type NotificationRules = {
   repeat_interval?: string;
   error?: string;
   wait_for?: number;
+  inhibitions?: NotificationInhibition[];
 };
 
 export type SilenceNotificationResponse = {

src/components/Forms/Formik/FormikNotificationInhibitionsField.tsx

@@ -0,0 +1,158 @@
+import { NotificationInhibition } from "@flanksource-ui/api/types/notifications";
+import { useFormikContext } from "formik";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import { FaPlus, FaTrash } from "react-icons/fa";
+import FormikTextInput from "./FormikTextInput";
+import FormikAutocompleteDropdown from "./FormikAutocompleteDropdown";
+import FormikNumberInput from "./FormikNumberInput";
+import { FormikCodeEditor } from "./FormikCodeEditor";
+import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
+import { FormikErrors } from "formik";
+import { Toggle } from "../../../ui/FormControls/Toggle";
+
+type FormikNotificationInhibitionsFieldProps = {
+  name: string;
+  label?: string;
+  hint?: string;
+};
+
+const directionOptions = [
+  { label: "Outgoing", value: "outgoing" },
+  { label: "Incoming", value: "incoming" },
+  { label: "All", value: "all" }
+];
+
+type FormValues = {
+  [key: string]: NotificationInhibition[];
+};
+
+type FormErrors = {
+  [key: string]: (FormikErrors<NotificationInhibition> & { to?: string })[];
+};
+
+const FormikNotificationInhibitionsField = ({
+  name,
+  label = "Inhibitions",
+  hint = "Configure inhibition rules to prevent notification storms"
+}: FormikNotificationInhibitionsFieldProps) => {
+  const { values, setFieldValue, errors } = useFormikContext<FormValues>();
+
+  const inhibitions = values[name] || [];
+  const fieldErrors = errors as FormErrors;
+
+  const addInhibition = () => {
+    const newInhibition: NotificationInhibition = {
+      direction: "outgoing",
+      from: "",
+      to: []
+    };
+    setFieldValue(name, [...inhibitions, newInhibition]);
+  };
+
+  const removeInhibition = (index: number) => {
+    const newInhibitions = [...inhibitions];
+    newInhibitions.splice(index, 1);
+    setFieldValue(name, newInhibitions);
+  };
+
+  const updateInhibition = (
+    index: number,
+    field: keyof NotificationInhibition,
+    value: string | number | boolean | string[] | undefined
+  ) => {
+    const newInhibitions = [...inhibitions];
+    newInhibitions[index] = {
+      ...newInhibitions[index],
+      [field]: value
+    };
+    setFieldValue(name, newInhibitions);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            {label}
+          </label>
+          {hint && <p className="mt-1 text-sm text-gray-500">{hint}</p>}
+        </div>
+        <Button
+          icon={<FaPlus />}
+          onClick={addInhibition}
+          className="btn-primary"
+        >
+          Add Inhibition
+        </Button>
+      </div>
+
+      {inhibitions.map((inhibition, index) => (
+        <div key={index} className="rounded-lg border border-gray-200 p-4">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-lg font-medium">Inhibition Rule {index + 1}</h3>
+            <Button
+              icon={<FaTrash />}
+              onClick={() => removeInhibition(index)}
+              className="btn-danger"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormikAutocompleteDropdown
+              name={`${name}.${index}.direction`}
+              options={directionOptions}
+              label="Direction"
+              hint="Specify the traversal direction for related resources"
+            />
+
+            <FormikTextInput
+              name={`${name}.${index}.from`}
+              label="From Resource Type"
+              hint="e.g., Kubernetes::Pod"
+            />
+
+            <div className="col-span-2">
+              <FormikCodeEditor
+                fieldName={`${name}.${index}.to`}
+                format="yaml"
+                label="To Resource Types"
+                hint="List of resource types to traverse to (e.g., ['Kubernetes::Deployment', 'Kubernetes::ReplicaSet'])"
+                lines={5}
+                className="flex h-32 flex-col"
+              />
+              {fieldErrors?.[name]?.[index]?.to && (
+                <ErrorMessage
+                  message={fieldErrors[name][index].to}
+                  className="mt-1"
+                />
+              )}
+            </div>
+
+            <div className="flex items-end gap-4">
+              <FormikNumberInput
+                value={inhibition.depth}
+                onChange={(value) => updateInhibition(index, "depth", value)}
+                label="Depth"
+                hint="Number of levels to traverse"
+              />
+              <div className="flex flex-col">
+                <Toggle
+                  onChange={(value: boolean) => {
+                    setFieldValue(`${name}.${index}.soft`, value);
+                  }}
+                  label="Soft Relationships"
+                  value={!!inhibition.soft}
+                />
+                <p className="mt-1 text-sm text-gray-500">
+                  Use soft relationships for traversal
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FormikNotificationInhibitionsField;

src/components/Forms/Formik/FormikNumberInput.tsx

@@ -1,56 +1,48 @@
-import { useField } from "formik";
-import React from "react";
-import { TextInput } from "../../../ui/FormControls/TextInput";
+import { InputHTMLAttributes } from "react";
 
-type FormikNumberInputProps = {
-  name: string;
-  required?: boolean;
+type CustomNumberInputProps = {
   label?: string;
-  className?: string;
   hint?: string;
-} & Omit<React.ComponentProps<typeof TextInput>, "id">;
+  value?: number;
+  onChange?: (value: number | undefined) => void;
+};
+
+type FormikNumberInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onChange" | "value"
+> &
+  CustomNumberInputProps;
 
 export default function FormikNumberInput({
-  name,
-  required = false,
   label,
-  className = "flex flex-col",
   hint,
+  value,
+  onChange,
   ...props
 }: FormikNumberInputProps) {
-  const [field, meta] = useField({
-    name,
-    type: "number",
-    required,
-    validate: (value) => {
-      if (required && !value) {
-        return "This field is required";
-      }
-      if (value && isNaN(value)) {
-        return "This field must be a number";
-      }
-    }
-  });
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val =
+      e.target.value === "" ? undefined : parseInt(e.target.value, 10);
+    onChange?.(val);
+  };
 
   return (
-    <div className={className}>
-      <TextInput
-        label={label}
-        {...props}
-        id={name}
-        type="number"
-        {...field}
-        onChange={() => {
-          const value = field.value;
-          if (value) {
-            field.onChange({ target: { value: parseInt(value) } });
-          }
-        }}
-      />
-      {hint && <p className="py-1 text-sm text-gray-500">{hint}</p>}
-      {meta.touched && meta.error ? (
-        <p className="w-full py-1 text-sm text-red-500">{meta.error}</p>
-      ) : null}
+    <div>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {label}
+        </label>
+      )}
+      <div className="mt-1">
+        <input
+          type="number"
+          className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+          value={value ?? ""}
+          onChange={handleChange}
+          {...props}
+        />
+      </div>
+      {hint && <p className="mt-1 text-sm text-gray-500">{hint}</p>}
     </div>
   );
 }

src/components/Notifications/Rules/NotificationsRulesForm.tsx

@@ -13,6 +13,9 @@ import CanEditResource from "../../Settings/CanEditResource";
 import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
 import { omit } from "lodash";
 import FormikNotificationGroupByDropdown from "@flanksource-ui/components/Forms/Formik/FormikNotificationGroupByDropdown";
+import FormikNotificationInhibitionsField from "@flanksource-ui/components/Forms/Formik/FormikNotificationInhibitionsField";
+import { parse as parseYaml } from "yaml";
+import { User } from "@flanksource-ui/api/types/users";
 
 type NotificationsFormProps = {
   onSubmit: (notification: Partial<NotificationRules>) => void;
@@ -25,23 +28,83 @@ export default function NotificationsRulesForm({
   notification,
   onDeleted = () => {}
 }: NotificationsFormProps) {
+  const validate = (values: Partial<NotificationRules>) => {
+    const errors: any = {};
+
+    // Validate inhibitions if present
+    if (values.inhibitions?.length) {
+      const inhibitionErrors: any[] = [];
+      values.inhibitions.forEach((inhibition, index) => {
+        const inhibitionError: any = {};
+
+        // Validate 'to' field
+        try {
+          const toValue =
+            typeof inhibition.to === "string"
+              ? parseYaml(inhibition.to)
+              : inhibition.to;
+          if (!Array.isArray(toValue)) {
+            inhibitionError.to = "Must be an array of resource types";
+          } else if (!toValue.every((item) => typeof item === "string")) {
+            inhibitionError.to = "All items must be strings";
+          } else if (toValue.length === 0) {
+            inhibitionError.to = "At least one resource type is required";
+          }
+        } catch (e) {
+          inhibitionError.to =
+            "Invalid YAML format. Must be an array of resource types";
+        }
+
+        // Validate 'from' field
+        if (!inhibition.from) {
+          inhibitionError.from = "From resource type is required";
+        }
+
+        // Add errors if any were found
+        if (Object.keys(inhibitionError).length > 0) {
+          inhibitionErrors[index] = inhibitionError;
+        }
+      });
+
+      if (inhibitionErrors.length > 0) {
+        errors.inhibitions = inhibitionErrors;
+      }
+    }
+
+    return errors;
+  };
+
   return (
     <div className="flex h-full flex-col gap-2 overflow-y-auto">
       <Formik
         initialValues={{
           ...notification,
           person: undefined,
           team: undefined,
-          created_by: notification?.created_by?.id,
+          created_by: notification?.created_by
+            ? ({
+                id: notification.created_by.id,
+                name: notification.created_by.name,
+                email: notification.created_by.email,
+                roles: notification.created_by.roles
+              } as User)
+            : undefined,
           created_at: undefined,
           updated_at: undefined,
           ...(!notification?.id && { source: "UI" })
         }}
         onSubmit={(values) =>
           onSubmit(
-            omit(values, "most_common_error") as Partial<NotificationRules>
+            omit(
+              {
+                ...values,
+                created_by: values.created_by?.id
+              },
+              "most_common_error"
+            ) as Partial<NotificationRules>
           )
         }
+        validate={validate}
         validateOnBlur
         validateOnChange
       >
@@ -103,11 +166,13 @@ export default function NotificationsRulesForm({
                 hintPosition="top"
               />
               <FormikNotificationsTemplateField name="template" />
+              <FormikNotificationInhibitionsField name="inhibitions" />
               <FormikCodeEditor
                 fieldName="properties"
                 label="Properties"
                 className="flex h-32 flex-col"
-                format="json"
+                lines={5}
+                format="yaml"
               />
             </div>
             <div className="flex flex-row rounded-b-md bg-gray-100 p-4">