Skip to content

Commit

Permalink
Merge pull request #97 from seokho-son/main
Browse files Browse the repository at this point in the history 
Add resource view
  • Loading branch information
@seokho-son
seokho-son authored Nov 1, 2023
2 parents a364492 + 70336ac commit a3ab51c
Show file tree
Hide file tree
Showing 3 changed files with 1,843 additions and 1,729 deletions.
249 changes: 162 additions & 87 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,20 +213,110 @@
</div>
</div>

<!-- Create toggleView Field -->
<div class="form-group col">
<button type="button" onClick="toggleView();" class="btn btn-info w-100">Toggle Map/API</button>
</div>

</form>
</div>
</div>


<!-- MCIS Provisioning Card -->
<div class="card mb-2">
<div class="card-header">MCIS Provisioning</div>
<div class="card-body d-flex flex-column">
<form id="mcis-configuration-form" class="form-row">
<!-- Recommendation Policy Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Policy</span>
</div>
<select id="recommendPolicy" name="recommendPolicy" class="form-control">
<option value="location" selected="selected">Location-based</option>
<option value="price">Cost-based</option>
<option value="performance">Performance-based</option>
</select>
</div>
</div>

<!-- OS Image Type Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">OS Image</span>
</div>
<select id="osImage" name="osImage" class="form-control">
<option value="Ubuntu18.04" selected="selected">Ubuntu 18.04</option>
<option value="Ubuntu22.04">Ubuntu 22.04</option>
<option value="Debian10">Debian 10</option>
<option value="WindowsServer2012R2">Windows 2012 R2</option>
</select>
</div>
</div>

<!-- Disk Size Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disk Size</span>
</div>
<input type="text" class="form-control" id="diskSize" name="diskSize" value="default">
</div>
</div>

<!-- CPU Range Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">CPU(N)</span>
</div>
<input type="number" class="form-control m-0" id='minVCPU' value="1" min="1" max="448" step="1">
<span class="mx-1">~</span>
<input type="number" class="form-control m-0" id='maxVCPU' value="8" min="1" max="448" step="1">
</div>
</div>


<!-- Memory Range Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Mem(GB)</span>
</div>
<input type="number" class="form-control m-0" id='minRAM' value="0.5" min="0.5" max="12288"
step="0.5">
<span class="mx-1">~</span>
<input type="number" class="form-control m-0" id='maxRAM' value="8" min="0.5" max="12288" step="0.5">
</div>
</div>

<!-- Clear Selection Field -->
<div class="form-group col">
<button type="button" onClick="clearCircle('clearText');" class="btn btn-secondary w-100">Clear
Configuration</button>
</div>

<!-- Create MCIS Field -->
<div class="form-group col">
<button type="button" onClick="toggleView();" class="btn btn-secondary w-100">Toggle Map/API</button>
<button type="button" id="createMcisButton" onClick="createMcis();" class="btn btn-primary w-100">Create
MCIS</button>
</div>



</form>
</div>
</div>

<!-- MCIS Setting Card -->
<!-- MCIS Control Card -->
<div class="card mb-2">
<div class="card-header">MCIS Setting</div>
<div class="card-header">MCIS Control</div>
<div class="card-body d-flex flex-column">
<form id="mcis-setting-form" class="form-row">
<form id="mcis-control-form" class="form-row">

<!-- Namespace ID Field -->
<div class="form-group col">
<div class="input-group">
Expand All @@ -240,6 +330,7 @@
</div>
</div>


<!-- MCIS ID Field -->
<div class="form-group col">
<div class="input-group">
Expand Down Expand Up @@ -278,48 +369,11 @@
</div>
</div>

<!-- Resource Control Field -->
<div class="form-group col dropdown">
<button class="btn btn-primary dropdown-toggle w-100" type="button" id="resourceControlDropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resource Control
</button>
<div class="dropdown-menu" aria-labelledby="resourceControlDropdown">
<a class="dropdown-item" href="javascript:void(0)" onClick="releaseResources();">Release Used
Resources</a>
<a class="dropdown-item" href="javascript:void(0)" onClick="resourceOverview();">Overview
Resources</a>
<a class="dropdown-item" href="javascript:void(0)" onClick="registerCspResource();">Register Existing
Resources</a>
</div>
</div>


</form>
</div>
</div>


<!-- MCIS Control Card -->
<div class="card mb-2">
<div class="card-header">MCIS Control</div>
<div class="card-body d-flex flex-column">
<form id="mcis-control-form" class="form-row">

<!-- Create MCIS Field -->
<div class="form-group col">
<button type="button" id="createMcisButton" onClick="createMcis();" class="btn btn-primary w-100">Create
MCIS</button>
</div>

<!-- Status Field -->
<div class="form-group col">
<input type="button" value="Status" onClick="statusMCIS();" class="btn btn-info w-100">
</div>

<!-- Control Actions Dropdown -->
<div class="form-group col dropdown">
<button class="btn btn-warning dropdown-toggle w-100" type="button" id="controlActionsDropdown"
<button class="btn btn-primary dropdown-toggle w-100" type="button" id="controlActionsDropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
Expand All @@ -332,15 +386,9 @@
</div>
</div>

<!-- Delete Field -->
<div class="form-group col">
<input type="button" value="Delete" onClick="deleteMCIS();" class="btn btn-dark w-100">
</div>


