From a77f0042f553547cc30df8bbcee456f491abd772 Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Sun, 21 Aug 2022 18:41:59 +0300
Subject: [PATCH] fix: new routes for k8s and dc projects

---
 services/frontend/src/App.tsx                 |  29 +-
 .../Project/docker-compose/index.tsx          | 705 ++++++++++++++++++
 .../Project/{ => kubernetes}/index.tsx        |  43 +-
 .../src/components/Projects/PreviewBlock.tsx  |  10 +-
 4 files changed, 759 insertions(+), 28 deletions(-)
 create mode 100644 services/frontend/src/components/Project/docker-compose/index.tsx
 rename services/frontend/src/components/Project/{ => kubernetes}/index.tsx (94%)

diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx
index b7e04ea..8a14675 100644
--- a/services/frontend/src/App.tsx
+++ b/services/frontend/src/App.tsx
@@ -14,7 +14,8 @@ import { refresh, self } from "./services/auth";
 
 import SideBar from "./components/global/SideBar";
 import Projects from "./components/Projects";
-import Project from "./components/Project";
+import KubernetesProject from "./components/Project/kubernetes";
+import DockerComposeProject from "./components/Project/docker-compose";
 import Profile from "./components/Profile";
 import Signup from "./components/Auth/Signup";
 import Login from "./components/Auth/Login";
