refactor: lift up the data composition to parent component

flanksource · Sep 24, 2024 · 709996c · 709996c
1 parent 451a6c3
commit 709996c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 89 deletions.
diff --git a/src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx b/src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx
@@ -1,10 +1,7 @@
-import { GeneratedAgent } from "@flanksource-ui/api/services/agents";
-import { useUser } from "@flanksource-ui/context";
 import CodeBlock from "@flanksource-ui/ui/Code/CodeBlock";
 import Handlebars from "handlebars";
 import { useMemo } from "react";
-import { AgentFormValues } from "../Add/AddAgentForm";
-import { useAgentsBaseURL } from "./useAgentsBaseURL";
+import { TemplateContextData } from "./InstallAgentModal";
 
 const helmCommand = `helm repo add flanksource https://flanksource.github.io/charts
 
@@ -32,45 +29,13 @@ helm install mc-agent-kubernetes flanksource/mission-control-kubernetes -n "miss
 const template = Handlebars.compile(helmCommand);
 
 type Props = {
-  generatedAgent: GeneratedAgent;
-  agentFormValues?: AgentFormValues;
+  data: TemplateContextData;
 };
 
-export default function CLIInstallAgent({
-  generatedAgent,
-  agentFormValues
-}: Props) {
-  const baseUrl = useAgentsBaseURL();
-  const { backendUrl, orgSlug } = useUser();
-
+export default function CLIInstallAgent({ data }: Props) {
   const helmCommandTemplate = useMemo(() => {
-    const kubeOptions = agentFormValues?.kubernetes;
-    const pushTelemetry = agentFormValues?.pushTelemetry;
-
-    return template(
-      {
-        generatedAgent,
-        baseUrl,
-        agentFormValues,
-        pushTelemetry: pushTelemetry?.enabled
-          ? {
-              ...pushTelemetry,
-              topologyName: orgSlug
-                ? `${orgSlug}-${pushTelemetry.topologyName}`
-                : pushTelemetry.topologyName
-            }
-          : undefined,
-        backendUrl,
-        kubeOptions: kubeOptions
-          ? {
-              schedule: kubeOptions?.schedule,
-              exclusions: `{${kubeOptions?.exclusions?.join(",")}}`
-            }
-          : undefined
-      },
-      {}
-    );
-  }, [agentFormValues, backendUrl, baseUrl, generatedAgent, orgSlug]);
+    return template(data, {});
+  }, [data]);
 
   return (
     <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-2">

diff --git a/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx b/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx
@@ -1,10 +1,7 @@
-import { GeneratedAgent } from "@flanksource-ui/api/services/agents";
-import { useUser } from "@flanksource-ui/context";
 import { JSONViewer } from "@flanksource-ui/ui/Code/JSONViewer";
 import Handlebars from "handlebars";
 import { useMemo } from "react";
-import { AgentFormValues } from "../Add/AddAgentForm";
-import { useAgentsBaseURL } from "./useAgentsBaseURL";
+import { TemplateContextData } from "./InstallAgentModal";
 
 const fluxTemplate = `apiVersion: v1
 kind: Namespace
@@ -70,45 +67,13 @@ spec:
 const template = Handlebars.compile(fluxTemplate);
 
 type Props = {
-  generatedAgent: GeneratedAgent;
-  agentFormValues?: AgentFormValues;
+  data: TemplateContextData;
 };
 
