mirror of https://github.com/ctk-hq/ctk
Samuel Rowe
3 years ago
committed by
GitHub
commit
859ddc0398
@ -1,133 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Formik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import {
|
||||
topLevelNetworkConfigInitialValues,
|
||||
networkConfigCanvasInitialValues
|
||||
} from "../../../utils";
|
||||
import General from "./General";
|
||||
import IPam from "./IPam";
|
||||
import Labels from "./Labels";
|
||||
import { CallbackFunction } from "../../../types";
|
||||
|
||||
interface INetworkCreateProps {
|
||||
onCreateNetwork: CallbackFunction;
|
||||
}
|
||||
|
||||
const NetworkCreate = (props: INetworkCreateProps) => {
|
||||
const { onCreateNetwork } = props;
|
||||
const [openTab, setOpenTab] = useState("General");
|
||||
const handleCreate = (values: any, formik: any) => {
|
||||
onCreateNetwork(values);
|
||||
formik.resetForm();
|
||||
};
|
||||
const validationSchema = yup.object({
|
||||
canvasConfig: yup.object({
|
||||
node_name: yup
|
||||
.string()
|
||||
.max(256, "network name should be 256 characters or less")
|
||||
.required("network name is required")
|
||||
}),
|
||||
networkConfig: yup.object({
|
||||
name: yup
|
||||
.string()
|
||||
.max(256, "name should be 256 characters or less")
|
||||
.required("name is required")
|
||||
})
|
||||
});
|
||||
const tabs = [
|
||||
{
|
||||
name: "General",
|
||||
href: "#",
|
||||
current: true,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "Ipam",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "Labels",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
}
|
||||
];
|
||||
const classNames = (...classes: string[]) => {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
canvasConfig: {
|
||||
...networkConfigCanvasInitialValues()
|
||||
},
|
||||
networkConfig: {
|
||||
...topLevelNetworkConfigInitialValues()
|
||||
},
|
||||
key: "network",
|
||||
type: "NETWORK"
|
||||
}}
|
||||
enableReinitialize={true}
|
||||
onSubmit={(values, formik) => {
|
||||
handleCreate(values, formik);
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(formik) => (
|
||||
<>
|
||||
<div className="border-b border-gray-200 px-4 md:px-8">
|
||||
<nav
|
||||
className="-mb-px flex space-x-4 md: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 className="relative px-4 py-3 flex-auto">
|
||||
{openTab === "General" && <General />}
|
||||
{openTab === "IPam" && <IPam />}
|
||||
{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();
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkCreate;
|
||||
@ -1,144 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Formik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import { TrashIcon } from "@heroicons/react/outline";
|
||||
import General from "./General";
|
||||
import IPam from "./IPam";
|
||||
import Labels from "./Labels";
|
||||
import {
|
||||
CallbackFunction,
|
||||
ICanvasConfig,
|
||||
INetworkTopLevel
|
||||
} from "../../../types";
|
||||
|
||||
interface INetworkEditProps {
|
||||
onUpdateNetwork: CallbackFunction;
|
||||
onDeleteNetwork: CallbackFunction;
|
||||
network: any;
|
||||
}
|
||||
|
||||
const NetworkEdit = (props: INetworkEditProps) => {
|
||||
const { onUpdateNetwork, onDeleteNetwork, network } = props;
|
||||
const [openTab, setOpenTab] = useState("General");
|
||||
const handleUpdate = (values: any) => {
|
||||
const updated = { ...network };
|
||||
updated.canvasConfig = values.canvasConfig;
|
||||
updated.networkConfig = values.networkConfig;
|
||||
onUpdateNetwork(updated);
|
||||
};
|
||||
const validationSchema = yup.object({
|
||||
canvasConfig: yup.object({
|
||||
node_name: yup
|
||||
.string()
|
||||
.max(256, "network name should be 256 characters or less")
|
||||
.required("network name is required")
|
||||
}),
|
||||
networkConfig: yup.object({
|
||||
name: yup
|
||||
.string()
|
||||
.max(256, "name should be 256 characters or less")
|
||||
.required("name is required")
|
||||
})
|
||||
});
|
||||
const tabs = [
|
||||
{
|
||||
name: "General",
|
||||
href: "#",
|
||||
current: true,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "Ipam",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "Labels",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
}
|
||||
];
|
||||
const classNames = (...classes: string[]) => {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
canvasConfig: {
|
||||
...network.canvasConfig
|
||||
} as ICanvasConfig,
|
||||
networkConfig: {
|
||||
...network.networkConfig
|
||||
} as INetworkTopLevel
|
||||
}}
|
||||
enableReinitialize={true}
|
||||
onSubmit={(values) => {
|
||||
handleUpdate(values);
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(formik) => (
|
||||
<>
|
||||
<div className="border-b border-gray-200 px-4 md:px-8">
|
||||
<nav
|
||||
className="-mb-px flex space-x-4 md: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 className="relative px-4 py-3 flex-auto">
|
||||
{openTab === "General" && <General />}
|
||||
{openTab === "IPam" && <IPam />}
|
||||
{openTab === "Labels" && <Labels />}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
|
||||
<button
|
||||
className="btn-util-red"
|
||||
type="button"
|
||||
onClick={onDeleteNetwork}
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn-util"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
formik.submitForm();
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkEdit;
|
||||
@ -1,12 +0,0 @@
|
||||
import TextField from "../../global/FormElements/TextField";
|
||||
|
||||
const General = () => {
|
||||
return (
|
||||
<>
|
||||
<TextField label="Network name" name="canvasConfig.node_name" />
|
||||
<TextField label="Name" name="networkConfig.name" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default General;
|
||||
@ -1,5 +0,0 @@
|
||||
const IPam = () => {
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default IPam;
|
||||
@ -1,5 +0,0 @@
|
||||
const Labels = () => {
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default Labels;
|
||||
@ -1,118 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { XIcon } from "@heroicons/react/outline";
|
||||
import NetworkCreate from "./Create";
|
||||
import { CallbackFunction } from "../../../types";
|
||||
import NetworkEdit from "./Edit";
|
||||
import { attachUUID } from "../../../utils";
|
||||
|
||||
interface IModalNetworkProps {
|
||||
networks: Record<string, any>;
|
||||
onCreateNetwork: CallbackFunction;
|
||||
onUpdateNetwork: CallbackFunction;
|
||||
onDeleteNetwork: CallbackFunction;
|
||||
onHide: CallbackFunction;
|
||||
}
|
||||
|
||||
const ModalNetwork = (props: IModalNetworkProps) => {
|
||||
const {
|
||||
networks,
|
||||
onCreateNetwork,
|
||||
onUpdateNetwork,
|
||||
onDeleteNetwork,
|
||||
onHide
|
||||
} = props;
|
||||
const [selectedNetwork, setSelectedNetwork] = useState<any | null>();
|
||||
const handleCreate = (values: any) => {
|
||||
const uniqueKey = attachUUID(values.key);
|
||||
const network = {
|
||||
...values,
|
||||
key: uniqueKey
|
||||
};
|
||||
onCreateNetwork(network);
|
||||
setSelectedNetwork(network);
|
||||
};
|
||||
const handleUpdate = (values: any) => {
|
||||
onUpdateNetwork(values);
|
||||
setSelectedNetwork(values);
|
||||
};
|
||||
const handleDelete = () => {
|
||||
onDeleteNetwork(selectedNetwork.key);
|
||||
setSelectedNetwork(null);
|
||||
};
|
||||
const handleNew = () => {
|
||||
setSelectedNetwork(null);
|
||||
};
|
||||
const onNetworkSelect = (e: any) => {
|
||||
const networkUuid = e.target.value;
|
||||
setSelectedNetwork(networks[networkUuid]);
|
||||
};
|
||||
|
||||
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">Top level networks</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>
|
||||
|
||||
{networks && Object.keys(networks).length > 0 && (
|
||||
<div className="flex flex-row space-x-1 mx-4 mt-2">
|
||||
<select
|
||||
id="network"
|
||||
name="network"
|
||||
className="input-util"
|
||||
value={selectedNetwork ? selectedNetwork.key : ""}
|
||||
onChange={onNetworkSelect}
|
||||
>
|
||||
<option>select network to edit</option>
|
||||
{Object.keys(networks).map((networkUuid: string) => (
|
||||
<option value={networkUuid} key={networkUuid}>
|
||||
{networks[networkUuid].canvasConfig.node_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{selectedNetwork && (
|
||||
<button
|
||||
className="btn-util"
|
||||
type="button"
|
||||
onClick={handleNew}
|
||||
>
|
||||
New
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!selectedNetwork && (
|
||||
<NetworkCreate onCreateNetwork={handleCreate} />
|
||||
)}
|
||||
|
||||
{selectedNetwork && (
|
||||
<NetworkEdit
|
||||
network={selectedNetwork}
|
||||
onUpdateNetwork={handleUpdate}
|
||||
onDeleteNetwork={handleDelete}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalNetwork;
|
||||
@ -0,0 +1,84 @@
|
||||
import { FunctionComponent, ReactElement, useMemo, useState } from "react";
|
||||
import { Formik } from "formik";
|
||||
import General from "./General";
|
||||
import IPam from "./IPam";
|
||||
import Labels from "./Labels";
|
||||
import { CallbackFunction } from "../../../types";
|
||||
import { getInitialValues, tabs, validationSchema } from "./form-utils";
|
||||
import { classNames } from "../../../utils/styles";
|
||||
import { Button, styled } from "@mui/joy";
|
||||
|
||||
interface ICreateNetworkModalProps {
|
||||
onCreateNetwork: CallbackFunction;
|
||||
}
|
||||
|
||||
const Actions = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
|
||||
props: ICreateNetworkModalProps
|
||||
): ReactElement => {
|
||||
const { onCreateNetwork } = props;
|
||||
const [openTab, setOpenTab] = useState("General");
|
||||
const initialValues = useMemo(() => getInitialValues(), []);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
enableReinitialize={true}
|
||||
onSubmit={onCreateNetwork}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(formik) => (
|
||||
<>
|
||||
<div className="border-b border-gray-200 px-4 md:px-8">
|
||||
<nav
|
||||
className="-mb-px flex space-x-4 md: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 className="relative px-4 py-3 flex-auto">
|
||||
{openTab === "General" && <General />}
|
||||
{openTab === "IPAM" && <IPam />}
|
||||
{openTab === "Labels" && <Labels />}
|
||||
</div>
|
||||
|
||||
<Actions>
|
||||
<Button size="sm" variant="solid" onClick={formik.submitForm}>
|
||||
Save
|
||||
</Button>
|
||||
</Actions>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateNetworkModal;
|
||||
@ -0,0 +1,83 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Formik } from "formik";
|
||||
import General from "./General";
|
||||
import IPam from "./IPam";
|
||||
import Labels from "./Labels";
|
||||
import { CallbackFunction } from "../../../types";
|
||||
import { getInitialValues, tabs, validationSchema } from "./form-utils";
|
||||
import { classNames } from "../../../utils/styles";
|
||||
import { Button, styled } from "@mui/joy";
|
||||
|
||||
interface IEditNetworkModalProps {
|
||||
onUpdateNetwork: CallbackFunction;
|
||||
network: any;
|
||||
}
|
||||
|
||||
const Actions = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const EditNetworkModal = (props: IEditNetworkModalProps) => {
|
||||
const { onUpdateNetwork, network } = props;
|
||||
const [openTab, setOpenTab] = useState("General");
|
||||
const initialValues = useMemo(() => getInitialValues(network), [network]);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
enableReinitialize={true}
|
||||
onSubmit={onUpdateNetwork}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(formik) => (
|
||||
<>
|
||||
<div className="border-b border-gray-200 px-4 md:px-8">
|
||||
<nav
|
||||
className="-mb-px flex space-x-4 md: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 className="relative px-4 py-3 flex-auto">
|
||||
{openTab === "General" && <General />}
|
||||
{openTab === "IPAM" && <IPam />}
|
||||
{openTab === "Labels" && <Labels />}
|
||||
</div>
|
||||
|
||||
<Actions>
|
||||
<Button size="sm" variant="solid" onClick={formik.submitForm}>
|
||||
Save
|
||||
</Button>
|
||||
</Actions>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditNetworkModal;
|
||||
@ -0,0 +1,43 @@
|
||||
import { Button, styled } from "@mui/joy";
|
||||
import { FunctionComponent, ReactElement } from "react";
|
||||
|
||||
const Root = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: ${({ theme }) => theme.spacing(2, 5, 5, 5)};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const Image = styled("img")`
|
||||
width: 300px;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const CreateNew = styled(Button)`
|
||||
margin-top: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export interface IEmptyNetworksProps {
|
||||
onCreate: () => void;
|
||||
}
|
||||
|
||||
const EmptyNetworks: FunctionComponent<IEmptyNetworksProps> = (
|
||||
props: IEmptyNetworksProps
|
||||
): ReactElement => {
|
||||
const { onCreate } = props;
|
||||
return (
|
||||
<Root>
|
||||
<Image src="https://res.cloudinary.com/hypertool/image/upload/v1657816359/hypertool-assets/empty-projects_fdcxtk.svg" />
|
||||
<p className="mt-4 text-md text-gray-500 dark:text-gray-400">
|
||||
We tried our best, but could not find any networks.
|
||||
</p>
|
||||
<CreateNew variant="solid" size="sm" onClick={onCreate}>
|
||||
Create new network
|
||||
</CreateNew>
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmptyNetworks;
|
||||
@ -0,0 +1,19 @@
|
||||
import { styled } from "@mui/joy";
|
||||
import TextField from "../../global/FormElements/TextField";
|
||||
|
||||
const Root = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const General = () => {
|
||||
return (
|
||||
<Root>
|
||||
<TextField label="Entry name" name="entryName" />
|
||||
<TextField label="Network name" name="networkName" />
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default General;
|
||||
@ -0,0 +1,162 @@
|
||||
import { ReactElement } from "react";
|
||||
import { styled } from "@mui/joy";
|
||||
|
||||
import TextField from "../../global/FormElements/TextField";
|
||||
import { IFieldType } from "../../Record";
|
||||
import Records from "../../Records";
|
||||
|
||||
const Fields = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: ${({ theme }) => theme.spacing(1)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Field = styled("div")`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Remove = styled("div")`
|
||||
margin-top: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const Configuration = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const ConfigurationTop = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const ConfigurationBorder = styled("div")`
|
||||
border-bottom: dotted 1px black;
|
||||
height: 1px;
|
||||
width: 40px;
|
||||
margin: 8px 0px 0px 0px;
|
||||
`;
|
||||
|
||||
const IPam = () => {
|
||||
return (
|
||||
<Fields>
|
||||
<TextField label="Driver" name="driver" />
|
||||
|
||||
<Records
|
||||
name="configurations"
|
||||
modal="network"
|
||||
title="Configurations"
|
||||
referred="configuration"
|
||||
fields={(index: number) => [
|
||||
{
|
||||
name: `configurations[${index}].subnet`,
|
||||
label: "Subnet",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `configurations[${index}].ipRange`,
|
||||
label: "IP Range",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `configurations[${index}].gateway`,
|
||||
label: "Gateway",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `configurations[${index}].auxAddresses`,
|
||||
type: "records",
|
||||
// TODO: Remove placeholder from the main object.
|
||||
placeholder: "",
|
||||
options: {
|
||||
name: `configurations[${index}].auxAddresses`,
|
||||
modal: "configuration",
|
||||
title: "Aux addresses",
|
||||
referred: "aux address",
|
||||
fields: (index2: number) => [
|
||||
{
|
||||
name: `configurations[${index}].auxAddresses[${index2}].hostName`,
|
||||
label: "Host name",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `configurations[${index}].auxAddresses[${index2}].ipAddress`,
|
||||
label: "IP address",
|
||||
type: "text"
|
||||
}
|
||||
],
|
||||
newValue: {
|
||||
hostName: "",
|
||||
ipAddress: ""
|
||||
},
|
||||
renderField: (element: ReactElement): ReactElement => (
|
||||
<Field>{element}</Field>
|
||||
),
|
||||
renderRemove: (element: ReactElement): ReactElement => (
|
||||
<Remove>{element}</Remove>
|
||||
)
|
||||
}
|
||||
}
|
||||
]}
|
||||
newValue={{
|
||||
subnet: "",
|
||||
ipRange: "",
|
||||
gateway: "",
|
||||
auxAddresses: []
|
||||
}}
|
||||
renderLayout={(elements: ReactElement[]): ReactElement => (
|
||||
<Configuration>
|
||||
<ConfigurationTop>
|
||||
{elements[0]}
|
||||
{elements[1]}
|
||||
{elements[2]}
|
||||
</ConfigurationTop>
|
||||
{elements[3]}
|
||||
</Configuration>
|
||||
)}
|
||||
renderField={(
|
||||
element: ReactElement,
|
||||
field: IFieldType
|
||||
): ReactElement => (
|
||||
<Field style={{ paddingLeft: field.type === "records" ? 16 : 0 }}>
|
||||
{element}
|
||||
</Field>
|
||||
)}
|
||||
renderRemove={(element: ReactElement): ReactElement => (
|
||||
<Remove>{element}</Remove>
|
||||
)}
|
||||
renderBorder={() => <ConfigurationBorder />}
|
||||
/>
|
||||
|
||||
<Records
|
||||
name="options"
|
||||
modal="network"
|
||||
title="Options"
|
||||
referred="option"
|
||||
fields={(index: number) => [
|
||||
{
|
||||
name: `options[${index}].key`,
|
||||
placeholder: "Key",
|
||||
required: true,
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `options[${index}].value`,
|
||||
placeholder: "Value",
|
||||
required: true,
|
||||
type: "text"
|
||||
}
|
||||
]}
|
||||
newValue={{ key: "", value: "" }}
|
||||
renderField={(element: ReactElement): ReactElement => (
|
||||
<Field>{element}</Field>
|
||||
)}
|
||||
/>
|
||||
</Fields>
|
||||
);
|
||||
};
|
||||
|
||||
export default IPam;
|
||||
@ -0,0 +1,39 @@
|
||||
import { styled } from "@mui/joy";
|
||||
import { FunctionComponent, ReactElement } from "react";
|
||||
import Records from "../../Records";
|
||||
|
||||
const Root = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Labels: FunctionComponent = (): ReactElement => {
|
||||
return (
|
||||
<Root>
|
||||
<Records
|
||||
name="labels"
|
||||
modal="network"
|
||||
title="Labels"
|
||||
referred="label"
|
||||
fields={(index: number) => [
|
||||
{
|
||||
name: `labels[${index}].key`,
|
||||
placeholder: "Key",
|
||||
required: true,
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `labels[${index}].value`,
|
||||
placeholder: "Value",
|
||||
required: true,
|
||||
type: "text"
|
||||
}
|
||||
]}
|
||||
newValue={{ key: "", value: "" }}
|
||||
/>
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default Labels;
|
||||
@ -0,0 +1,104 @@
|
||||
import { MinusSmIcon, PlusSmIcon } from "@heroicons/react/outline";
|
||||
import { Button, styled } from "@mui/joy";
|
||||
import IconButton from "@mui/joy/IconButton";
|
||||
import { FunctionComponent, ReactElement } from "react";
|
||||
|
||||
export interface INetworkListProps {
|
||||
networks: Record<string, any>;
|
||||
selectedUuid: string;
|
||||
onEdit: (networkUuid: string) => void;
|
||||
onNew: () => void;
|
||||
onRemove: (networkUuid: string) => void;
|
||||
}
|
||||
|
||||
interface IListItemProps {
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
const Root = styled("div")`
|
||||
padding: ${({ theme }) => theme.spacing(0)};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-right: solid #eaeaea 1px;
|
||||
margin: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
|
||||
`;
|
||||
|
||||
const Top = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Bottom = styled("div")`
|
||||
padding: ${({ theme }) => theme.spacing(1, 2)};
|
||||
`;
|
||||
|
||||
const ListItem = styled("div")<IListItemProps>`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
column-gap: ${({ theme }) => theme.spacing(2)};
|
||||
padding: ${({ theme }) => theme.spacing(1, 2)};
|
||||
cursor: pointer;
|
||||
background-color: ${({ selected }) => selected && "#f5f5f5"};
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
`;
|
||||
|
||||
const ListItemText = styled("h5")`
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
`;
|
||||
|
||||
const RemoveButton = styled(IconButton)`
|
||||
width: 24px;
|
||||
max-height: 16px;
|
||||
`;
|
||||
|
||||
const NetworkList: FunctionComponent<INetworkListProps> = (
|
||||
props: INetworkListProps
|
||||
): ReactElement => {
|
||||
const { onNew, onRemove, onEdit, networks, selectedUuid } = props;
|
||||
|
||||
const handleEdit = (networkUuid: string) => () => onEdit(networkUuid);
|
||||
|
||||
const handleRemove = (networkUuid: string) => () => onRemove(networkUuid);
|
||||
|
||||
return (
|
||||
<Root>
|
||||
<Top>
|
||||
{Object.keys(networks).map((networkUuid: string) => (
|
||||
<ListItem
|
||||
key={networkUuid}
|
||||
onClick={handleEdit(networkUuid)}
|
||||
selected={networkUuid === selectedUuid}
|
||||
>
|
||||
<ListItemText>
|
||||
{networks[networkUuid].canvasConfig.node_name}
|
||||
</ListItemText>
|
||||
<RemoveButton
|
||||
variant="soft"
|
||||
size="sm"
|
||||
color="danger"
|
||||
onClick={handleRemove(networkUuid)}
|
||||
>
|
||||
<MinusSmIcon className="h-4 w-4" />
|
||||
</RemoveButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</Top>
|
||||
|
||||
<Bottom>
|
||||
<Button variant="plain" size="sm" onClick={onNew}>
|
||||
<PlusSmIcon className="h-5 w-5" />
|
||||
New network
|
||||
</Button>
|
||||
</Bottom>
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkList;
|
||||
@ -0,0 +1,163 @@
|
||||
import lodash from "lodash";
|
||||
import * as yup from "yup";
|
||||
import { IEditNetworkForm, INetworkNodeItem } from "../../../types";
|
||||
|
||||
export const validationSchema = yup.object({
|
||||
entryName: yup
|
||||
.string()
|
||||
.max(256, "Entry name should be 256 characters or less")
|
||||
.required("Entry name is required"),
|
||||
|
||||
networkName: yup
|
||||
.string()
|
||||
.max(256, "Network name should be 256 characters or less")
|
||||
.required("Network name is required"),
|
||||
|
||||
driver: yup
|
||||
.string()
|
||||
.max(256, "Driver should be 256 characters or less")
|
||||
.default("default"),
|
||||
|
||||
configurations: yup.array(
|
||||
yup.object({
|
||||
subnet: yup.string(),
|
||||
ipRange: yup.string(),
|
||||
gateway: yup.string(),
|
||||
auxAddresses: yup.array(
|
||||
yup.object({
|
||||
hostName: yup.string().required("Host name is required"),
|
||||
ipAddress: yup.string().required("IP address is required")
|
||||
})
|
||||
)
|
||||
})
|
||||
),
|
||||
|
||||
options: yup.array(
|
||||
yup.object({
|
||||
key: yup.string().required("Key is required"),
|
||||
value: yup.string().required("Value is required")
|
||||
})
|
||||
),
|
||||
|
||||
labels: yup.array(
|
||||
yup.object({
|
||||
key: yup.string().required("Key is required"),
|
||||
value: yup.string().required("Value is required")
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
export const tabs = [
|
||||
{
|
||||
name: "General",
|
||||
href: "#",
|
||||
current: true,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "IPAM",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "Labels",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
}
|
||||
];
|
||||
|
||||
export const initialValues: IEditNetworkForm = {
|
||||
entryName: "",
|
||||
networkName: "",
|
||||
driver: "default",
|
||||
configurations: [],
|
||||
options: [],
|
||||
labels: []
|
||||
};
|
||||
|
||||
export const getInitialValues = (node?: INetworkNodeItem): IEditNetworkForm => {
|
||||
if (!node) {
|
||||
return {
|
||||
...initialValues
|
||||
};
|
||||
}
|
||||
|
||||
const { canvasConfig, networkConfig } = node;
|
||||
const { node_name = "" } = canvasConfig;
|
||||
const { name = "", ipam, labels } = networkConfig;
|
||||
|
||||
return {
|
||||
...initialValues,
|
||||
entryName: node_name,
|
||||
networkName: name,
|
||||
driver: ipam?.driver ?? "",
|
||||
configurations:
|
||||
ipam?.config.map((item) => ({
|
||||
subnet: item.subnet,
|
||||
ipRange: item.ip_range,
|
||||
gateway: item.gateway,
|
||||
auxAddresses: Object.entries(item.aux_addresses).map(
|
||||
([hostName, ipAddress]) => ({
|
||||
hostName,
|
||||
ipAddress
|
||||
})
|
||||
)
|
||||
})) ?? [],
|
||||
options: Object.keys(ipam?.options || {}).map((key) => {
|
||||
if (!ipam) {
|
||||
throw new Error("Control should not reach here.");
|
||||
}
|
||||
return {
|
||||
key,
|
||||
value: ipam.options[key].toString()
|
||||
};
|
||||
}),
|
||||
labels: Object.entries(labels as any).map(([key, value]: any) => ({
|
||||
key,
|
||||
value
|
||||
}))
|
||||
};
|
||||
};
|
||||
|
||||
export const getFinalValues = (
|
||||
values: IEditNetworkForm,
|
||||
previous?: INetworkNodeItem
|
||||
): INetworkNodeItem => {
|
||||
const { labels, driver, configurations, options } = values;
|
||||
|
||||
return {
|
||||
key: "network",
|
||||
type: "NETWORK",
|
||||
inputs: previous?.inputs ?? [],
|
||||
outputs: previous?.outputs ?? [],
|
||||
config: (previous as any)?.config ?? {},
|
||||
canvasConfig: {
|
||||
node_name: values.entryName
|
||||
},
|
||||
networkConfig: {
|
||||
name: values.networkName,
|
||||
ipam: {
|
||||
driver,
|
||||
config: configurations.map((configuration) => ({
|
||||
subnet: configuration.subnet,
|
||||
ip_range: configuration.ipRange,
|
||||
gateway: configuration.gateway,
|
||||
aux_addresses: Object.fromEntries(
|
||||
configuration.auxAddresses.map((auxAddress) => [
|
||||
auxAddress.hostName,
|
||||
auxAddress.ipAddress
|
||||
])
|
||||
)
|
||||
})),
|
||||
options: Object.fromEntries(
|
||||
options.map((option) => [option.key, option.value])
|
||||
)
|
||||
},
|
||||
labels: Object.fromEntries(
|
||||
labels.map((label) => [label.key, label.value])
|
||||
)
|
||||
}
|
||||
} as any;
|
||||
};
|
||||
@ -0,0 +1,141 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { XIcon } from "@heroicons/react/outline";
|
||||
import CreateNetworkModal from "./CreateNetworkModal";
|
||||
import { CallbackFunction } from "../../../types";
|
||||
import EditNetworkModal from "./EditNetworkModal";
|
||||
import { attachUUID } from "../../../utils";
|
||||
import { getFinalValues } from "./form-utils";
|
||||
import EmptyNetworks from "./EmptyNetworks";
|
||||
import NetworkList from "./NetworkList";
|
||||
import { styled } from "@mui/joy";
|
||||
|
||||
interface IModalNetworkProps {
|
||||
networks: Record<string, any>;
|
||||
onCreateNetwork: CallbackFunction;
|
||||
onUpdateNetwork: CallbackFunction;
|
||||
onDeleteNetwork: CallbackFunction;
|
||||
onHide: CallbackFunction;
|
||||
}
|
||||
|
||||
const Container = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const NetworkFormContainer = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const ModalNetwork = (props: IModalNetworkProps) => {
|
||||
const {
|
||||
networks,
|
||||
onCreateNetwork,
|
||||
onUpdateNetwork,
|
||||
onDeleteNetwork,
|
||||
onHide
|
||||
} = props;
|
||||
const [selectedNetwork, setSelectedNetwork] = useState<any | null>();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const handleCreate = (values: any) => {
|
||||
const finalValues = getFinalValues(values);
|
||||
const uniqueKey = attachUUID(finalValues.key);
|
||||
const network = {
|
||||
...finalValues,
|
||||
key: uniqueKey
|
||||
};
|
||||
onCreateNetwork(network);
|
||||
setSelectedNetwork(network);
|
||||
};
|
||||
|
||||
const handleUpdate = (values: any) => {
|
||||
const finalValues = getFinalValues(values, selectedNetwork);
|
||||
onUpdateNetwork(finalValues);
|
||||
setSelectedNetwork(finalValues);
|
||||
};
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(networkUuid: string) => {
|
||||
onDeleteNetwork(networkUuid);
|
||||
/* Show the new network form only when the selected node was deleted. */
|
||||
/* BUG: If a selected node is deleted, it still remains in the form. */
|
||||
if (selectedNetwork?.key === networkUuid) {
|
||||
setSelectedNetwork(null);
|
||||
}
|
||||
},
|
||||
[onDeleteNetwork, selectedNetwork]
|
||||
);
|
||||
|
||||
const handleNew = useCallback(() => {
|
||||
setShowCreate(true);
|
||||
setSelectedNetwork(null);
|
||||
}, []);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(networkUuid: string) => {
|
||||
setSelectedNetwork(networks[networkUuid]);
|
||||
},
|
||||
[networks]
|
||||
);
|
||||
|
||||
const networkKeys = Object.keys(networks);
|
||||
|
||||
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">Networks</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>
|
||||
|
||||
{networkKeys.length === 0 && !showCreate && (
|
||||
<EmptyNetworks onCreate={handleNew} />
|
||||
)}
|
||||
|
||||
{(networkKeys.length > 0 || showCreate) && (
|
||||
<Container>
|
||||
{networkKeys.length > 0 && (
|
||||
<NetworkList
|
||||
networks={networks}
|
||||
onNew={handleNew}
|
||||
onRemove={handleRemove}
|
||||
onEdit={handleEdit}
|
||||
selectedUuid={selectedNetwork?.key}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NetworkFormContainer>
|
||||
{!selectedNetwork && (
|
||||
<CreateNetworkModal onCreateNetwork={handleCreate} />
|
||||
)}
|
||||
|
||||
{selectedNetwork && (
|
||||
<EditNetworkModal
|
||||
network={selectedNetwork}
|
||||
onUpdateNetwork={handleUpdate}
|
||||
/>
|
||||
)}
|
||||
</NetworkFormContainer>
|
||||
</Container>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalNetwork;
|
||||
@ -0,0 +1,128 @@
|
||||
import { Button, styled } from "@mui/joy";
|
||||
import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
|
||||
import { PlusIcon } from "@heroicons/react/outline";
|
||||
import Record, { IFieldType } from "./Record";
|
||||
import { useFormikContext } from "formik";
|
||||
import lodash from "lodash";
|
||||
|
||||
export interface IRecordsProps {
|
||||
modal: string;
|
||||
title: string;
|
||||
referred: string;
|
||||
name: string;
|
||||
fields: (index: number) => IFieldType[];
|
||||
newValue: any;
|
||||
renderLayout?: (elements: ReactElement[]) => ReactElement;
|
||||
renderField?: (element: ReactElement, field: IFieldType) => ReactElement;
|
||||
renderRemove?: (element: ReactElement) => ReactElement;
|
||||
renderBorder?: () => ReactElement;
|
||||
}
|
||||
|
||||
const Group = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const GroupTitle = styled("h5")`
|
||||
font-size: 0.75rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
const RecordList = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: ${({ theme }) => theme.spacing(1)};
|
||||
margin-top: ${({ theme }) => theme.spacing(1)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const AddButton = styled(Button)`
|
||||
min-width: 140px;
|
||||
margin-top: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const Description = styled("p")`
|
||||
margin-top: ${({ theme }) => theme.spacing(2)};
|
||||
text-align: center;
|
||||
color: #7a7a7a;
|
||||
font-size: 14px;
|
||||
`;
|
||||
|
||||
const Records: FunctionComponent<IRecordsProps> = (
|
||||
props: IRecordsProps
|
||||
): ReactElement => {
|
||||
const {
|
||||
modal,
|
||||
title,
|
||||
referred,
|
||||
name,
|
||||
fields,
|
||||
newValue,
|
||||
renderLayout,
|
||||
renderField,
|
||||
renderRemove,
|
||||
renderBorder
|
||||
} = props;
|
||||
|
||||
const formik = useFormikContext();
|
||||
const items = lodash.get(formik.values, name);
|
||||
|
||||
const handleNew = useCallback(() => {
|
||||
formik.setFieldValue(`${name}[${items.length}]`, newValue);
|
||||
}, [formik]);
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(index: number) => {
|
||||
const newOptions = items.filter(
|
||||
(_: unknown, currentIndex: number) => currentIndex != index
|
||||
);
|
||||
formik.setFieldValue(name, newOptions);
|
||||
},
|
||||
[formik]
|
||||
);
|
||||
|
||||
const empty = items && items.length === 0;
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<GroupTitle>{title}</GroupTitle>
|
||||
{!empty && (
|
||||
<RecordList>
|
||||
{items.map((_: unknown, index: number) => (
|
||||
<Fragment key={index}>
|
||||
<Record
|
||||
index={index}
|
||||
fields={fields(index)}
|
||||
onRemove={handleRemove}
|
||||
renderLayout={renderLayout}
|
||||
renderField={renderField}
|
||||
renderRemove={renderRemove}
|
||||
/>
|
||||
{renderBorder && renderBorder()}
|
||||
</Fragment>
|
||||
))}
|
||||
</RecordList>
|
||||
)}
|
||||
{empty && (
|
||||
<Description>
|
||||
This {modal} does not have any {referred}.
|
||||
<br />
|
||||
Click "+ New {referred}" to add a new {referred}.
|
||||
</Description>
|
||||
)}
|
||||
|
||||
<AddButton size="sm" variant="plain" onClick={handleNew}>
|
||||
<PlusIcon className="h-4 w-4 mr-2" />
|
||||
New {referred}
|
||||
</AddButton>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default Records;
|
||||
@ -0,0 +1,3 @@
|
||||
export const classNames = (...classes: string[]) => {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
};
|
||||
Loading…
Reference in New Issue