Skip to content

Commit fd099f5

Browse files
mainawycliffemainawycliffe
committed
fix: agent install instructions
Update FluxInstallAgent.tsx Update CLIInstallAgent.tsx Update CLIInstallAgent.unit.test.tsx Update FluxInstallAgent.unit.test.tsx Update CLIInstallAgent.tsx Update CLIInstallAgent.unit.test.tsx refactor: lift up the data composition to parent component chore: fix failing tests chore: fix issue after running npm i fix: make the values being passed to helm & flux template consistent and external fix: fix issues
1 parent 64635b5 commit fd099f5

File tree

9 files changed

+280
-368
lines changed

9 files changed

+280
-368
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Agents/Add/AddAgentForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default function AgentForm({
107107
name: agent?.name ?? "",
108108
properties: agent?.properties ?? {},
109109
kubernetes: {
110-
interval: "30m",
110+
schedule: "30m",
111111
enabled: false
112112
},
113113
pushTelemetry: {
@@ -173,7 +173,7 @@ export default function AgentForm({
173173
{ label: "12h", value: "12h" },
174174
{ label: "24h", value: "24h" }
175175
]}
176-
name="kubernetes.interval"
176+
name="kubernetes.schedule"
177177
label="Scrape Interval"
178178
hintPosition="top"
179179
hint="How often to perform a full reconciliation of changes (in addition to real-time changes from Kubernetes events), set higher for larger clusters."

‎src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx‎

Lines changed: 17 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,38 @@
1-
import { GeneratedAgent } from "@flanksource-ui/api/services/agents";
2-
import { useUser } from "@flanksource-ui/context";
31
import CodeBlock from "@flanksource-ui/ui/Code/CodeBlock";
42
import Handlebars from "handlebars";
53
import { useMemo } from "react";
6-
import { AgentFormValues } from "../Add/AddAgentForm";
7-
import { useAgentsBaseURL } from "./useAgentsBaseURL";
4+
import { TemplateContextData } from "./InstallAgentModal";
85

9-
const helmCommand = `helm repo add flanksource https://flanksource.github.io/charts
6+
// This a Handlebars template for the Helm command to install the agent and the
7+
// kubernetes agent if the user has enabled it.
8+
const helmCommand = `helm repo add {{ chart }} {{ repoName }}/{{ chart }}
109
1110
helm repo update
1211
13-
helm install mc-agent flanksource/mission-control-agent -n "mission-control-agent" \\
14-
--set upstream.createSecret=true \\
15-
--set upstream.host={{baseUrl}} \\
16-
--set upstream.username=token \\
17-
--set upstream.password={{generatedAgent.access_token}} \\
18-
--set upstream.agentName={{agentFormValues.name}} \\
19-
{{#if pushTelemetry}}
20-
--set pushTelemetry.enabled=true \\
21-
--set pushTelemetry.topologyName={{pushTelemetry.topologyName}}
22-
{{/if}}
12+
helm install mc-agent flanksource/mission-control-agent -n "{{{ namespace }}}" \\
13+
{{#each values}}
14+
--set {{{ this }}} \\
15+
{{/each}}
2316
--create-namespace
2417
25-
{{#if kubeOptions}}
26-
helm install mc-agent-kubernetes flanksource/mission-control-kubernetes -n "mission-control-agent" \\
27-
--set scraper.clusterName="{{agentFormValues.name}}" \\
28-
--set scraper.interval="{{kubeOptions.interval}}"
18+
{{#if kubeValues }}
19+
helm install mc-agent-kubernetes flanksource/mission-control-kubernetes -n "{{{ namespace }}}" \\
20+
{{#each kubeValues}}
21+
--set {{{ this }}} \\
22+
{{/each}}
2923
{{/if}}
3024
`;
3125

3226
const template = Handlebars.compile(helmCommand);
3327

3428
type Props = {
35-
generatedAgent: GeneratedAgent;
36-
agentFormValues?: AgentFormValues;
29+
data: TemplateContextData;
3730
};
3831

39-
export default function CLIInstallAgent({
40-
generatedAgent,
41-
agentFormValues
42-
}: Props) {
43-
const baseUrl = useAgentsBaseURL();
44-
const { backendUrl, orgSlug } = useUser();
45-
32+
export default function CLIInstallAgent({ data }: Props) {
4633
const helmCommandTemplate = useMemo(() => {
47-
const kubeOptions = agentFormValues?.kubernetes;
48-
const pushTelemetry = agentFormValues?.pushTelemetry;
49-
50-
return template(
51-
{
52-
generatedAgent,
53-
baseUrl,
54-
agentFormValues,
55-
pushTelemetry: pushTelemetry?.enabled
56-
? {
57-
...pushTelemetry,
58-
topologyName: orgSlug
59-
? `${orgSlug}-${pushTelemetry.topologyName}`
60-
: pushTelemetry.topologyName
61-
}
62-
: undefined,
63-
backendUrl,
64-
kubeOptions: kubeOptions
65-
? {
66-
interval: kubeOptions?.interval,
67-
exclusions: `{${kubeOptions?.exclusions?.join(",")}}`
68-
}
69-
: undefined
70-
},
71-
{}
72-
);
73-
}, [agentFormValues, backendUrl, baseUrl, generatedAgent, orgSlug]);
34+
return template(data, {});
35+
}, [data]);
7436

7537
return (
7638
<div className="flex flex-1 flex-col gap-4 overflow-y-auto p-2">

‎src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx‎

Lines changed: 26 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,46 @@
1-
import { GeneratedAgent } from "@flanksource-ui/api/services/agents";
2-
import { useUser } from "@flanksource-ui/context";
31
import { JSONViewer } from "@flanksource-ui/ui/Code/JSONViewer";
42
import Handlebars from "handlebars";
53
import { useMemo } from "react";
6-
import { AgentFormValues } from "../Add/AddAgentForm";
7-
import { useAgentsBaseURL } from "./useAgentsBaseURL";
4+
import { TemplateContextData } from "./InstallAgentModal";
85

6+
// This a Handlebars template for the HelmRelease to install the agent and the
7+
// kubernetes agent if the user has enabled it.
98
const fluxTemplate = `apiVersion: v1
109
kind: Namespace
1110
metadata:
12-
name: mission-control-agent
11+
name: {{ namespace }}
1312
---
13+
{{#if createRepository}}
1414
apiVersion: source.toolkit.fluxcd.io/v1beta1
1515
kind: HelmRepository
1616
metadata:
17-
name: flanksource
18-
namespace: mission-control-agent
17+
name: {{ repoName }}
18+
namespace: {{ namespace }}
1919
spec:
2020
interval: 5m0s
2121
url: https://flanksource.github.io/charts
2222
---
23+
{{/if}}
2324
apiVersion: helm.toolkit.fluxcd.io/v2beta1
2425
kind: HelmRelease
2526
metadata:
26-
name: mission-control
27-
namespace: mission-control-agent
27+
name: {{{ chart }}}
28+
namespace: {{ namespace }}
2829
spec:
2930
chart:
3031
spec:
31-
chart: mission-control-agent
32+
chart: {{{ chart }}}
3233
sourceRef:
3334
kind: HelmRepository
34-
name: flanksource
35-
namespace: mission-control-agent
36-
interval: 1m
35+
name: {{{ repoName }}}
36+
namespace: {{{ namespace }}}
37+
interval: 5m0s
3738
values:
38-
upstream:
39-
createSecret: true
40-
host: {{baseUrl}}
41-
username: token
42-
agentName: {{agentFormValues.name}}
43-
password: {{generatedAgent.access_token}}
44-
{{#if pushTelemetry}}
45-
pushTelemetry:
46-
enabled: true
47-
topologyName: {{pushTelemetry.topologyName}}
48-
{{/if}}
49-
{{#if kubeOptions}}
39+
{{#each values}}
40+
{{{ this }}}
41+
{{/each}}
42+
43+
{{#if kubeValues}}
5044
---
5145
apiVersion: helm.toolkit.fluxcd.io/v2beta1
5246
kind: HelmRelease
@@ -62,53 +56,22 @@ spec:
6256
name: flanksource
6357
namespace: mission-control-agent
6458
values:
65-
clusterName: "{{agentFormValues.name}}"
66-
interval: "{{kubeOptions.interval}}"
59+
{{#each kubeValues}}
60+
{{{ this }}}
61+
{{/each}}
6762
{{/if}}
6863
`;
6964

7065
const template = Handlebars.compile(fluxTemplate);
7166

7267
type Props = {
73-
generatedAgent: GeneratedAgent;
74-
agentFormValues?: AgentFormValues;
68+
data: TemplateContextData;
7569
};
7670

77-
export default function FluxInstallAgent({
78-
generatedAgent,
79-
agentFormValues
80-
}: Props) {
81-
const baseUrl = useAgentsBaseURL();
82-
const { backendUrl, orgSlug } = useUser();
83-
71+
export default function FluxInstallAgent({ data }: Props) {
8472
const yaml = useMemo(() => {
85-
const kubeOptions = agentFormValues?.kubernetes;
86-
const pushTelemetry = agentFormValues?.pushTelemetry ?? undefined;
87-
88-
return template(
89-
{
90-
generatedAgent,
91-
baseUrl,
92-
agentFormValues,
93-
pushTelemetry: pushTelemetry?.enabled
94-
? {
95-
...pushTelemetry,
96-
topologyName: orgSlug
97-
? `${orgSlug}-${pushTelemetry.topologyName}`
98-
: pushTelemetry.topologyName
99-
}
100-
: undefined,
101-
backendUrl,
102-
kubeOptions: kubeOptions
103-
? {
104-
interval: kubeOptions?.interval,
105-
exclusions: kubeOptions?.exclusions
106-
}
107-
: undefined
108-
},
109-
{}
110-
);
111-
}, [agentFormValues, backendUrl, baseUrl, generatedAgent, orgSlug]);
73+
return template(data, {});
74+
}, [data]);
11275

11376
return (
11477
<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">

‎src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx‎

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { useState } from "react";
1+
import { useMemo, useState } from "react";
22
import { GeneratedAgent } from "../../../api/services/agents";
33
import { Button } from "../../../ui/Buttons/Button";
44
import { Modal } from "../../../ui/Modal";
55
import { Tab, Tabs } from "../../../ui/Tabs/Tabs";
66
import { AgentFormValues } from "../Add/AddAgentForm";
77
import CLIInstallAgent from "./CLIInstallAgent";
88
import FluxInstallAgent from "./FluxInstallAgent";
9+
import { useAgentsBaseURL } from "./useAgentsBaseURL";
910

1011
export function WarningBox() {
1112
return (
@@ -83,6 +84,14 @@ export function MoreInfoBox() {
8384
);
8485
}
8586

87+
export type TemplateContextData = {
88+
namespace?: string;
89+
chart?: string;
90+
repoName?: string;
91+
values?: string[];
92+
kubeValues?: string[];
93+
};
94+
8695
type Props = {
8796
isOpen: boolean;
8897
onClose: () => void;
@@ -97,6 +106,45 @@ export default function InstallAgentModal({
97106
agentFormValues
98107
}: Props) {
99108
const [activeTab, setActiveTab] = useState<"cli" | "flux">("cli");
109+
const baseUrl = useAgentsBaseURL();
110+
111+
const data = useMemo(() => {
112+
const kubeOptions = agentFormValues?.kubernetes;
113+
const pushTelemetry = agentFormValues?.pushTelemetry ?? undefined;
114+
115+
return {
116+
chart: "mission-control-agent",
117+
namespace: "mission-control-agent",
118+
repoName: "flanksource",
119+
// You can add more values here to be passed to the template for the
120+
// values section of the HelmRelease
121+
values: [
122+
`upstream.createSecret=true`,
123+
`upstream.host=${baseUrl}`,
124+
`upstream.username=token`,
125+
`upstream.password=${generatedAgent?.access_token}`,
126+
`upstream.agentName=${agentFormValues?.name}`,
127+
...(pushTelemetry?.enabled
128+
? [
129+
`pushTelemetry.enabled=true`,
130+
`pushTelemetry.topologyName=${
131+
pushTelemetry.topologyName
132+
}-${agentFormValues?.name}`
133+
]
134+
: [])
135+
],
136+
// You can add more values here to be passed to the template for the
137+
// kubeValues section of the HelmRelease
138+
kubeValues: kubeOptions
139+
? [
140+
`clusterName: "${agentFormValues?.name}"`,
141+
`scraper.schedule: "${kubeOptions.schedule}"`
142+
]
143+
: []
144+
} satisfies TemplateContextData;
145+
}, [agentFormValues, baseUrl, generatedAgent]);
146+
147+
console.log(JSON.stringify(data, null, 2));
100148

101149
return (
102150
<Modal
@@ -116,21 +164,15 @@ export default function InstallAgentModal({
116164
onSelectTab={(v) => setActiveTab(v as any)}
117165
>
118166
<Tab className="flex flex-col gap-4 p-4" label="Flux" value="flux">
119-
<FluxInstallAgent
120-
generatedAgent={generatedAgent}
121-
agentFormValues={agentFormValues}
122-
/>
167+
<FluxInstallAgent data={data} />
123168
<WarningBox />
124169
</Tab>
125170
<Tab
126171
className="flex flex-col gap-4 p-4"
127172
label="Helm CLI"
128173
value="cli"
129174
>
130-
<CLIInstallAgent
131-
generatedAgent={generatedAgent}
132-
agentFormValues={agentFormValues}
133-
/>
175+
<CLIInstallAgent data={data} />
134176
<WarningBox />
135177
</Tab>
136178
</Tabs>

0 commit comments

Comments
 (0)