From 0ac83d064fb5933fa9dcc4cb04c786614a472f18 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 20:35:21 +0530
Subject: [PATCH 01/18] fix(frontend): fixed logic for generating final values
 for service forms

---
 .../components/Modal/service/form-utils.ts    | 81 ++++++++-----------
 1 file changed, 35 insertions(+), 46 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 286b6a5..190cb14 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -1,6 +1,5 @@
 import type { IEditServiceForm, IServiceNodeItem } from "../../../types";
 import * as yup from "yup";
-import lodash from "lodash";
 import { checkArray } from "../../../utils/forms";
 
 const initialValues: IEditServiceForm = {
@@ -153,51 +152,41 @@ export const getFinalValues = (
 ): IServiceNodeItem => {
   const { environmentVariables, ports, volumes, labels } = values;
 
-  return lodash.mergeWith(
-    lodash.cloneDeep(previous) || {
-      key: "service",
-      type: "SERVICE",
-      inputs: ["op_source"],
-      outputs: [],
-      config: {}
-    },
-    {
-      canvasConfig: {
-        node_name: values.serviceName
-      },
-      serviceConfig: {
-        image: `${values.imageName}${
-          values.imageTag ? `:${values.imageTag}` : ""
-        }`,
-        container_name: values.containerName,
-        environment: environmentVariables.map(
-          (variable) =>
-            `${variable.key}${variable.value ? `=${variable.value}` : ""}`
-        ),
-        volumes: volumes.length
-          ? volumes.map(
-              (volume) =>
-                volume.name +
-                (volume.containerPath ? `:${volume.containerPath}` : "") +
-                (volume.accessMode ? `:${volume.accessMode}` : "")
-            )
-          : [],
-        ports: ports.map(
-          (port) =>
-            port.hostPort +
-            (port.containerPort ? `:${port.containerPort}` : "") +
-            (port.protocol ? `/${port.protocol}` : "")
-        ),
-        labels: labels.map(
-          (label) => `${label.key}${label.value ? `=${label.value}` : ""}`
-        )
-      }
+  return {
+    key: previous?.key ?? "service",
+    type: "SERVICE",
+    inputs: previous?.inputs ?? ["op_source"],
+    outputs: previous?.outputs ?? [],
+    config: (previous as any)?.config ?? {},
+    canvasConfig: {
+      node_name: values.serviceName
     },
-    (obj, src) => {
-      if (!lodash.isNil(src)) {
-        return src;
-      }
-      return obj;
+    serviceConfig: {
+      image: `${values.imageName}${
+        values.imageTag ? `:${values.imageTag}` : ""
+      }`,
+      container_name: values.containerName,
+      environment: environmentVariables.map(
+        (variable) =>
+          `${variable.key}${variable.value ? `=${variable.value}` : ""}`
+      ),
+      volumes: volumes.length
+        ? volumes.map(
+            (volume) =>
+              volume.name +
+              (volume.containerPath ? `:${volume.containerPath}` : "") +
+              (volume.accessMode ? `:${volume.accessMode}` : "")
+          )
+        : [],
+      ports: ports.map(
+        (port) =>
+          port.hostPort +
+          (port.containerPort ? `:${port.containerPort}` : "") +
+          (port.protocol ? `/${port.protocol}` : "")
+      ),
+      labels: labels.map(
+        (label) => `${label.key}${label.value ? `=${label.value}` : ""}`
+      )
     }
-  ) as any;
+  } as any;
 };

From 666dce3ea0c497bd648599eb0bf4a50e49026485 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 20:36:30 +0530
Subject: [PATCH 02/18] fix(frontend): fixed incorrect encoding of labels in
 service forms

---
 .../src/components/Modal/service/form-utils.ts    | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 190cb14..67b717f 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -136,13 +136,10 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
 
       return { hostPort, containerPort, protocol } as any;
     }),
-    labels: labels0.map((label) => {
-      const [key, value] = label.split("=");
-      return {
-        key,
-        value
-      };
-    })
+    labels: Object.entries(labels as any).map(([key, value]: any) => ({
+      key,
+      value
+    }))
   };
 };
 
