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

split configs into cards within each tab

Browse Source
This commit is contained in:
karamvir
2023-08-17 17:17:04 -07:00
parent c6c91b6b11
commit 82588a0f83
3 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,7 @@ export const ConfigItem = ({
}) => (
<div
className={cn(
"flex justify-between items-center border-b pb-4 min-h-[60px]",
"flex justify-between items-center border-b pb-4 min-h-[60px] last:border-none",
className
)}
>

43
frontend/src/layouts/page.tsx
View File

@@ -95,11 +95,14 @@ export const ConfigInner = <T,>({
onSave: () => void;
components: Record<
string,
{
[K in keyof Partial<T>]:
| true
| ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);
}
Record<
string,
{
[K in keyof Partial<T>]:
| true
| ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);
}
>
>;
}) => {
const [show, setShow] = useState(keys(components)[0]);
@@ -119,19 +122,23 @@ export const ConfigInner = <T,>({
</Button>
))}
</div>
<Card className="w-full min-h-[500px]">
<CardHeader className="border-b">
<CardTitle className="capitalize">{show}</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-4 mt-4">
<ConfigAgain
config={config}
update={update}
set={(u) => set((p) => ({ ...p, ...u }))}
components={components[show]}
/>
</CardContent>
</Card>
<div className="flex flex-col gap-6 min-h-[500px] w-full">
{Object.entries(components[show]).map(([k, v]) => (
<Card className="w-full ">
<CardHeader className="border-b">
<CardTitle className="capitalize">{k}</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-4 mt-4">
<ConfigAgain
config={config}
update={update}
set={(u) => set((p) => ({ ...p, ...u }))}
components={v}
/>
</CardContent>
</Card>
))}
</div>
</div>
</ConfigLayout>
);

90
frontend/src/resources/deployment/config/index.tsx
View File

@@ -5,6 +5,7 @@ import { useState } from "react";
import {
AccountSelector,
ConfigInput,
ConfigItem,
ResourceSelector,
} from "@components/config/util";
import { ImageConfig } from "./components/image";
@@ -22,14 +23,13 @@ export const ServerSelector = ({
selected: string | undefined;
set: (input: Partial<Types.DeploymentConfig>) => void;
}) => (
<div className="flex items-center justify-between border-b pb-4">
Server
<ConfigItem label="Server">
<ResourceSelector
type="Server"
selected={selected}
onSelect={(server_id) => set({ server_id })}
/>
</div>
</ConfigItem>
);
export const DeploymentConfig = ({ id }: { id: string }) => {
@@ -53,45 +53,55 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
onSave={() => mutate({ id, config: update })}
components={{
general: {
server_id: (value, set) => (
<ServerSelector selected={value} set={set} />
),
image: (value, set) => <ImageConfig image={value} set={set} />,
docker_account: (value, set) => (
<AccountSelector
id={update.server_id ?? config.server_id}
account_type="docker"
type="Server"
selected={value}
onSelect={(docker_account) => set({ docker_account })}
/>
),
restart: (value, set) => (
<RestartModeSelector selected={value} set={set} />
),
extra_args: (value, set) => (
<ExtraArgs args={value ?? []} set={set} />
),
process_args: (value, set) => (
<ConfigInput
label="Process Args"
value={value}
onChange={(process_args) => set({ process_args })}
/>
),
network: (value, set) => (
<NetworkModeSelector
selected={value}
onSelect={(network) => set({ network })}
/>
),
ports: (value, set) =>
show_ports && <PortsConfig ports={value ?? []} set={set} />,
volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
general: {
server_id: (value, set) => (
<ServerSelector selected={value} set={set} />
),
},
container: {
image: (value, set) => <ImageConfig image={value} set={set} />,
docker_account: (value, set) => (
<AccountSelector
id={update.server_id ?? config.server_id}
account_type="docker"
type="Server"
selected={value}
onSelect={(docker_account) => set({ docker_account })}
/>
),
restart: (value, set) => (
<RestartModeSelector selected={value} set={set} />
),
extra_args: (value, set) => (
<ExtraArgs args={value ?? []} set={set} />
),
process_args: (value, set) => (
<ConfigInput
label="Process Args"
value={value}
onChange={(process_args) => set({ process_args })}
/>
),
},
network: {
network: (value, set) => (
<NetworkModeSelector
selected={value}
onSelect={(network) => set({ network })}
/>
),
ports: (value, set) =>
show_ports && <PortsConfig ports={value ?? []} set={set} />,
},
volumes: {
volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
},
},
environment: {
skip_secret_interp: true,
environment: (vars, set) => <EnvVars vars={vars ?? []} set={set} />,
environment: {
skip_secret_interp: true,
environment: (vars, set) => <EnvVars vars={vars ?? []} set={set} />,
},
},
}}
/>