From 5b72d8c0986d2630dbd442fda6a638f9b20db98c Mon Sep 17 00:00:00 2001
From: Moshe Immermam <moshe@flanksource.com>
Date: Fri, 15 Nov 2024 09:00:59 +0200
Subject: [PATCH 1/4] fix: add agent wizard

---
 src/components/Agents/Add/AddAgentForm.tsx    |  19 +--
 .../InstallAgentModal.tsx                     |  61 +++----
 .../Formik/FormikAutocompleteDropdown.tsx     |   2 +-
 .../Forms/Formik/FormikScheduleField.tsx      |  48 ++++--
 src/ui/FormControls/ErrorMessage.tsx          |  41 ++++-
 src/ui/HelmSnippet/CLISnippet.tsx             |  38 +++--
 src/ui/HelmSnippet/FluxSnippet.tsx            | 126 ++++++++-------
 .../HelmSnippet/HelmInstallationSnippets.tsx  |   5 +-
 .../__tests__/FluxSnippet.unit.test.tsx       |   3 +-
 .../CLISnippet.unit.test.tsx.snap             |   6 +-
 .../FluxSnippet.unit.test.tsx.snap            |  70 +++++---
 src/ui/HelmSnippet/__tests__/mocks/mocks.ts   | 151 +++++-------------
 12 files changed, 282 insertions(+), 288 deletions(-)

diff --git a/src/components/Agents/Add/AddAgentForm.tsx b/src/components/Agents/Add/AddAgentForm.tsx
index 0c599117a..d0dd4a397 100644
--- a/src/components/Agents/Add/AddAgentForm.tsx
+++ b/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"
diff --git a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx
index 58bf4f2c7..b5debf2a4 100644
--- a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx
+++ b/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
                 }
-              ]
+              }
             }
           ]
         : [])
diff --git a/src/components/Forms/Formik/FormikAutocompleteDropdown.tsx b/src/components/Forms/Formik/FormikAutocompleteDropdown.tsx
index 2e97fd179..91e5b6fda 100644
--- a/src/components/Forms/Formik/FormikAutocompleteDropdown.tsx
+++ b/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;
diff --git a/src/components/Forms/Formik/FormikScheduleField.tsx b/src/components/Forms/Formik/FormikScheduleField.tsx
index d8ecc7fb5..0f0718112 100644
--- a/src/components/Forms/Formik/FormikScheduleField.tsx
+++ b/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}
     />
   );
 }
diff --git a/src/ui/FormControls/ErrorMessage.tsx b/src/ui/FormControls/ErrorMessage.tsx
index 5e07f85e1..3e5ec970e 100644
--- a/src/ui/FormControls/ErrorMessage.tsx
+++ b/src/ui/FormControls/ErrorMessage.tsx
@@ -1,21 +1,52 @@
 import clsx from "clsx";