-export default function FluxInstallAgent({
-  generatedAgent,
-  agentFormValues
-}: Props) {
-  const baseUrl = useAgentsBaseURL();
-  const { backendUrl, orgSlug } = useUser();
-
+export default function FluxInstallAgent({ data }: Props) {
   const yaml = useMemo(() => {
-    const kubeOptions = agentFormValues?.kubernetes;
-    const pushTelemetry = agentFormValues?.pushTelemetry ?? undefined;
-
-    return template(
-      {
-        generatedAgent,
-        baseUrl,
-        agentFormValues,
-        pushTelemetry: pushTelemetry?.enabled
-          ? {
-              ...pushTelemetry,
-              topologyName: orgSlug
-                ? `${orgSlug}-${pushTelemetry.topologyName}`
-                : pushTelemetry.topologyName
-            }
-          : undefined,
-        backendUrl,
-        kubeOptions: kubeOptions
-          ? {
-              schedule: kubeOptions?.schedule,
-              exclusions: kubeOptions?.exclusions
-            }
-          : undefined
-      },
-      {}
-    );
-  }, [agentFormValues, backendUrl, baseUrl, generatedAgent, orgSlug]);
+    return template(data, {});
+  }, [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">

diff --git a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx
@@ -1,11 +1,13 @@
-import { useState } from "react";
+import { useUser } from "@flanksource-ui/context";
+import { useMemo, useState } from "react";
 import { GeneratedAgent } from "../../../api/services/agents";
 import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import { Tab, Tabs } from "../../../ui/Tabs/Tabs";
 import { AgentFormValues } from "../Add/AddAgentForm";
 import CLIInstallAgent from "./CLIInstallAgent";
 import FluxInstallAgent from "./FluxInstallAgent";
+import { useAgentsBaseURL } from "./useAgentsBaseURL";
 
 export function WarningBox() {
   return (
@@ -83,6 +85,21 @@ export function MoreInfoBox() {
   );
 }
 
+export type TemplateContextData = {
+  generatedAgent?: GeneratedAgent;
+  baseUrl?: string;
+  agentFormValues?: AgentFormValues;
+  pushTelemetry?: {
+    enabled?: boolean;
+    topologyName?: string;
+  };
+  backendUrl?: string;
+  kubeOptions?: {
+    schedule?: string;
+    exclusions?: string[];
+  };
+};
+
 type Props = {
   isOpen: boolean;
   onClose: () => void;
@@ -97,6 +114,34 @@ export default function InstallAgentModal({
   agentFormValues
 }: Props) {
   const [activeTab, setActiveTab] = useState<"cli" | "flux">("cli");
+  const baseUrl = useAgentsBaseURL();
+  const { backendUrl, orgSlug } = useUser();
+
+  const data = useMemo(() => {
+    const kubeOptions = agentFormValues?.kubernetes;
+    const pushTelemetry = agentFormValues?.pushTelemetry ?? undefined;
+
+    return {
+      generatedAgent,
+      baseUrl,
+      agentFormValues,
+      pushTelemetry: pushTelemetry?.enabled
+        ? {
+            ...pushTelemetry,
+            topologyName: orgSlug
+              ? `${orgSlug}-${pushTelemetry.topologyName}`
+              : pushTelemetry.topologyName
+          }
+        : undefined,
+      backendUrl,
+      kubeOptions: kubeOptions
+        ? {
+            schedule: kubeOptions?.schedule,
+            exclusions: kubeOptions?.exclusions
+          }
+        : undefined
+    } satisfies TemplateContextData;
+  }, [agentFormValues, backendUrl, baseUrl, generatedAgent, orgSlug]);
 
   return (
     <Modal
@@ -116,21 +161,15 @@ export default function InstallAgentModal({
             onSelectTab={(v) => setActiveTab(v as any)}
           >
             <Tab className="flex flex-col gap-4 p-4" label="Flux" value="flux">
-              <FluxInstallAgent
-                generatedAgent={generatedAgent}
-                agentFormValues={agentFormValues}
-              />
+              <FluxInstallAgent data={data} />
               <WarningBox />
             </Tab>
             <Tab
               className="flex flex-col gap-4 p-4"
               label="Helm CLI"
               value="cli"
             >
-              <CLIInstallAgent
-                generatedAgent={generatedAgent}
-                agentFormValues={agentFormValues}
-              />
+              <CLIInstallAgent data={data} />
               <WarningBox />
             </Tab>
           </Tabs>