Allow using dash and underscore in domains

packages/grid_client/src/helpers/validator.ts

@@ -51,6 +51,27 @@ function IsAlphanumericExpectUnderscore(validationOptions?: ClassValidatorValida
     });
   };
 }
+
+function IsAlphanumericExpectDashAndUnderscore(validationOptions?: ClassValidatorValidationOptions) {
+  return function (object: any, propertyName: string) {
+    registerDecorator({
+      name: "IsAlphanumericExpectDashAndUnderscore",
+      target: object.constructor,
+      propertyName: propertyName,
+      options: validationOptions,
+      constraints: [`${propertyName} must contain only letters, numbers, dashes, and underscores`],
+      validator: {
+        validate(value: any) {
+          return /^[a-zA-Z0-9_-]+$/.test(value);
+        },
+        defaultMessage: buildMessage(
+          eachPrefix => eachPrefix + "$property must contain only letters, numbers, dashes, and underscores",
+          validationOptions,
+        ),
+      },
+    });
+  };
+}
 interface ValidationOptions {
   props?: boolean | string | string[];
   methods?: boolean | string | string[];
@@ -205,4 +226,5 @@ export {
   type ValidationOptions,
   ValidateMembers,
   IsAlphanumericExpectUnderscore,
+  IsAlphanumericExpectDashAndUnderscore,
 };

packages/grid_client/src/modules/models.ts

@@ -21,7 +21,7 @@ import {
   ValidateNested,
 } from "class-validator";
 
-import { Features, IsAlphanumericExpectUnderscore } from "../helpers";
+import { Features, IsAlphanumericExpectDashAndUnderscore, IsAlphanumericExpectUnderscore } from "../helpers";
 import { Deployment } from "../zos/deployment";
 import { ZdbModes } from "../zos/zdb";
 import { blockchainType } from "./blockchainInterface";
@@ -254,7 +254,7 @@ class QSFSZDBGetModel extends BaseGetDeleteModel {}
 class QSFSZDBDeleteModel extends BaseGetDeleteModel {}
 
 class BaseGatewayNameModel {
-  @Expose() @IsString() @IsNotEmpty() @IsAlphanumeric() @MaxLength(NameLength) name: string;
+  @Expose() @IsString() @IsNotEmpty() @IsAlphanumericExpectDashAndUnderscore() @MaxLength(NameLength) name: string;
 }
 
 class GatewayFQDNModel extends BaseGatewayNameModel {
@@ -361,7 +361,7 @@ class GetServiceContractModel {
   @Expose() @IsInt() @Min(1) serviceId: number;
 }
 class NameContractGetModel {
-  @Expose() @IsString() @IsNotEmpty() @IsAlphanumeric() @MaxLength(NameLength) name: string;
+  @Expose() @IsString() @IsNotEmpty() @IsAlphanumericExpectDashAndUnderscore() @MaxLength(NameLength) name: string;
 }
 
 class NodeContractUpdateModel {

packages/grid_client/src/primitives/gateway.ts

@@ -59,7 +59,7 @@ class GWPrimitive {
 
     const name_workload = new Workload();
     name_workload.version = version;
-    name_workload.name = name;
+    name_workload.name = name.replace(/-/g, "");
     name_workload.type = WorkloadTypes.gatewaynameproxy;
     name_workload.data = nameObj;
     name_workload.metadata = metadata;

packages/playground/src/components/deployment_data_dialog.vue

@@ -3,29 +3,12 @@
     <v-dialog model-value @update:model-value="$emit('close')" scrollable attach="#modals">
       <v-card>
         <v-card-title class="d-flex flex-column" v-if="!onlyJson">
-          <div class="d-flex justify-center">
+          <div class="d-flex justify-center my-4">
             <v-btn-toggle divided v-model="showType" mandatory>
               <v-btn> details </v-btn>
               <v-btn> JSON</v-btn>
             </v-btn-toggle>
           </div>
-          <v-tabs v-model="activeTab" align-tabs="center" class="my-4 mx-auto" v-if="showType === 0">
-            <v-tab
-              v-for="(item, index) in contracts"
-              :key="item.contractId"
-              variant="tonal"
-              color="secondary"
-              class="mx-2"
-            >
-              <v-tooltip location="bottom" :text="getTooltipText(item, index)" :disabled="!hasMaster(item)">
-                <template #activator="{ props }">
-                  <span v-bind="props" class="text-lowercase">{{
-                    contracts && contracts.length === 1 && "name" in contracts ? (contracts as any).name : item.name
-                  }}</span>
-                </template>
-              </v-tooltip>
-            </v-tab>
-          </v-tabs>
         </v-card-title>
         <v-card-text>
           <template v-if="showType === 0">
@@ -111,7 +94,6 @@
               <CopyReadonlyInput label="Monitoring URL" :data="grafanaURL" :loading="isLoading" />
             </v-form>
             <v-form readonly v-else>
-              <CopyReadonlyInput label="Name" :data="data.name" />
               <CopyReadonlyInput label="IP" :data="data[0].workloads[0].data.backends.join(', ')" />
               <CopyReadonlyInput
                 label="Domain"

packages/playground/src/components/manage_gateway_dialog.vue

@@ -64,10 +64,6 @@
             :deleting="deleting"
             no-data-text="No domains attached to this virtual machine."
           >
-            <template #[`item.name`]="{ item }">
-              {{ item.name }}
-            </template>
-
             <template #[`item.tls_passthrough`]="{ item }"> {{ item.tls_passthrough ? "Yes" : "No" }} </template>
 
             <template #[`item.backends`]="{ item }">
@@ -167,7 +163,7 @@
         <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
         <v-card-text class="d-flex flex-wrap">
           <v-chip label class="mr-1 mb-5" v-for="gw in gatewaysToDelete" :key="gw.name">
-            {{ gw.name }}
+            {{ gw.domain }}
           </v-chip>
           <v-divider />
         </v-card-text>
@@ -289,7 +285,6 @@ export default {
 
     watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
     const tableHeaders = ref([
-      { title: "Name", key: "name" },
       { title: "Contract ID", key: "contractId" },
       { title: "Domain", key: "domain" },
       { title: "TLS Passthrough", key: "tls_passthrough" },
@@ -406,6 +401,7 @@ export default {
       deleting.value = true;
       const deletedGateways = new Set<GridGateway>();
       for (const gw of gatewaysToDelete.value) {
+        gw.name = gw.domain.split(".")[0];
         await grid.gateway
           .delete_name(gw)
           .then(() => deletedGateways.add(gw))
@@ -499,8 +495,15 @@ export default {
     const subdomainRules = [
       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: string) => validators.isAlpha("Subdomain must start with an alphabet char.")(subdomain[0]),
+      validators.IsAlphanumericExpectDashAndUnderscore(
+        "Subdomain should consist only letters, numbers, dashes, and underscores",
+      ),
+      (subdomain: string) =>
+        validators.isAlphanumeric("Subdomain should start of letters and numbers only.")(subdomain[0]),
+      (subdomain: string) =>
+        validators.isAlphanumeric("Subdomain should end with letters and numbers only.")(
+          subdomain[subdomain.length - 1],
+        ),
       validators.minLength("Subdomain must be at least 4 characters.", 4),
       (subdomain: string) => validators.maxLength("Subdomain cannot exceed 35 characters.", 35)(subdomain),
     ];

packages/playground/src/components/vm_deployment_table.vue

@@ -274,11 +274,11 @@ const filteredHeaders = computed(() => {
   if (props.projectName.toLowerCase() === ProjectName.Domains.toLowerCase()) {
     return [
       {
-        title: "Name",
-        key: "domain-name",
+        title: "Domain",
+        key: "fqdn",
         value(item: any) {
           const [workload] = item[0].workloads;
-          return workload.data.name || workload.name;
+          return workload.result.data.fqdn || workload.data.fqdn;
         },
       },
       {
@@ -289,14 +289,6 @@ const filteredHeaders = computed(() => {
         },
         sortable: false,
       },
-      {
-        title: "Domain",
-        key: "fqdn",
-        value(item: any) {
-          const [workload] = item[0].workloads;
-          return workload.result.data.fqdn || workload.data.fqdn;
-        },
-      },
       {
         title: "Health",
         key: "health",

packages/playground/src/weblets/tf_deployment_list.vue

@@ -430,7 +430,12 @@
               {{ worker.name }}
             </v-chip>
           </template>
-          <v-chip class="ma-3">
+          <template v-if="item.length > 0">
+            <template v-for="props in item" :key="props.name">
+              <v-chip class="ma-3"> {{ props.workloads[0].result.data.fqdn || props.workloads[0].data.fqdn }} </v-chip>
+            </template>
+          </template>
+          <v-chip class="ma-3" v-else>
             {{ item.name }}
           </v-chip>
         </template>
@@ -518,7 +523,7 @@ async function onDelete(k8s = false) {
         if (projectNameLower === ProjectName.Domains.toLowerCase()) {
           await deleteGatewayDeployment(
             updateGrid(grid, { projectName: projectNameLower }),
-            item[0].workloads[0].name as string,
+            item[0].workloads[0].data.name ? (item[0].workloads[0].data.name as string) : item[0].workloads[0].name,
           );
         } else {
           await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {

packages/playground/src/weblets/tf_domains.vue

@@ -13,10 +13,17 @@
             :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.IsAlphanumericExpectDashAndUnderscore(
+                'Subdomain should consist only letters, numbers, dashes, and underscores',
+              ),
+              (subdomain: string) =>
+                validators.isAlphanumeric('Subdomain should start of letters and numbers only.')(subdomain[0]),
+              (subdomain: string) =>
+                validators.isAlphanumeric('Subdomain should end with letters and numbers only.')(
+                  subdomain[subdomain.length - 1],
+                ),
               validators.minLength('Subdomain must be at least 4 characters.', 4),
-              subdomain => validators.maxLength('Subdomain cannot exceed 35 characters.', 35)(subdomain),
+              (subdomain: string) => validators.maxLength('Subdomain cannot exceed 35 characters.', 35)(subdomain),
             ]"
             :async-rules="[validateSubdomain]"
             #="{ props }"
@@ -118,7 +125,9 @@ async function deploy() {
     layout.value.setStatus("deploy", "Preparing to deploy gateway...");
 
     const gateway: any = await deployGatewayName(grid, selectionDetails.value?.domain, {
-      subdomain: subdomain.value,
+      subdomain: selectionDetails.value?.domain?.enabledCustomDomain
+        ? subdomain.value.replace(/-/g, "")
+        : subdomain.value,
       ip: ip.value,
       port: port.value,
       tlsPassthrough: passThrough.value,
@@ -139,7 +148,6 @@ async function validateSubdomain() {
 </script>
 
 <script lang="ts">
-import { deploymentListEnvironments } from "@/constants";
 import { isAvailableName } from "@/utils/validators";
 
 import type { SelectionDetails } from "../types/nodeSelector";