Merge pull request #3312 from threefoldtech/development_manage_domain…

…_k8s

Support managing domains in the K8S application

packages/playground/src/components/manage_gateway_dialog.vue

@@ -8,7 +8,7 @@
       attach="#modals"
     >
       <weblet-layout ref="layout" @back="onBack">
-        <template #title>Manage Domains ({{ vm.name }})</template>
+        <template #title>Manage Domains ({{ vm ? vm.name : k8s.masters[0].name }})</template>
 
         <v-tabs align-tabs="center" color="secondary" class="mb-6" v-model="gatewayTab" :disabled="deleting">
           <v-tab>Domains List</v-tab>
@@ -124,6 +124,13 @@
               </input-tooltip>
             </div>
 
+            <v-select
+              label="Select node"
+              class="mt-4"
+              :items="availableK8SNodesNames"
+              v-model="selectedK8SNodeName"
+              v-if="k8s"
+            />
             <v-select label="Supported Interfaces" class="mt-4" :items="networks" v-model="selectedIPAddress" />
             <copy-input-wrapper #="{ props }" :data="(selectedIPAddress as any)">
               <v-text-field :readonly="true" label="Selected IP Address" v-model="selectedIPAddress" v-bind="props" />
@@ -218,7 +225,8 @@ export default {
   name: "ManageGatewayDialog",
   components: { ListTable, IconActionBtn },
   props: {
-    vm: { type: Object as PropType<any>, required: true },
+    vm: { type: Object as PropType<any>, required: false },
+    k8s: { type: Object as PropType<any>, required: false },
   },
   setup(props) {
     const layout = useLayout();
@@ -229,13 +237,15 @@ export default {
     const oldPrefix = ref("");
     const prefix = ref("");
     const subdomain = ref("");
-    const port = ref(80);
+    const port = ref(props.vm ? 80 : 443);
     const passThrough = ref(false);
     const valid = ref(false);
     const selectionDetails = ref<SelectionDetails>();
     const networks = ref<VMNetwork[]>([]);
     const selectedIPAddress = ref<VMNetwork | null>(null);
-    const networkName = props.vm.interfaces[0].network as string;
+    const networkName = props.vm
+      ? (props.vm.interfaces[0].network as string)
+      : (props.k8s.masters[0].interfaces[0].network as string);
     const gridStore = useGrid();
     const grid = gridStore.client as GridClient;
 
@@ -246,6 +256,12 @@ export default {
     const requestDelete = ref(false);
     const gatewaysToDelete = ref<GridGateway[]>([]);
     const deleting = ref(false);
+    const availableK8SNodes = props.k8s ? [...props.k8s.masters, ...props.k8s.workers] : [];
+    const availableK8SNodesNames = availableK8SNodes.map(node => node.name);
+    const selectedK8SNodeName = ref(availableK8SNodesNames[0]);
+    const selectedNode = ref();
+
+    watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
 
     onMounted(async () => {
       updateGrid(grid, { projectName: "" });
@@ -269,7 +285,7 @@ export default {
         gateways.value = [];
         gatewaysToDelete.value = [];
         loadingGateways.value = true;
-        updateGrid(grid, { projectName: props.vm.projectName });
+        updateGrid(grid, { projectName: props.vm ? props.vm.projectName : props.k8s.projectName });
 
         const { gateways: gws, failedToList } = await loadDeploymentGateways(grid, {
           filter: gw => true,
@@ -348,13 +364,20 @@ export default {
     }
 
     function getSupportedNetworks() {
-      const { publicIP, planetary, myceliumIP, interfaces } = props.vm;
+      (selectedNode.value = props.vm
+        ? props.vm
+        : availableK8SNodes.filter(node => node.name === selectedK8SNodeName.value)[0]),
+        (networks.value = []);
+      const { publicIP, planetary, myceliumIP, interfaces } = selectedNode.value;
 
       addNetwork(NetworkInterfaces.WireGuard, interfaces?.[0]?.ip);
-      addNetwork(NetworkInterfaces.Planetary, planetary);
-      addNetwork(NetworkInterfaces.Mycelium, myceliumIP);
-      addNetwork(NetworkInterfaces.PublicIPV6, publicIP?.ip6.split("/")[0]);
       addNetwork(NetworkInterfaces.PublicIPV4, publicIP?.ip.split("/")[0]);
+
+      if (props.vm) {
+        addNetwork(NetworkInterfaces.Planetary, planetary);
+        addNetwork(NetworkInterfaces.Mycelium, myceliumIP);
+        addNetwork(NetworkInterfaces.PublicIPV6, publicIP?.ip6.split("/")[0]);
+      }
       selectedIPAddress.value = networks.value[0];
     }
 
@@ -387,10 +410,17 @@ export default {
     }
 
     function suggestName() {
-      oldPrefix.value =
-        (props.vm.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase()) ? "fvm" : "vm") +
-        grid.config.twinId;
-      prefix.value = oldPrefix.value + props.vm.name.includes("_") ? props.vm.name.replace("_", "") : props.vm.name;
+      if (props.k8s) {
+        oldPrefix.value = props.k8s.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase())
+          ? "k8s"
+          : "k8s" + grid.config.twinId;
+        prefix.value = oldPrefix.value + props.k8s.masters[0].name;
+      } else {
+        oldPrefix.value =
+          (props.vm.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase()) ? "fvm" : "vm") +
+          grid.config.twinId;
+        prefix.value = oldPrefix.value + props.vm.name;
+      }
       subdomain.value = generateName({ prefix: prefix.value }, 4).toLowerCase();
     }
 
@@ -438,6 +468,8 @@ export default {
       subdomainRules,
       portRules,
       isWireGuard,
+      availableK8SNodesNames,
+      selectedK8SNodeName,
     };
   },
 };

packages/playground/src/weblets/tf_deployment_list.vue

@@ -338,6 +338,15 @@
               @click="dialog = item.name"
             />
 
+            <IconActionBtn
+              icon="mdi-cog"
+              tooltip="Manage Domains"
+              :disabled="item.fromAnotherClient"
+              @click="dialog = item.masters[0].name"
+            />
+
+            <ManageGatewayDialog v-if="dialog === item.masters[0].name" :k8s="item" @close="dialog = undefined" />
+
             <ManageK8SWorkerDialog
               v-if="dialog === item.name"
               :data="item"