fix frontend errors

This commit is contained in:
mbecker20
2024-04-21 02:21:49 -07:00
parent 7a2044b395
commit ee2953b2e9
10 changed files with 130 additions and 25 deletions
@@ -11,6 +11,9 @@ import {
import { useEffect, useState } from "react";
export const AlerterConfig = ({ id }: { id: string }) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Alerter", id },
}).data;
const config = useRead("GetAlerter", { alerter: id }).data?.config;
const [type, setType] = useState<Types.AlerterConfig["type"]>();
useEffect(() => config?.type && setType(config.type), [config?.type]);
@@ -20,8 +23,11 @@ export const AlerterConfig = ({ id }: { id: string }) => {
const { mutate } = useWrite("UpdateAlerter");
if (!config) return null;
const disabled = perms !== Types.PermissionLevel.Write;
return (
<Config
disabled={disabled}
config={config.params}
update={update}
set={setConfig}
@@ -22,6 +22,9 @@ import { useEffect, useState } from "react";
import { LabelsConfig, ResourceSelector } from "../common";
export const BuildConfig = ({ id }: { id: string }) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Build", id },
}).data;
const config = useRead("GetBuild", { build: id }).data?.config;
const docker_organizations = useRead("ListDockerOrganizations", {}).data;
const [update, set] = useState<Partial<Types.BuildConfig>>({});
@@ -29,8 +32,11 @@ export const BuildConfig = ({ id }: { id: string }) => {
if (!config) return null;
const disabled = perms !== Types.PermissionLevel.Write;
return (
<Config
disabled={disabled}
config={config}
update={update}
set={set}
@@ -94,6 +100,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
account_type="github"
selected={account}
onSelect={(github_account) => set({ github_account })}
disabled={disabled}
/>
),
},
@@ -107,6 +114,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
account_type="docker"
selected={account}
onSelect={(docker_account) => set({ docker_account })}
disabled={disabled}
/>
),
docker_organization:
@@ -114,12 +122,16 @@ export const BuildConfig = ({ id }: { id: string }) => {
docker_organizations.length === 0
? undefined
: (value, set) => (
<DockerOrganizations value={value} set={set} />
<DockerOrganizations
value={value}
set={set}
disabled={disabled}
/>
),
use_buildx: true,
labels: (l, set) => <LabelsConfig labels={l ?? []} set={set} />,
labels: (l, set) => <LabelsConfig labels={l ?? []} set={set} disabled={disabled} />,
extra_args: (value, set) => (
<ExtraArgs args={value ?? []} set={set} />
<ExtraArgs args={value ?? []} set={set} disabled={disabled} />
),
},
pre_build: {
@@ -128,6 +140,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
label="Pre Build"
value={value}
set={(value) => set({ pre_build: value })}
disabled={disabled}
/>
),
},
@@ -135,7 +148,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
"Build Args": {
"Build Args": {
build_args: (vars, set) => (
<BuildArgs vars={vars ?? []} set={set} />
<BuildArgs vars={vars ?? []} set={set} disabled={disabled} />
),
skip_secret_interp: true,
},
@@ -148,9 +161,11 @@ export const BuildConfig = ({ id }: { id: string }) => {
const BuildArgs = ({
vars,
set,
disabled,
}: {
vars: Types.EnvironmentVar[];
set: (input: Partial<Types.BuildConfig>) => void;
disabled: boolean;
}) => {
const [args, setArgs] = useState(env_to_text(vars));
useEffect(() => {
@@ -164,6 +179,7 @@ const BuildArgs = ({
placeholder="VARIABLE=value"
value={args}
onChange={(e) => setArgs(e.target.value)}
disabled={disabled}
/>
</ConfigItem>
);
@@ -172,9 +188,11 @@ const BuildArgs = ({
const ExtraArgs = ({
args,
set,
disabled,
}: {
args: string[];
set: (update: Partial<Types.BuildConfig>) => void;
disabled: boolean;
}) => {
return (
<ConfigItem label="Extra Args" className="items-start">
@@ -188,15 +206,18 @@ const ExtraArgs = ({
args[i] = e.target.value;
set({ extra_args: [...args] });
}}
disabled={disabled}
/>
<Button
variant="secondary"
onClick={() =>
set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
}
>
<MinusCircle className="w-4 h-4" />
</Button>
{!disabled && (
<Button
variant="secondary"
onClick={() =>
set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
}
>
<MinusCircle className="w-4 h-4" />
</Button>
)}
</div>
))}
@@ -215,9 +236,11 @@ const ExtraArgs = ({
const DockerOrganizations = ({
value,
set,
disabled,
}: {
value?: string;
set: (input: Partial<Types.BuildConfig>) => void;
disabled: boolean;
}) => {
const docker_organizations = useRead("ListDockerOrganizations", {}).data;
return (
@@ -225,8 +248,12 @@ const DockerOrganizations = ({
<Select
value={value}
onValueChange={(value) => set({ docker_organization: value })}
disabled={disabled}
>
<SelectTrigger className="w-full lg:w-[300px] max-w-[50%]">
<SelectTrigger
className="w-full lg:w-[300px] max-w-[50%]"
disabled={disabled}
>
<SelectValue placeholder="Select Organization" />
</SelectTrigger>
<SelectContent>
@@ -12,13 +12,19 @@ export const BuilderConfig = ({ id }: { id: string }) => {
};
const AwsBuilderConfig = ({ id }: { id: string }) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Builder", id },
}).data;
const config = useRead("GetBuilder", { builder: id }).data?.config;
const [update, set] = useState<Partial<Types.AwsBuilderConfig>>({});
const { mutate } = useWrite("UpdateBuilder");
if (!config) return null;
const disabled = perms !== Types.PermissionLevel.Write;
return (
<Config
disabled={disabled}
config={config.params as Types.AwsBuilderConfig}
update={update}
set={set}
@@ -35,13 +41,19 @@ const AwsBuilderConfig = ({ id }: { id: string }) => {
assign_public_ip: true,
use_public_ip: true,
security_group_ids: (values, set) => (
<InputList field="security_group_ids" values={values} set={set} />
<InputList
field="security_group_ids"
values={values}
set={set}
disabled={disabled}
/>
),
github_accounts: (accounts, set) => (
<InputList
field="github_accounts"
values={accounts ?? []}
set={set}
disabled={disabled}
/>
),
docker_accounts: (accounts, set) => (
@@ -49,6 +61,7 @@ const AwsBuilderConfig = ({ id }: { id: string }) => {
field="docker_accounts"
values={accounts ?? []}
set={set}
disabled={disabled}
/>
),
port: true,
@@ -60,13 +73,19 @@ const AwsBuilderConfig = ({ id }: { id: string }) => {
};
const ServerBuilderConfig = ({ id }: { id: string }) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Builder", id },
}).data;
const config = useRead("GetBuilder", { builder: id }).data?.config;
const [update, set] = useState<Partial<Types.ServerBuilderConfig>>({});
const { mutate } = useWrite("UpdateBuilder");
if (!config) return null;
const disabled = perms !== Types.PermissionLevel.Write;
return (
<Config
disabled={disabled}
config={config.params as Types.ServerBuilderConfig}
update={update}
set={set}
@@ -81,6 +100,7 @@ const ServerBuilderConfig = ({ id }: { id: string }) => {
type="Server"
selected={id}
onSelect={(server_id) => set({ server_id })}
disabled={disabled}
/>
</div>
),
+4 -1
View File
@@ -300,12 +300,15 @@ export const DeleteResource = ({
export const LabelsConfig = ({
labels,
set,
disabled,
}: {
labels: Types.EnvironmentVar[];
set: (input: Partial<Types.DeploymentConfig | Types.BuildConfig>) => void;
disabled: boolean;
}) => (
<ConfigItem label="Labels" className="items-start">
<DoubleInput
disabled={disabled}
values={labels}
leftval="variable"
leftpl="Key"
@@ -328,4 +331,4 @@ export const LabelsConfig = ({
}
/>
</ConfigItem>
);
);
@@ -4,12 +4,15 @@ import { Types } from "@monitor/client";
export const PortsConfig = ({
ports,
set,
disabled,
}: {
ports: Types.Conversion[];
set: (input: Partial<Types.DeploymentConfig>) => void;
disabled: boolean;
}) => (
<ConfigItem label="Ports" className="items-start">
<DoubleInput
disabled={disabled}
values={ports}
leftval="local"
leftpl="Local"
@@ -4,12 +4,15 @@ import { Types } from "@monitor/client";
export const VolumesConfig = ({
volumes,
set,
disabled,
}: {
volumes: Types.Conversion[];
set: (input: Partial<Types.DeploymentConfig>) => void;
disabled: boolean;
}) => (
<ConfigItem label="Volumes" className="items-start">
<DoubleInput
disabled={disabled}
inputClassName="w-[300px] max-w-full"
values={volumes}
leftval="local"
@@ -24,15 +24,18 @@ import { LabelsConfig, ResourceSelector } from "@components/resources/common";
export const ServerSelector = ({
selected,
set,
disabled,
}: {
selected: string | undefined;
set: (input: Partial<Types.DeploymentConfig>) => void;
disabled: boolean;
}) => (
<ConfigItem label="Server">
<ResourceSelector
type="Server"
selected={selected}
onSelect={(server_id) => set({ server_id })}
disabled={disabled}
/>
</ConfigItem>
);
@@ -66,7 +69,7 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
general: {
"": {
server_id: (value, set) => (
<ServerSelector selected={value} set={set} />
<ServerSelector selected={value} set={set} disabled={disabled} />
),
},
container: {
@@ -107,9 +110,19 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
/>
),
ports: (value, set) =>
show_ports && <PortsConfig ports={value ?? []} set={set} />,
volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
labels: (l, set) => <LabelsConfig labels={l ?? []} set={set} />,
show_ports && (
<PortsConfig
ports={value ?? []}
set={set}
disabled={disabled}
/>
),
volumes: (v, set) => (
<VolumesConfig volumes={v ?? []} set={set} disabled={disabled} />
),
labels: (l, set) => (
<LabelsConfig labels={l ?? []} set={set} disabled={disabled} />
),
extra_args: (value, set) => (
<ExtraArgs args={value ?? []} set={set} disabled={disabled} />
),
@@ -52,11 +52,18 @@ const ProcedureConfigInner = ({
}: {
procedure: Types.Procedure;
}) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Procedure", id: procedure._id?.$oid! },
}).data;
const [config, setConfig] = useState<Partial<Types.ProcedureConfig>>({});
const { mutate } = useWrite("UpdateProcedure");
const executions = config.executions || procedure.config.executions || [];
const disabled = perms !== Types.PermissionLevel.Write;
return (
<ConfigLayout
disabled={disabled}
config={config as any}
onConfirm={() => mutate({ id: procedure._id!.$oid, config })}
onReset={() => setConfig(procedure.config)}
@@ -1,8 +1,5 @@
import { Config } from "@components/config";
import {
ConfigItem,
SystemCommand,
} from "@components/config/util";
import { ConfigItem, SystemCommand } from "@components/config/util";
import { useRead, useWrite } from "@lib/hooks";
import { Types } from "@monitor/client";
import {
@@ -16,12 +13,19 @@ import { useState } from "react";
import { ResourceSelector } from "../common";
export const RepoConfig = ({ id }: { id: string }) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Repo", id },
}).data;
const config = useRead("GetRepo", { repo: id }).data?.config;
const [update, set] = useState<Partial<Types.RepoConfig>>({});
const { mutate } = useWrite("UpdateRepo");
if (!config) return null;
const disabled = perms !== Types.PermissionLevel.Write;
return (
<Config
disabled={disabled}
config={config}
update={update}
set={set}
@@ -44,7 +48,12 @@ export const RepoConfig = ({ id }: { id: string }) => {
const server_id = update.server_id || config.server_id;
if (server_id) {
return (
<GithubAccount server={server_id} value={value} set={set} />
<GithubAccount
server={server_id}
value={value}
set={set}
disabled={disabled}
/>
);
}
},
@@ -53,6 +62,7 @@ export const RepoConfig = ({ id }: { id: string }) => {
label="On Clone"
value={value}
set={(value) => set({ on_clone: value })}
disabled={disabled}
/>
),
on_pull: (value, set) => (
@@ -60,6 +70,7 @@ export const RepoConfig = ({ id }: { id: string }) => {
label="On Pull"
value={value}
set={(value) => set({ on_pull: value })}
disabled={disabled}
/>
),
},
@@ -73,10 +84,12 @@ const GithubAccount = ({
value,
set,
server,
disabled,
}: {
value?: string;
set: (input: Partial<Types.RepoConfig>) => void;
server: string;
disabled: boolean;
}) => {
const accounts = useRead("GetAvailableAccounts", {
server,
@@ -86,8 +99,12 @@ const GithubAccount = ({
<Select
value={value}
onValueChange={(value) => set({ github_account: value })}
disabled={disabled}
>
<SelectTrigger className="w-full lg:w-[300px] max-w-[50%]">
<SelectTrigger
className="w-full lg:w-[300px] max-w-[50%]"
disabled={disabled}
>
<SelectValue placeholder="Select Account" />
</SelectTrigger>
<SelectContent>
@@ -4,6 +4,9 @@ import { Types } from "@monitor/client";
import { useState } from "react";
export const ServerConfig = ({ id }: { id: string }) => {
const perms = useRead("GetPermissionLevel", {
target: { type: "Server", id },
}).data;
const invalidate = useInvalidate();
const config = useRead("GetServer", { server: id }).data?.config;
const [update, set] = useState<Partial<Types.ServerConfig>>({});
@@ -15,8 +18,11 @@ export const ServerConfig = ({ id }: { id: string }) => {
});
if (!config) return null;
const disabled = perms !== Types.PermissionLevel.Write;
return (
<Config
disabled={disabled}
config={config}
update={update}
set={set}