|
|
|
|
@ -1,16 +1,16 @@
|
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
|
import { useFormik } from "formik";
|
|
|
|
|
import { Formik } from "formik";
|
|
|
|
|
import * as yup from "yup";
|
|
|
|
|
import { XIcon } from "@heroicons/react/outline";
|
|
|
|
|
import General from "./General";
|
|
|
|
|
import Environment from "./Environment";
|
|
|
|
|
import Volumes from "./Volumes";
|
|
|
|
|
import Labels from "./Labels";
|
|
|
|
|
import { serviceConfigCanvasInitialValues } from "../../../utils";
|
|
|
|
|
import {
|
|
|
|
|
CallbackFunction,
|
|
|
|
|
ICanvasConfig,
|
|
|
|
|
IServiceNodeItem,
|
|
|
|
|
IService
|
|
|
|
|
IService,
|
|
|
|
|
IServiceNodeItem
|
|
|
|
|
} from "../../../types";
|
|
|
|
|
|
|
|
|
|
interface IModalServiceProps {
|
|
|
|
|
@ -23,18 +23,26 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
|
|
|
|
|
const { node, onHide, onUpdateEndpoint } = props;
|
|
|
|
|
const [openTab, setOpenTab] = useState("General");
|
|
|
|
|
const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
|
|
|
|
|
const formik = useFormik({
|
|
|
|
|
initialValues: {
|
|
|
|
|
canvasConfig: {
|
|
|
|
|
...serviceConfigCanvasInitialValues()
|
|
|
|
|
},
|
|
|
|
|
serviceConfig: {
|
|
|
|
|
container_name: "",
|
|
|
|
|
labels: [],
|
|
|
|
|
environmentVariables: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onSubmit: () => undefined
|
|
|
|
|
|
|
|
|
|
const handleUpdate = (values: any) => {
|
|
|
|
|
const updated = { ...selectedNode };
|
|
|
|
|
updated.canvasConfig = values.canvasConfig;
|
|
|
|
|
updated.serviceConfig = values.serviceConfig;
|
|
|
|
|
onUpdateEndpoint(updated);
|
|
|
|
|
};
|
|
|
|
|
const validationSchema = yup.object({
|
|
|
|
|
canvasConfig: yup.object({
|
|
|
|
|
service_name: yup
|
|
|
|
|
.string()
|
|
|
|
|
.max(256, "service name should be 256 characters or less")
|
|
|
|
|
.required("service name is required")
|
|
|
|
|
}),
|
|
|
|
|
serviceConfig: yup.object({
|
|
|
|
|
container_name: yup
|
|
|
|
|
.string()
|
|
|
|
|
.max(256, "container name should be 256 characters or less")
|
|
|
|
|
.required("container name is required")
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
const tabs = [
|
|
|
|
|
{
|
|
|
|
|
@ -72,25 +80,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
|
|
|
|
|
}
|
|
|
|
|
}, [node]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
formik.resetForm();
|
|
|
|
|
|
|
|
|
|
if (selectedNode) {
|
|
|
|
|
formik.initialValues.canvasConfig = {
|
|
|
|
|
...selectedNode.canvasConfig
|
|
|
|
|
} as ICanvasConfig;
|
|
|
|
|
formik.initialValues.serviceConfig = {
|
|
|
|
|
...selectedNode.serviceConfig
|
|
|
|
|
} as any; // as IService;
|
|
|
|
|
}
|
|
|
|
|
}, [selectedNode]);
|
|
|
|
|
|
|
|
|
|
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">
|
|
|
|
|
@ -112,58 +101,76 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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 === "Environment" && <Environment formik={formik} />}
|
|
|
|
|
{openTab === "Volumes" && <Volumes formik={formik} />}
|
|
|
|
|
{openTab === "Labels" && <Labels 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 };
|
|
|
|
|
updated.canvasConfig = formik.values.canvasConfig;
|
|
|
|
|
updated.serviceConfig = formik.values.serviceConfig;
|
|
|
|
|
onUpdateEndpoint(updated);
|
|
|
|
|
{selectedNode && (
|
|
|
|
|
<Formik
|
|
|
|
|
initialValues={{
|
|
|
|
|
canvasConfig: {
|
|
|
|
|
...selectedNode.canvasConfig
|
|
|
|
|
} as ICanvasConfig,
|
|
|
|
|
serviceConfig: {
|
|
|
|
|
...selectedNode.serviceConfig
|
|
|
|
|
} as IService
|
|
|
|
|
}}
|
|
|
|
|
enableReinitialize={true}
|
|
|
|
|
onSubmit={(values) => {
|
|
|
|
|
handleUpdate(values);
|
|
|
|
|
}}
|
|
|
|
|
validationSchema={validationSchema}
|
|
|
|
|
>
|
|
|
|
|
Update
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{(formik) => (
|
|
|
|
|
<>
|
|
|
|
|
<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">
|
|
|
|
|
{openTab === "General" && <General />}
|
|
|
|
|
{openTab === "Environment" && <Environment />}
|
|
|
|
|
{openTab === "Volumes" && <Volumes />}
|
|
|
|
|
{openTab === "Labels" && <Labels />}
|
|
|
|
|
</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.submitForm();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Update
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</Formik>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
Artem Golub
3 years ago