@@ -107,13 +108,31 @@ export default function App() {
             <SideBar isAuthenticated={isAuthenticated} state={state} />
             <Routes>
               <Route
-                path="/projects/:uuid"
-                element={<Project isAuthenticated={isAuthenticated} />}
+                path="/projects/kubernetes/:uuid"
+                element={
+                  <KubernetesProject isAuthenticated={isAuthenticated} />
+                }
+              />
+
+              <Route
+                path="/projects/docker-compose/:uuid"
+                element={
+                  <DockerComposeProject isAuthenticated={isAuthenticated} />
+                }
               />
 
               <Route
-                path="/projects/new"
-                element={<Project isAuthenticated={isAuthenticated} />}
+                path="/projects/kubernetes/new"
+                element={
+                  <KubernetesProject isAuthenticated={isAuthenticated} />
+                }
+              />
+
+              <Route
+                path="/projects/docker-compose/new"
+                element={
+                  <DockerComposeProject isAuthenticated={isAuthenticated} />
+                }
               />
 
               <Route
diff --git a/services/frontend/src/components/Project/docker-compose/index.tsx b/services/frontend/src/components/Project/docker-compose/index.tsx
new file mode 100644
index 0000000..39e5960
--- /dev/null
+++ b/services/frontend/src/components/Project/docker-compose/index.tsx
@@ -0,0 +1,705 @@
+import { useEffect, useState, useRef, useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { debounce, Dictionary, omit } from "lodash";
+import YAML from "yaml";
+import { GlobeAltIcon, CubeIcon, FolderAddIcon } from "@heroicons/react/solid";
+import randomWords from "random-words";
+import {
+  IProjectPayload,
+  IServiceNodeItem,
+  IVolumeNodeItem,
+  IServiceNodePosition,
+  IProject
+} from "../../../types";
+import eventBus from "../../../events/eventBus";
+import { useMutation } from "react-query";
+import {
+  useProject,
+  useUpdateProject,
+  createProject
+} from "../../../hooks/useProject";
+import useWindowDimensions from "../../../hooks/useWindowDimensions";
+import { generatePayload } from "../../../utils/generators";
+import { nodeLibraries } from "../../../utils/data/libraries";
+import {
+  getClientNodeItem,
+  flattenLibraries,
+  ensure,
+  getClientNodesAndConnections,
+  getMatchingSetIndex
+} from "../../../utils";
+import { checkHttpStatus } from "../../../services/helpers";
+import { generateHttp } from "../../../services/generate";
+import { Canvas } from "../../Canvas";
+import Spinner from "../../global/Spinner";
+import ModalConfirmDelete from "../../modals/ConfirmDelete";
+import CreateServiceModal from "../../modals/docker-compose/service/Create";
+import ModalServiceEdit from "../../modals/docker-compose/service/Edit";
+import ModalNetwork from "../../modals/docker-compose/network";
+import CreateVolumeModal from "../../modals/docker-compose/volume/CreateVolumeModal";
+import EditVolumeModal from "../../modals/docker-compose/volume/EditVolumeModal";
+import CodeEditor from "../../CodeEditor";
+import { useTitle } from "../../../hooks";
+import VisibilitySwitch from "../../global/VisibilitySwitch";
+
+interface IProjectProps {
+  isAuthenticated: boolean;
+}
+
+export default function DockerComposeProject(props: IProjectProps) {
+  const { isAuthenticated } = props;
+  const { uuid } = useParams<{ uuid: string }>();
+  const { height } = useWindowDimensions();
+  const { data, error, isFetching } = useProject(uuid);
+  const stateNodesRef =
+    useRef<Dictionary<IServiceNodeItem | IVolumeNodeItem>>();
+  const stateConnectionsRef = useRef<[[string, string]] | []>();
+  const stateNetworksRef = useRef({});
+
+  const [isVisible, setIsVisible] = useState(false);
+  const [generatedCode, setGeneratedCode] = useState<string>();
+  const [formattedCode, setFormattedCode] = useState<string>("");
+  const [showModalCreateService, setShowModalCreateService] = useState(false);
+  const [showVolumesModal, setShowVolumesModal] = useState(false);
+  const [showNetworksModal, setShowNetworksModal] = useState(false);
+  const [serviceToEdit, setServiceToEdit] = useState<IServiceNodeItem | null>(
+    null
+  );
+  const [serviceToDelete, setServiceToDelete] =
+    useState<IServiceNodeItem | null>(null);
+  const [volumeToEdit, setVolumeToEdit] = useState<IVolumeNodeItem | null>(
+    null
+  );
+  const [volumeToDelete, setVolumeToDelete] = useState<IVolumeNodeItem | null>(
+    null
+  );
+  const [language, setLanguage] = useState("yaml");
+  const [version, setVersion] = useState("3");
+  const [copyText, setCopyText] = useState("Copy");
+  const [nodes, setNodes] = useState<Record<string, any>>({});
+  const [connections, setConnections] = useState<[[string, string]] | []>([]);
+  const [networks, setNetworks] = useState<Record<string, any>>({});
+  const [projectName, setProjectName] = useState(
+    () =>
+      randomWords({
+        wordsPerString: 2,
+        exactly: 1,
+        separator: "-"
+      } as any)[0]
+  );
+
+  const [canvasPosition, setCanvasPosition] = useState({
+    top: 0,
+    left: 0,
+    scale: 1
+  });
+  const updateProjectMutation = useUpdateProject(uuid);
+  const createProjectMutation = useMutation(
+    (payload: IProjectPayload) => {
+      return createProject(payload);
+    },
+    {
+      onSuccess: (project: IProject) => {
+        window.location.replace(`/projects/${project.uuid}`);
+      }
+    }
+  );
+
+  useTitle(
+    [
+      isFetching ? "" : data ? data.name : "New project",
+      "Container Toolkit"
+    ].join(" | ")
+  );
+
+  stateNodesRef.current = nodes;
+  stateConnectionsRef.current = connections;
+  stateNetworksRef.current = networks;
+
+  const handleNameChange = (e: any) => {
+    setProjectName(e.target.value);
+  };
+
+  const onNodeUpdate = (positionData: IServiceNodePosition) => {
+    if (stateNodesRef.current) {
+      const node = {
+        ...stateNodesRef.current[positionData.key],
+        ...positionData
+      };
+      setNodes({ ...stateNodesRef.current, [positionData.key]: node });
+    }
+  };
+
+  const onSave = () => {
+    const payload: IProjectPayload = {
+      name: projectName,
+      visibility: +isVisible,
+      project_type: 1,
+      data: {
+        canvas: {
+          position: canvasPosition,
+          nodes: nodes,
+          connections: connections,
+          networks: networks
+        }
+      }
+    };
+
+    if (uuid) {
+      updateProjectMutation.mutate(payload);
+    } else {
+      createProjectMutation.mutate(payload);
+    }
+  };
+
+  const copy = () => {
+    navigator.clipboard.writeText(formattedCode);
+    setCopyText("Copied");
+
+    setTimeout(() => {
+      setCopyText("Copy");
+    }, 300);
+  };
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    const canvasData = JSON.parse(data.data);
+    const nodesAsList = Object.keys(canvasData.canvas.nodes).map(
+      (k) => canvasData.canvas.nodes[k]
+    );
+    const clientNodeItems = getClientNodesAndConnections(
+      nodesAsList,
+      nodeLibraries
+    );
+
+    setProjectName(data.name);
+    setIsVisible(Boolean(data.visibility));
+    setNodes(clientNodeItems);
+    setConnections(canvasData.canvas.connections);
+    setNetworks(canvasData.canvas.networks);
+    setCanvasPosition(canvasData.canvas.position);
+  }, [data]);
+
+  const debouncedOnCodeChange = useMemo(
+    () =>
+      debounce((code: string) => {
+        //formik.setFieldValue("code", e, false);
+      }, 700),
+    []
+  );
+
+  const debouncedOnGraphUpdate = useMemo(
+    () =>
+      debounce((payload) => {
+        generateHttp(JSON.stringify(payload))
+          .then(checkHttpStatus)
+          .then((data) => {
+            if (data["code"].length) {
+              for (let i = 0; i < data["code"].length; ++i) {
+                data["code"][i] = data["code"][i].replace(/(\r\n|\n|\r)/gm, "");
+              }
+
+              const code = data["code"].join("\n");
+              setGeneratedCode(code);
+            }
+          })
+          .catch(() => undefined)
+          .finally(() => undefined);
+      }, 600),
+    []
+  );
+
+  const onCodeUpdate = (code: string) => {
+    debouncedOnCodeChange(code);
+  };
+
+  const onGraphUpdate = (graphData: any) => {
+    const data = { ...graphData };
+    data.version = version;
+    data.networks = stateNetworksRef.current;
+    const payload = generatePayload(data);
+    debouncedOnGraphUpdate(payload);
+  };
+
+  const onCanvasUpdate = (updatedCanvasPosition: any) => {
+    setCanvasPosition({ ...canvasPosition, ...updatedCanvasPosition });
+  };
+
+  const onAddEndpoint = (values: any) => {
+    const sections = flattenLibraries(nodeLibraries);
+    const clientNodeItem = getClientNodeItem(
+      values,
+      ensure(sections.find((l) => l.type === values.type))
+    );
+    clientNodeItem.position = {
+      left: 60 - canvasPosition.left,
+      top: 30 - canvasPosition.top
+    };
+    setNodes({ ...nodes, [clientNodeItem.key]: clientNodeItem });
+
+    if (clientNodeItem.type === "VOLUME") {
+      setVolumeToEdit(clientNodeItem as unknown as IVolumeNodeItem);
+    }
+
+    if (clientNodeItem.type === "SERVICE") {
+      setServiceToEdit(clientNodeItem as unknown as IServiceNodeItem);
+    }
+  };
+
+  const onCreateNetwork = (values: any) => {
+    setNetworks({ ...networks, [values.key]: values });
+  };
+
+  const onUpdateNetwork = (values: any) => {
+    setNetworks({ ...networks, [values.key]: values });
+  };
+
+  const onDeleteNetwork = (uuid: string) => {
+    const _networks = Object.keys(networks).reduce((ret: any, key) => {
+      if (networks[key].key !== uuid) {
+        ret[key] = networks[key];
+      }
+
+      return ret;
+    }, {});
+
+    setNetworks({ ..._networks });
+  };
+
+  const onUpdateEndpoint = (nodeItem: IServiceNodeItem) => {
+    const key = nodeItem.key;
+
+    if (connections.length) {
+      const _connections = [...connections];
+
+      _connections.forEach((conn: any) => {
+        if (key === conn[0]) {
+          const filtered = connections.filter((conn: any) => {
+            return key !== conn[0];
+          }) as any;
+
+          setConnections(filtered);
+          stateConnectionsRef.current = filtered;
+        }
+      });
+    }
+
+    if (
+      nodeItem.serviceConfig?.depends_on &&
+      Array.isArray(nodeItem.serviceConfig.depends_on)
+    ) {
+      nodeItem.serviceConfig.depends_on.forEach((dep: string) => {
+        const depObject = Object.keys(nodes).find((key: string) => {
+          const node = nodes[key];
+          if (node.canvasConfig.node_name === dep) {
+            return node;
+          }
+        });
+
+        if (depObject) {
+          onConnectionAttached([key, depObject]);
+        }
+      });
+    }
+
+    setNodes({ ...nodes, [nodeItem.key]: nodeItem });
+  };
+
+  const onConnectionDetached = (data: any) => {
+    if (
+      !stateConnectionsRef.current ||
+      stateConnectionsRef.current.length <= 0
+    ) {
+      return;
+    }
+
+    if (stateNodesRef.current) {
+      const sourceNode = {
+        ...stateNodesRef.current[data[0]]
+      } as IServiceNodeItem;
+      const targetNode = stateNodesRef.current[data[1]];
+      const targetServiceName = targetNode.canvasConfig.node_name;
+      const sourceDependsOn = sourceNode.serviceConfig.depends_on as string[];
+
+      if (sourceDependsOn && sourceDependsOn.length) {
+        if (targetServiceName) {
+          const filtered = sourceDependsOn.filter(
+            (nodeName: string) => nodeName !== targetServiceName
+          );
+
+          if (filtered.length) {
+            sourceNode.serviceConfig.depends_on = filtered;
+          } else {
+            delete sourceNode.serviceConfig.depends_on;
+          }
+        }
+      }
+    }
+
+    const _connections: [[string, string]] = [
+      ...stateConnectionsRef.current
+    ] as any;
+    const existingIndex = getMatchingSetIndex(_connections, data);
+
+    if (existingIndex !== -1) {
+      _connections.splice(existingIndex, 1);
+      setConnections(_connections);
+      stateConnectionsRef.current = _connections;
+    }
+  };
+
+  const onConnectionAttached = (data: any) => {
+    if (stateNodesRef.current) {
+      const sourceNode = {
+        ...stateNodesRef.current[data[0]]
+      } as IServiceNodeItem;
+      const targetNode = stateNodesRef.current[data[1]];
+      const targetServiceName = targetNode.canvasConfig.node_name;
+      let sourceDependsOn = sourceNode.serviceConfig.depends_on as string[];
+
+      if (sourceDependsOn && sourceDependsOn.length) {
+        if (targetServiceName) {
+          if (!sourceDependsOn.includes(targetServiceName)) {
+            sourceDependsOn.push(targetServiceName);
+          }
+        }
+      } else {
+        if (targetServiceName) {
+          sourceDependsOn = [targetServiceName];
+        }
+      }
+
+      sourceNode.serviceConfig.depends_on = sourceDependsOn;
+    }
+
+    if (stateConnectionsRef.current && stateConnectionsRef.current.length > 0) {
+      const _connections: [[string, string]] = [
+        ...stateConnectionsRef.current
+      ] as any;
+      const existingIndex = getMatchingSetIndex(_connections, data);
+      if (existingIndex === -1) {
+        _connections.push(data);
+      }
+      setConnections(_connections);
+    } else {
+      setConnections([data]);
+    }
+  };
+
+  const onRemoveEndpoint = (node: IServiceNodeItem | IVolumeNodeItem) => {
+    setNodes({ ...omit(nodes, node.key) });
+    eventBus.dispatch("NODE_DELETED", { message: { node: node } });
+  };
+
+  const versionChange = (e: any) => {
+    setVersion(e.target.value);
+  };
+
+  useEffect(() => {
+    if (!generatedCode) {
+      return;
+    }
+
+    if (language === "json") {
+      setFormattedCode(JSON.stringify(YAML.parse(generatedCode), null, 2));
+    }
+
+    if (language === "yaml") {
+      setFormattedCode(generatedCode);
+    }
+  }, [language, generatedCode]);
+
+  useEffect(() => {
+    eventBus.dispatch("GENERATE", {
+      message: {
+        id: ""
+      }
+    });
+  }, [version]);
+
+  if (!isFetching) {
+    if (!error) {
+      return (
+        <>
+          {showNetworksModal ? (
+            <ModalNetwork
+              networks={networks}
+              onHide={() => setShowNetworksModal(false)}
+              onCreateNetwork={(values: any) => onCreateNetwork(values)}
+              onUpdateNetwork={(values: any) => onUpdateNetwork(values)}
+              onDeleteNetwork={(uuid: string) => onDeleteNetwork(uuid)}
+            />
+          ) : null}
+
+          {showVolumesModal ? (
+            <CreateVolumeModal
+              onHide={() => setShowVolumesModal(false)}
+              onAddEndpoint={(values: any) => onAddEndpoint(values)}
+            />
+          ) : null}
+
+          {showModalCreateService ? (
+            <CreateServiceModal
+              onHide={() => setShowModalCreateService(false)}
+              onAddEndpoint={(values: any) => onAddEndpoint(values)}
+            />
+          ) : null}
+
+          {serviceToEdit ? (
+            <ModalServiceEdit
+              node={serviceToEdit}
+              onHide={() => setServiceToEdit(null)}
+              onUpdateEndpoint={(values: any) => onUpdateEndpoint(values)}
+            />
+          ) : null}
+
+          {serviceToDelete ? (
+            <ModalConfirmDelete
+              onHide={() => setServiceToDelete(null)}
+              onConfirm={() => {
+                onRemoveEndpoint(serviceToDelete);
+                setServiceToDelete(null);
+              }}
+            />
+          ) : null}
+
+          {volumeToEdit ? (
+            <EditVolumeModal
+              node={volumeToEdit}
+              onHide={() => setVolumeToEdit(null)}
+              onUpdateEndpoint={(values: any) => onUpdateEndpoint(values)}
+            />
+          ) : null}
+
+          {volumeToDelete ? (
+            <ModalConfirmDelete
+              onHide={() => setServiceToDelete(null)}
+              onConfirm={() => {
+                onRemoveEndpoint(volumeToDelete);
+                setVolumeToDelete(null);
+              }}
+            />
+          ) : null}
+
+          <div className="md:pl-16 flex flex-col flex-1">
+            <div className="px-4 py-3 border-b border-gray-200">
+              <form
+                className="flex flex-col space-y-2 md:space-y-0 md:flex-row md:justify-between items-center"
+                autoComplete="off"
+              >
+                <input
+                  className={`
+                  bg-gray-100
+                  appearance-none
+                  w-full
+                  md:w-1/2
+                  lg:w-1/3
+                  block
+                  text-gray-700
+                  border
+                  border-gray-100
+                  dark:bg-gray-900
+                  dark:text-white
+                  dark:border-gray-900
+                  rounded
+                  py-2
+                  px-3
+                  leading-tight
+                  focus:outline-none
+                  focus:border-indigo-400
+                  focus:ring-0
+                `}
+                  type="text"
+                  placeholder="Project name"
+                  autoComplete="off"
+                  id="name"
+                  name="name"
+                  onChange={handleNameChange}
+                  value={projectName}
+                />
+
+                <div className="flex flex-col space-y-2 w-full justify-end mb-4  md:flex-row md:space-y-0 md:space-x-2 md:mb-0">
+                  {isAuthenticated && (
+                    <VisibilitySwitch
+                      isVisible={isVisible}
+                      onToggle={() => {
+                        setIsVisible(!isVisible);
+                      }}
+                    />
+                  )}
+
+                  <button
+                    onClick={() => onSave()}
+                    type="button"
+                    className="btn-util text-white bg-green-600 hover:bg-green-700 sm:w-auto"
+                  >
+                    <div className="flex justify-center items-center space-x-2 mx-auto">
+                      {updateProjectMutation.isLoading && (
+                        <Spinner className="w-4 h-4 text-green-300" />
+                      )}
+                      {createProjectMutation.isLoading && (
+                        <Spinner className="w-4 h-4 text-green-300" />
+                      )}
+                      <span>Save</span>
+                    </div>
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            <div className="flex flex-grow relative">
+              <div
+                className="w-full overflow-hidden md:w-2/3 z-40"
+                style={{ height: height - 64 }}
+              >
+                <div className="relative h-full">
+                  <div className="absolute top-0 right-0 z-40">
+                    <div className="flex space-x-2 p-2">
+                      <button
+                        className="flex space-x-1 btn-util"
+                        type="button"
+                        onClick={() => setShowModalCreateService(true)}
+                      >
+                        <CubeIcon className="w-4" />
+                        <span>Add service</span>
+                      </button>
+
+                      <button
+                        className="flex space-x-1 btn-util"
+                        type="button"
+                        onClick={() => setShowVolumesModal(true)}
+                      >
+                        <FolderAddIcon className="w-4" />
+                        <span>Add volume</span>
+                      </button>
+
+                      <button
+                        className="flex space-x-1 btn-util"
+                        type="button"
+                        onClick={() => setShowNetworksModal(true)}
+                      >
+                        <GlobeAltIcon className="w-4" />
+                        <span>Networks</span>
+                      </button>
+                    </div>
+                  </div>
+
+                  <Canvas
+                    nodes={nodes}
+                    connections={connections}
+                    canvasPosition={canvasPosition}
+                    onNodeUpdate={(node: IServiceNodePosition) =>
+                      onNodeUpdate(node)
+                    }
+                    onGraphUpdate={(graphData: any) => onGraphUpdate(graphData)}
+                    onCanvasUpdate={(canvasData: any) =>
+                      onCanvasUpdate(canvasData)
+                    }
+                    onConnectionAttached={(connectionData: any) =>
+                      onConnectionAttached(connectionData)
+                    }
+                    onConnectionDetached={(connectionData: any) =>
+                      onConnectionDetached(connectionData)
+                    }
+                    setServiceToEdit={(node: IServiceNodeItem) =>
+                      setServiceToEdit(node)
+                    }
+                    setServiceToDelete={(node: IServiceNodeItem) =>
+                      setServiceToDelete(node)
+                    }
+                    setVolumeToEdit={(node: IVolumeNodeItem) =>
+                      setVolumeToEdit(node)
+                    }
+                    setVolumeToDelete={(node: IVolumeNodeItem) =>
+                      setVolumeToDelete(node)
+                    }
+                  />
+                </div>
+              </div>
+
+              <div className="group code-column w-1/2 md:w-1/3 absolute top-0 right-0 sm:relative z-40 md:z-30">
+                <div
+                  className={`absolute top-0 left-0 right-0 z-10 flex justify-end p-1 space-x-2 group-hover:visible invisible`}
+                >
+                  <select
+                    id="version"
+                    onChange={versionChange}
+                    value={version}
+                    className="input-util w-min pr-8"
+                  >
+                    <option value="1">v 1</option>
+                    <option value="2">v 2</option>
+                    <option value="3">v 3</option>
+                  </select>
+
+                  <button
+                    className={`btn-util ${
+                      language === "json" ? `btn-util-selected` : ``
+                    }`}
+                    onClick={() => setLanguage("json")}
+                  >
+                    json
+                  </button>
+                  <button
+                    className={`btn-util ${
+                      language === "yaml" ? `btn-util-selected` : ``
+                    }`}
+                    onClick={() => setLanguage("yaml")}
+                  >
+                    yaml
+                  </button>
+                  <button className="btn-util" type="button" onClick={copy}>
+                    {copyText}
+                  </button>
+                </div>
+
+                <CodeEditor
+                  data={formattedCode}
+                  language={language}
+                  onChange={(e: any) => {
+                    onCodeUpdate(e);
+                  }}
+                  disabled={true}
+                  lineWrapping={false}
+                  height={height - 64}
+                />
+              </div>
+            </div>
+          </div>
+        </>
+      );
+    }
+
+    if (error) {
+      return (
+        <div
+          className="text-center"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "calc(60vh - 120px)"
+          }}
+        >
+          <h3 className="text-2xl font-medium text-gray-900">
+            {(error as any)?.response.status === 404 ? <>404</> : <>Oops...</>}
+          </h3>
+          <p className="mt-1 text-sm text-gray-500">
+            Either this project does not exist, it is private or the link is
+            wrong.
+          </p>
+        </div>
+      );
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center items-stretch min-h-screen align-middle">
+      <Spinner className="w-4 h-4 m-auto dark:text-blue-400 text-blue-600"></Spinner>
+    </div>
+  );
+}
diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/kubernetes/index.tsx
similarity index 94%
rename from services/frontend/src/components/Project/index.tsx
rename to services/frontend/src/components/Project/kubernetes/index.tsx
index 01328d2..8fbb37d 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/services/frontend/src/components/Project/kubernetes/index.tsx
@@ -9,43 +9,43 @@ import {
   IVolumeNodeItem,
   IServiceNodePosition,
   IProject
-} from "../../types";
-import eventBus from "../../events/eventBus";
+} from "../../../types";
+import eventBus from "../../../events/eventBus";
 import { useMutation } from "react-query";
 import {
   useProject,
   useUpdateProject,
   createProject
-} from "../../hooks/useProject";
-import useWindowDimensions from "../../hooks/useWindowDimensions";
-import { generatePayload } from "../../utils/generators";
-import { nodeLibraries } from "../../utils/data/libraries";
+} from "../../../hooks/useProject";
+import useWindowDimensions from "../../../hooks/useWindowDimensions";
+import { generatePayload } from "../../../utils/generators";
+import { nodeLibraries } from "../../../utils/data/libraries";
 import {
   getClientNodeItem,
   flattenLibraries,
   ensure,
   getClientNodesAndConnections,
   getMatchingSetIndex
-} from "../../utils";
-import { checkHttpStatus } from "../../services/helpers";
-import { generateHttp } from "../../services/generate";
-import { Canvas } from "../Canvas";
-import Spinner from "../global/Spinner";
-import ModalConfirmDelete from "../modals/ConfirmDelete";
-import CreateServiceModal from "../modals/docker-compose/service/Create";
-import ModalServiceEdit from "../modals/docker-compose/service/Edit";
-import ModalNetwork from "../modals/docker-compose/network";
-import CreateVolumeModal from "../modals/docker-compose/volume/CreateVolumeModal";
-import EditVolumeModal from "../modals/docker-compose/volume/EditVolumeModal";
-import CodeEditor from "../CodeEditor";
-import { useTitle } from "../../hooks";
-import VisibilitySwitch from "../global/VisibilitySwitch";
+} from "../../../utils";
+import { checkHttpStatus } from "../../../services/helpers";
+import { generateHttp } from "../../../services/generate";
+import { Canvas } from "../../Canvas";
+import Spinner from "../../global/Spinner";
+import ModalConfirmDelete from "../../modals/ConfirmDelete";
+import CreateServiceModal from "../../modals/docker-compose/service/Create";
+import ModalServiceEdit from "../../modals/docker-compose/service/Edit";
+import ModalNetwork from "../../modals/docker-compose/network";
+import CreateVolumeModal from "../../modals/docker-compose/volume/CreateVolumeModal";
+import EditVolumeModal from "../../modals/docker-compose/volume/EditVolumeModal";
+import CodeEditor from "../../CodeEditor";
+import { useTitle } from "../../../hooks";
+import VisibilitySwitch from "../../global/VisibilitySwitch";
 
 interface IProjectProps {
   isAuthenticated: boolean;
 }
 
