Merge pull request #92 from ctk-hq/feat/dep-forms

Add network and depends_on fields

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"

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)
     }
   };
 };

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 });
   };
 

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 {