diff --git a/src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx b/src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx index a4cc0afd2..fc20a700c 100644 --- 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 (
diff --git a/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx b/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx index d462f43b9..73af08f8b 100644 --- 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 (
diff --git a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx index 77e1dee82..ab115e245 100644 --- a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx +++ b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx @@ -1,4 +1,5 @@ -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"; @@ -6,6 +7,7 @@ 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 ( setActiveTab(v as any)} > - + - +