From 89552dc52181e178ce7375a270e25c83b149c18e Mon Sep 17 00:00:00 2001
From: Mohamed Rabie <31689104+MohamedElmdary@users.noreply.github.com>
Date: Sun, 22 Oct 2023 10:31:52 +0300
Subject: [PATCH] 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      |  90 ++++-
 .../playground/src/components/domain_name.vue |  41 ++-
 .../playground/src/components/list_table.vue  |   2 +
 .../src/components/manage_gateway_dialog.vue  | 307 ++++++++++++++++++
 .../src/components/vm_deployment_table.vue    |   6 +
 .../src/components/weblet_layout.vue          |   2 +-
 packages/playground/src/utils/gateway.ts      |  14 +-
 .../playground/src/utils/load_deployment.ts   |  49 ++-
 packages/playground/src/weblets/freeflow.vue  |   2 +-
 packages/playground/src/weblets/full_vm.vue   |   2 +-
 packages/playground/src/weblets/micro_vm.vue  |   2 +-
 .../playground/src/weblets/tf_algorand.vue    |   2 +-
 .../playground/src/weblets/tf_caprover.vue    |   2 +-
 .../playground/src/weblets/tf_casperlabs.vue  |   2 +-
 .../src/weblets/tf_deployment_list.vue        |  19 ++
 .../playground/src/weblets/tf_discourse.vue   |   2 +-
 .../playground/src/weblets/tf_funkwhale.vue   |   2 +-
 .../playground/src/weblets/tf_kubernetes.vue  |   2 +-
 .../playground/src/weblets/tf_mattermost.vue  |   2 +-
 .../playground/src/weblets/tf_nextcloud.vue   |   2 +-
 .../playground/src/weblets/tf_node_pilot.vue  |   2 +-
 .../playground/src/weblets/tf_owncloud.vue    |   2 +-
 .../playground/src/weblets/tf_peertube.vue    |   2 +-
 .../playground/src/weblets/tf_presearch.vue   |   2 +-
 .../playground/src/weblets/tf_subsquid.vue    |   2 +-
 packages/playground/src/weblets/tf_taiga.vue  |   2 +-
 packages/playground/src/weblets/tf_umbrel.vue |   2 +-
 .../playground/src/weblets/tf_wordpress.vue   |   2 +-
 28 files changed, 513 insertions(+), 55 deletions(-)
 create mode 100644 packages/playground/src/components/manage_gateway_dialog.vue

diff --git a/packages/grid_client/src/modules/base.ts b/packages/grid_client/src/modules/base.ts
index 5bdd9855d7..1fbd0c1b2a 100644
--- a/packages/grid_client/src/modules/base.ts
+++ b/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));
     }
   }
 
