refactor: project data, remove old interfaces, add node icon component

services/frontend/src/components/Canvas/NodeIcon.tsx

@@ -0,0 +1,28 @@
+import { DatabaseIcon, ServerIcon, ChipIcon } from "@heroicons/react/solid";
+
+type NodeIconProps = {
+  nodeType: string;
+};
+
+const NodeIcon = ({ nodeType }: NodeIconProps) => {
+  switch (nodeType) {
+    case "SERVICE":
+      return (
+        <ServerIcon className="w-3 h-3 text-gray-500 absolute top-2 right-2" />
+      );
+    case "VOLUME":
+      return (
+        <DatabaseIcon className="w-3 h-3 text-gray-500 absolute top-2 right-2" />
+      );
+    case "NETWORK":
+      return (
+        <ChipIcon className="w-3 h-3 text-gray-500 absolute top-2 right-2" />
+      );
+    default:
+      return (
+        <ServerIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
+      );
+  }
+};
+
+export default NodeIcon;

services/frontend/src/components/Canvas/ServiceNode.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { ServerIcon } from "@heroicons/react/outline";
 import { truncateStr } from "../../utils";
 import { IServiceNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
+import NodeIcon from "./NodeIcon";
 
 interface INodeProps {
   node: IServiceNodeItem;
@@ -56,9 +56,9 @@ export default function ServiceNode(props: INodeProps) {
       )}
       <div className="relative node-label w-full py-2 px-4">
         <>
-          {node.canvasConfig.service_name && (
+          {node.canvasConfig.node_name && (
             <div className="text-sm font-semibold overflow-x-hidden">
-              {truncateStr(node.canvasConfig.service_name, 12)}
+              {truncateStr(node.canvasConfig.node_name, 12)}
             </div>
           )}
 
@@ -68,7 +68,7 @@ export default function ServiceNode(props: INodeProps) {
             </div>
           )}
 
-          <ServerIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
+          <NodeIcon nodeType={node.type} />
         </>
       </div>
     </div>

services/frontend/src/components/Canvas/VolumeNode.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { DatabaseIcon } from "@heroicons/react/outline";
 import { truncateStr } from "../../utils";
 import { IVolumeNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
+import NodeIcon from "./NodeIcon";
 
 interface INodeProps {
   node: IVolumeNodeItem;
@@ -62,7 +62,7 @@ export default function VolumeNode(props: INodeProps) {
             </div>
           )}
 
-          <DatabaseIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
+          <NodeIcon nodeType={node.type} />
         </>
       </div>
     </div>

services/frontend/src/components/Modal/Service/Create.tsx

@@ -7,7 +7,7 @@ import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
 import { serviceConfigCanvasInitialValues } from "../../../utils";
-import { CallbackFunction } from "../../../types";
+import { CallbackFunction, ICanvasConfig, IService } from "../../../types";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -18,12 +18,13 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
   const handleCreate = (values: any, formik: any) => {
+    console.log(values);
     onAddEndpoint(values);
     formik.resetForm();
   };
   const validationSchema = yup.object({
     canvasConfig: yup.object({
-      service_name: yup
+      node_name: yup
         .string()
         .max(256, "service name should be 256 characters or less")
         .required("service name is required")
@@ -102,6 +103,7 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
               }}
               enableReinitialize={true}
               onSubmit={(values, formik) => {
+                console.log(values);
                 handleCreate(values, formik);
               }}
               validationSchema={validationSchema}
@@ -147,8 +149,7 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                       className="btn-util"
                       type="button"
                       onClick={() => {
-                        onAddEndpoint(formik.values);
-                        formik.resetForm();
+                        formik.submitForm();
                       }}
                     >
                       Add

services/frontend/src/components/Modal/Service/Edit.tsx

@@ -32,7 +32,7 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
   };
   const validationSchema = yup.object({
     canvasConfig: yup.object({
-      service_name: yup
+      node_name: yup
         .string()
         .max(256, "service name should be 256 characters or less")
         .required("service name is required")

services/frontend/src/components/Modal/Service/General.tsx

@@ -3,7 +3,7 @@ import TextField from "../../global/FormElements/InputField";
 const General = () => {
   return (
     <>
-      <TextField label="Service name" name="canvasConfig.service_name" />
+      <TextField label="Service name" name="canvasConfig.node_name" />
       <TextField label="Container name" name="serviceConfig.container_name" />
     </>
   );

services/frontend/src/components/Modal/Volume/Create.tsx

@@ -4,7 +4,10 @@ import * as yup from "yup";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Labels from "./Labels";
-import { topLevelVolumeConfigInitialValues } from "../../../utils";
+import {
+  topLevelVolumeConfigInitialValues,
+  volumeConfigCanvasInitialValues
+} from "../../../utils";
 import { CallbackFunction } from "../../../types";
 
 interface IModalVolumeCreate {
@@ -68,6 +71,9 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => {
 
             <Formik
               initialValues={{
+                canvasConfig: {
+                  ...volumeConfigCanvasInitialValues()
+                },
                 volumeConfig: {
                   ...topLevelVolumeConfigInitialValues()
                 },

services/frontend/src/components/Project/index.tsx

@@ -110,13 +110,7 @@ export default function Project() {
           position: canvasPosition,
           nodes: nodes,
           connections: connections
-        },
-        configs: [],
-        networks: [],
-        secrets: [],
-        services: nodes,
-        version: 3,
-        volumes: []
+        }
       }
     };
 

services/frontend/src/types/index.ts

@@ -26,14 +26,6 @@ export interface IProject {
   modified_at: string;
 }
 
-export interface IContainer {
-  name: string;
-  args?: string[];
-  command?: string[];
-  image: string;
-  imagePullPolicy: string;
-}
-
 export interface INodeLibraryItem {
   id: number;
   name: string;
@@ -64,7 +56,8 @@ export interface IFlatConnection {
 }
 
 export interface ICanvasConfig {
-  service_name: string;
+  node_name?: string;
+  node_icon?: string;
 }
 
 export interface IGraphData {
@@ -321,12 +314,6 @@ export interface IService {
       };
   volumes_from: string[];
   working_dir: string;
-  tag: string;
-}
-
-export interface IDockerCompose {
-  version: string;
-  services: IService[];
 }
 
 export interface IServiceNodeItem extends INodeItem {
@@ -353,12 +340,6 @@ export interface IProjectPayload {
       nodes: any;
       connections: any;
     };
-    configs: [];
-    networks: [];
-    secrets: [];
-    services: any;
-    version: number;
-    volumes: [];
   };
 }
 

services/frontend/src/utils/data/serviceNode.ts

@@ -1,2 +0,0 @@
-export const ServiceNodeConfiguration =
-  '{"canvasConfig":{"name":""},"key":"service","type":"SERVICE","inputs":["op_source"],"outputs":[]}';

services/frontend/src/utils/index.ts

@@ -106,12 +106,32 @@ export const attachUUID = (key: string): string => {
   return key + "-" + uuidv4();
 };
 
+export const setNodeIcon = (nodeType: string) => {
+  switch (nodeType) {
+    case "service":
+      return "ServerIcon";
+    case "volume":
+      return "DatabaseIcon";
+    case "network":
+      return "ChipIcon";
+    default:
+      return "ServerIcon";
+  }
+};
+
 export const getClientNodeItem = (
   nodeItem: IServiceNodeItem,
   library: INodeLibraryItem
 ): IServiceNodeItem => {
   const uniqueKey = attachUUID(nodeItem.key);
 
+  if (
+    nodeItem.canvasConfig.node_icon &&
+    nodeItem.canvasConfig.node_icon.length === 0
+  ) {
+    nodeItem.canvasConfig.node_icon = setNodeIcon(nodeItem.type);
+  }
+
   return {
     ...nodeItem,
     key: uniqueKey,
@@ -188,9 +208,16 @@ export const topLevelNetworkConfigInitialValues =
     };
   };
 
+export const volumeConfigCanvasInitialValues = (): ICanvasConfig => {
+  return {
+    node_icon: ""
+  };
+};
+
 export const serviceConfigCanvasInitialValues = (): ICanvasConfig => {
   return {
-    service_name: "unnamed"
+    node_name: "unnamed",
+    node_icon: ""
   };
 };