Skip to content

Commit

Permalink
Enhance UI of VM Selection in NLB
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jeon-Jinhyeok
Jeon-Jinhyeok committed Jan 21, 2025
1 parent 01f16c0 commit 5c24add
Showing 1 changed file with 63 additions and 29 deletions.
92 changes: 63 additions & 29 deletions api-runtime/rest-runtime/admin-web/html/nlb.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,6 +643,23 @@
background-color: #82b8e6;
}

.checkbox-wrapper {
display: block;
margin-right: 0px;
}

.checkbox-wrapper input[type="checkbox"] {
margin-right: 5px;
}

#vmContainer {
border: 1px solid black;
padding: 10px;
width: 60%;
overflow-y: auto;
margin: 0 auto;
white-space: normal;
}

</style>
</head>
Expand Down Expand Up @@ -877,9 +894,8 @@ <h3>VM Groups:</h3>
<input type="number" id="vmPort" name="vmPort" required min="1" max="65535" value="22" style="background-color: #F5F5DC; width: 70%;" onchange="if(this.value<1)this.value=1;if(this.value>65535)this.value=65535;">
</div>
<div class="form-group">
<label for="vms">VMs:</label>
<select id="vms" name="vms" multiple style="width: 65%; height: 100px;">
</select>
<label for="vmContainer">VMs:</label>
<div id="vmContainer" name="vmContainer"></div>
</div>

<div style="margin-top: 20px;"></div>
Expand Down Expand Up @@ -1158,10 +1174,13 @@ <h2>System ID (Managed by CSP)</h2>
return false;
}

const vms = Array.from(document.getElementById('vms').options)
.filter(option => option.selected)
.map(option => option.value);
// const vms = Array.from(document.getElementById('vms').options)
// .filter(option => option.selected)
// .map(option => option.value);

const vms = Array.from(document.querySelectorAll('#vmContainer input[type="checkbox"]:checked')) // changed
.map(checkbox => checkbox.value);

if (vms.length === 0) {
alert("Please select at least one VM.");
return false;
Expand All @@ -1174,7 +1193,7 @@ <h2>System ID (Managed by CSP)</h2>
if (!validateForm()) {
return;
}

console.log("POSTNLB");
const connConfig = document.getElementById('connConfig').value;
const nlbName = String(document.getElementById('nlbName').value);
const vpcName = document.getElementById('vpcName').value;
Expand All @@ -1184,7 +1203,7 @@ <h2>System ID (Managed by CSP)</h2>
const port = document.getElementById('port').value;
const vmProtocol = document.getElementById('vmProtocol').value;
const vmPort = document.getElementById('vmPort').value;
const vms = Array.from(document.getElementById('vms').selectedOptions).map(option => option.value);
const vms = Array.from(document.querySelectorAll('#vmContainer input[type="checkbox"]:checked')).map(checkbox => checkbox.value);
const hcProtocol = document.getElementById('hcProtocol').value;
const hcPort = document.getElementById('hcPort').value;
const interval = document.getElementById('interval').value;
Expand Down Expand Up @@ -1246,11 +1265,11 @@ <h2>System ID (Managed by CSP)</h2>
function showErrorModal(title, message) {
document.getElementById('errorTitle').textContent = title;
document.getElementById('errorMessage').textContent = message;
document.getElementById('errorModal').style.display = 'flex'; // Show the modal
document.getElementById('errorModal').style.display = 'flex';
}

function closeErrorModal() {
document.getElementById('errorModal').style.display = 'none'; // Hide the modal
document.getElementById('errorModal').style.display = 'none';
}

function showOverlay() {
Expand Down Expand Up @@ -1294,7 +1313,7 @@ <h2>System ID (Managed by CSP)</h2>
document.getElementById('threshold').value = 'default';

// Reset VM list
document.getElementById('vms').innerHTML = '';
document.getElementById('vmContainer').innerHTML = '';

// Reset tag fields
document.querySelectorAll('.nlb-tag-input').forEach(tagInput => tagInput.remove());
Expand Down Expand Up @@ -1763,28 +1782,43 @@ <h3 style="color: #f08080;">Unhealthy VMs (${unhealthyVMs.length})</h3>
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
const vmSelect = document.getElementById('vms');
vmSelect.innerHTML = '';

if (data.vm.length === 0) {
const noVMOption = document.createElement('option');
noVMOption.text = 'No VMs available.';
noVMOption.disabled = true;
vmSelect.appendChild(noVMOption);
} else {
data.vm.forEach((vm) => {
const option = document.createElement('option');
option.value = vm.IId.NameId;
option.text = `${vm.IId.NameId} (${vm.PrivateIP})`;
vmSelect.appendChild(option);
});
.then(response => response.json())
.then(data => {
const vmContainer = document.getElementById('vmContainer');
vmContainer.innerHTML = '';

if (data.vm.length === 0) {
const noVMMessage = document.createElement('p');
noVMMessage.textContent = 'No VMs available.';
noVMMessage.style.color = 'red';
vmContainer.appendChild(noVMMessage);
} else {
data.vm.forEach((vm) => {
const checkboxWrapper = document.createElement('div');
checkboxWrapper.className = 'checkbox-wrapper';

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'vms';
checkbox.value = vm.IId.NameId;
checkbox.id = `vm-${vm.IId.NameId}`;

const label = document.createElement('label');
label.htmlFor = `vm-${vm.IId.NameId}`;
label.textContent = `${vm.IId.NameId} (${vm.PrivateIP})`;

// add lable and checkbox in checkboxWrapper
checkboxWrapper.appendChild(checkbox);
checkboxWrapper.appendChild(label);

// add vmContainer in checkboxWrapper
vmContainer.appendChild(checkboxWrapper);
});
}
})
.catch(error => {
console.error('Error loading VMs:', error);
});
});
}

document.addEventListener('DOMContentLoaded', loadVMs);
Expand Down

0 comments on commit 5c24add

Please sign in to comment.