mirror of https://github.com/ctk-hq/ctk
chore: add tabs with forms, service interface
Artem Golub
3 years ago
committed by
Samuel Rowe
parent
02549703ee
commit
cb3c1b1fc3
@ -1,71 +0,0 @@
|
|||||||
const Container = (props: any) => {
|
|
||||||
const { formik } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor={`container-name`}
|
|
||||||
className="block text-xs font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<div key={`container-name`}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="input-util"
|
|
||||||
name={`configuration.container.name`}
|
|
||||||
value={formik.values.configuration.container.name || ""}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor={`container-image`}
|
|
||||||
className="block text-xs font-medium text-gray-700 mt-2"
|
|
||||||
>
|
|
||||||
Image
|
|
||||||
</label>
|
|
||||||
<div key={`container-image`}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="input-util"
|
|
||||||
name={`configuration.container.image`}
|
|
||||||
value={formik.values.configuration.container.image || ""}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor={`container-pull-policy`}
|
|
||||||
className="block text-xs font-medium text-gray-700 mt-2"
|
|
||||||
>
|
|
||||||
Pull policy
|
|
||||||
</label>
|
|
||||||
<div key={`container-pull-policy`}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="input-util"
|
|
||||||
name={`configuration.container.imagePullPolicy`}
|
|
||||||
value={
|
|
||||||
formik.values.configuration.container.imagePullPolicy || ""
|
|
||||||
}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Container;
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useFormik } from "formik";
|
|
||||||
import { XIcon } from "@heroicons/react/outline";
|
|
||||||
import General from "./General";
|
|
||||||
import Container from "./Container";
|
|
||||||
import Resource from "./Resource";
|
|
||||||
import { initialValues, formatName } from "./../../../utils";
|
|
||||||
import { CallbackFunction } from "../../../types";
|
|
||||||
|
|
||||||
interface IModalProps {
|
|
||||||
onHide: CallbackFunction;
|
|
||||||
onAddEndpoint: CallbackFunction;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ModalCreate = (props: IModalProps) => {
|
|
||||||
const { onHide, onAddEndpoint } = props;
|
|
||||||
const [openTab, setOpenTab] = useState("General");
|
|
||||||
const formik = useFormik({
|
|
||||||
initialValues: {
|
|
||||||
configuration: {
|
|
||||||
...initialValues()
|
|
||||||
},
|
|
||||||
key: "template",
|
|
||||||
type: "TEMPLATE",
|
|
||||||
inputs: ["op_source"],
|
|
||||||
outputs: [],
|
|
||||||
config: {}
|
|
||||||
},
|
|
||||||
onSubmit: () => undefined
|
|
||||||
});
|
|
||||||
const tabs = [
|
|
||||||
{ name: "General", href: "#", current: true, hidden: false },
|
|
||||||
{
|
|
||||||
name: "Container",
|
|
||||||
href: "#",
|
|
||||||
current: false,
|
|
||||||
hidden: formik.values.configuration.type === "container" ? false : true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Resource",
|
|
||||||
href: "#",
|
|
||||||
current: false,
|
|
||||||
hidden: formik.values.configuration.type === "resource" ? false : true
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const classNames = (...classes: string[]) => {
|
|
||||||
return classes.filter(Boolean).join(" ");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="fixed z-50 inset-0 overflow-y-auto">
|
|
||||||
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
|
|
||||||
<div
|
|
||||||
onClick={onHide}
|
|
||||||
className="opacity-25 fixed inset-0 z-40 bg-black"
|
|
||||||
></div>
|
|
||||||
<div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
|
|
||||||
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
|
||||||
<div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
|
|
||||||
<h3 className="text-sm font-semibold">Add template</h3>
|
|
||||||
<button
|
|
||||||
className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
|
|
||||||
onClick={onHide}
|
|
||||||
>
|
|
||||||
<span className="block outline-none focus:outline-none">
|
|
||||||
<XIcon className="w-4" />
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="sm:hidden">
|
|
||||||
<label htmlFor="tabs" className="sr-only">
|
|
||||||
Select a tab
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="tabs"
|
|
||||||
name="tabs"
|
|
||||||
className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
|
|
||||||
defaultValue={tabs.find((tab) => tab.current)?.name}
|
|
||||||
>
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<option key={tab.name}>{tab.name}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden sm:block">
|
|
||||||
<div className="border-b border-gray-200 px-8">
|
|
||||||
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<a
|
|
||||||
key={tab.name}
|
|
||||||
href={tab.href}
|
|
||||||
className={classNames(
|
|
||||||
tab.name === openTab
|
|
||||||
? "border-indigo-500 text-indigo-600"
|
|
||||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
|
||||||
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
|
|
||||||
tab.hidden ? "hidden" : ""
|
|
||||||
)}
|
|
||||||
aria-current={tab.current ? "page" : undefined}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setOpenTab(tab.name);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.name}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative px-4 py-3 flex-auto">
|
|
||||||
<form onSubmit={formik.handleSubmit}>
|
|
||||||
{openTab === "General" && <General formik={formik} />}
|
|
||||||
|
|
||||||
{openTab === "Container" && <Container formik={formik} />}
|
|
||||||
|
|
||||||
{openTab === "Resource" && <Resource formik={formik} />}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
|
|
||||||
<button
|
|
||||||
className="btn-util"
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
formik.values.configuration.name = formatName(
|
|
||||||
formik.values.configuration.prettyName
|
|
||||||
);
|
|
||||||
onAddEndpoint(formik.values);
|
|
||||||
formik.resetForm();
|
|
||||||
setOpenTab("General");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalCreate;
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useFormik } from "formik";
|
|
||||||
import { XIcon } from "@heroicons/react/outline";
|
|
||||||
import General from "./General";
|
|
||||||
import Container from "./Container";
|
|
||||||
import Resource from "./Resource";
|
|
||||||
import { initialValues, formatName } from "./../../../utils";
|
|
||||||
import { IClientNodeItem, CallbackFunction } from "../../../types";
|
|
||||||
|
|
||||||
interface IModalProps {
|
|
||||||
node: IClientNodeItem | null;
|
|
||||||
onHide: CallbackFunction;
|
|
||||||
onUpdateEndpoint: CallbackFunction;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ModalEdit = (props: IModalProps) => {
|
|
||||||
const { node, onHide, onUpdateEndpoint } = props;
|
|
||||||
const [selectedNode, setSelectedNode] =
|
|
||||||
React.useState<IClientNodeItem | null>(null);
|
|
||||||
const [openTab, setOpenTab] = React.useState("General");
|
|
||||||
const formik = useFormik({
|
|
||||||
initialValues: {
|
|
||||||
configuration: {
|
|
||||||
...initialValues()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSubmit: () => undefined
|
|
||||||
});
|
|
||||||
const tabs = [
|
|
||||||
{
|
|
||||||
name: "General",
|
|
||||||
href: "#",
|
|
||||||
current: true,
|
|
||||||
hidden: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Container",
|
|
||||||
href: "#",
|
|
||||||
current: false,
|
|
||||||
hidden: formik.values.configuration.type === "container" ? false : true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Resource",
|
|
||||||
href: "#",
|
|
||||||
current: false,
|
|
||||||
hidden: formik.values.configuration.type === "resource" ? false : true
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const classNames = (...classes: string[]) => {
|
|
||||||
return classes.filter(Boolean).join(" ");
|
|
||||||
};
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (node) {
|
|
||||||
setSelectedNode(node);
|
|
||||||
}
|
|
||||||
}, [node]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
formik.resetForm();
|
|
||||||
|
|
||||||
if (selectedNode) {
|
|
||||||
formik.initialValues.configuration = { ...selectedNode.configuration };
|
|
||||||
}
|
|
||||||
}, [selectedNode]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
formik.resetForm();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="fixed z-50 inset-0 overflow-y-auto">
|
|
||||||
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
|
|
||||||
<div
|
|
||||||
onClick={onHide}
|
|
||||||
className="opacity-25 fixed inset-0 z-40 bg-black"
|
|
||||||
></div>
|
|
||||||
<div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
|
|
||||||
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
|
||||||
<div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
|
|
||||||
<h3 className="text-sm font-semibold">Update template</h3>
|
|
||||||
<button
|
|
||||||
className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
|
|
||||||
onClick={onHide}
|
|
||||||
>
|
|
||||||
<span className="block outline-none focus:outline-none">
|
|
||||||
<XIcon className="w-4" />
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="sm:hidden">
|
|
||||||
<label htmlFor="tabs" className="sr-only">
|
|
||||||
Select a tab
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="tabs"
|
|
||||||
name="tabs"
|
|
||||||
className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
|
|
||||||
defaultValue={tabs.find((tab) => tab.current)?.name}
|
|
||||||
>
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<option key={tab.name}>{tab.name}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden sm:block">
|
|
||||||
<div className="border-b border-gray-200 px-8">
|
|
||||||
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
|
|
||||||
{tabs.map((tab, index) => (
|
|
||||||
<a
|
|
||||||
key={tab.name}
|
|
||||||
href={tab.href}
|
|
||||||
className={classNames(
|
|
||||||
tab.name === openTab
|
|
||||||
? "border-indigo-500 text-indigo-600"
|
|
||||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
|
||||||
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
|
|
||||||
tab.hidden ? "hidden" : ""
|
|
||||||
)}
|
|
||||||
aria-current={tab.current ? "page" : undefined}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setOpenTab(tab.name);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.name}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative px-4 py-3 flex-auto">
|
|
||||||
<form onSubmit={formik.handleSubmit}>
|
|
||||||
{openTab === "General" && <General formik={formik} />}
|
|
||||||
|
|
||||||
{openTab === "Container" && <Container formik={formik} />}
|
|
||||||
|
|
||||||
{openTab === "Resource" && <Resource formik={formik} />}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
|
|
||||||
<button
|
|
||||||
className="btn-util"
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
const updated = { ...selectedNode };
|
|
||||||
formik.values.configuration.name = formatName(
|
|
||||||
formik.values.configuration.prettyName
|
|
||||||
);
|
|
||||||
updated.configuration = formik.values.configuration;
|
|
||||||
onUpdateEndpoint(updated);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Update
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalEdit;
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const General = (props: any) => {
|
|
||||||
const { formik } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor="prettyName"
|
|
||||||
className="block text-xs font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<div className="mt-1">
|
|
||||||
<input
|
|
||||||
id="prettyName"
|
|
||||||
name="configuration.prettyName"
|
|
||||||
type="text"
|
|
||||||
autoComplete="none"
|
|
||||||
className="input-util"
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
value={formik.values.configuration.prettyName}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-2">
|
|
||||||
<label
|
|
||||||
htmlFor="about"
|
|
||||||
className="block text-xs font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<div className="mt-1">
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
name="configuration.description"
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
value={formik.values.configuration.description}
|
|
||||||
rows={2}
|
|
||||||
className="input-util"
|
|
||||||
placeholder=""
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-4 mt-2">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor="templateType"
|
|
||||||
className="block text-xs font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
</label>
|
|
||||||
<div className="mt-1">
|
|
||||||
<select
|
|
||||||
id="templateType"
|
|
||||||
name="configuration.type"
|
|
||||||
className="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
|
|
||||||
value={formik.values.configuration.type}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
>
|
|
||||||
<option value="">Select type</option>
|
|
||||||
<option value="container">Container</option>
|
|
||||||
<option value="resource">Resource</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default General;
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const Resource = (props: any) => {
|
|
||||||
const { formik } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor={`resource-action`}
|
|
||||||
className="block text-xs font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Action
|
|
||||||
</label>
|
|
||||||
<div key={`resource-action`}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="input-util"
|
|
||||||
name={`configuration.resource.action`}
|
|
||||||
value={formik.values.configuration.resource.action || ""}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label
|
|
||||||
htmlFor={`resource-manifest`}
|
|
||||||
className="block text-xs font-medium text-gray-700 mt-2"
|
|
||||||
>
|
|
||||||
Manifest
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="resource-manifest"
|
|
||||||
rows={2}
|
|
||||||
className="input-util"
|
|
||||||
placeholder=""
|
|
||||||
name={`configuration.resource.manifest`}
|
|
||||||
value={formik.values.configuration.resource.manifest || ""}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default Resource;
|
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
const Environment = (props: any) => {
|
||||||
|
const { formik } = props;
|
||||||
|
|
||||||
|
return <></>;
|
||||||
|
};
|
||||||
|
export default Environment;
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
const General = (props: any) => {
|
||||||
|
const { formik } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="relative pb-3 flex-auto">
|
||||||
|
<div className="grid grid-cols-6 gap-4">
|
||||||
|
<div className="col-span-3">
|
||||||
|
<label
|
||||||
|
htmlFor="service_name"
|
||||||
|
className="block text-xs font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Service name
|
||||||
|
</label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<input
|
||||||
|
id="service_name"
|
||||||
|
name="canvasConfig.service_name"
|
||||||
|
type="text"
|
||||||
|
autoComplete="none"
|
||||||
|
className="input-util"
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
value={formik.values.canvasConfig.service_name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative pb-3 flex-auto">
|
||||||
|
<div className="grid grid-cols-6 gap-4">
|
||||||
|
<div className="col-span-3">
|
||||||
|
<label
|
||||||
|
htmlFor="container_name"
|
||||||
|
className="block text-xs font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Container name
|
||||||
|
</label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<input
|
||||||
|
id="container_name"
|
||||||
|
name="serviceConfig.container_name"
|
||||||
|
type="text"
|
||||||
|
autoComplete="none"
|
||||||
|
className="input-util"
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
value={formik.values.serviceConfig.container_name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default General;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
const Labels = (props: any) => {
|
||||||
|
const { formik } = props;
|
||||||
|
|
||||||
|
return <></>;
|
||||||
|
};
|
||||||
|
export default Labels;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
const Volumes = (props: any) => {
|
||||||
|
const { formik } = props;
|
||||||
|
|
||||||
|
return <></>;
|
||||||
|
};
|
||||||
|
export default Volumes;
|
||||||
@ -1,2 +1,2 @@
|
|||||||
export const ServiceNodeConfiguration =
|
export const ServiceNodeConfiguration =
|
||||||
'{"prettyName":"","name":"","key":"service","type":"SERVICE","inputs":["op_source"],"outputs":[]}';
|
'{"canvasConfig":{"name":""},"key":"service","type":"SERVICE","inputs":["op_source"],"outputs":[]}';
|
||||||
|
|||||||
Loading…
Reference in New Issue