ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests 1 Actions Packages Releases Activity

update builder config

Browse Source
This commit is contained in:
karamvir
2023-08-17 19:00:12 -07:00
parent b4dcadbf17
commit e2824da846
5 changed files with 63 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/config/util.tsx
View File

@@ -201,3 +201,49 @@ export const AccountSelector = ({
</ConfigItem>
);
};
export const InputList = <T extends { [key: string]: unknown }>({
field,
values,
set,
}: {
field: keyof T;
values: string[];
set: (update: Partial<T>) => void;
}) => (
<ConfigItem label={field as string} className="items-start">
<div className="flex flex-col gap-4 w-full max-w-[400px]">
{values.map((arg, i) => (
<div className="w-full flex gap-4" key={i}>
<Input
// placeholder="--extra-arg=value"
value={arg}
onChange={(e) => {
values[i] = e.target.value;
set({ [field]: [...values] } as Partial<T>);
}}
/>
<Button
variant="outline"
intent="warning"
onClick={() =>
set({
[field]: [...values.filter((_, idx) => idx !== i)],
} as Partial<T>)
}
>
<MinusCircle className="w-4 h-4" />
</Button>
</div>
))}
<Button
variant="outline"
intent="success"
onClick={() => set({ [field]: [...values, ""] } as Partial<T>)}
>
Add Docker Account
</Button>
</div>
</ConfigItem>
);

25
frontend/src/resources/builder/config.tsx
View File

@@ -12,10 +12,7 @@ import {
import { Button } from "@ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@ui/card";
import { useState } from "react";
import { ResourceSelector } from "@components/config/util";
import { SecurityGroupIds } from "./config/security-group-ids";
import { DockerAccounts } from "./config/docker-accounts";
import { GithubAccounts } from "./config/github-accounts";
import { InputList, ResourceSelector } from "@components/config/util";
const BuilderTypeSelector = ({
selected,
@@ -122,14 +119,26 @@ const BuilderConfigInner = ({
subnet_id: true,
key_pair_name: true,
assign_public_ip: true,
security_group_ids: (ids, set) => (
<SecurityGroupIds ids={ids} set={set} />
security_group_ids: (values, set) => (
<InputList
field="security_group_ids"
values={values}
set={set}
/>
),
docker_accounts: (accounts, set) => (
<DockerAccounts ids={accounts ?? []} set={set} />
<InputList
field="docker_accounts"
values={accounts ?? []}
set={set}
/>
),
github_accounts: (accounts, set) => (
<GithubAccounts ids={accounts ?? []} set={set} />
<InputList
field="github_accounts"
values={accounts ?? []}
set={set}
/>
),
}}
/>

51
frontend/src/resources/builder/config/docker-accounts.tsx
View File

@@ -1,51 +0,0 @@
import { ConfigItem } from "@components/config/util";
import { Types } from "@monitor/client";
import { Button } from "@ui/button";
import { Input } from "@ui/input";
import { MinusCircle } from "lucide-react";
export const DockerAccounts = ({
ids,
set,
}: {
ids: string[];
set: (update: Partial<Types.AwsBuilderConfig>) => void;
}) => {
return (
<ConfigItem label="Security Group Ids" className="items-start">
<div className="flex flex-col gap-4 w-full max-w-[400px]">
{ids.map((arg, i) => (
<div className="w-full flex gap-4" key={i}>
<Input
// placeholder="--extra-arg=value"
value={arg}
onChange={(e) => {
ids[i] = e.target.value;
set({ docker_accounts: [...ids] });
}}
/>
<Button
variant="outline"
intent="warning"
onClick={() =>
set({
docker_accounts: [...ids.filter((_, idx) => idx !== i)],
})
}
>
<MinusCircle className="w-4 h-4" />
</Button>
</div>
))}
<Button
variant="outline"
intent="success"
onClick={() => set({ docker_accounts: [...ids, ""] })}
>
Add Docker Account
</Button>
</div>
</ConfigItem>
);
};

51
frontend/src/resources/builder/config/github-accounts.tsx
View File

@@ -1,51 +0,0 @@
import { ConfigItem } from "@components/config/util";
import { Types } from "@monitor/client";
import { Button } from "@ui/button";
import { Input } from "@ui/input";
import { MinusCircle } from "lucide-react";
export const GithubAccounts = ({
ids,
set,
}: {
ids: string[];
set: (update: Partial<Types.AwsBuilderConfig>) => void;
}) => {
return (
<ConfigItem label="Security Group Ids" className="items-start">
<div className="flex flex-col gap-4 w-full max-w-[400px]">
{ids.map((arg, i) => (
<div className="w-full flex gap-4" key={i}>
<Input
// placeholder="--extra-arg=value"
value={arg}
onChange={(e) => {
ids[i] = e.target.value;
set({ github_accounts: [...ids] });
}}
/>
<Button
variant="outline"
intent="warning"
onClick={() =>
set({
github_accounts: [...ids.filter((_, idx) => idx !== i)],
})
}
>
<MinusCircle className="w-4 h-4" />
</Button>
</div>
))}
<Button
variant="outline"
intent="success"
onClick={() => set({ github_accounts: [...ids, ""] })}
>
Add Github Account
</Button>
</div>
</ConfigItem>
);
};

51
frontend/src/resources/builder/config/security-group-ids.tsx
View File

@@ -1,51 +0,0 @@
import { ConfigItem } from "@components/config/util";
import { Types } from "@monitor/client";
import { Button } from "@ui/button";
import { Input } from "@ui/input";
import { MinusCircle } from "lucide-react";
export const SecurityGroupIds = ({
ids,
set,
}: {
ids: string[];
set: (update: Partial<Types.AwsBuilderConfig>) => void;
}) => {
return (
<ConfigItem label="Security Group Ids" className="items-start">
<div className="flex flex-col gap-4 w-full max-w-[400px]">
{ids.map((arg, i) => (
<div className="w-full flex gap-4" key={i}>
<Input
// placeholder="--extra-arg=value"
value={arg}
onChange={(e) => {
ids[i] = e.target.value;
set({ security_group_ids: [...ids] });
}}
/>
<Button
variant="outline"
intent="warning"
onClick={() =>
set({
security_group_ids: [...ids.filter((_, idx) => idx !== i)],
})
}
>
<MinusCircle className="w-4 h-4" />
</Button>
</div>
))}
<Button
variant="outline"
intent="success"
onClick={() => set({ security_group_ids: [...ids, ""] })}
>
Add Security Group
</Button>
</div>
</ConfigItem>
);
};