Skip to content

Commit

Permalink
Merge pull request #1441 from Jeon-Jinhyeok/master
Browse files Browse the repository at this point in the history 
Make a Add VM button in AdminWeb
  • Loading branch information
@powerkimhub
powerkimhub authored Jan 31, 2025
2 parents 4e53fcd + fabea0b commit b122030
Showing 1 changed file with 148 additions and 55 deletions.
203 changes: 148 additions & 55 deletions api-runtime/rest-runtime/admin-web/html/nlb.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -652,7 +652,7 @@
margin-right: 5px;
}

#vmContainer {
#vmContainer, #addVMContainer {
border: 1px solid black;
padding: 10px;
width: 60%;
Expand Down Expand Up @@ -759,7 +759,14 @@ <h1>NLB Management</h1>
<td>{{$nlb.VMGroup.Port}}</td>
</tr>
<tr>
<th colspan="2" style="text-align: center;">VMs</th>
<td colspan="2">
<div style="display: flex; justify-content: center; align-items: center; position: relative;">
<span style="font-weight: bold; margin-right: auto; text-align: center; width: 100%;">VMs</span>
<div style="position: absolute; right: 0;">
<button class="vm-add" style="padding: 1px 5px; font-size: 12px;" onclick="showVMOverlay('{{$nlb.IId.NameId}}', extractNames('{{$nlb.VMGroup.VMs}}'))">add</button>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
Expand Down Expand Up @@ -831,9 +838,7 @@ <h1>NLB Management</h1>
<td colspan="11" class="center-align">No NLBs found for this connection.</td>
</tr>
{{end}}
</table>


</table>
</div>

<!-- Overlay: Add New NLB -->
Expand Down Expand Up @@ -928,7 +933,7 @@ <h3>Tags:</h3>
</div>
<div class="form-group" style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
<button type="submit">Add NLB</button>
<button type="button" onclick="hideOverlay()" style="margin-left: 10px;">Cancel</button>
<button type="button" onclick="hideOverlay('overlay')" style="margin-left: 10px;">Cancel</button>
</div>
</form>
</div>
Expand All @@ -943,6 +948,23 @@ <h3>Tags:</h3>
<div class="add-tag-overlay-content overlay-content"></div>
</div>

<!-- Add VM Overlay -->
<div id="vmOverlay" class="overlay" style="display: none;">
<div class="overlay-content">
<h2>Add VM</h2>
<form id="addVMForm" onsubmit="event.preventDefault(); addVMToNLB();">
<div class="form-group">
<label for="addVmContainer">VMs:</label>
<div id="addVMContainer" name="addVmContainer"></div>
</div>
<div class="form-group" style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
<button type="submit">Add VM</button>
<button type="button" onclick="hideOverlay('vmOverlay')" style="margin-left: 10px;">Cancel</button>
</div>
</form>
</div>
</div>

<!-- Error Modal -->
<div id="errorModal" class="overlay">
<div class="overlay-content">
Expand Down Expand Up @@ -1017,7 +1039,6 @@ <h2>System ID (Managed by CSP)</h2>
}
}


function clearSearchInput() {
let input = document.getElementById('searchInput');
input.value = '';
Expand All @@ -1034,7 +1055,6 @@ <h2>System ID (Managed by CSP)</h2>
}
}


let currentProvider = '';

function showError(message, title) {
Expand Down Expand Up @@ -1103,7 +1123,6 @@ <h2>System ID (Managed by CSP)</h2>
}, 500);
}


function deleteSelectedNLBs() {
const connConfig = document.getElementById('connConfig').value;
const checkboxes = document.querySelectorAll('input[name="deleteCheckbox"]:checked');
Expand Down Expand Up @@ -1174,11 +1193,7 @@ <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.querySelectorAll('#vmContainer input[type="checkbox"]:checked')) // changed
const vms = Array.from(document.querySelectorAll('#vmContainer input[type="checkbox"]:checked'))
.map(checkbox => checkbox.value);

if (vms.length === 0) {
Expand Down Expand Up @@ -1273,7 +1288,7 @@ <h2>System ID (Managed by CSP)</h2>
}

