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 =
|
||||
'{"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