+import { useId } from "react";
+import { createPortal } from "react-dom";
+import { AiFillWarning } from "react-icons/ai";
+import { Tooltip } from "react-tooltip";
 
 export default function ErrorMessage({
   message,
-  style = "error"
+  style = "error",
+  tooltip = false,
+  className = "h-full items-center pl-2 text-center",
+  children
 }: {
   message?: string;
+  className?: string;
   style?: "error" | "success";
+  tooltip?: boolean;
+  children?: React.ReactNode;
 }) {
-  if (!message || message === "") {
-    return null;
-  }
+  const id = useId();
 
   // @ts-ignore
   let data = message?.response?.data;
   if (data) {
     message = data?.error || data?.message || message;
   }
+  if (!message || message === "") {
+    return null;
+  }
+
+  if (tooltip) {
+    return (
+      <>
+        <div className="flex flex-row space-x-1">
+          <AiFillWarning
+            data-tooltip-id={id}
+            className="h-5 w-5 text-red-500"
+          />
+          {children}
+        </div>
+        {createPortal(
+          <Tooltip id={id} className="z-[9999999999] max-w-[95vw]">
+            <pre className="whitespace-pre-wrap text-sm">{message}</pre>
+          </Tooltip>,
+          document.body
+        )}
+      </>
+    );
+  }
 
   return (
     <div
@@ -59,7 +90,7 @@ export default function ErrorMessage({
           ></path>
         </svg>
       )}
-      <div className="flex h-full items-center pl-2 text-center">
+      <div className={clsx("flex", className)}>
         <h3
           className={clsx(
             "text-sm",
diff --git a/src/ui/HelmSnippet/CLISnippet.tsx b/src/ui/HelmSnippet/CLISnippet.tsx
index 29b37bd82..9a96f1832 100644
--- a/src/ui/HelmSnippet/CLISnippet.tsx
+++ b/src/ui/HelmSnippet/CLISnippet.tsx
@@ -21,7 +21,7 @@ helm repo update
 
 helm install {{{ this.chart }}} {{{ this.repoName }}}/{{{ this.chart }}} -n "{{{ this.namespace }}}" \\
   {{#each this.values}}
-  --set {{{ this.key }}}={{{ this.value }}} {{#unless @last}} \\ \n{{/unless}}{{/each}}{{#if this.createNamespace }} \\
+  --set {{{ @key }}}={{{ this }}} {{#unless @last}} \\ \n{{/unless}}{{/each}}{{#if this.createNamespace }} \\
   --create-namespace {{#if this.valueFile }} \\ {{/if}}
 {{/if}} {{#if this.valueFile }} \\
   --set-file values.yaml {{#if this.args}} \\ {{/if}}
@@ -42,19 +42,33 @@ type Props = {
   data: ChartData[];
 };
 
+// @ts-ignore
+export function flattenObj(obj, parent, res = {}) {
+  for (let key in obj) {
+    let propName = parent ? parent + "." + key : key;
+    if (typeof obj[key] == "object") {
+      flattenObj(obj[key], propName, res);
+    } else {
+      // @ts-ignore
+      res[propName] = obj[key];
+    }
+  }
+  return res;
+}
+
 export default function CLIInstallAgent({ data }: Props) {
   const helmCommandTemplate = useMemo(() => {
-    return template(
-      {
-        charts: data.map((chart) => {
-          return {
-            ...chart,
-            chartUrl: chart.chartUrl ?? "https://flanksource.github.io/charts"
-          };
-        })
-      },
-      {}
-    );
+    let ctx = {
+      charts: data.map((chart) => {
+        return {
+          ...chart,
+          chartUrl: chart.chartUrl ?? "https://flanksource.github.io/charts",
+          // @ts-ignore
+          values: flattenObj(chart.values)
+        };
+      })
+    };
+    return template(ctx);
   }, [data]);
 
   return (
diff --git a/src/ui/HelmSnippet/FluxSnippet.tsx b/src/ui/HelmSnippet/FluxSnippet.tsx
index 08d92d297..56c653fa3 100644
--- a/src/ui/HelmSnippet/FluxSnippet.tsx
+++ b/src/ui/HelmSnippet/FluxSnippet.tsx
@@ -1,54 +1,66 @@
 import { JSONViewer } from "@flanksource-ui/ui/Code/JSONViewer";
-import Handlebars from "handlebars";
 import { useMemo } from "react";
 import { ChartData } from "./HelmInstallationSnippets";
+import { stringify } from "yaml";
+function generateFluxManifests(charts: ChartData[]) {
+  const manifests = charts.flatMap((chart) => {
+    const documents = [];
 
-// This a  Handlebars template for the HelmRelease to install the agent and the
-// kubernetes agent if the user has enabled it.
-const fluxTemplate = `{{#each charts }}
-{{#if this.createNamespace}}
-apiVersion: v1
-kind: Namespace
-metadata:
-  name:  {{ this.namespace }}
----
-{{/if}}
-{{#if this.createRepo}}
-apiVersion: source.toolkit.fluxcd.io/v1
-kind: HelmRepository
-metadata:
-  name: {{ this.repoName }}
-  namespace: {{ this.namespace }}
-spec:
-  interval: 5m0s
-  url: {{{ this.chartUrl }}}
----
-{{/if}}
-apiVersion: helm.toolkit.fluxcd.io/v2
-kind: HelmRelease
-metadata:
-  name: {{{ this.chart }}}
-  namespace: {{ this.namespace }}
-spec:
-  chart:
-    spec:
-      chart: {{{ this.chart }}}
-      sourceRef:
-        kind: HelmRepository
-        name: {{{ this.repoName }}}
-        namespace: {{{ this.namespace }}}
-      interval: 5m0s
-  values:
-  {{#if this.valueFile }}
-{{ this.valueFile }}
-  {{/if}}
-{{#each this.values}}
-    {{{ this.key }}}: {{{ this.value }}}
-{{/each}}
----
-{{/each}}`;
+    if (chart.createNamespace) {
+      documents.push({
+        apiVersion: "v1",
+        kind: "Namespace",
+        metadata: {
+          name: chart.namespace
+        }
+      });
+    }
 
-const template = Handlebars.compile(fluxTemplate);
+    if (chart.createRepo) {
+      documents.push({
+        apiVersion: "source.toolkit.fluxcd.io/v1",
+        kind: "HelmRepository",
+        metadata: {
+          name: chart.repoName,
+          namespace: chart.namespace
+        },
+        spec: {
+          interval: "5m",
+          url: chart.chartUrl
+        }
+      });
+    }
+
+    documents.push({
+      apiVersion: "helm.toolkit.fluxcd.io/v2",
+      kind: "HelmRelease",
+      metadata: {
+        name: chart.chart,
+        namespace: chart.namespace
+      },
+      spec: {
+        interval: "5m",
+        timeout: "10m",
+        chart: {
+          spec: {
+            chart: chart.chart,
+            sourceRef: {
+              kind: "HelmRepository",
+              name: chart.repoName,
+              namespace: chart.namespace
+            },
+            interval: "5m0s"
+          }
+        },
+        values: chart.values
+      }
+    });
+
+    return documents;
+  });
+
+  return manifests.map((doc) => stringify(doc)).join("\n---\n");
+}
 
 type Props = {
   data: ChartData[];
@@ -56,21 +68,17 @@ type Props = {
 
 export default function FluxSnippet({ data }: Props) {
   const yaml = useMemo(() => {
-    return template(
-      {
-        charts: data.map((data) => ({
-          ...data,
-          chartUrl: data?.chartUrl ?? "https://flanksource.github.io/charts",
-          valueFile: data?.valueFile
-            ? // Indent the valueFile content
-              data?.valueFile?.replace(/^/gm, "    ")
-            : undefined
-        }))
-      },
-      {}
+    return generateFluxManifests(
+      data.map((data) => ({
+        ...data,
+        chartUrl: data?.chartUrl ?? "https://flanksource.github.io/charts",
+        valueFile: data?.valueFile
+          ? // Indent the valueFile content
+            data?.valueFile?.replace(/^/gm, "    ")
+          : undefined
+      }))
     );
   }, [data]);
-
   return (
     <div className="flex max-h-[30rem] flex-1 flex-col gap-4 overflow-y-auto rounded-md border border-gray-200 p-2 px-4">
       <JSONViewer code={yaml} format="yaml" showLineNo />
diff --git a/src/ui/HelmSnippet/HelmInstallationSnippets.tsx b/src/ui/HelmSnippet/HelmInstallationSnippets.tsx
index 5fa757b16..999194f6e 100644
--- a/src/ui/HelmSnippet/HelmInstallationSnippets.tsx
+++ b/src/ui/HelmSnippet/HelmInstallationSnippets.tsx
@@ -24,10 +24,7 @@ export type ChartData = {
   chartUrl?: string;
   repoName?: string;
   releaseName: string;
-  values?: {
-    key: string;
-    value?: string;
-  }[];
+  values?: Record<string, any>;
   args?: string[];
   createRepo?: boolean;
   wait?: boolean;
diff --git a/src/ui/HelmSnippet/__tests__/FluxSnippet.unit.test.tsx b/src/ui/HelmSnippet/__tests__/FluxSnippet.unit.test.tsx
index 56a54b5f4..f7b5164cb 100644
--- a/src/ui/HelmSnippet/__tests__/FluxSnippet.unit.test.tsx
+++ b/src/ui/HelmSnippet/__tests__/FluxSnippet.unit.test.tsx
@@ -20,6 +20,7 @@ describe("InstallAgentModal", () => {
   it("renders the Helm repository installation command", async () => {
     render(<FluxSnippet data={[mockInput]} />);
 
+    writeText.mockClear();
     const btn = screen.getByTitle(/Copy to clipboard/i);
 
     fireEvent.click(btn);
@@ -33,7 +34,7 @@ describe("InstallAgentModal", () => {
   it("renders the Helm repository installation command with kube command", async () => {
     render(<FluxSnippet data={mockInputWithKubOptions} />);
     const btn = screen.getByTitle(/Copy to clipboard/i);
-
+    writeText.mockClear();
     fireEvent.click(btn);
 
     await waitFor(() => {
diff --git a/src/ui/HelmSnippet/__tests__/__snapshots__/CLISnippet.unit.test.tsx.snap b/src/ui/HelmSnippet/__tests__/__snapshots__/CLISnippet.unit.test.tsx.snap
index 69cb7e902..9b31d6e43 100644
--- a/src/ui/HelmSnippet/__tests__/__snapshots__/CLISnippet.unit.test.tsx.snap
+++ b/src/ui/HelmSnippet/__tests__/__snapshots__/CLISnippet.unit.test.tsx.snap
@@ -30,8 +30,8 @@ helm install mission-control-agent flanksource/mission-control-agent -n "mission
   --create-namespace 
    
 
-helm install mc-agent-kubernetes flanksource/mc-agent-kubernetes -n "mission-control-agent" \\
-  --set clusterName=test-new-agent-instructions  \\ 
-  --set scraper.schedule=30m    
+helm install mission-control-kubernetes flanksource/mission-control-kubernetes -n "mission-control-agent" \\
+  --set clusterName=test-new-agent-instructions2  \\ 
+  --set scraper.schedule=@every 31m    
 "
 `;
diff --git a/src/ui/HelmSnippet/__tests__/__snapshots__/FluxSnippet.unit.test.tsx.snap b/src/ui/HelmSnippet/__tests__/__snapshots__/FluxSnippet.unit.test.tsx.snap
index d41e36220..584e25ea7 100644
--- a/src/ui/HelmSnippet/__tests__/__snapshots__/FluxSnippet.unit.test.tsx.snap
+++ b/src/ui/HelmSnippet/__tests__/__snapshots__/FluxSnippet.unit.test.tsx.snap
@@ -4,7 +4,8 @@ exports[`InstallAgentModal renders the Helm repository installation command 1`]
 "apiVersion: v1
 kind: Namespace
 metadata:
-  name:  mission-control-agent
+  name: mission-control-agent
+
 ---
 apiVersion: source.toolkit.fluxcd.io/v1
 kind: HelmRepository
@@ -12,8 +13,9 @@ metadata:
   name: flanksource
   namespace: mission-control-agent
 spec:
-  interval: 5m0s
+  interval: 5m
   url: https://flanksource.github.io/charts
+
 ---
 apiVersion: helm.toolkit.fluxcd.io/v2
 kind: HelmRelease
@@ -21,6 +23,8 @@ metadata:
   name: mission-control-agent
   namespace: mission-control-agent
 spec:
+  interval: 5m
+  timeout: 10m
   chart:
     spec:
       chart: mission-control-agent
@@ -30,14 +34,15 @@ spec:
         namespace: mission-control-agent
       interval: 5m0s
   values:
-    upstream.createSecret: true
-    upstream.host: http://localhost:3000
-    upstream.username: token
-    upstream.password: password
-    upstream.agentName: test-new-agent-instructions
-    pushTelemetry.enabled: true
-    pushTelemetry.topologyName: incident-commander.demo.aws.flanksource.com-test-new-agent-instructions
----
+    upstream:
+      createSecret: "true"
+      host: http://localhost:3000
+      username: token
+      password: password
+      agentName: test-new-agent-instructions
+    pushTelemetry:
+      enabled: "true"
+      topologyName: incident-commander.demo.aws.flanksource.com-test-new-agent-instructions
 "
 `;
 
@@ -45,7 +50,8 @@ exports[`InstallAgentModal renders the Helm repository installation command with
 "apiVersion: v1
 kind: Namespace
 metadata:
-  name:  mission-control-agent
+  name: mission-control-agent
+
 ---
 apiVersion: source.toolkit.fluxcd.io/v1
 kind: HelmRepository
@@ -53,8 +59,9 @@ metadata:
   name: flanksource
   namespace: mission-control-agent
 spec:
-  interval: 5m0s
+  interval: 5m
   url: https://flanksource.github.io/charts
+
 ---
 apiVersion: helm.toolkit.fluxcd.io/v2
 kind: HelmRelease
@@ -62,6 +69,8 @@ metadata:
   name: mission-control-agent
   namespace: mission-control-agent
 spec:
+  interval: 5m
+  timeout: 10m
   chart:
     spec:
       chart: mission-control-agent
@@ -71,13 +80,36 @@ spec:
         namespace: mission-control-agent
       interval: 5m0s
   values:
-    upstream.createSecret: true
-    upstream.host: http://localhost:3000
-    upstream.username: token
-    upstream.password: password
-    upstream.agentName: test-new-agent-instructions
-    pushTelemetry.enabled: true
-    pushTelemetry.topologyName: incident-commander.demo.aws.flanksource.com-test-new-agent-instructions
+    upstream:
+      createSecret: "true"
+      host: http://localhost:3000
+      username: token
+      password: password
+      agentName: test-new-agent-instructions
+    pushTelemetry:
+      enabled: "true"
+      topologyName: incident-commander.demo.aws.flanksource.com-test-new-agent-instructions
+
 ---
+apiVersion: helm.toolkit.fluxcd.io/v2
+kind: HelmRelease
+metadata:
+  name: mission-control-kubernetes
+  namespace: mission-control-agent
+spec:
+  interval: 5m
+  timeout: 10m
+  chart:
+    spec:
+      chart: mission-control-kubernetes
+      sourceRef:
+        kind: HelmRepository
+        name: flanksource
+        namespace: mission-control-agent
+      interval: 5m0s
+  values:
+    clusterName: test-new-agent-instructions2
+    scraper:
+      schedule: "@every 31m"
 "
 `;
diff --git a/src/ui/HelmSnippet/__tests__/mocks/mocks.ts b/src/ui/HelmSnippet/__tests__/mocks/mocks.ts
index 4a5fd6e51..9c1db65a2 100644
--- a/src/ui/HelmSnippet/__tests__/mocks/mocks.ts
+++ b/src/ui/HelmSnippet/__tests__/mocks/mocks.ts
@@ -7,37 +7,20 @@ export const mockInput: ChartData = {
   createRepo: true,
   releaseName: "mc-agent",
   createNamespace: true,
-  values: [
-    {
-      key: "upstream.createSecret",
-      value: "true"
+  values: {
+    upstream: {
+      createSecret: "true",
+      host: "http://localhost:3000",
+      username: "token",
+      password: "password",
+      agentName: "test-new-agent-instructions"
     },
-    {
-      key: "upstream.host",
-      value: "http://localhost:3000"
-    },
-    {
-      key: "upstream.username",
-      value: "token"
-    },
-    {
-      key: "upstream.password",
-      value: "password"
-    },
-    {
-      key: "upstream.agentName",
-      value: "test-new-agent-instructions"
-    },
-    {
-      key: "pushTelemetry.enabled",
-      value: "true"
-    },
-    {
-      key: "pushTelemetry.topologyName",
-      value:
+    pushTelemetry: {
+      enabled: "true",
+      topologyName:
         "incident-commander.demo.aws.flanksource.com-test-new-agent-instructions"
     }
-  ]
+  }
 };
 
 export const mockInputWithKubOptions: ChartData[] = [
@@ -48,107 +31,47 @@ export const mockInputWithKubOptions: ChartData[] = [
     createRepo: true,
     createNamespace: true,
     releaseName: "mc-agent",
-    values: [
-      {
-        key: "upstream.createSecret",
-        value: "true"
-      },
-      {
-        key: "upstream.host",
-        value: "http://localhost:3000"
-      },
-      {
-        key: "upstream.username",
-        value: "token"
-      },
-      {
-        key: "upstream.password",
-        value: "password"
+    values: {
+      upstream: {
+        createSecret: "true",
+        host: "http://localhost:3000",
+        username: "token",
+        password: "password",
+        agentName: "test-new-agent-instructions"
       },
-      {
-        key: "upstream.agentName",
-        value: "test-new-agent-instructions"
-      },
-      {
-        key: "pushTelemetry.enabled",
-        value: "true"
-      },
-      {
-        key: "pushTelemetry.topologyName",
-        value:
+      pushTelemetry: {
+        enabled: "true",
+        topologyName:
           "incident-commander.demo.aws.flanksource.com-test-new-agent-instructions"
       }
-    ]
+    }
   },
   {
-    chart: "mc-agent-kubernetes",
-    repoName: "flanksource",
+    chart: "mission-control-kubernetes",
     namespace: "mission-control-agent",
+    repoName: "flanksource",
     releaseName: "mc-agent-kubernetes",
-    values: [
-      {
-        key: "clusterName",
-        value: "test-new-agent-instructions"
-      },
-      {
-        key: "scraper.schedule",
-        value: "30m"
+    values: {
+      clusterName: "test-new-agent-instructions2",
+      scraper: {
+        schedule: "@every 31m"
       }
-    ]
+    }
   }
 ];
 
 export const mockInputWithValueFile: ChartData[] = [
   {
-    chart: "mission-control-agent",
+    chart: "mission-control-kubernetes",
     namespace: "mission-control-agent",
     repoName: "flanksource",
-    createRepo: true,
-    releaseName: "mc-agent",
-    createNamespace: true,
-    values: [
-      {
-        key: "upstream.createSecret",
-        value: "true"
-      },
-      {
-        key: "upstream.host",
-        value: "http://localhost:3000"
-      },
-      {
-        key: "upstream.username",
-        value: "token"
-      },
-      {
-        key: "upstream.password",
-        value: "password"
-      },
-      {
-        key: "upstream.agentName",
-        value: "test-new-agent-instructions"
-      },
-      {
-        key: "pushTelemetry.enabled",
-        value: "true"
-      },
-      {
-        key: "pushTelemetry.topologyName",
-        value:
-          "incident-commander.demo.aws.flanksource.com-test-new-agent-instructions"
-      }
-    ],
-    valueFile: `key: value
-key2: value2
-key3: value3
-key4: value4`
-  },
-  {
-    chart: "mc-agent-kubernetes",
-    repoName: "flanksource",
-    namespace: "mission-control-agent",
     releaseName: "mc-agent-kubernetes",
-    valueFile: `key: value
-key2: value2
-key3: value3`
+    values: {
+      clusterName: "test-new-agent-instructions2",
+      scraper: {
+        schedule: "@every 31m"
+      }
+    },
+    valueFile: "a: b"
   }
 ];

From 98a726f1c8c021372a570a8ffb3d22b0545a5898 Mon Sep 17 00:00:00 2001
From: Moshe Immermam <moshe@flanksource.com>
Date: Fri, 15 Nov 2024 09:03:08 +0200
Subject: [PATCH 2/4] chore: add filter errors to ui

---
 src/api/types/notifications.ts                |   2 +
 .../Rules/NotificationsRulesForm.tsx          |  13 ++-
 .../Rules/notificationsRulesTableColumns.tsx  | 108 +++---------------
 .../NotificationSilenceForm.tsx               |   7 ++
 .../SilenceNotificationsList.tsx              |  11 +-
 5 files changed, 44 insertions(+), 97 deletions(-)

diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts
index 25a139aad..90f596227 100644
--- a/src/api/types/notifications.ts
+++ b/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;
diff --git a/src/components/Notifications/Rules/NotificationsRulesForm.tsx b/src/components/Notifications/Rules/NotificationsRulesForm.tsx
index 0df8192bf..0d7ab6fd8 100644
--- a/src/components/Notifications/Rules/NotificationsRulesForm.tsx
+++ b/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
diff --git a/src/components/Notifications/Rules/notificationsRulesTableColumns.tsx b/src/components/Notifications/Rules/notificationsRulesTableColumns.tsx
index d5dd69315..7e374461c 100644
--- a/src/components/Notifications/Rules/notificationsRulesTableColumns.tsx
+++ b/src/components/Notifications/Rules/notificationsRulesTableColumns.tsx
@@ -1,23 +1,15 @@
 import { NotificationRules } from "@flanksource-ui/api/types/notifications";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
-import { Modal } from "@flanksource-ui/ui/Modal";
 import MRTAvatarCell from "@flanksource-ui/ui/MRTDataTable/Cells/MRTAvataCell";
 import { MRTDateCell } from "@flanksource-ui/ui/MRTDataTable/Cells/MRTDateCells";
 import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import { formatDuration } from "@flanksource-ui/utils/date";
 import dayjs from "dayjs";
-import { atom, useAtom } from "jotai";
 import { MRT_ColumnDef } from "mantine-react-table";
 import { useState } from "react";
-import { createPortal } from "react-dom";
-import { FaExclamationTriangle } from "react-icons/fa";
-import { Tooltip } from "react-tooltip";
 import JobHistoryStatusColumn from "../../JobsHistory/JobHistoryStatusColumn";
 import { JobsHistoryDetails } from "../../JobsHistory/JobsHistoryDetails";
-
-export const notificationMostCommonErrorAtom = atom<
-  NotificationRules | undefined
->(undefined);
+import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
 
 export const notificationEvents = [
   // Source: mission-control/api/event.go
@@ -140,52 +132,7 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
       header: "Name",
       id: "name",
       size: 150,
-      accessorKey: "name",
-      Cell: ({ row, column }) => {
-        const value = row.original.name;
-        const error = row.original.error;
-
-        const [showError, setShowError] = useState(false);
-
-        return (
-          <div className="w-full overflow-hidden text-ellipsis">
-            {error && (
-              <>
-                <span
-                  data-tooltip-id={`error-tooltip-${row.original.id}`}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setShowError(!showError);
-                  }}
-                >
-                  <FaExclamationTriangle className="mr-1 inline h-4 w-4 text-red-500" />
-                </span>
-                {createPortal(
-                  <Tooltip
-                    className="z-[9999999999]"
-                    id={`error-tooltip-${row.original.id}`}
-                  >
-                    <pre className="whitespace-pre-wrap text-sm">{error}</pre>
-                  </Tooltip>,
-                  document.body
-                )}
-
-                <Modal
-                  open={showError}
-                  onClose={() => setShowError(false)}
-                  title={` ${value} Error Details`}
-                >
-                  <div className="flex flex-col p-4">
-                    <pre className="whitespace-pre-wrap text-sm">{error}</pre>
-                  </div>
-                </Modal>
-              </>
-            )}
-            {value}
-          </div>
-        );
-      }
+      accessorKey: "name"
     },
     {
       header: "Filter",
@@ -193,9 +140,14 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
       size: 100,
       accessorKey: "filter",
       Cell: ({ row, column }) => {
-        const value = row.getValue<string>(column.id);
+        const value = row.original.filter;
+        const error = row.original.error;
+
         return (
-          <div className="w-full overflow-hidden text-ellipsis">{value}</div>
+          <div className="flex flex-row overflow-hidden text-ellipsis">
+            <ErrorMessage message={error} tooltip={true} />
+            {value}
+          </div>
         );
       }
     },
@@ -210,45 +162,11 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
       id: "failed",
       accessorKey: "failed",
       size: 70,
-      Cell: ({ column, row }) => {
-        const value = row.getValue<number>(column.id);
-        const notification = row.original;
-
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const [, setMostCommonErrorNotification] = useAtom(
-          notificationMostCommonErrorAtom
-        );
-
-        if (!value) {
-          return null;
-        }
-
+      Cell: ({ row }) => {
         return (
-          <>
-            <div
-              data-tooltip-id="most-common-error-tooltip"
-              onClick={(e) => {
-                if (notification.most_common_error) {
-                  e.stopPropagation();
-                  setMostCommonErrorNotification(notification);
-                }
-              }}
-            >
-              {value}
-            </div>
-            {value > 0 &&
-              createPortal(
-                <Tooltip
-                  id="most-common-error-tooltip"
-                  className="z-[9999999999] max-w-[95vw]"
-                >
-                  <pre className="whitespace-pre-wrap text-sm">
-                    {notification.most_common_error}
-                  </pre>
-                </Tooltip>,
-                document.body
-              )}
-          </>
+          <ErrorMessage message={row.original.most_common_error} tooltip={true}>
+            {row.original.failed}
+          </ErrorMessage>
         );
       }
     },
diff --git a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
index e3e727432..c5b804e41 100644
--- a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
+++ b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
@@ -19,6 +19,7 @@ import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
 import { useMutation } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { Formik, Form, FormikBag } from "formik";
+import { omit } from "lodash";
 import { FaCircleNotch } from "react-icons/fa";
 import { useSearchParams } from "react-router-dom";
 
@@ -118,6 +119,8 @@ export default function NotificationSilenceForm({
       ? parseDateMath(until, false)
       : until;
 
+    v = omit(v, "error");
+
     return mutate(
       {
         ...v,
@@ -173,6 +176,10 @@ export default function NotificationSilenceForm({
                   label="Filter"
                   hint="CEL expression for the silence to match against"
                 />
+                <ErrorMessage
+                  message={data?.error}
+                  className="h-full pl-2 align-top"
+                />
 
                 <FormikTextArea name="description" label="Reason" />
                 <ErrorMessage
diff --git a/src/components/Notifications/SilenceNotificationsList.tsx b/src/components/Notifications/SilenceNotificationsList.tsx
index b229e4642..d5a3e4e59 100644
--- a/src/components/Notifications/SilenceNotificationsList.tsx
+++ b/src/components/Notifications/SilenceNotificationsList.tsx
@@ -14,6 +14,7 @@ import { CheckLink } from "../Canary/HealthChecks/CheckLink";
 import ConfigLink from "../Configs/ConfigLink/ConfigLink";
 import { TopologyLink } from "../Topology/TopologyLink";
 import EditNotificationSilenceModal from "./SilenceNotificationForm/EditNotificationSilenceModal";
+import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
 
 const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiResponse>[] =
   [
@@ -85,7 +86,15 @@ const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiRe
     {
       header: "Filter",
       accessorKey: "filter",
-      size: 100
+      size: 100,
+      Cell: ({ row }) => {
+        return (
+          <span className="flex flex-row space-x-1">
+            <ErrorMessage message={row.original.error} tooltip={true} />
+            <span>{row.original.filter}</span>
+          </span>
+        );
+      }
     },
     {
       header: "Reason",

From a6b159bf32b41d368844dd036fe3f98c4798a430 Mon Sep 17 00:00:00 2001
From: Moshe Immermam <moshe@flanksource.com>
Date: Fri, 15 Nov 2024 09:13:39 +0200
Subject: [PATCH 3/4] chore: fix build error

---
 src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx b/src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx
index 056d14c04..f14a9ba7c 100644
--- a/src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx
+++ b/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"
       />

From b9a0c402f7ceeb236da3f28cf7bd8ea1506fe2c7 Mon Sep 17 00:00:00 2001
From: Moshe Immermam <moshe@flanksource.com>
Date: Fri, 15 Nov 2024 11:14:27 +0200
Subject: [PATCH 4/4] chore: fix notification rules table

---
 .../Rules/NotificationsRulesTable.tsx         | 26 +------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/src/components/Notifications/Rules/NotificationsRulesTable.tsx b/src/components/Notifications/Rules/NotificationsRulesTable.tsx
index 529980f6f..90b66ebc6 100644
--- a/src/components/Notifications/Rules/NotificationsRulesTable.tsx
+++ b/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}