fix: add agent wizard

src/api/types/notifications.ts

@@ -55,6 +55,7 @@ export type SilenceNotificationResponse = {
   description?: string;
   recursive?: boolean;
   namespace?: string;
+  error?: string;
   source?: "source1" | "source2" | "source3";
 };
 
@@ -87,6 +88,7 @@ export type NotificationSilenceItem = {
   namespace: string;
   description?: string;
   filter?: string;
+  error?: string;
   from: string;
   until: string;
   recursive?: boolean;

src/components/Agents/Add/AddAgentForm.tsx

@@ -15,12 +15,12 @@ import {
 import { GenerateAgent, GeneratedAgent } from "../../../api/services/agents";
 import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
-import FormikAutocompleteDropdown from "../../Forms/Formik/FormikAutocompleteDropdown";
 import FormikKeyValueMapField from "../../Forms/Formik/FormikKeyValueMapField";
 import FormikTextInput from "../../Forms/Formik/FormikTextInput";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import { Agent } from "../AgentPage";
 import DeleteAgentButton from "../DeleteAgentButton";
+import FormikScheduleField from "@flanksource-ui/components/Forms/Formik/FormikScheduleField";
 
 export type AgentFormValues = GenerateAgent & {
   kubernetes?: Record<string, any>;
@@ -158,21 +158,8 @@ export default function AgentForm({
                       hint="Scrapes built-in and custom resource definitions and creates catalog items and a topology from Cluster --> Namespace --> Pod"
                     />
                     {Boolean(values.kubernetes?.enabled) === true && (
-                      <FormikAutocompleteDropdown
-                        options={[
-                          { label: "1m", value: "1m" },
-                          { label: "5m", value: "5m" },
-                          { label: "10m", value: "10m" },
-                          {
-                            label: "30m",
-                            value: "30m"
-                          },
-                          { label: "1h", value: "1h" },
-                          { label: "2h", value: "2h" },
-                          { label: "6h", value: "6h" },
-                          { label: "12h", value: "12h" },
-                          { label: "24h", value: "24h" }
-                        ]}
+                      <FormikScheduleField
+                        type="scraper"
                         name="kubernetes.schedule"
                         label="Scrape Interval"
                         hintPosition="top"

src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx

@@ -99,42 +99,23 @@ export default function InstallAgentModal({
         updateHelmRepo: true,
         releaseName: "mc-agent",
         chartUrl: "https://flanksource.github.io/charts",
-        // You can add more values here to be passed to the template for the
-        // values section of the HelmRelease
-        values: [
-          {
-            key: "upstream.createSecret",
-            value: "true"
-          },
-          {
-            key: "upstream.host",
-            value: baseUrl
-          },
-          {
-            key: "upstream.username",
-            value: "token"
-          },
-          {
-            key: "upstream.password",
-            value: generatedAgent?.access_token
-          },
-          {
-            key: "upstream.agentName",
-            value: agentFormValues?.name
+        values: {
+          upstream: {
+            createSecret: "true",
+            host: baseUrl,
+            username: "token",
+            password: generatedAgent?.access_token,
+            agentName: agentFormValues?.name
           },
           ...(pushTelemetry?.enabled
-            ? [
-                {
-                  key: "pushTelemetry.enabled",
-                  value: "true"
-                },
-                {
-                  key: "pushTelemetry.topologyName",
-                  value: `${pushTelemetry.topologyName}`
+            ? {
+                pushTelemetry: {
+                  enabled: "true",
+                  topologyName: pushTelemetry.topologyName
                 }
-              ]
-            : [])
-        ]
+              }
+            : {})
+        }
       },
       ...(kubeOptions?.enabled
         ? [
@@ -143,16 +124,12 @@ export default function InstallAgentModal({
               namespace: "mission-control-agent",
               repoName: "flanksource",
               releaseName: "mc-agent-kubernetes",
-              values: [
-                {
-                  key: "clusterName",
-                  value: agentFormValues?.name
-                },
-                {
-                  key: "scraper.schedule",
-                  value: kubeOptions.schedule
+              values: {
+                clusterName: agentFormValues?.name,
+                scraper: {
+                  schedule: kubeOptions.schedule
                 }
-              ]
+              }
             }
           ]
         : [])

src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx

@@ -34,8 +34,7 @@ export default function KubernetesConfigsFormEditor({
       />
 
       <FormikScheduleField
-        type="medium"
-        value="@every 30m"
+        type="scraper"
         name={`${name}.schedule`}
         hint="Schedule at which to perform a full import, if Watch is enabled can be set to a longer window"
       />

src/components/Forms/Formik/FormikAutocompleteDropdown.tsx

@@ -2,7 +2,7 @@ import { useField } from "formik";
 import { useCallback, useEffect, useState } from "react";
 import CreatableSelect from "react-select/creatable";
 
-type FormikSelectDropdownProps = {
+export type FormikSelectDropdownProps = {
   name: string;
   required?: boolean;
   label?: string;

src/components/Forms/Formik/FormikScheduleField.tsx

@@ -1,4 +1,6 @@
-import FormikAutocompleteDropdown from "./FormikAutocompleteDropdown";
+import FormikAutocompleteDropdown, {
+  FormikSelectDropdownProps
+} from "./FormikAutocompleteDropdown";
 
 const types = {
   short: [
@@ -31,6 +33,34 @@ const types = {
       value: "@every 4h"
     }
   ],
+
+  scraper: [
+    {
+      label: "@every 15m",
+      value: "@every 15m"
+    },
+    {
+      label: "@every 30m",
+      value: "@every 30m"
+    },
+    {
+      label: "@hourly",
+      value: "@hourly"
+    },
+    {
+      label: "@every 2h",
+      value: "@every 2h"
+    },
+    {
+      label: "@every 4h",
+      value: "@every 4h"
+    },
+
+    {
+      label: "@daily",
+      value: "@daily"
+    }
+  ],
   medium: [
     {
       label: "@every 5m",
@@ -119,25 +149,19 @@ const types = {
 };
 
 type Props = {
-  name: string;
   type?: keyof typeof types;
-  hint?: string;
-  value?: string;
-};
+} & Omit<FormikSelectDropdownProps, "options">;
 
 export default function FormikScheduleField({
-  name,
-  hint,
+  label = "Schedule",
   type = "default",
-  value
+  ...props
 }: Props) {
   return (
     <FormikAutocompleteDropdown
-      name={name}
-      label="Schedule"
-      hint={hint}
-      required
+      label={label}
       options={types[type]}
+      {...props}
     />
   );
 }

src/components/Notifications/Rules/NotificationsRulesForm.tsx

@@ -10,6 +10,8 @@ import FormikTextInput from "../../Forms/Formik/FormikTextInput";
 import NotificationsRecipientsTabs from "../../Forms/Notifications/NotificationsRecipientsTabs";
 import DeleteResource from "../../SchemaResourcePage/Delete/DeleteResource";
 import CanEditResource from "../../Settings/CanEditResource";
+import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
+import { omit } from "lodash";
 
 type NotificationsFormProps = {
   onSubmit: (notification: Partial<NotificationRules>) => void;
@@ -34,7 +36,11 @@ export default function NotificationsRulesForm({
           updated_at: undefined,
           ...(!notification?.id && { source: "UI" })
         }}
-        onSubmit={(values) => onSubmit(values as Partial<NotificationRules>)}
+        onSubmit={(values) =>
+          onSubmit(
+            omit(values, "most_common_error") as Partial<NotificationRules>
+          )
+        }
         validateOnBlur
         validateOnChange
       >
@@ -53,6 +59,11 @@ export default function NotificationsRulesForm({
                 required
               />
               <FormikTextInput name="filter" label="Filter" />
+              <ErrorMessage
+                message={notification?.most_common_error}
+                className="h-full pl-2 align-top"
+              />
+
               <NotificationsRecipientsTabs />
               <FormikAutocompleteDropdown
                 isClearable

src/components/Notifications/Rules/NotificationsRulesTable.tsx

@@ -1,14 +1,9 @@
 import { NotificationRules } from "@flanksource-ui/api/types/notifications";
-import { Modal } from "@flanksource-ui/ui/Modal";
 import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
-import { useAtom } from "jotai";
 import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 import EditNotificationRules from "./EditNotificationRules";
-import {
-  notificationMostCommonErrorAtom,
-  notificationsRulesTableColumns
-} from "./notificationsRulesTableColumns";
+import { notificationsRulesTableColumns } from "./notificationsRulesTableColumns";
 
 type NotificationsTableProps = {
   notifications: NotificationRules[];
@@ -29,14 +24,6 @@ export default function NotificationsRulesTable({
 
   const selectedNotificationId = searchParams.get("id");
 
-  const [mostCommonErrorNotification, setMostCommonErrorNotification] = useAtom(
-    notificationMostCommonErrorAtom
-  );
-  const modalTitle =
-    mostCommonErrorNotification?.title ??
-    mostCommonErrorNotification?.person?.name ??
-    mostCommonErrorNotification?.team?.name;
-
   const onSelectNotification = useCallback(
     (notification: NotificationRules) => {
       const id = notification.id;
@@ -48,17 +35,6 @@ export default function NotificationsRulesTable({
 
   return (
     <>
-      {mostCommonErrorNotification && (
-        <Modal
-          open={mostCommonErrorNotification !== undefined}
-          onClose={() => setMostCommonErrorNotification(undefined)}
-          title={`${modalTitle ?? "Most Common Error"}`}
-        >
-          <div className="flex flex-col p-4">
-            {mostCommonErrorNotification.most_common_error}
-          </div>
-        </Modal>
-      )}
       <MRTDataTable
         data={notifications ?? []}
         columns={notificationsRulesTableColumns}