-export default function Project(props: IProjectProps) {
+export default function KubernetesProject(props: IProjectProps) {
   const { isAuthenticated } = props;
   const { uuid } = useParams<{ uuid: string }>();
   const { height } = useWindowDimensions();
@@ -126,6 +126,7 @@ export default function Project(props: IProjectProps) {
     const payload: IProjectPayload = {
       name: projectName,
       visibility: +isVisible,
+      project_type: 1,
       data: {
         canvas: {
           position: canvasPosition,
diff --git a/services/frontend/src/components/Projects/PreviewBlock.tsx b/services/frontend/src/components/Projects/PreviewBlock.tsx
index 9840361..1458e1c 100644
--- a/services/frontend/src/components/Projects/PreviewBlock.tsx
+++ b/services/frontend/src/components/Projects/PreviewBlock.tsx
@@ -25,8 +25,14 @@ const PreviewBlock = (props: IPreviewBlockProps) => {
     setIsHovering(false);
   };
 
-  const handleClick = () => {
-    navigate(`/projects/${project.uuid}`);
+  const handleClick = (e: any) => {
+    if (project.project_type === 0) {
+      navigate(`/projects/docker-compose/${project.uuid}`);
+    }
+
+    if (project.project_type === 1) {
+      navigate(`/projects/kubernetes/${project.uuid}`);
+    }
   };
 
   const onDelete = (e: any) => {