function showOverlay() {
Promise.all([loadVPCs(), loadVMs()])
Promise.all([loadVPCs(), loadVMs('vmContainer')])
.then(() => {
const region = '{{.RegionName}}';
const nlbNameInput = document.getElementById('nlbName');
Expand Down Expand Up @@ -1319,9 +1334,19 @@ <h2>System ID (Managed by CSP)</h2>
document.querySelectorAll('.nlb-tag-input').forEach(tagInput => tagInput.remove());
}

function extractNames(vmString) {
return vmString.match(/\{([^ ]+)/g).map(match => match.replace("{", ""));
}

let currnetNLBName = ""
function showVMOverlay(nlbName, vmGroups) {
loadVMsExceptExist('addVMContainer', vmGroups);
currnetNLBName = nlbName;
document.getElementById('vmOverlay').style.display = 'flex';
}

function hideOverlay() {
document.getElementById('overlay').style.display = 'none';
function hideOverlay(pos) {
document.getElementById(pos).style.display = 'none';
document.removeEventListener('keydown', handleEsc);
clearFormFields();
}
Expand Down Expand Up @@ -1772,54 +1797,120 @@ <h3 style="color: #f08080;">Unhealthy VMs (${unhealthyVMs.length})</h3>
}
});

function loadVMs() {
const connConfig = document.getElementById('connConfig').value;
const url = `/spider/vm?ConnectionName=${encodeURIComponent(connConfig)}`;
function addVMToNLB(){
const selectedVMs = getSelectedVMs();
const url = `/spider/nlb/${currnetNLBName}/vms`;

if(selectedVMs.length === 0){
alert("Please Select at Least One VM.");
return;
}

const requestBody = {
ConnectionName: '{{.ConnectionConfig}}',
ReqInfo:{
VMs: selectedVMs
}
};

fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(requestBody)
})
.then(response => {
if(!response.ok){
throw new Error(`ADD VM ERROR!: ${response.status}`);
}
return response.json();
})
.then(data => {
alert("VMs added successfuly!");
location.reload();
})
.catch(error => {
console.error('Error:', error);
alert("Failed to add VMs");
});
} // end of addVMtoNLB()

function getSelectedVMs(){
const checkboxes = document.querySelectorAll("input[name='vms']:checked");
return Array.from(checkboxes).map(checkbox => checkbox.value);
} // end of getSelectedVMs()

function loadVMs(container) {
fetchVMs()
.then(data => {
renderVMs(data.vm, container);
})
.catch(error => {
console.error('Error loading VMs:', error);
});
} // end of loadVMs()

function loadVMsExceptExist(container, existVMList){
fetchVMs().then(data => {
const filteredVMs = data.vm.filter(vm => !existVMList.includes(vm.IId.NameId));
renderVMs(filteredVMs, container);
});
} // end of loadVMsExceptExist()

function fetchVMs() {
const connConfig = '{{.ConnectionConfig}}';
const url = `/spider/vm?ConnectionName=${encodeURIComponent(connConfig)}`;

return fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.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);
});
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.catch(error => {
console.error('Error loading VMs:', error);
});
}
console.error('Error fetching VMs:', error);
throw error;
});
} // end of fetch VMs()

function renderVMs(vms, container) {
const vmContainer = document.getElementById(container);
vmContainer.innerHTML = '';

if (vms.length === 0) {
const noVMMessage = document.createElement('p');
noVMMessage.textContent = 'No VMs available.';
noVMMessage.style.color = 'red';
vmContainer.appendChild(noVMMessage);
} else {
vms.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})`;

checkboxWrapper.appendChild(checkbox);
checkboxWrapper.appendChild(label);

vmContainer.appendChild(checkboxWrapper);
});
}
} // end of renderVMs()

document.addEventListener('DOMContentLoaded', loadVMs);

Expand Down Expand Up @@ -1934,6 +2025,8 @@ <h3 style="color: #f08080;">Unhealthy VMs (${unhealthyVMs.length})</h3>

selection.removeAllRanges();
}


</script>

</html>

0 comments on commit b122030

Please sign in to comment.