<!-- NLB Control Dropdown -->
<div class="form-group col dropdown">
<button class="btn btn-secondary dropdown-toggle w-100" type="button" id="nlbControlDropdown"
<button class="btn btn-primary dropdown-toggle w-100" type="button" id="nlbControlDropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
NLB Control
</button>
Expand All @@ -351,90 +399,117 @@
</div>
</div>

<!-- Status Field -->
<div class="form-group col">
<input type="button" value="Status" onClick="statusMCIS();" class="btn btn-info w-100">
</div>

<!-- Delete Field -->
<div class="form-group col">
<input type="button" value="Delete" onClick="deleteMCIS();" class="btn btn-secondary w-100">
</div>


</form>
</div>
</div>

<!-- MCIS Configuration Card -->
<!-- Resource view Card -->
<div class="card mb-2">
<div class="card-header">MCIS Configuration</div>
<div class="card-header">Resource View</div>
<div class="card-body d-flex flex-column">
<form id="mcis-configuration-form" class="form-row">
<!-- Recommendation Policy Field -->
<form id="resource-view-form" class="form-row">


<!-- vNet ID Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Policy</span>
<span class="input-group-text" id="vNetLabel">VNet</span>
</div>
<select id="recommendPolicy" name="recommendPolicy" class="form-control">
<option value="location" selected="selected">Location-based</option>
<option value="price">Cost-based</option>
<option value="performance">Performance-based</option>
<select id="vNet" name="vNet" class="form-control" aria-label="vNet ID" aria-describedby="vNetLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
</div>

<!-- OS Image Type Field -->
<!-- securityGroup Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">OS Image</span>
<span class="input-group-text" id="securityGroupLabel">Security</span>
</div>
<select id="osImage" name="osImage" class="form-control">
<option value="Ubuntu18.04" selected="selected">Ubuntu 18.04</option>
<option value="Ubuntu22.04">Ubuntu 22.04</option>
<option value="Debian10">Debian 10</option>
<option value="WindowsServer2012R2">Windows 2012 R2</option>
<select id="securityGroup" name="securityGroup" class="form-control" aria-label="securityGroup ID"
aria-describedby="securityGroupLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
</div>

<!-- Disk Size Field -->

<!-- sshKey Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disk Size</span>
<span class="input-group-text" id="sshKeyLabel">SSHKey</span>
</div>
<input type="text" class="form-control" id="diskSize" name="diskSize" value="default">
<select id="sshKey" name="sshKey" class="form-control" aria-label="sshKey ID"
aria-describedby="sshKeyLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
</div>

<!-- CPU Range Field -->
<!-- image Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">CPU(N)</span>
<span class="input-group-text" id="imageLabel">Image</span>
</div>
<input type="number" class="form-control m-0" id='minVCPU' value="1" min="1" max="448" step="1">
<span class="mx-1">~</span>
<input type="number" class="form-control m-0" id='maxVCPU' value="8" min="1" max="448" step="1">
<select id="image" name="image" class="form-control" aria-label="sshKey ID"
aria-describedby="imageLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
</div>


<!-- Memory Range Field -->
<!-- spec Field -->
<div class="form-group col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Mem(GB)</span>
<span class="input-group-text" id="specLabel">Spec ID</span>
</div>
<input type="number" class="form-control m-0" id='minRAM' value="0.5" min="0.5" max="12288"
step="0.5">
<span class="mx-1">~</span>
<input type="number" class="form-control m-0" id='maxRAM' value="8" min="0.5" max="12288" step="0.5">
<select id="spec" name="spec" class="form-control" aria-label="SubGroup ID"
aria-describedby="specLabel">
<!-- Options will be filled dynamically -->
</select>
</div>
</div>

<!-- Clear Selection Field -->
<div class="form-group col">
<button type="button" onClick="clearCircle('clearText');" class="btn btn-secondary w-100">Clear
Selection</button>
<!-- Resource Control Field -->
<div class="form-group col dropdown">
<button class="btn btn-primary dropdown-toggle w-100" type="button" id="resourceControlDropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resource Control
</button>
<div class="dropdown-menu" aria-labelledby="resourceControlDropdown">
<a class="dropdown-item" href="javascript:void(0)" onClick="releaseResources();">Release Used
Resources</a>
<a class="dropdown-item" href="javascript:void(0)" onClick="resourceOverview();">Overview
Resources</a>
<a class="dropdown-item" href="javascript:void(0)" onClick="registerCspResource();">Register Existing
Resources</a>
</div>
</div>


</form>
</div>
</div>




<!-- MCIS Application Card -->
<div class="card mb-2">
<div class="card-header">MCIS Application</div>
Expand Down Expand Up @@ -573,16 +648,16 @@
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('#namespace, #mcisid, #subgroupid, #vmid').forEach(element => {
let previousValue = null;
let previousValue = null;

element.addEventListener('click', () => {

if (element.value && element.selectedIndex >= 0 && element.options[element.selectedIndex] && element.value !== previousValue) {
var tosave = element.options[element.selectedIndex].text
navigator.clipboard.writeText(tosave)
.then(() => {
console.log('Text copied to clipboard: '+tosave);
previousValue = element.value;
console.log('Text copied to clipboard: ' + tosave);
previousValue = element.value;
})
.catch(err => {
console.error('Error in copying text: ', err);
Expand Down
Loading

0 comments on commit a3ab51c

Please sign in to comment.