Enhance Zone selection method when a vpc/subnet creation in AdminWeb2

cloud-barista · Aug 20, 2024 · f750259 · f750259
1 parent a40126d
commit f750259
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/api-runtime/rest-runtime/admin-web/html/vpc-subnet.html b/api-runtime/rest-runtime/admin-web/html/vpc-subnet.html
@@ -675,7 +675,7 @@ <h3>Subnet Info:</h3>
                     </div>
                     <div class="form-group">
                         <label for="subnetZone">Zone:</label>
-                        <input type="text" id="subnetZone" name="subnetZone" required>
+                        <select id="subnetZone" name="subnetZone" required></select>
                     </div>
                     <div class="form-group" style="padding-left: 145px;">
                         <label for="subnetTags">Tags:</label>
@@ -954,17 +954,39 @@ <h2>Add New Subnet</h2>
 
     function showOverlay() {
         const region = '{{.RegionName}}';
+        const regionId = '{{.Region}}';
+        const defaultZone = '{{.Zone}}';
         const vpcNameInput = document.getElementById('vpcName');
         const subnetNameInput = document.getElementById('subnetName');
-        const zoneInput = document.getElementById('subnetZone');
-        const zone = '{{.Zone}}';
+        const zoneSelect = document.getElementById('subnetZone');
+        const connConfig = document.getElementById('connConfig').value;
 
         vpcNameInput.value = `${region}-vpc-${Math.random().toString(36).substring(2, 5)}`;
         document.getElementById('vpcCIDR').value = '10.0.0.0/16';
-        zoneInput.value = zone;
-        subnetNameInput.value = `${region}-${zone}-subnet-${Math.random().toString(36).substring(2, 5)}`;
+        subnetNameInput.value = `${region}-${defaultZone}-subnet-${Math.random().toString(36).substring(2, 5)}`;
         document.getElementById('subnetCIDR').value = '10.0.1.0/24';
 
+        fetch(`/spider/regionzone/${regionId}?ConnectionName=${connConfig}`)
+            .then(response => response.json())
+            .then(data => {
+                zoneSelect.innerHTML = '';
+                data.ZoneList.forEach(zone => {
+                    const option = document.createElement('option');
+                    option.value = zone.Name;
+                    option.textContent = `${zone.DisplayName} (${zone.Status})`;
+
+                    if (zone.Name === defaultZone) {
+                        option.selected = true;
+                    }
+
+                    zoneSelect.appendChild(option);
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching Zone List:', error);
+                alert('Failed to load Zone list.');
+            });
+
         document.getElementById('overlay').style.display = 'flex';
         document.addEventListener('keydown', handleEsc);
         clearFormFields();
@@ -998,21 +1020,6 @@ <h2>Add New Subnet</h2>
         document.querySelectorAll('.vpc-tag-input, .subnet-tag-input').forEach(tagInput => tagInput.remove());
     }
 
-    function showSubnetOverlay(vpcName) {
-        const region = '{{.RegionName}}';
-        const zone = '{{.Zone}}';
-
-        document.getElementById('subnetVPCName').value = vpcName;
-        document.getElementById('subnetVPCNameDisplay').value = vpcName;
-        document.getElementById('addSubnetZone').value = zone;
-        document.getElementById('addSubnetName').value = `${region}-${zone}-subnet-${Math.random().toString(36).substring(2, 5)}`;
-        document.getElementById('addSubnetCIDR').value = '10.0.2.0/24';
-
-        document.getElementById('subnet-overlay').style.display = 'flex';
-        document.addEventListener('keydown', handleEscSubnet);
-        clearSubnetFormFields();
-    }
-
     function hideSubnetOverlay() {
         document.getElementById('subnet-overlay').style.display = 'none';
         document.removeEventListener('keydown', handleEscSubnet);