Implement manage gateways in playground (#1215)

* Add dialog to deploy gateway

* Fix gateways listing & deploying path

* Add listing gateways

* Add list & deleting gateways

* Add dialog to micro vm

* Update project name in all solutions

* Update old contracts projectName

* Fix projectName path (add missing '/')

* Add missing 'no-data-text'

* Fix listing issue

* Merge ext1/ext2 to be applied together

* Remove contractId  check

* Fix typo backends to backend

* Add tls pass through option

* Update tooltip

* Remove unload (loaded with no contracts) deployments from listing

* Use domainName component instead of new template

* Add visit action in gateways table

* Migrate gateways from old solutions

* add prefix projectName + twinId + gatewayName to gateways deployed for fullvm & microvm

* Remove prefix while listing

* Fix building errors

* Fix issue in deploying and listing k8s

packages/grid_client/src/modules/base.ts

@@ -56,7 +56,7 @@ class BaseModule {
   }
 
   async getDeploymentContracts(name: string) {
-    const path = this.getNewDeploymentPath(name, name, "contracts.json");
+    const path = this.getNewDeploymentPath(name, "contracts.json");
     const contracts = await this.backendStorage.load(path);
     if (!contracts) {
       return [];
@@ -65,7 +65,7 @@ class BaseModule {
   }
 
   async save(name: string, contracts: Record<string, unknown[]>) {
-    const contractsPath = PATH.join(this.getNewDeploymentPath(name, name), "contracts.json");
+    const contractsPath = PATH.join(this.getNewDeploymentPath(name), "contracts.json");
     const wireguardPath = PATH.join(this.getDeploymentPath(name), `${name}.conf`);
     const oldContracts = await this.getDeploymentContracts(name);
     let StoreContracts = oldContracts;
@@ -113,17 +113,88 @@ class BaseModule {
     }
 
     const values = await Promise.all(
-      oldKeys.map(k => this.backendStorage.load(PATH.join(oldPath, k, "contracts.json"))),
+      oldKeys.map(k =>
+        this.backendStorage.load(PATH.join(oldPath, k, "contracts.json")).catch(error => {
+          console.log(`Error while fetching contarct data PATH[${PATH.join(oldPath, k, "contracts.json")}]`, error);
+          return null;
+        }),
+      ),
     );
 
+    const contracts = await Promise.all(
+      values.flat(1).map(value => {
+        if (value) return this.tfClient.contracts.get({ id: value.contract_id });
+        return Promise.resolve(null);
+      }),
+    );
+
+    const updateContractsExts: Promise<any>[] = [];
+    for (const contract of contracts) {
+      if (!contract) {
+        continue;
+      }
+
+      const { nodeContract } = contract.contractType || {};
+      if (!nodeContract) {
+        continue;
+      }
+
+      const { deploymentData, deploymentHash: hash } = nodeContract;
+      const oldData = JSON.parse(deploymentData || "{}") as unknown as {
+        type: string;
+        name: string;
+        projectName: string;
+      };
+      const { name, projectName } = oldData;
+
+      let instanceName = name;
+
+      if (this.moduleName === "gateways") {
+        const [, instance] = name.split(this.config.twinId.toString());
+        if (instance) {
+          instanceName = instance;
+        }
+      }
+
+      if (projectName?.endsWith(`/${instanceName}`)) {
+        continue;
+      }
+
+      oldData.projectName = `${projectName}/${instanceName}`;
+
+      updateContractsExts.push(
+        this.tfClient.contracts.updateNode({
+          id: contract.contractId,
+          data: JSON.stringify(oldData),
+          hash,
+        }),
+      );
+    }
+
+    const _updateContractsExts = await Promise.all(updateContractsExts.flat(1));
+    const __updateContractsExts = _updateContractsExts.flat(1).filter(Boolean);
+    await this.tfClient.applyAllExtrinsics(__updateContractsExts);
+
     let ext1: any[] = [];
     let ext2: any[] = [];
 
     for (let i = 0; i < oldKeys.length; i++) {
-      const key = oldKeys[i];
+      const oldKey = oldKeys[i];
+
+      let newKey = oldKey;
+      if (this.moduleName === "gateways") {
+        const [, key] = oldKey.split(this.config.twinId.toString());
+        if (key) {
+          newKey = key;
+        }
+      }
+
       const value = values[i];
-      const from = PATH.join(oldPath, key, "contracts.json");
-      const to = this.getNewDeploymentPath(key, key, "contracts.json");
+      const from = PATH.join(oldPath, oldKey, "contracts.json");
+      const to = this.getNewDeploymentPath(
+        ...(this.projectName.includes(newKey) ? [oldKey] : [newKey, oldKey]),
+        "contracts.json",
+      );
 
       if (value) {
         ext1.push(this.backendStorage.dump(to, value));
@@ -135,11 +206,10 @@ class BaseModule {
     ext2 = await Promise.all(ext2.flat(1));
 
     if (this.backendStorage.type === BackendStorageType.tfkvstore) {
-      ext1 = ext1.filter(x => !!x);
-      ext2 = ext2.filter(x => !!x);
+      ext1 = ext1.flat(1).filter(x => !!x);
+      ext2 = ext2.flat(1).filter(x => !!x);
 
-      await this.tfClient.applyAllExtrinsics(ext1);
-      await this.tfClient.applyAllExtrinsics(ext2);
+      await this.tfClient.applyAllExtrinsics(ext1.concat(ext2));
     }
   }
 

packages/playground/src/components/domain_name.vue

@@ -1,6 +1,6 @@
 <template>
   <v-sheet width="100%" v-model="domain">
-    <h6 class="text-h5">Domain Name</h6>
+    <h6 class="text-h5" v-if="!$props.hideTitle">Domain Name</h6>
     <v-tooltip location="top" text="Use Custom domain name">
       <template #activator="{ props }">
         <v-switch v-bind="props" v-model="customDomain" hide-details color="primary" inset label="Custom domain" />
@@ -34,7 +34,7 @@
       <v-expand-transition>
         <v-alert
           v-show="domain?.useFQDN && domain?.ip && domainName && !selectGateway?.loading"
-          class="mb-2"
+          class="mb-4"
           type="warning"
           variant="tonal"
         >
@@ -47,21 +47,39 @@
   </v-sheet>
 </template>
 <script lang="ts">
-import { computed, type Ref, ref } from "vue";
+import { computed, type PropType, type Ref, ref } from "vue";
+import { watch } from "vue";
 
 import SelectGatewayNode from "../components/select_gateway_node.vue";
 import type { GatewayNode } from "../types";
 import { useFarmGatewayManager } from "./farm_gateway_manager.vue";
 
+export interface DomainModel {
+  gateway: GatewayNode;
+  hasCustomDomain: boolean;
+  customDomain?: string;
+}
+
 export default {
   name: "DomainName",
   props: {
+    modelValue: {
+      type: Object as PropType<DomainModel>,
+      required: false,
+    },
     hasIPv4: {
       type: Boolean,
-      required: true,
+      default: () => false,
+    },
+    hideTitle: {
+      type: Boolean,
+      default: () => false,
     },
   },
-  setup(props, { expose }) {
+  emits: {
+    "update:model-value": (value: DomainModel) => true || value,
+  },
+  setup(props, { expose, emit }) {
     const customDomain = ref(false);
     const selectGateway = ref();
     const domainName = ref("");
@@ -82,6 +100,19 @@ export default {
     const FarmGatewayManager = useFarmGatewayManager();
     const farmData = ref(FarmGatewayManager?.load());
     const loading = ref(FarmGatewayManager?.getLoading());
+
+    watch(
+      [gatewayNode, customDomain, domain],
+      ([gateway, hasCustomDomain, customDomain]) => {
+        emit("update:model-value", {
+          gateway,
+          hasCustomDomain,
+          customDomain: customDomain?.domain,
+        });
+      },
+      { immediate: true },
+    );
+
     return {
       customDomain,
       gatewayNode,

packages/playground/src/components/list_table.vue

@@ -10,6 +10,7 @@
     show-select
     v-model="selectedItems"
     hide-no-data
+    :return-object="returnObject"
   >
     <template #[`column.data-table-select`]>
       <div class="d-flex align-center justify-space-between">
@@ -82,6 +83,7 @@ export default {
     deleting: { type: Boolean, required: true },
     modelValue: { type: Array as PropType<any[]>, required: true },
     noDataText: String,
+    returnObject: Boolean,
   },
   // inheritAttrs: true will allow to use @click:row from <ListTable @click:row="listener" />
   // by default it's true but added he to make it clear