feat: add waitFor to the UI

Fixes #2344

src/api/types/notifications.ts

@@ -39,6 +39,7 @@ export type NotificationRules = {
   most_common_error?: string;
   repeat_interval?: string;
   error?: string;
+  wait_for?: number;
 };
 
 export type SilenceNotificationResponse = {

src/components/Forms/Formik/FormikDurationNanosecondsField.tsx

@@ -0,0 +1,85 @@
+import { TextInput } from "@flanksource-ui/ui/FormControls/TextInput";
+import { useField } from "formik";
+import { useState } from "react";
+
+type DurationUnit = "nanoseconds" | "milliseconds" | "seconds" | "minutes";
+
+const units = ["nanoseconds", "milliseconds", "seconds", "minutes"] as const;
+
+const unitsMap = {
+  nanoseconds: 1,
+  milliseconds: 1000000,
+  seconds: 1000000000,
+  minutes: 60000000000
+} as const;
+
+type FormikDurationNanosecondsFieldProps = {
+  fieldName: string;
+  className?: string;
+  label?: string;
+};
+
+export default function FormikDurationNanosecondsField({
+  fieldName,
+  label,
+  className = "flex flex-col py-2"
+}: FormikDurationNanosecondsFieldProps) {
+  const [field] = useField<number>({
+    name: fieldName
+  });
+
+  const value = field.value;
+
+  console.log("value", value);
+
+  const [unit, setUnit] = useState<DurationUnit>("nanoseconds");
+
+  return (
+    <div className={className}>
+      {label && <label className={`form-label`}>{label}</label>}
+      <div className="flex flex-row">
+        <TextInput
+          type="number"
+          name={fieldName}
+          className="flex-1 rounded-l-md rounded-r-none border-b border-l border-t"
+          onChange={(e) => {
+            const value = parseInt(e.target.value);
+            const multiplier = unitsMap[unit];
+            const nanoseconds = value * multiplier;
+            field.onChange({
+              target: {
+                name: fieldName,
+                value: nanoseconds
+              }
+            });
+          }}
+          id={fieldName}
+        />
+        <select
+          onChange={(e) => {
+            const previousMultiplier = unitsMap[unit];
+            setUnit(e.target.value as DurationUnit);
+
+            // Convert the value to the new unit
+            const multiplier = unitsMap[e.target.value as DurationUnit];
+            const updatedValue = value / previousMultiplier;
+            const nanoseconds = updatedValue * multiplier;
+            field.onChange({
+              target: {
+                name: fieldName,
+                value: nanoseconds
+              }
+            });
+          }}
+          className="w-1/5 rounded-r-md border-b border-r border-t border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        >
+          {units.map((unit) => (
+            <option key={unit} value={unit}>
+              {unit}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}

src/components/Notifications/Rules/NotificationsRulesForm.tsx

@@ -1,4 +1,5 @@
 import { NotificationRules } from "@flanksource-ui/api/types/notifications";
+import FormikDurationNanosecondsField from "@flanksource-ui/components/Forms/Formik/FormikDurationNanosecondsField";
 import { Form, Formik } from "formik";
 import { Button } from "../../../ui/Buttons/Button";
 import FormikAutocompleteDropdown from "../../Forms/Formik/FormikAutocompleteDropdown";
@@ -66,6 +67,10 @@ export default function NotificationsRulesForm({
                 name="repeat_interval"
                 label="Repeat Interval"
               />
+              <FormikDurationNanosecondsField
+                fieldName="wait_for"
+                label="Wait For"
+              />
               <FormikNotificationsTemplateField name="template" />
               <FormikCodeEditor
                 fieldName="properties"

src/components/Notifications/Rules/notificationsRulesTableColumns.tsx

@@ -285,6 +285,16 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
         return value;
       }
     },
+    {
+      header: "Wait For",
+      id: "wait_for",
+      accessorKey: "wait_for",
+      size: 130,
+      Cell: ({ row }) => {
+        const value = row.original.wait_for;
+        return value;
+      }
+    },
     {
       header: "Created At",
       id: "created_at",