mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-15 00:49:51 +00:00
add access to deployment
This commit is contained in:
yoan
parent
fd04cec606
commit
52f40d982d
32
ui/package-lock.json
generated
32
ui/package-lock.json
generated
@ -27,6 +27,7 @@
|
||||
"@radix-ui/react-tabs": "^1.1.0",
|
||||
"@radix-ui/react-toast": "^1.2.1",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.0.0",
|
||||
@ -2731,6 +2732,37 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@tanstack/react-table": {
|
||||
"version": "8.20.5",
|
||||
"resolved": "https://registry.npmmirror.com/@tanstack/react-table/-/react-table-8.20.5.tgz",
|
||||
"integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
|
||||
"dependencies": {
|
||||
"@tanstack/table-core": "8.20.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/table-core": {
|
||||
"version": "8.20.5",
|
||||
"resolved": "https://registry.npmmirror.com/@tanstack/table-core/-/table-core-8.20.5.tgz",
|
||||
"integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
"resolved": "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"@radix-ui/react-tabs": "^1.1.0",
|
||||
"@radix-ui/react-toast": "^1.2.1",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.0.0",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
@ -29,15 +29,22 @@ type AccessEditProps = {
|
||||
className?: string;
|
||||
trigger: React.ReactNode;
|
||||
data?: Access;
|
||||
outConfigType?: string;
|
||||
};
|
||||
|
||||
const AccessEditDialog = ({ trigger, op, data, className }: AccessEditProps) => {
|
||||
const AccessEditDialog = ({ trigger, op, data, className, outConfigType }: AccessEditProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [configType, setConfigType] = useState(data?.configType || "");
|
||||
|
||||
useEffect(() => {
|
||||
if (outConfigType) {
|
||||
setConfigType(outConfigType);
|
||||
}
|
||||
}, [outConfigType]);
|
||||
|
||||
let childComponent = <> </>;
|
||||
switch (configType) {
|
||||
case "aliyun":
|
||||
|
||||
@ -1,47 +1,117 @@
|
||||
import * as React from "react";
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
Table.displayName = "Table";
|
||||
))
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
));
|
||||
TableHeader.displayName = "TableHeader";
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
|
||||
<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
|
||||
));
|
||||
TableBody.displayName = "TableBody";
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
|
||||
<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
|
||||
));
|
||||
TableFooter.displayName = "TableFooter";
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
|
||||
<tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />
|
||||
));
|
||||
TableRow.displayName = "TableRow";
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
|
||||
<th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
|
||||
));
|
||||
TableHead.displayName = "TableHead";
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
|
||||
<td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
|
||||
));
|
||||
TableCell.displayName = "TableCell";
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
|
||||
<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
|
||||
));
|
||||
TableCaption.displayName = "TableCaption";
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCaption.displayName = "TableCaption"
|
||||
|
||||
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
|
||||
59
ui/src/components/workflow/AccessSelect.tsx
Normal file
59
ui/src/components/workflow/AccessSelect.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { accessProvidersMap } from "@/domain/access";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useConfigContext } from "@/providers/config";
|
||||
import { deployTargetsMap } from "@/domain/domain";
|
||||
|
||||
type AccessSelectProps = {
|
||||
providerType: string;
|
||||
value: string;
|
||||
onValueChange: (val: string) => void;
|
||||
};
|
||||
const AccessSelect = ({ value, onValueChange, providerType }: AccessSelectProps) => {
|
||||
const [localValue, setLocalValue] = React.useState<string>("");
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
config: { accesses },
|
||||
} = useConfigContext();
|
||||
|
||||
useEffect(() => {
|
||||
setLocalValue(value);
|
||||
}, [value]);
|
||||
|
||||
const targetAccesses = accesses.filter((item) => {
|
||||
console.log(item, providerType);
|
||||
return item.configType === deployTargetsMap.get(providerType)?.provider;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
value={localValue}
|
||||
onValueChange={(val: string) => {
|
||||
setLocalValue(val);
|
||||
onValueChange(val);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-2">
|
||||
<SelectValue placeholder={t("domain.deployment.form.access.placeholder")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>{t("domain.deployment.form.access.list")}</SelectLabel>
|
||||
{targetAccesses.map((item) => (
|
||||
<SelectItem key={item.id} value={item.id}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<img className="w-6" src={accessProvidersMap.get(item.configType)?.icon} />
|
||||
<div>{item.name}</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessSelect;
|
||||
@ -14,6 +14,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
|
||||
@ -35,6 +39,7 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, t("domain.deployment.form.aliyun_alb_region.placeholder")),
|
||||
resourceType: z.union([z.literal("loadbalancer"), z.literal("listener")], {
|
||||
@ -54,18 +59,20 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "aliyun-alb",
|
||||
providerType: "",
|
||||
region: "",
|
||||
resourceType: "",
|
||||
loadbalancerId: "",
|
||||
listenerId: "",
|
||||
access: "",
|
||||
};
|
||||
if (data) config = data.config ?? config;
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "aliyun-alb",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
resourceType: config.resourceType as "loadbalancer" | "listener",
|
||||
@ -91,6 +98,41 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="aliyun"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="aliyun-alb"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
@ -110,18 +152,16 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{beforeOutput.map((item) => (
|
||||
<>
|
||||
<SelectGroup key={item.id}>
|
||||
<SelectLabel>{item.name}</SelectLabel>
|
||||
{item.output?.map((output) => (
|
||||
<SelectItem key={output.name} value={`${item.id}#${output.name}`}>
|
||||
<div>
|
||||
{item.name}-{output.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</>
|
||||
<SelectGroup key={item.id}>
|
||||
<SelectLabel>{item.name}</SelectLabel>
|
||||
{item.output?.map((output) => (
|
||||
<SelectItem key={output.name} value={`${item.id}#${output.name}`}>
|
||||
<div>
|
||||
{item.name}-{output.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
|
||||
message: t("common.errmsg.domain_invalid"),
|
||||
@ -43,8 +47,8 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "aliyun-cdn",
|
||||
|
||||
providerType: "",
|
||||
access: "",
|
||||
domain: "",
|
||||
};
|
||||
if (data) config = data.config ?? config;
|
||||
@ -52,7 +56,8 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "aliyun-cdn",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
domain: config.domain as string,
|
||||
},
|
||||
@ -73,6 +78,41 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="aliyun"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="aliyun-cdn"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -14,6 +14,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
|
||||
@ -35,6 +39,7 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, t("domain.deployment.form.aliyun_clb_region.placeholder")),
|
||||
resourceType: z.union([z.literal("certificate"), z.literal("loadbalancer"), z.literal("listener")], {
|
||||
@ -54,7 +59,8 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "aliyun-clb",
|
||||
providerType: "",
|
||||
access: "",
|
||||
region: "",
|
||||
resourceType: "",
|
||||
loadbalancerId: "",
|
||||
@ -65,7 +71,8 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "aliyun-clb",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
resourceType: config.resourceType as "loadbalancer" | "listener",
|
||||
@ -91,6 +98,40 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="aliyun"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="aliyun-clb"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -28,13 +28,13 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => {
|
||||
|
||||
useEffect(() => {
|
||||
const rs = getWorkflowOuptutBeforeId(data.id, "certificate");
|
||||
console.log(rs);
|
||||
setBeforeOutput(rs);
|
||||
}, [data]);
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, t("domain.deployment.form.aliyun_nlb_region.placeholder")),
|
||||
resourceType: z.union([z.literal("loadbalancer"), z.literal("listener")], {
|
||||
@ -54,7 +54,8 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "aliyun-nlb",
|
||||
providerType: "",
|
||||
access: "",
|
||||
region: "",
|
||||
resourceType: "",
|
||||
loadbalancerId: "",
|
||||
@ -65,7 +66,7 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "aliyun-nlb",
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
resourceType: config.resourceType as "loadbalancer" | "listener",
|
||||
|
||||
@ -16,6 +16,10 @@ import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
|
||||
@ -35,6 +39,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
endpoint: z.string().min(1, {
|
||||
message: t("domain.deployment.form.aliyun_oss_endpoint.placeholder"),
|
||||
@ -49,7 +54,8 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "aliyun-oss",
|
||||
providerType: "",
|
||||
access: "",
|
||||
endpoint: "",
|
||||
bucket: "",
|
||||
domain: "",
|
||||
@ -59,7 +65,8 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "aliyun-oss",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
endpoint: config.endpoint as string,
|
||||
bucket: config.bucket as string,
|
||||
@ -82,6 +89,40 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="aliyun"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="aliyun-oss"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
|
||||
message: t("common.errmsg.domain_invalid"),
|
||||
@ -44,6 +48,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "baiducloud-cdn",
|
||||
access: "",
|
||||
|
||||
domain: "",
|
||||
};
|
||||
@ -52,7 +57,8 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "baiducloud-cdn",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
domain: config.domain as string,
|
||||
},
|
||||
@ -73,6 +79,41 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="baiducloud"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="baiducloud-cdn"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import { Plus } from "lucide-react";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
|
||||
message: t("common.errmsg.domain_invalid"),
|
||||
@ -43,7 +47,8 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "dogecloud-cdn",
|
||||
providerType: "",
|
||||
access: "",
|
||||
|
||||
domain: "",
|
||||
};
|
||||
@ -52,7 +57,8 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "dogecloud-cdn",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
domain: config.domain as string,
|
||||
},
|
||||
@ -73,6 +79,40 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="dogecloud"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="dogecloud-cdn"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -16,6 +16,10 @@ import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
|
||||
@ -35,6 +39,7 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, {
|
||||
message: t("domain.deployment.form.huaweicloud_cdn_region.placeholder"),
|
||||
@ -46,7 +51,8 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "huaweicloud-cdn",
|
||||
providerType: "",
|
||||
access: "",
|
||||
region: "",
|
||||
domain: "",
|
||||
};
|
||||
@ -55,7 +61,8 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "huaweicloud-cdn",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
domain: config.domain as string,
|
||||
@ -77,6 +84,41 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="huaweicloud"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="huaweicloud-cdn"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -41,6 +44,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, t("domain.deployment.form.huaweicloud_elb_region.placeholder")),
|
||||
resourceType: z.union([z.literal("certificate"), z.literal("loadbalancer"), z.literal("listener")], {
|
||||
@ -65,7 +69,8 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "huaweicloud-elb",
|
||||
providerType: "",
|
||||
access: "",
|
||||
resouceType: "",
|
||||
certificateId: "",
|
||||
loadbalancerId: "",
|
||||
@ -76,7 +81,8 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "huaweicloud-elb",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
resourceType: config.resourceType as "certificate" | "loadbalancer" | "listener",
|
||||
@ -100,6 +106,41 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="huaweicloud"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="huaweicloud-elb"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
namespace: z.string().min(1, {
|
||||
message: t("domain.deployment.form.k8s_namespace.placeholder"),
|
||||
@ -52,7 +56,8 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "k8s-secret",
|
||||
providerType: "",
|
||||
access: "",
|
||||
namespace: "",
|
||||
secretName: "",
|
||||
secretDataKeyForCrt: "",
|
||||
@ -63,7 +68,8 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "k8s-secret",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
namespace: config.namespace as string,
|
||||
secretName: config.secretName as string,
|
||||
@ -87,6 +93,41 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="k8s"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="k8s-secret"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import i18n from "@/i18n";
|
||||
import { WorkflowNode } from "@/domain/workflow";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -26,6 +29,7 @@ const t = i18n.t;
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
format: z.union([z.literal("pem"), z.literal("pfx"), z.literal("jks")], {
|
||||
message: t("domain.deployment.form.file_format.placeholder"),
|
||||
@ -86,6 +90,7 @@ const DeployToLocal = ({ data }: DeployFormProps) => {
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: "local",
|
||||
access: data.config?.access as string,
|
||||
certificate: data.config?.certificate as string,
|
||||
format: (data.config?.format as "pem" | "pfx" | "jks") || "pem",
|
||||
certPath: (data.config?.certPath as string) || "/etc/ssl/certs/cert.crt",
|
||||
@ -198,6 +203,41 @@ Remove-Item -Path "$pfxPath" -Force
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="local"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="local"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
|
||||
message: t("common.errmsg.domain_invalid"),
|
||||
@ -43,7 +47,8 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "qiniu-cdn",
|
||||
providerType: "",
|
||||
access: "",
|
||||
|
||||
domain: "",
|
||||
};
|
||||
@ -52,7 +57,8 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "qiniu-cdn",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
domain: config.domain as string,
|
||||
},
|
||||
@ -73,6 +79,41 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="qiniu"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="qiniu-cdn"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -14,6 +14,9 @@ import { useEffect, useState } from "react";
|
||||
import i18n from "@/i18n";
|
||||
import { WorkflowNode } from "@/domain/workflow";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -25,6 +28,7 @@ const t = i18n.t;
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
format: z.union([z.literal("pem"), z.literal("pfx"), z.literal("jks")], {
|
||||
message: t("domain.deployment.form.file_format.placeholder"),
|
||||
@ -82,6 +86,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: "ssh",
|
||||
access: data.config?.access as string,
|
||||
certificate: data.config?.certificate as string,
|
||||
format: (data.config?.format as "pem" | "pfx" | "jks") || "pem",
|
||||
certPath: (data.config?.certPath as string) || "/etc/ssl/certs/cert.crt",
|
||||
@ -116,6 +121,41 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="ssh"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="ssh"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
|
||||
message: t("common.errmsg.domain_invalid"),
|
||||
@ -43,7 +47,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "tencent-cdn",
|
||||
providerType: "",
|
||||
|
||||
domain: "",
|
||||
};
|
||||
@ -52,7 +56,8 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "tencent-cdn",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
domain: config.domain as string,
|
||||
},
|
||||
@ -73,6 +78,41 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="tencent"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="tencent-cdn"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
type TencentResourceType = "ssl-deploy" | "loadbalancer" | "listener" | "ruledomain";
|
||||
|
||||
@ -43,6 +46,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
|
||||
const formSchema = z
|
||||
.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, t("domain.deployment.form.tencent_clb_region.placeholder")),
|
||||
resourceType: z.union([z.literal("ssl-deploy"), z.literal("loadbalancer"), z.literal("listener"), z.literal("ruledomain")], {
|
||||
@ -76,7 +80,8 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "tencent-clb",
|
||||
providerType: "",
|
||||
access: "",
|
||||
resouceType: "",
|
||||
domain: "",
|
||||
loadbalancerId: "",
|
||||
@ -87,7 +92,8 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "tencent-clb",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
resourceType: config.resourceType as TencentResourceType,
|
||||
@ -112,6 +118,41 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="tencent"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="tencent-clb"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
region: z.string().min(1, t("domain.deployment.form.tencent_cos_region.placeholder")),
|
||||
bucket: z.string().min(1, t("domain.deployment.form.tencent_cos_bucket.placeholder")),
|
||||
@ -45,7 +49,8 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "tencent-cos",
|
||||
providerType: "",
|
||||
access: "",
|
||||
region: "",
|
||||
bucket: "",
|
||||
domain: "",
|
||||
@ -55,7 +60,8 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "tencent-cos",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
region: config.region as string,
|
||||
bucket: config.bucket as string,
|
||||
@ -78,6 +84,41 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="tencent"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="tencent-cos"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { Button } from "../ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -35,6 +38,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
zoneId: z.string().min(1, t("domain.deployment.form.tencent_teo_zone_id.placeholder")),
|
||||
domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
|
||||
@ -44,7 +48,8 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "tencent-teo",
|
||||
providerType: "",
|
||||
access: "",
|
||||
zoneId: "",
|
||||
domain: "",
|
||||
};
|
||||
@ -53,7 +58,8 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "tencent-teo",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
zoneId: config.zoneId as string,
|
||||
domain: config.domain as string,
|
||||
@ -75,6 +81,41 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="tencent"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="tencent-teo"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -15,6 +15,9 @@ import { useEffect, useState } from "react";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
||||
import { SelectLabel } from "@radix-ui/react-select";
|
||||
import KVList from "../certimate/KVList";
|
||||
import AccessSelect from "./AccessSelect";
|
||||
import AccessEditDialog from "../certimate/AccessEditDialog";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
updateNode: state.updateNode,
|
||||
@ -39,13 +42,15 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
|
||||
|
||||
const formSchema = z.object({
|
||||
providerType: z.string(),
|
||||
access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
|
||||
certificate: z.string().min(1),
|
||||
variables: z.array(KVTypeSchema).optional(),
|
||||
});
|
||||
|
||||
let config: WorkflowNodeConfig = {
|
||||
certificate: "",
|
||||
providerType: "webhook",
|
||||
providerType: "",
|
||||
access: "",
|
||||
|
||||
variables: [],
|
||||
};
|
||||
@ -54,7 +59,8 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerType: config.providerType as string,
|
||||
providerType: "webhook",
|
||||
access: config.access as string,
|
||||
certificate: config.certificate as string,
|
||||
variables: config.variables as { key: string; value: string }[],
|
||||
},
|
||||
@ -76,6 +82,40 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="access"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex justify-between">
|
||||
<div>{t("domain.deployment.form.access.label")}</div>
|
||||
|
||||
<AccessEditDialog
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
{t("common.add")}
|
||||
</div>
|
||||
}
|
||||
op="add"
|
||||
outConfigType="webhook"
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AccessSelect
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("access", value);
|
||||
}}
|
||||
providerType="webhook"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="certificate"
|
||||
|
||||
@ -72,7 +72,7 @@ const Node = ({ data }: NodeProps) => {
|
||||
const channelLabel = channelLabelMap.get(data.config?.channel as string);
|
||||
return (
|
||||
<div className="flex space-x-2 items-baseline">
|
||||
<div className="text-stone-700">{t(channelLabel?.label ?? "")}</div>
|
||||
<div className="text-stone-700 w-12 truncate">{t(channelLabel?.label ?? "")}</div>
|
||||
<div className="text-muted-foreground truncate">{(data.config?.title as string) ?? ""}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
110
ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
Normal file
110
ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { z } from "zod";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
|
||||
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
|
||||
import { useShallow } from "zustand/shallow";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
|
||||
import { Input } from "../ui/input";
|
||||
import { Button } from "../ui/button";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
|
||||
type WorkflowNameEditDialogProps = {
|
||||
trigger: React.ReactNode;
|
||||
};
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
});
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
setBaseInfo: state.setBaseInfo,
|
||||
workflow: state.workflow,
|
||||
});
|
||||
const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) => {
|
||||
const { setBaseInfo, workflow } = useWorkflowStore(useShallow(selectState));
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: workflow.name,
|
||||
description: workflow.description,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const onSubmit = async (config: z.infer<typeof formSchema>) => {
|
||||
await setBaseInfo(config.name, config.description);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(val) => {
|
||||
setOpen(val);
|
||||
}}
|
||||
>
|
||||
<DialogTrigger>{trigger}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>基础信息</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.stopPropagation();
|
||||
form.handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>名称</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="请输入流程名称" {...field} />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>说明</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="请输入流程说明" {...field} />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">{t("common.save")}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowNameBaseInfoDialog;
|
||||
@ -332,6 +332,24 @@ export const getWorkflowOutputBeforeId = (node: WorkflowNode | WorkflowBranchNod
|
||||
return output;
|
||||
};
|
||||
|
||||
export const allNodesValidated = (node: WorkflowNode | WorkflowBranchNode): boolean => {
|
||||
let current = node;
|
||||
while (current) {
|
||||
if (!isWorkflowBranchNode(current) && !current.validated) {
|
||||
return false;
|
||||
}
|
||||
if (isWorkflowBranchNode(current)) {
|
||||
for (const branch of current.branches) {
|
||||
if (!allNodesValidated(branch)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
current = current.next as WorkflowNode;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
export type WorkflowBranchNode = {
|
||||
id: string;
|
||||
name: string;
|
||||
|
||||
@ -18,4 +18,3 @@ const LoginLayout = () => {
|
||||
};
|
||||
|
||||
export default LoginLayout;
|
||||
|
||||
|
||||
@ -2,11 +2,14 @@ import Show from "@/components/Show";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import End from "@/components/workflow/End";
|
||||
import NodeRender from "@/components/workflow/NodeRender";
|
||||
import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
|
||||
|
||||
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
||||
import { WorkflowNode } from "@/domain/workflow";
|
||||
import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
|
||||
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { useEffect, useMemo } from "react";
|
||||
@ -36,6 +39,8 @@ const WorkflowDetail = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { toast } = useToast();
|
||||
|
||||
const elements = useMemo(() => {
|
||||
let current = workflow.draft as WorkflowNode;
|
||||
|
||||
@ -57,24 +62,45 @@ const WorkflowDetail = () => {
|
||||
};
|
||||
|
||||
const handleEnableChange = () => {
|
||||
if (!workflow.enabled && !allNodesValidated(workflow.draft as WorkflowNode)) {
|
||||
toast({
|
||||
title: "无法启用",
|
||||
description: "有尚未设置完成的节点",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
switchEnable();
|
||||
};
|
||||
|
||||
const handleWorkflowSaveClick = () => {
|
||||
if (!allNodesValidated(workflow.draft as WorkflowNode)) {
|
||||
toast({
|
||||
title: "保存失败",
|
||||
description: "有尚未设置完成的节点",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
save();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<WorkflowProvider>
|
||||
<Toaster />
|
||||
<ScrollArea className="h-[100vh] w-full relative bg-background">
|
||||
<div className="h-16 sticky top-0 left-0 z-20 shadow-md bg-muted/40 flex justify-between items-center">
|
||||
<div className="px-5 text-stone-700 dark:text-stone-200 flex items-center space-x-2">
|
||||
<ArrowLeft className="cursor-pointer" onClick={handleBackClick} />
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="">工作流</div>
|
||||
<div className="text-sm text-muted-foreground">工作流详情</div>
|
||||
</div>
|
||||
<WorkflowBaseInfoEditDialog
|
||||
trigger={
|
||||
<div className="flex flex-col space-y-1 cursor-pointer items-start">
|
||||
<div className="">{workflow.name ?? "未命名工作流"}</div>
|
||||
<div className="text-sm text-muted-foreground">{workflow.description ?? "添加流程说明"}</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-5 flex items-center space-x-3">
|
||||
<Show when={!!workflow.enabled}>
|
||||
|
||||
@ -26,6 +26,7 @@ export type WorkflowState = {
|
||||
switchEnable(): void;
|
||||
save(): void;
|
||||
init(id?: string): void;
|
||||
setBaseInfo: (name: string, description: string) => void;
|
||||
};
|
||||
|
||||
export const useWorkflowStore = create<WorkflowState>((set, get) => ({
|
||||
@ -52,6 +53,23 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
|
||||
initialized: true,
|
||||
});
|
||||
},
|
||||
setBaseInfo: async (name: string, description: string) => {
|
||||
const resp = await save({
|
||||
id: (get().workflow.id as string) ?? "",
|
||||
name: name,
|
||||
description: description,
|
||||
});
|
||||
set((state: WorkflowState) => {
|
||||
return {
|
||||
workflow: {
|
||||
...state.workflow,
|
||||
name,
|
||||
description,
|
||||
id: resp.id,
|
||||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
switchEnable: async () => {
|
||||
const resp = await save({
|
||||
id: (get().workflow.id as string) ?? "",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user