From fa23834235e6a95a42af8e7de63f6e6f9695381c Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Wed, 3 Aug 2022 14:18:16 +0300
Subject: [PATCH] feat: add network and depends_on fields

---
 .../src/components/Modal/service/General.tsx  | 28 +++++++++++++++++++
 .../components/Modal/service/form-utils.ts    | 16 +++++++++--
 .../frontend/src/components/Project/index.tsx | 16 ++++++++++-
 services/frontend/src/types/index.ts          |  2 ++
 4 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/General.tsx b/services/frontend/src/components/Modal/service/General.tsx
index 5b10f15..64c8c5e 100644
--- a/services/frontend/src/components/Modal/service/General.tsx
+++ b/services/frontend/src/components/Modal/service/General.tsx
@@ -68,6 +68,34 @@ const General = () => {
         }}
       />
 
+      <Records
+        name="dependsOn"
+        title="Depends on"
+        fields={(index: number) => [
+          {
+            name: `dependsOn[${index}]`,
+            placeholder: "Service name",
+            required: false,
+            type: "text"
+          }
+        ]}
+        newValue={""}
+      />
+
+      <Records
+        name="networks"
+        title="Networks"
+        fields={(index: number) => [
+          {
+            name: `networks[${index}]`,
+            placeholder: "Network name",
+            required: false,
+            type: "text"
+          }
+        ]}
+        newValue={""}
+      />
+
       <Records
         name="labels"
         title="Labels"
diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 14cbc15..3d01fa5 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -106,11 +106,13 @@ const initialValues: IEditServiceForm = {
   imageTag: "",
   serviceName: "",
   containerName: "",
+  networks: [],
   profiles: [],
   ports: [],
   environmentVariables: [],
   volumes: [],
-  labels: []
+  labels: [],
+  dependsOn: []
 };
 
 yup.addMethod<yup.StringSchema>(yup.string, "port", function (message) {
@@ -288,10 +290,12 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
   const {
     build,
     deploy,
+    depends_on,
     image,
     container_name = "",
     environment,
     volumes,
+    networks,
     ports,
     profiles,
     labels
@@ -458,6 +462,7 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
         accessMode
       };
     }),
+    networks: (networks as string[]) ?? (initialValues.networks as string[]),
     ports: ports0.map((port) => {
       const slashIndex = port.lastIndexOf("/");
       const protocol = slashIndex >= 0 ? port.substring(slashIndex + 1) : "";
@@ -475,7 +480,8 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
     }),
     profiles: profiles ?? initialValues.profiles,
     labels:
-      extractObjectOrArray("=", "key", "value", labels) ?? initialValues.labels
+      extractObjectOrArray("=", "key", "value", labels) ?? initialValues.labels,
+    dependsOn: (depends_on as string[]) ?? (initialValues.dependsOn as string[])
   };
 };
 
@@ -486,9 +492,11 @@ export const getFinalValues = (
   const {
     build,
     deploy,
+    dependsOn,
     environmentVariables,
     ports,
     profiles,
+    networks,
     volumes,
     labels
   } = values;
@@ -590,6 +598,7 @@ export const getFinalValues = (
             (volume.accessMode ? `:${volume.accessMode}` : "")
         )
       ),
+      networks: pruneArray(networks),
       ports: pruneArray(
         ports.map(
           (port) =>
@@ -599,7 +608,8 @@ export const getFinalValues = (
         )
       ),
       profiles: pruneArray(profiles),
-      labels: packArrayAsObject(labels, "key", "value")
+      labels: packArrayAsObject(labels, "key", "value"),
+      depends_on: pruneArray(dependsOn)
     }
   };
 };
diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx
index 907ee6d..7661b4f 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/services/frontend/src/components/Project/index.tsx
@@ -69,7 +69,7 @@ export default function Project() {
   const [language, setLanguage] = useState("yaml");
   const [version, setVersion] = useState("3");
   const [copyText, setCopyText] = useState("Copy");
-  const [nodes, setNodes] = useState({});
+  const [nodes, setNodes] = useState<Record<string, any>>({});
   const [connections, setConnections] = useState<[[string, string]] | []>([]);
   const [networks, setNetworks] = useState<Record<string, any>>({});
   const [projectName, setProjectName] = useState(
@@ -278,6 +278,20 @@ export default function Project() {
   };
 
   const onUpdateEndpoint = (nodeItem: IServiceNodeItem) => {
+    const key = nodeItem.key;
+
+    if (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;
+          }
+        });
+
+        onConnectionAttached([key, depObject]);
+      });
+    }
     setNodes({ ...nodes, [nodeItem.key]: nodeItem });
   };
 
diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts
index 913acf3..ff34d93 100644
--- a/services/frontend/src/types/index.ts
+++ b/services/frontend/src/types/index.ts
@@ -454,6 +454,7 @@ export interface IEditServiceForm {
   imageName: string;
   imageTag: string;
   containerName: string;
+  networks: string[];
   profiles: string[];
   ports: {
     hostPort: string;
@@ -473,6 +474,7 @@ export interface IEditServiceForm {
     key: string;
     value: string;
   }[];
+  dependsOn: string[];
 }
 
 export interface IEditVolumeForm {