@@ -184,8 +181,8 @@ export const getFinalValues = (
           (port.containerPort ? `:${port.containerPort}` : "") +
           (port.protocol ? `/${port.protocol}` : "")
       ),
-      labels: labels.map(
-        (label) => `${label.key}${label.value ? `=${label.value}` : ""}`
+      labels: Object.fromEntries(
+        labels.map((label) => [label.key, label.value])
       )
     }
   } as any;

From 7576d1693bad2f1228373fcedeeb9a60a5bf6e8b Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 20:46:49 +0530
Subject: [PATCH 03/18] fix(frontend): fixed logic for generating final values
 for volume forms

---
 .../src/components/Modal/volume/form-utils.ts | 38 +++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index 8b986bc..00db161 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -58,32 +58,22 @@ export const getFinalValues = (
 ): IVolumeNodeItem => {
   const { labels } = values;
 
-  return lodash.mergeWith(
-    lodash.cloneDeep(previous) || {
-      key: "volume",
-      type: "VOLUME",
-      inputs: [],
-      outputs: [],
-      config: {}
-    },
-    {
-      canvasConfig: {
-        node_name: values.entryName
-      },
-      volumeConfig: {
-        name: values.volumeName,
-        labels: labels.map(
-          (label) => `${label.key}${label.value ? `=${label.value}` : ""}`
-        )
-      }
+  return {
+    key: previous?.key ?? "volume",
+    type: "VOLUME",
+    inputs: previous?.inputs ?? [],
+    outputs: previous?.outputs ?? [],
+    config: (previous as any)?.config ?? {},
+    canvasConfig: {
+      node_name: values.entryName
     },
-    (obj, src) => {
-      if (!lodash.isNil(src)) {
-        return src;
-      }
-      return obj;
+    volumeConfig: {
+      name: values.volumeName,
+      labels: labels.map(
+        (label) => `${label.key}${label.value ? `=${label.value}` : ""}`
+      )
     }
-  ) as any;
+  } as any;
 };
 
 export const tabs = [

From 6237bc0773c1a9976abd6f0c2b8838d185220eaf Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 20:47:35 +0530
Subject: [PATCH 04/18] fix(frontend): fixed incorrect encoding of labels in
 volume forms

---
 .../src/components/Modal/volume/form-utils.ts | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index 00db161..65733da 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -1,7 +1,5 @@
-import lodash from "lodash";
 import * as yup from "yup";
 import { IEditVolumeForm, IVolumeNodeItem } from "../../../types";
-import { checkArray } from "../../../utils/forms";
 
 export const validationSchema = yup.object({
   entryName: yup
@@ -36,19 +34,14 @@ export const getInitialValues = (node?: IVolumeNodeItem): IEditVolumeForm => {
   const { node_name = "" } = canvasConfig;
   const { name = "", labels } = volumeConfig;
 
-  const labels0: string[] = checkArray(labels, "labels");
-
   return {
     ...initialValues,
     entryName: node_name,
     volumeName: name,
-    labels: labels0.map((label) => {
-      const [key, value] = label.split("=");
-      return {
-        key,
-        value
-      };
-    })
+    labels: Object.entries(labels as any).map(([key, value]: any) => ({
+      key,
+      value
+    }))
   };
 };
 
@@ -69,8 +62,8 @@ export const getFinalValues = (
     },
     volumeConfig: {
       name: values.volumeName,
-      labels: labels.map(
-        (label) => `${label.key}${label.value ? `=${label.value}` : ""}`
+      labels: Object.fromEntries(
+        labels.map((label) => [label.key, label.value])
       )
     }
   } as any;

From bc89bd860af859b0c59f2ed747e5bbd5d950386b Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 21:12:12 +0530
Subject: [PATCH 05/18] feat(frontend): updated `INetworkTopLevel` interface

 * Made `position` optional in `INodeItem`.
---
 services/frontend/src/types/index.ts | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts
index 76db33c..0ecf0ff 100644
--- a/services/frontend/src/types/index.ts
+++ b/services/frontend/src/types/index.ts
@@ -87,19 +87,15 @@ export interface INetworkTopLevel {
   driver_opts: KeyValPair;
   attachable: boolean;
   enable_ipv6: boolean;
-  ipam: {
-    driver: string;
-    config: {
-      subnet: string;
-      ip_range: string;
-      gateway: string;
-      aux_addresses: {
-        host1: string;
-        host2: string;
-        host3: string;
-      };
+  ipam?: {
+    driver?: string;
+    config?: {
+      subnet?: string;
+      ip_range?: string;
+      gateway?: string;
+      aux_addresses?: Record<string, string>;
     }[];
-    options: KeyValPair;
+    options?: Record<string, string>;
   };
   internal: boolean;
   labels: string[] | KeyValPair;

From c6f76fa7f33317ffe6918e3799d60636367f64d3 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 21:13:35 +0530
Subject: [PATCH 06/18] fix(frontend): updated to prune empty values from final
 result in network forms

---
 .../components/Modal/network/form-utils.ts    | 68 ++++++++++++-------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index fdaa24f..b5c8843 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -93,24 +93,21 @@ export const getInitialValues = (node?: INetworkNodeItem): IEditNetworkForm => {
     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(
+      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.");
-      }
+    options: Object.keys(ipam?.options ?? {}).map((key) => {
       return {
         key,
-        value: ipam.options[key].toString()
+        value: ipam?.options?.[key].toString() ?? ""
       };
     }),
     labels: Object.entries(labels as any).map(([key, value]: any) => ({
@@ -129,34 +126,55 @@ export const getFinalValues = (
   return {
     key: previous?.key ?? "network",
     type: "NETWORK",
+    position: {
+      left: 0,
+      top: 0
+    },
     inputs: previous?.inputs ?? [],
     outputs: previous?.outputs ?? [],
-    config: (previous as any)?.config ?? {},
     canvasConfig: {
       node_name: values.entryName
     },
     networkConfig: {
       name: values.networkName,
       ipam: {
-        driver,
+        driver: driver ? driver : undefined,
         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
-            ])
-          )
+          subnet: configuration.subnet ? configuration.subnet : undefined,
+          ip_range: configuration.ipRange ? configuration.ipRange : undefined,
+          gateway: configuration.gateway ? configuration.gateway : undefined,
+          aux_addresses: (() => {
+            if (configuration.auxAddresses.length === 0) {
+              return undefined;
+            }
+
+            /* We do not have to worry about empty `hostName` and `ipAddress`
+             * values because Yup would report such values as error.
+             */
+            return Object.fromEntries(
+              configuration.auxAddresses.map((auxAddress) => [
+                auxAddress.hostName,
+                auxAddress.ipAddress
+              ])
+            );
+          })()
         })),
-        options: Object.fromEntries(
-          options.map((option) => [option.key, option.value])
-        )
+        options: (() => {
+          if (options.length === 0) {
+            return undefined;
+          }
+
+          /* We do not have to worry about empty `key` and `value`
+           * values because Yup would report such values as error.
+           */
+          return Object.fromEntries(
+            options.map((option) => [option.key, option.value])
+          );
+        })()
       },
       labels: Object.fromEntries(
         labels.map((label) => [label.key, label.value])
       )
     }
-  } as any;
+  };
 };

From a3e958b529a2218d98992662e7c0ae900b7457b3 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 21:25:16 +0530
Subject: [PATCH 07/18] feat(frontend): created `IPAMConfig` interface

---
 services/frontend/src/types/index.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts
index 0ecf0ff..88d69b0 100644
--- a/services/frontend/src/types/index.ts
+++ b/services/frontend/src/types/index.ts
@@ -82,6 +82,13 @@ export interface IVolumeTopLevel {
   name: string;
 }
 
+export interface IPAMConfig {
+  subnet?: string;
+  ip_range?: string;
+  gateway?: string;
+  aux_addresses?: Record<string, string>;
+}
+
 export interface INetworkTopLevel {
   driver: string;
   driver_opts: KeyValPair;
@@ -89,12 +96,7 @@ export interface INetworkTopLevel {
   enable_ipv6: boolean;
   ipam?: {
     driver?: string;
-    config?: {
-      subnet?: string;
-      ip_range?: string;
-      gateway?: string;
-      aux_addresses?: Record<string, string>;
-    }[];
+    config?: IPAMConfig[];
     options?: Record<string, string>;
   };
   internal: boolean;

From 499a28e4c01db4b0b0a7e9203ee7e59aa36307db Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 21:31:00 +0530
Subject: [PATCH 08/18] feat(frontend): created `pruneObject` and `pruneArray`
 utilities

---
 services/frontend/src/utils/forms.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/services/frontend/src/utils/forms.ts b/services/frontend/src/utils/forms.ts
index 931a359..9704779 100644
--- a/services/frontend/src/utils/forms.ts
+++ b/services/frontend/src/utils/forms.ts
@@ -1,3 +1,5 @@
+import lodash from "lodash";
+
 export const checkArray = <T>(array: any, name: string): T => {
   if (!Array.isArray(array)) {
     throw new Error(
@@ -6,3 +8,19 @@ export const checkArray = <T>(array: any, name: string): T => {
   }
   return array as unknown as T;
 };
+
+export const pruneArray = <T>(array: (T | undefined)[]): T[] | undefined => {
+  const result = array.filter(Boolean);
+  if (array.length === 0) {
+    return undefined;
+  }
+  return result as T[];
+};
+
+export const pruneObject = <T>(object: T): unknown | undefined => {
+  const result = lodash.pickBy(object ?? {}, (value) => value !== undefined);
+  if (Object.keys(result).length === 0) {
+    return undefined;
+  }
+  return result as unknown;
+};

From 36353bd7b3eb145640b4b05e72f93a4494f062de Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 21:31:23 +0530
Subject: [PATCH 09/18] feat(frontend): updated to prune IPAM object in final
 value

---
 .../components/Modal/network/form-utils.ts    | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index b5c8843..abbce2b 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -1,5 +1,6 @@
 import * as yup from "yup";
-import { IEditNetworkForm, INetworkNodeItem } from "../../../types";
+import { IEditNetworkForm, INetworkNodeItem, IPAMConfig } from "../../../types";
+import { pruneArray, pruneObject } from "../../../utils/forms";
 
 export const validationSchema = yup.object({
   entryName: yup
@@ -139,26 +140,34 @@ export const getFinalValues = (
       name: values.networkName,
       ipam: {
         driver: driver ? driver : undefined,
-        config: configurations.map((configuration) => ({
-          subnet: configuration.subnet ? configuration.subnet : undefined,
-          ip_range: configuration.ipRange ? configuration.ipRange : undefined,
-          gateway: configuration.gateway ? configuration.gateway : undefined,
-          aux_addresses: (() => {
-            if (configuration.auxAddresses.length === 0) {
-              return undefined;
-            }
+        config: pruneArray(
+          configurations.map((configuration) =>
+            pruneObject({
+              subnet: configuration.subnet ? configuration.subnet : undefined,
+              ip_range: configuration.ipRange
+                ? configuration.ipRange
+                : undefined,
+              gateway: configuration.gateway
+                ? configuration.gateway
+                : undefined,
+              aux_addresses: (() => {
+                if (configuration.auxAddresses.length === 0) {
+                  return undefined;
+                }
 
-            /* We do not have to worry about empty `hostName` and `ipAddress`
-             * values because Yup would report such values as error.
-             */
-            return Object.fromEntries(
-              configuration.auxAddresses.map((auxAddress) => [
-                auxAddress.hostName,
-                auxAddress.ipAddress
-              ])
-            );
-          })()
-        })),
+                /* We do not have to worry about empty `hostName` and `ipAddress`
+                 * values because Yup would report such values as error.
+                 */
+                return Object.fromEntries(
+                  configuration.auxAddresses.map((auxAddress) => [
+                    auxAddress.hostName,
+                    auxAddress.ipAddress
+                  ])
+                );
+              })()
+            })
+          )
+        ) as IPAMConfig[],
         options: (() => {
           if (options.length === 0) {
             return undefined;

From 4524ec130288da0bd9b2e6e4346333f7c3043955 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 22:18:47 +0530
Subject: [PATCH 10/18] feat(frontend): removed default value for driver field
 in IPAM form

---
 .../frontend/src/components/Modal/network/form-utils.ts    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index abbce2b..9f29edb 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -13,10 +13,7 @@ export const validationSchema = yup.object({
     .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"),
+  driver: yup.string().max(256, "Driver should be 256 characters or less"),
 
   configurations: yup.array(
     yup.object({
@@ -71,7 +68,7 @@ export const tabs = [
 export const initialValues: IEditNetworkForm = {
   entryName: "",
   networkName: "",
-  driver: "default",
+  driver: "",
   configurations: [],
   options: [],
   labels: []

From 20751b84efdfd1fa6d8034958cad38fb668571bf Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 22:20:53 +0530
Subject: [PATCH 11/18] feat(frontend): created `IIPAM` interface

---
 services/frontend/src/types/index.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts
index 88d69b0..322d68d 100644
--- a/services/frontend/src/types/index.ts
+++ b/services/frontend/src/types/index.ts
@@ -89,16 +89,18 @@ export interface IPAMConfig {
   aux_addresses?: Record<string, string>;
 }
 
+export interface IIPAM {
+  driver?: string;
+  config?: IPAMConfig[];
+  options?: Record<string, string>;
+}
+
 export interface INetworkTopLevel {
   driver: string;
   driver_opts: KeyValPair;
   attachable: boolean;
   enable_ipv6: boolean;
-  ipam?: {
-    driver?: string;
-    config?: IPAMConfig[];
-    options?: Record<string, string>;
-  };
+  ipam?: IIPAM;
   internal: boolean;
   labels: string[] | KeyValPair;
   external: boolean;

From 2791d784c1e28db00e3b1bbc7eeae56204a06129 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 22:21:22 +0530
Subject: [PATCH 12/18] feat(frontend): pruned `ipam` attribute

---
 .../src/components/Modal/network/form-utils.ts        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index 9f29edb..478c45c 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -1,5 +1,10 @@
 import * as yup from "yup";
-import { IEditNetworkForm, INetworkNodeItem, IPAMConfig } from "../../../types";
+import {
+  IEditNetworkForm,
+  IIPAM,
+  INetworkNodeItem,
+  IPAMConfig
+} from "../../../types";
 import { pruneArray, pruneObject } from "../../../utils/forms";
 
 export const validationSchema = yup.object({
@@ -135,7 +140,7 @@ export const getFinalValues = (
     },
     networkConfig: {
       name: values.networkName,
-      ipam: {
+      ipam: pruneObject({
         driver: driver ? driver : undefined,
         config: pruneArray(
           configurations.map((configuration) =>
@@ -177,7 +182,7 @@ export const getFinalValues = (
             options.map((option) => [option.key, option.value])
           );
         })()
-      },
+      }) as IIPAM,
       labels: Object.fromEntries(
         labels.map((label) => [label.key, label.value])
       )

From 49af8559bd25410f6ff2a7937553d12b1b06d6e7 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 22:56:03 +0530
Subject: [PATCH 13/18] fix(frontend): removed any casts in form utils

---
 .../frontend/src/components/Modal/service/form-utils.ts    | 1 -
 .../frontend/src/components/Modal/volume/form-utils.ts     | 7 +++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 67b717f..4ef6f36 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -97,7 +97,6 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
   const environment0: string[] = checkArray(environment, "environment");
   const volumes0: string[] = checkArray(volumes, "volumes");
   const ports0: string[] = checkArray(ports, "ports");
-  const labels0: string[] = checkArray(labels, "labels");
   const [imageName, imageTag] = (image ?? ":").split(":");
 
   return {
diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index 65733da..a3cf2f6 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -54,9 +54,12 @@ export const getFinalValues = (
   return {
     key: previous?.key ?? "volume",
     type: "VOLUME",
+    position: {
+      left: 0,
+      top: 0
+    },
     inputs: previous?.inputs ?? [],
     outputs: previous?.outputs ?? [],
-    config: (previous as any)?.config ?? {},
     canvasConfig: {
       node_name: values.entryName
     },
@@ -66,7 +69,7 @@ export const getFinalValues = (
         labels.map((label) => [label.key, label.value])
       )
     }
-  } as any;
+  };
 };
 
 export const tabs = [

From 0b17569f227e4021284c91884e8d6d40de684890 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 23:04:52 +0530
Subject: [PATCH 14/18] feat(frontend): pruned `labels` attribute in all the
 modals

---
 .../frontend/src/components/Modal/network/form-utils.ts    | 6 +++---
 .../frontend/src/components/Modal/service/form-utils.ts    | 6 +++---
 .../frontend/src/components/Modal/volume/form-utils.ts     | 7 ++++---
 services/frontend/src/types/index.ts                       | 4 ++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index 478c45c..e73e58b 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -183,9 +183,9 @@ export const getFinalValues = (
           );
         })()
       }) as IIPAM,
-      labels: Object.fromEntries(
-        labels.map((label) => [label.key, label.value])
-      )
+      labels: pruneObject(
+        Object.fromEntries(labels.map((label) => [label.key, label.value]))
+      ) as Record<string, string>
     }
   };
 };
diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 4ef6f36..cae855d 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -1,6 +1,6 @@
 import type { IEditServiceForm, IServiceNodeItem } from "../../../types";
 import * as yup from "yup";
-import { checkArray } from "../../../utils/forms";
+import { checkArray, pruneObject } from "../../../utils/forms";
 
 const initialValues: IEditServiceForm = {
   imageName: "",
@@ -180,8 +180,8 @@ export const getFinalValues = (
           (port.containerPort ? `:${port.containerPort}` : "") +
           (port.protocol ? `/${port.protocol}` : "")
       ),
-      labels: Object.fromEntries(
-        labels.map((label) => [label.key, label.value])
+      labels: pruneObject(
+        Object.fromEntries(labels.map((label) => [label.key, label.value]))
       )
     }
   } as any;
diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index a3cf2f6..c19c797 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -1,5 +1,6 @@
 import * as yup from "yup";
 import { IEditVolumeForm, IVolumeNodeItem } from "../../../types";
+import { pruneObject } from "../../../utils/forms";
 
 export const validationSchema = yup.object({
   entryName: yup
@@ -65,9 +66,9 @@ export const getFinalValues = (
     },
     volumeConfig: {
       name: values.volumeName,
-      labels: Object.fromEntries(
-        labels.map((label) => [label.key, label.value])
-      )
+      labels: pruneObject(
+        Object.fromEntries(labels.map((label) => [label.key, label.value]))
+      ) as Record<string, string>
     }
   };
 };
diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts
index 322d68d..e62eaae 100644
--- a/services/frontend/src/types/index.ts
+++ b/services/frontend/src/types/index.ts
@@ -78,7 +78,7 @@ export interface IVolumeTopLevel {
     device: string;
   };
   external: boolean;
-  labels: string[] | KeyValuePair;
+  labels?: string[] | KeyValuePair;
   name: string;
 }
 
@@ -102,7 +102,7 @@ export interface INetworkTopLevel {
   enable_ipv6: boolean;
   ipam?: IIPAM;
   internal: boolean;
-  labels: string[] | KeyValPair;
+  labels?: string[] | KeyValPair;
   external: boolean;
   name: string;
 }

From 0a3da9679872599dfcf81ddc84c29dbbfc0cd4b8 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 23:09:53 +0530
Subject: [PATCH 15/18] fix(frontend): added missing `position` attribute

---
 services/frontend/src/components/Modal/service/form-utils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index cae855d..84921a7 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -151,6 +151,7 @@ export const getFinalValues = (
   return {
     key: previous?.key ?? "service",
     type: "SERVICE",
+    position: { left: 0, top: 0 },
     inputs: previous?.inputs ?? ["op_source"],
     outputs: previous?.outputs ?? [],
     config: (previous as any)?.config ?? {},

From b6ec438d4fa8b1dcf0de6a4da693b930422cfea4 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 23:13:07 +0530
Subject: [PATCH 16/18] fix(frontend): fixed incorrect loading of labels

---
 .../src/components/Modal/network/form-utils.ts         | 10 ++++++----
 .../src/components/Modal/service/form-utils.ts         | 10 ++++++----
 .../frontend/src/components/Modal/volume/form-utils.ts | 10 ++++++----
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index e73e58b..184056c 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -113,10 +113,12 @@ export const getInitialValues = (node?: INetworkNodeItem): IEditNetworkForm => {
         value: ipam?.options?.[key].toString() ?? ""
       };
     }),
-    labels: Object.entries(labels as any).map(([key, value]: any) => ({
-      key,
-      value
-    }))
+    labels: labels
+      ? Object.entries(labels as any).map(([key, value]: any) => ({
+          key,
+          value
+        }))
+      : []
   };
 };
 
diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 84921a7..1b4010e 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -135,10 +135,12 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
 
       return { hostPort, containerPort, protocol } as any;
     }),
-    labels: Object.entries(labels as any).map(([key, value]: any) => ({
-      key,
-      value
-    }))
+    labels: labels
+      ? Object.entries(labels as any).map(([key, value]: any) => ({
+          key,
+          value
+        }))
+      : []
   };
 };
 
diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index c19c797..200e677 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -39,10 +39,12 @@ export const getInitialValues = (node?: IVolumeNodeItem): IEditVolumeForm => {
     ...initialValues,
     entryName: node_name,
     volumeName: name,
-    labels: Object.entries(labels as any).map(([key, value]: any) => ({
-      key,
-      value
-    }))
+    labels: labels
+      ? Object.entries(labels as any).map(([key, value]: any) => ({
+          key,
+          value
+        }))
+      : []
   };
 };
 

From d05b19839b551bff35582a9f44e7efb067ec5cdd Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 23:17:40 +0530
Subject: [PATCH 17/18] feat(frontend): prune `environment` in service forms

---
 .../src/components/Modal/service/form-utils.ts       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 1b4010e..890956d 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -1,6 +1,6 @@
 import type { IEditServiceForm, IServiceNodeItem } from "../../../types";
 import * as yup from "yup";
-import { checkArray, pruneObject } from "../../../utils/forms";
+import { checkArray, pruneArray, pruneObject } from "../../../utils/forms";
 
 const initialValues: IEditServiceForm = {
   imageName: "",
@@ -94,7 +94,7 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
     labels
   } = serviceConfig;
 
-  const environment0: string[] = checkArray(environment, "environment");
+  const environment0: string[] = checkArray(environment || [], "environment");
   const volumes0: string[] = checkArray(volumes, "volumes");
   const ports0: string[] = checkArray(ports, "ports");
   const [imageName, imageTag] = (image ?? ":").split(":");
@@ -165,9 +165,11 @@ export const getFinalValues = (
         values.imageTag ? `:${values.imageTag}` : ""
       }`,
       container_name: values.containerName,
-      environment: environmentVariables.map(
-        (variable) =>
-          `${variable.key}${variable.value ? `=${variable.value}` : ""}`
+      environment: pruneArray(
+        environmentVariables.map(
+          (variable) =>
+            `${variable.key}${variable.value ? `=${variable.value}` : ""}`
+        )
       ),
       volumes: volumes.length
         ? volumes.map(

From 0a8510d5c60b6d8af4a7d0639a9a05c559f56fff Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Fri, 29 Jul 2022 23:08:35 +0300
Subject: [PATCH 18/18] fix: retain proper node position on volume and service
 update

---
 services/frontend/src/components/Modal/service/form-utils.ts | 2 +-
 services/frontend/src/components/Modal/volume/form-utils.ts  | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 890956d..625b090 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -153,7 +153,7 @@ export const getFinalValues = (
   return {
     key: previous?.key ?? "service",
     type: "SERVICE",
-    position: { left: 0, top: 0 },
+    position: previous?.position ?? { left: 0, top: 0 },
     inputs: previous?.inputs ?? ["op_source"],
     outputs: previous?.outputs ?? [],
     config: (previous as any)?.config ?? {},
diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index 200e677..b3da6d9 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -57,10 +57,7 @@ export const getFinalValues = (
   return {
     key: previous?.key ?? "volume",
     type: "VOLUME",
-    position: {
-      left: 0,
-      top: 0
-    },
+    position: previous?.position ?? { left: 0, top: 0 },
     inputs: previous?.inputs ?? [],
     outputs: previous?.outputs ?? [],
     canvasConfig: {