diff --git a/packages/playground/src/components/domain_name.vue b/packages/playground/src/components/domain_name.vue
index 5d2cd2c12e..6c7a28b5c5 100644
--- a/packages/playground/src/components/domain_name.vue
+++ b/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,
diff --git a/packages/playground/src/components/list_table.vue b/packages/playground/src/components/list_table.vue
index 717582ff9a..d570f9793b 100644
--- a/packages/playground/src/components/list_table.vue
+++ b/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
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
new file mode 100644
index 0000000000..4c49dd5879
--- /dev/null
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <v-dialog
+      model-value
+      @update:model-value="$emit('close')"
+      scrollable
+      width="70%"
+      :persistent="deleting || layout?.status === 'deploy'"
+    >
+      <weblet-layout
+        ref="layout"
+        @back="
+          () => {
+            gatewayTab = 0;
+            loadGateways();
+          }
+        "
+      >
+        <template #title>Manage Gateways ({{ $props.vm?.[0]?.name }})</template>
+
+        <v-tabs align-tabs="center" color="primary" class="mb-6" v-model="gatewayTab" :disabled="deleting">
+          <v-tab>Gateway List</v-tab>
+          <v-tab>Add new gateway</v-tab>
+        </v-tabs>
+
+        <div v-show="gatewayTab === 0" :class="{ 'pb-2': !loadingGateways, 'pb-6': loadingGateways }">
+          <div class="d-flex justify-end mb-4">
+            <v-btn color="primary" :loading="loadingGateways" :disabled="deleting" @click="loadGateways" variant="tonal"
+              >Reload</v-btn
+            >
+          </div>
+          <list-table
+            :headers="[
+              { title: 'Name', key: 'name' },
+              { title: 'Contract ID', key: 'contractId' },
+              { title: 'Domain', key: 'domain' },
+              { title: 'TLS Passthrough', key: 'tls_passthrough' },
+              { title: 'Backend', key: 'backends' },
+              { title: 'Status', key: 'status' },
+              { title: 'Actions', key: 'actions' },
+            ]"
+            :items="gateways"
+            return-object
+            :loading="loadingGateways"
+            v-model="gatewaysToDelete"
+            :deleting="deleting"
+            no-data-text="No gateways found for this deployment."
+          >
+            <template #[`item.name`]="{ item }">
+              {{ item.value.name.slice(item.value.name.startsWith(prefix) ? prefix.length : 0) }}
+            </template>
+
+            <template #[`item.tls_passthrough`]="{ item }">
+              {{ item.value.tls_passthrough ? "Yes" : "No" }}
+            </template>
+
+            <template #[`item.status`]="{ item }">
+              {{ item.value.status.toUpperCase() }}
+            </template>
+
+            <template #[`item.actions`]="{ item }">
+              <IconActionBtn tooltip="Visit" icon="mdi-web" color="anchor" :href="'https://' + item.value.domain" />
+            </template>
+          </list-table>
+        </div>
+
+        <div v-show="gatewayTab === 1">
+          <form-validator v-model="valid">
+            <input-tooltip tooltip="Subdomain will be used as a gateway name incase of selecting a custom domain.">
+              <input-validator
+                :value="subdomain"
+                :rules="[
+                  validators.required('Subdomain is required.'),
+                  validators.isLowercase('Subdomain should consist of lowercase letters only.'),
+                  validators.isAlphanumeric('Subdomain should consist of letters and numbers only.'),
+                  subdomain => validators.isAlpha('Subdomain must start with alphabet char.')(subdomain[0]),
+                  validators.minLength('Subdomain must be at least 4 characters.', 4),
+                  subdomain =>
+                    validators.maxLength(
+                      `Subdomain cannot exceed ${15 - prefix.length} characters.`,
+                      15 - prefix.length,
+                    )(subdomain),
+                ]"
+                #="{ props }"
+              >
+                <v-text-field label="Subdomain" :prefix="prefix" v-model.trim="subdomain" v-bind="props" />
+              </input-validator>
+            </input-tooltip>
+
+            <div :style="{ marginTop: '-10px' }">
+              <domain-name hide-title v-model="domainName" />
+            </div>
+
+            <input-validator
+              :value="port"
+              :rules="[validators.required('Port is required.'), validators.isPort('Please provide a valid port.')]"
+              #="{ props }"
+            >
+              <v-text-field label="Port" v-model.number="port" type="number" v-bind="props" />
+            </input-validator>
+
+            <div :style="{ marginTop: '-10px' }">
+              <input-tooltip
+                tooltip="Disabling TLS Pass Through will let the gateway terminate the traffic, while Enabling it will let your backend service to do the TLS termination."
+                inline
+              >
+                <v-switch
+                  label="TLS Passthrough"
+                  hide-details
+                  inset
+                  variant="tonal"
+                  color="primary"
+                  v-model="passThrough"
+                />
+              </input-tooltip>
+            </div>
+
+            <copy-input-wrapper #="{ props }" :data="networkName">
+              <v-text-field label="Network Name" v-model="networkName" readonly v-bind="props" />
+            </copy-input-wrapper>
+
+            <copy-input-wrapper #="{ props }" :data="ip">
+              <v-text-field label="IP Address" v-model="ip" readonly v-bind="props" />
+            </copy-input-wrapper>
+          </form-validator>
+        </div>
+
+        <template #footer-actions>
+          <v-btn
+            color="error"
+            variant="outlined"
+            :disabled="gatewaysToDelete.length === 0 || deleting || loadingGateways"
+            v-if="gatewayTab === 0"
+            @click="requestDelete = true"
+          >
+            Delete
+          </v-btn>
+          <v-btn color="primary" variant="tonal" @click="deployGateway" :disabled="!valid" v-else> Deploy </v-btn>
+        </template>
+      </weblet-layout>
+    </v-dialog>
+
+    <v-dialog v-model="requestDelete" max-width="600px">
+      <v-card>
+        <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
+        <v-card-text class="d-flex">
+          <v-chip color="error" label variant="tonal" class="mr-1 mb-1" v-for="gw in gatewaysToDelete" :key="gw.name">
+            {{ gw.name }}
+          </v-chip>
+        </v-card-text>
+
+        <v-divider />
+
+        <v-card-actions class="d-flex justify-end">
+          <v-btn
+            color="error"
+            variant="outlined"
+            size="small"
+            :disabled="loadingGateways || deleting"
+            @click="
+              () => {
+                requestDelete = false;
+                deleteSelectedGateways();
+              }
+            "
+            >Delete</v-btn
+          >
+          <v-btn color="secondary" variant="tonal" size="small" @click="requestDelete = false">Cancel</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { onMounted, type PropType, ref } from "vue";
+
+import { useProfileManager } from "../stores";
+import { ProjectName } from "../types";
+import { deployGatewayName, type GridGateway, loadDeploymentGateways } from "../utils/gateway";
+import { getGrid } from "../utils/grid";
+import { normalizeError } from "../utils/helpers";
+import { generateName } from "../utils/strings";
+import DomainName, { type DomainModel } from "./domain_name.vue";
+import IconActionBtn from "./icon_action_btn.vue";
+import ListTable from "./list_table.vue";
+import { useLayout } from "./weblet_layout.vue";
+
+export default {
+  name: "ManageGatewayDialog",
+  components: { ListTable, DomainName, IconActionBtn },
+  props: {
+    vm: { type: Array as PropType<any>, required: true },
+  },
+  setup(props) {
+    const profileManager = useProfileManager();
+    const layout = useLayout();
+    const gatewayTab = ref(0);
+
+    const prefix = ref("");
+    const subdomain = ref("");
+    const domainName = ref<DomainModel>();
+    const port = ref(80);
+    const passThrough = ref(false);
+    const valid = ref(false);
+
+    const ip = props.vm[0].interfaces[0].ip as string;
+    const networkName = props.vm[0].interfaces[0].network as string;
+
+    onMounted(async () => {
+      const grid = await getGrid(profileManager.profile!);
+      prefix.value =
+        (props.vm.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase()) ? "fvm" : "vm") +
+        grid!.config.twinId;
+      subdomain.value = generateName({}, 15 - prefix.value.length);
+      await grid!.disconnect();
+      await loadGateways();
+    });
+
+    const loadingGateways = ref(false);
+    const gateways = ref<GridGateway[]>([]);
+    async function loadGateways() {
+      gateways.value = [];
+      gatewaysToDelete.value = [];
+      loadingGateways.value = true;
+      const grid = await getGrid(profileManager.profile!, props.vm.projectName);
+      gateways.value = await loadDeploymentGateways(grid!);
+      loadingGateways.value = false;
+    }
+
+    async function deployGateway() {
+      layout.value.setStatus("deploy");
+
+      try {
+        const [x, y] = ip.split(".");
+        const grid = await getGrid(profileManager.profile!, props.vm.projectName);
+
+        const data = { name: networkName, ipRange: `${x}.${y}.0.0/16`, nodeId: domainName.value!.gateway.id! };
+        const hasNode = await grid!.networks.hasNode(data);
+        if (!hasNode) {
+          await grid!.networks.addNode(data);
+        }
+
+        await deployGatewayName(grid!, {
+          name: prefix.value + subdomain.value,
+          nodeId: domainName.value!.gateway.id!,
+          ip,
+          networkName,
+          port: port.value,
+          fqdn: domainName.value!.hasCustomDomain ? domainName.value!.customDomain : undefined,
+          tlsPassthrough: passThrough.value,
+        });
+        layout.value.setStatus("success", "Successfully deployed gateway.");
+      } catch (error) {
+        layout.value.setStatus("failed", normalizeError(error, "Something went wrong."));
+      }
+    }
+
+    const requestDelete = ref(false);
+    const gatewaysToDelete = ref<GridGateway[]>([]);
+    const deleting = ref(false);
+    async function deleteSelectedGateways() {
+      deleting.value = true;
+      const grid = await getGrid(profileManager.profile!, props.vm.projectName);
+      const deletedGateways = new Set<GridGateway>();
+      for (const gw of gatewaysToDelete.value) {
+        await grid!.gateway
+          .delete_name(gw)
+          .then(() => deletedGateways.add(gw))
+          .catch(() => []);
+      }
+      gatewaysToDelete.value = gatewaysToDelete.value.filter(gw => !deletedGateways.has(gw));
+      gateways.value = gateways.value.filter(gw => !deletedGateways.has(gw));
+      deleting.value = false;
+      if (gatewaysToDelete.value.length > 0) {
+        layout.value.setStatus("failed", `Failed to delete some of the selected gateways.`);
+      }
+    }
+
+    return {
+      prefix,
+      layout,
+      gatewayTab,
+
+      loadingGateways,
+      gateways,
+
+      subdomain,
+      port,
+      domainName,
+      passThrough,
+      valid,
+
+      ip,
+      networkName,
+
+      loadGateways,
+      deployGateway,
+
+      requestDelete,
+      gatewaysToDelete,
+      deleting,
+      deleteSelectedGateways,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a37f839f71..07be97b507 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -91,7 +91,11 @@ async function loadDeployments() {
   loading.value = true;
   const grid = await getGrid(profileManager.profile!, props.projectName);
   const chunk1 = await loadVms(grid!);
+  if (chunk1.count > 0) await grid!.gateway.list();
+
   const chunk2 = await loadVms(updateGrid(grid!, { projectName: props.projectName.toLowerCase() }));
+  if (chunk2.count > 0) await grid!.gateway.list();
+
   const filter =
     props.projectName === ProjectName.VM
       ? undefined
@@ -101,6 +105,8 @@ async function loadDeployments() {
     props.projectName === ProjectName.Fullvm
       ? { count: 0, items: [] }
       : await loadVms(updateGrid(grid!, { projectName: "" }), { filter });
+  if (chunk3.count > 0) await grid!.gateway.list();
+
   const vms = mergeLoadedDeployments(chunk1, chunk2, chunk3 as any);
 
   count.value = vms.count;
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 4d2516167f..d07bf482bb 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -326,7 +326,7 @@ export interface WebletLayout {
     envs?: { [key: string]: string | boolean | { label: string; type?: string } } | false,
     json?: boolean,
   ): void;
-  status: ComputedRef<WebletStatus>;
+  status: ComputedRef<WebletStatus> | string;
   reloadDeploymentsList(): void;
   validateSSH(): void;
 }
diff --git a/packages/playground/src/utils/gateway.ts b/packages/playground/src/utils/gateway.ts
index 38463ed978..dff7393f96 100644
--- a/packages/playground/src/utils/gateway.ts
+++ b/packages/playground/src/utils/gateway.ts
@@ -17,11 +17,8 @@ export interface GetHostnameOptions {
   twinId: number;
 }
 export function getSubdomain(options: GetHostnameOptions) {
-  return (
-    SolutionCode[options.projectName as keyof typeof SolutionCode] +
-    options.twinId +
-    options.deploymentName.toLowerCase()
-  );
+  const [projectName] = options.projectName.split("/");
+  return SolutionCode[projectName as keyof typeof SolutionCode] + options.twinId + options.deploymentName.toLowerCase();
 }
 
 export interface DeployGatewayNameOptions {
@@ -63,3 +60,10 @@ export async function rollbackDeployment(grid: GridClient, name: string) {
 
   return result;
 }
+
+export type GridGateway = Awaited<ReturnType<typeof loadDeploymentGateways>>[0];
+export async function loadDeploymentGateways(grid: GridClient) {
+  const gws = await grid.gateway.list();
+  const items = await Promise.all(gws.map(gw => grid.gateway.getObj(gw)));
+  return items.flat();
+}
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index c287987de9..afd184e2c3 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -1,7 +1,7 @@
 import type { GridClient } from "@threefold/grid_client";
 
 import { formatConsumption } from "./contracts";
-import { updateGrid } from "./grid";
+import { getGrid, updateGrid } from "./grid";
 import { normalizeError } from "./helpers";
 
 export interface LoadedDeployments<T> {
@@ -16,8 +16,13 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
   const machines = await grid.machines.list();
   let count = machines.length;
 
-  const promises = machines.map(name => {
-    return grid.machines.getObj(name).catch(e => {
+  const projectName = grid.clientOptions.projectName;
+  const grids = (await Promise.all(
+    machines.map(n => getGrid(grid.clientOptions, `${projectName}/${n}`)),
+  )) as GridClient[];
+
+  const promises = machines.map((name, index) => {
+    return grids[index].machines.getObj(name).catch(e => {
       console.log(
         `%c[Error] failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`,
         "color: rgb(207, 102, 121)",
@@ -30,15 +35,21 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
     .map((item: any, index) => {
       if (item) {
         item.deploymentName = machines[index];
-        item.projectName = grid.clientOptions!.projectName;
+        item.projectName = grids[index].clientOptions!.projectName;
         item.forEach((i: any) => {
           i.deploymentName = machines[index];
-          i.projectName = grid.clientOptions!.projectName;
+          i.projectName = grids[index].clientOptions!.projectName;
         });
       }
       return item;
     })
-    .filter(item => item && item.length > 0)
+    .filter(item => {
+      if (item?.length === 0) {
+        count--;
+        return false;
+      }
+      return item && item.length > 0;
+    })
     .filter(item => {
       if (options.filter && !options.filter(item)) {
         count--;
@@ -47,12 +58,12 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
       return true;
     }) as any[][];
   const consumptions = await Promise.all(
-    vms.map(vm => {
-      return grid.contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
+    vms.map((vm, index) => {
+      return grids[index].contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
     }),
   );
   const wireguards = await Promise.all(
-    vms.map(vm => getWireguardConfig(grid, vm[0].interfaces[0].network).catch(() => [])),
+    vms.map((vm, index) => getWireguardConfig(grids[index], vm[0].interfaces[0].network).catch(() => [])),
   );
 
   const data = vms.map((vm, index) => {
@@ -79,8 +90,14 @@ export function getWireguardConfig(grid: GridClient, name: string) {
 export type K8S = { masters: any[]; workers: any[]; deploymentName: string; wireguard?: any };
 export async function loadK8s(grid: GridClient) {
   const clusters = await grid.k8s.list();
-  const promises = clusters.map(name => {
-    return grid.k8s.getObj(name).catch(e => {
+
+  const projectName = grid.clientOptions.projectName;
+  const grids = (await Promise.all(
+    clusters.map(n => getGrid(grid.clientOptions, `${projectName}/${n}`)),
+  )) as GridClient[];
+
+  const promises = clusters.map((name, index) => {
+    return grids[index].k8s.getObj(name).catch(e => {
       console.log(
         `%c[Error] failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`,
         "color: rgb(207, 102, 121)",
@@ -93,19 +110,21 @@ export async function loadK8s(grid: GridClient) {
     .map((item, index) => {
       if (item) {
         item.deploymentName = clusters[index];
-        item.projectName = grid.clientOptions!.projectName;
+        item.projectName = grids[index].clientOptions!.projectName;
       }
       return item;
     })
     .filter(item => item && item.masters.length > 0) as K8S[];
   const consumptions = await Promise.all(
-    k8s.map(cluster => {
-      return grid.contracts.getConsumption({ id: cluster.masters[0].contractId }).catch(() => undefined);
+    k8s.map((cluster, index) => {
+      return grids[index].contracts.getConsumption({ id: cluster.masters[0].contractId }).catch(() => undefined);
     }),
   );
 
   const wireguards = await Promise.all(
-    k8s.map(cluster => getWireguardConfig(grid, cluster.masters[0].interfaces[0].network).catch(() => [])),
+    k8s.map((cluster, index) =>
+      getWireguardConfig(grids[index], cluster.masters[0].interfaces[0].network).catch(() => []),
+    ),
   );
   const data = k8s.map((cluster, index) => {
     cluster.masters[0].billing = formatConsumption(consumptions[index] as number);
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index e13f31e0db..01e52d16aa 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -151,7 +151,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.FreeFlow.toLowerCase();
+  const projectName = ProjectName.FreeFlow.toLowerCase() + "/" + threebotName.value;
 
   const domain = customDomain ? gatewayName.domain : threebotName.value + "." + gatewayName.domain;
 
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index d1b0d753cb..615adc2c4a 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -244,7 +244,7 @@ watch(
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Fullvm.toLowerCase();
+  const projectName = ProjectName.Fullvm.toLowerCase() + "/" + name.value;
 
   try {
     layout.value?.validateSSH();
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 140dd83039..a99e98efb0 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -264,7 +264,7 @@ function addDisk() {
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.VM.toLowerCase();
+  const projectName = ProjectName.VM.toLowerCase() + "/" + name.value;
 
   try {
     const grid = await getGrid(profileManager.profile!, projectName);
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index ded2ad813b..68346c4717 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -229,7 +229,7 @@ watch(firstRound, () => lastRoundInput.value.validate(lastRound.value.toString()
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Algorand.toLowerCase();
+  const projectName = ProjectName.Algorand.toLowerCase() + "/" + name.value;
 
   try {
     layout.value?.validateSSH();
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 6c31581406..505108001a 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -118,7 +118,7 @@ const workers = ref<CW[]>([]);
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Caprover.toLowerCase();
+  const projectName = ProjectName.Caprover.toLowerCase() + "/" + leader.value.name;
 
   try {
     layout.value?.validateSSH();
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 8a79ef091a..21da542463 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -134,7 +134,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Casperlabs.toLowerCase();
+  const projectName = ProjectName.Casperlabs.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 36e6251b81..25f5e7c37d 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -25,6 +25,14 @@
             icon="mdi-eye-outline"
             @click="openDialog(tabs[activeTab].value, item)"
           />
+
+          <IconActionBtn icon="mdi-cog" tooltip="Deploy FQDN Gateway" @click="dialog = item.value.deploymentName" />
+
+          <ManageGatewayDialog
+            v-if="dialog === item.value.deploymentName"
+            :vm="item.value"
+            @close="dialog = undefined"
+          />
         </template>
 
         <template #VM-actions="{ item }">
@@ -33,6 +41,14 @@
             icon="mdi-eye-outline"
             @click="openDialog(tabs[activeTab].value, item)"
           />
+
+          <IconActionBtn icon="mdi-cog" tooltip="Manage Gateways" @click="dialog = item.value.deploymentName" />
+
+          <ManageGatewayDialog
+            v-if="dialog === item.value.deploymentName"
+            :vm="item.value"
+            @close="dialog = undefined"
+          />
         </template>
 
         <template #CapRover-actions="{ item }">
@@ -341,6 +357,7 @@ import { deploymentListEnvironments } from "../constants/deployment_list";
 import { useProfileManager } from "../stores";
 import { deleteDeployment } from "../utils/delete_deployment";
 import { getGrid, updateGrid } from "../utils/grid";
+
 const props = defineProps<{
   projectName?: ProjectName;
   title?: string;
@@ -432,6 +449,7 @@ import { useDeploymentListManager } from "../components/deployment_list_manager.
 import IconActionBtn from "../components/icon_action_btn.vue";
 import K8sDeploymentTable from "../components/k8s_deployment_table.vue";
 import ManageCaproverWorkerDialog from "../components/manage_caprover_worker_dialog.vue";
+import ManageGatewayDialog from "../components/manage_gateway_dialog.vue";
 import ManageK8SWorkerDialog from "../components/manage_k8s_worker_dialog.vue";
 import VmDeploymentTable from "../components/vm_deployment_table.vue";
 import { ProjectName } from "../types";
@@ -444,6 +462,7 @@ export default {
     K8sDeploymentTable,
     ManageK8SWorkerDialog,
     ManageCaproverWorkerDialog,
+    ManageGatewayDialog,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 658bb5551c..1a66135fb1 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -183,7 +183,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Discourse.toLowerCase();
+  const projectName = ProjectName.Discourse.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 01460b76e7..0d9da6794c 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -190,7 +190,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Funkwhale.toLowerCase();
+  const projectName = ProjectName.Funkwhale.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index ee5255d0be..69134768ef 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -105,7 +105,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!);
+    const grid = await getGrid(profileManager.profile!, name.value);
 
     await layout.value.validateBalance(grid!);
 
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 8f255e1092..b061be58ef 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -160,7 +160,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Mattermost.toLowerCase();
+  const projectName = ProjectName.Mattermost.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index cb88754348..d1490aed06 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -151,7 +151,7 @@ const rootFilesystemSize = 40;
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Nextcloud.toLowerCase();
+  const projectName = ProjectName.Nextcloud.toLowerCase() + "/" + name.value;
 
   try {
     const grid = await getGrid(profileManager.profile!, projectName);
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 0ca62cbb85..c63b090971 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -140,7 +140,7 @@ const rootFilesystemSize = 2;
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.NodePilot.toLowerCase();
+  const projectName = ProjectName.NodePilot.toLowerCase() + "/" + name.value;
 
   try {
     layout.value?.validateSSH();
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 22e3ffafef..3280317b23 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -200,7 +200,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Owncloud.toLowerCase();
+  const projectName = ProjectName.Owncloud.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 032ad357f9..a3f8382055 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -158,7 +158,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Peertube.toLowerCase();
+  const projectName = ProjectName.Peertube.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 8da5abe5bc..ec371c474d 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -163,7 +163,7 @@ const selectedNode = ref() as Ref<INode>;
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Presearch.toLowerCase();
+  const projectName = ProjectName.Presearch.toLowerCase() + "/" + name.value;
 
   try {
     layout.value?.validateSSH();
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 773d10c24d..bc3f2ca3e5 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -146,7 +146,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Subsquid.toLowerCase();
+  const projectName = ProjectName.Subsquid.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 7990134da4..ad16c8f011 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -213,7 +213,7 @@ function finalize(deployment: any) {
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Taiga.toLowerCase();
+  const projectName = ProjectName.Taiga.toLowerCase() + "/" + name.value;
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 1c9bd1df06..7b9e6c84d6 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -167,7 +167,7 @@ const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solut
 async function deploy() {
   layout.value.setStatus("deploy");
 
-  const projectName = ProjectName.Umbrel.toLowerCase();
+  const projectName = ProjectName.Umbrel.toLowerCase() + "/" + name.value;
 
   try {
     layout.value?.validateSSH();
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index b3cc16ac71..17baa42183 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -188,7 +188,7 @@ function finalize(deployment: any) {
 }
 async function deploy(gatewayName: GatewayNode, customDomain: boolean) {
   layout.value.setStatus("deploy");
-  const projectName = ProjectName.Wordpress.toLowerCase();
+  const projectName = ProjectName.Wordpress.toLowerCase() + "/" + name.value;
   const subdomain = getSubdomain({
     deploymentName: name.value,
     projectName,