ngaimy
/
availability-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
availability-ui/resources/views/incomingReplications/modal.blade.php

1401 lines
123 KiB
PHP
Raw Blame History

<!-- New Protection -->
<div class="modal fade" id="incoming-newProtection" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
<div class="modal-content border-0" style="overflow:0 !important;">
<div class="modal-header border-top-blue">
<h5>NEW INCOMING PROTECTION</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row px-3">
<!-- Left Side Bar -->
<div class="col-md-3 col-12 p-0 border-right">
<div class="sidebar-custom flex-column nav-pills text-left progress-bar">
<a class="active step-link sidebar-step" href="#incoming-sourceOut">Source VMs</a>
<a class="step-link sidebar-step" href="#incoming-destinationOut">Destination VDC and <br> Storage policy</a>
<a class="step-link sidebar-step" href="#incoming-settingsOut">Settings</a>
<a class="step-link sidebar-step" href="#incoming-seedOut">Seed VM</a>
<a class="step-link sidebar-step" href="#incoming-disksOut">Replicated Disks</a>
<a class="step-link sidebar-step" href="#incoming-completeOut">Ready to complete</a>
</div>
</div>
<!-- Right Side bar -->
@include('incomingReplications/form/newProtection')
</div>
</div>
<!-- Buttons -->
<div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
<button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
<button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
<button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
</div>
</div>
</div>
</div>
<!-- New Protection End -->
<!-- New Migrate -->
<div class="modal fade" id="incoming-newMigration" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
<div class="modal-content border-0" style="overflow:0 !important;">
<div class="modal-header border-top-blue">
<h5>NEW INCOMING MIGRATION</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row px-3">
<!-- Left Side Bar -->
<div class="col-md-3 col-12 p-0 border-right">
<div class="sidebar-custom flex-column nav-pills text-left progress-bar">
<a class="active step-link sidebar-step" href="#incoming-sourceOutMig">Source VMs</a>
<a class="step-link sidebar-step" href="incoming-#destinationOutMig">Destination VDC and <br> Storage policy</a>
<a class="step-link sidebar-step" href="incoming-#settingsOutMig">Settings</a>
<a class="step-link sidebar-step" href="incoming-#seedOutMig">Seed VM</a>
<a class="step-link sidebar-step" href="incoming-#disksOutMig">Replicated Disks</a>
<a class="step-link sidebar-step" href="incoming-#completeOutMig">Ready to complete</a>
</div>
</div>
<!-- Right Side bar -->
@include('incomingReplications/form/newMigration')
</div>
</div>
<!-- Buttons -->
<div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
<button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
<button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
<button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
</div>
</div>
</div>
</div>
<!-- New Migrate End -->
<!-- Fast Migrate -->
<div class="modal fade" id="incoming-fastMigrate" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
<div class="modal-content border-0" style="overflow:0 !important;">
<div class="modal-header border-top-blue">
<h5>NEW INCOMING MIGRATION</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row px-3">
<!-- Left Side Bar -->
<div class="col-md-3 col-12 p-0 border-right">
<div class="sidebar-custom flex-column nav-pills text-left progress-bar">
<a class="active step-link sidebar-step" href="#incoming-sourceOutMigFast">Source VMs</a>
<a class="step-link sidebar-step" href="#incoming-destinationOutMigFast">Destination VDC and <br> Storage policy</a>
<a class="step-link sidebar-step" href="#incoming-settingsOutMigFast">Settings</a>
<a class="step-link sidebar-step" href="#incoming-seedOutMigFast">Seed VM</a>
<a class="step-link sidebar-step" href="#incoming-disksOutMigFast">Replicated Disks</a>
<a class="step-link sidebar-step" href="#incoming-completeOutMigFast">Ready to complete</a>
</div>
</div>
<!-- Right Side bar -->
@include('incomingReplications/form/fastMigrate')
</div>
</div>
<!-- Buttons -->
<div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
<button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
<button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
<button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
</div>
</div>
</div>
</div>
<!-- Fast Migrate End -->
<!-- ============Settings============= -->
<!-- Replications Settings -->
<div class="modal fade" id="incoming-replicationSettings" tabindex="-1" role="dialog" aria-labelledby="replicationSettingsLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 800px;">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="replicationSettingsLabel">Edit Replication Settings&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" style="height: 60vh;overflow-y: auto;">
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="useSla" id="sla-radio" value="option3" disabled>
<label class="form-check-label" for="sla-radio">
SLA profiles are not available for 'organization-developer'
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="useSla" id="manual-radio" value="option1" checked>
<label class="form-check-label" for="manual-radio">
Configure settings manually
</label>
</div>
<div class="my-3">
<div class="mb-2">
<b>Target recovery point objective (RPO)</b>
<div class="row mb-3">
<div class="col-md-12 mb-2">
<div id="customTitleOverlay2"></div>
<table class="table-container" id="rpoTable2">
<thead class="rpoTh" id="rpoTh2">
<th colspan="4" style="border-left: 1px solid #ededed;">1 min</th>
<th colspan="5" style="border-left: 1px solid #ededed;">5 min</th>
<th colspan="10" style="border-left: 1px solid #ededed;">30 min</th>
<th colspan="10" style="border-left: 1px solid #ededed;">2 hours</th>
<th colspan="5" style="border-left: 1px solid #ededed;">8 hours</th>
<th colspan="6" style="border-right: 1px solid #ededed;">24 hours</th>
</thead>
<tbody class="rpoTd" id="rpoTd2">
<tr>
<td title="1 min"></td>
<!-- divider -->
<td title="2 min"></td>
<td title="3 min"></td>
<td title="4 min"></td>
<!-- colspan-3 -->
<td title="5 min"></td>
<!-- divider -->
<td title="10 min"></td>
<td title="15 min"></td>
<td title="20 min"></td>
<td title="25 min"></td>
<!-- colspan-4 -->
<td title="30 min"></td>
<!-- divider -->
<td title="35 min"></td>
<td title="40 min"></td>
<td title="45 min"></td>
<td title="50 min"></td>
<td title="55 min"></td>
<td title="1 h"></td>
<td title="1 h 15 min"></td>
<td title="1 h 30 min"></td>
<td title="1 h 45 min"></td>
<!-- colspan-9 -->
<td title="2 h"></td>
<!-- divider -->
<td title="2 h 15 min"></td>
<td title="2 h 30 min"></td>
<td title="3 h"></td>
<td title="3 h 30 min"></td>
<td title="4 h"></td>
<td title="4 h 30 min"></td>
<td title="5 h"></td>
<td title="6 h"></td>
<td title="7 h"></td>
<!-- colspan-9 -->
<td title="8 h"></td>
<!-- divider -->
<td title="9 h"></td>
<td title="10 h"></td>
<td title="11 h"></td>
<td title="12 h"></td>
<td title="14 h"></td>
<td title="16 h"></td>
<td title="18 h"></td>
<td title="20 h"></td>
<td title="22 h"></td>
<!-- colspan-9 -->
<td title="1 day"></td>
</tr>
</tbody>
</table>
</div>
</div>
<b>Retention policy for point in time instances</b>&nbsp;
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title="Define rules for instance retention over period of time. <br>Max rotated instance count according to current policy is 24."></i>
<div class="d-flex">
<div class="switch_box box_1 pr-2">
<input type="checkbox" class="switch_1">
</div>
<label for="" class="">Enable retention policy</label>
</div>
<div class="row mb-3">
<div class="col">
<label for="">
Instances:
</label>
<input class="line-select" type="number" min="1" max="24" value="4">
</div>
<div class="col">
<label for="">
Distance:
</label>
<div class="d-flex">
<input type="range" min="1" max="29" class="form-control-range mr-2" id="formControlRange" onInput="$('#rangeval').html($(this).val())">
<span id="rangeval" class="py-1">4</span>
</div>
</div>
<div class="col">
<label class="pr-2 m-0">Destination Site</label>
<select class="line-select" style="width: 100px;">
<option value="">minutes</option>
<option value="">hours</option>
<option value="" selected="selected">days</option>
<option value="">weeks</option>
<option value="">months</option>
<option value="">years</option>
</select>
</div>
<div class="col">
Retention period: 4 months.
</div>
</div>
</div>
<div class="mb-2">
<b>Activate quiesce</b>
<div class="d-flex">
<div class="switch_box box_1 pr-2">
<input type="checkbox" class="switch_1">
</div>
<label for="" class="">Activating quiescing will ensure consistency before creating an instance.</label>
</div>
</div>
<div class="">
<b>Compress replication traffic</b>
<div class="d-flex">
<div class="switch_box box_1 pr-2">
<input type="checkbox" class="switch_1">
</div>
<label for="" class="">
Compressing the data is a CPU-expensive operation and should be
enabled only if the transfer of compressed data yields better throughput
in environments with slow and/or unstable network connectivity.
</label>
</div>
</div>
</div>
<div class="mb-3 p-2 bg-primary text-light font-weight-bold">
VDC policy settings
</div>
<p>Select a VM placement and sizing policy to be applied to the recovered virtual machine.</p>
<div class="p-3">
<div class="row mb-3">
<label for="" class="col-4">
VDC VM placement policy
</label>
<select class="col-2 browser-default custom-select mr-3" style="width: 50px;">
<option selected>None</option>
</select>
</div>
<div class="row">
<label for="" class="col-4">
VDC VM sizing policy
</label>
<select class="col-2 browser-default custom-select mr-3" style="width: 50px;">
<option selected>None</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">apply</button>
</div>
</div>
</div>
</div>
<!-- Replications Settings End -->
<!-- Disk Settings -->
<div class="modal fade" id="incoming-diskSettings" tabindex="-1" role="dialog" aria-labelledby="diskSettingsLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 800px;">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="diskSettingsLabel">Disks&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" style="height: 25vh;overflow-y: auto;">
<div class="">Choose which disks of the selected VMs should be replicated</div>
<div class="row my-3">
<div class="col-sm-4">
<table id="data_table_event" class="table table-striped table-bordered nowrap dataTable no-footer radio-table1" role="grid" aria-describedby="data_table_event_info">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" style="width: 30%;" aria-sort="ascending">
VM
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>
<input type="radio" id="" checked>
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M11,5H25V8h2V5a2,2,0,0,0-2-2H11A2,2,0,0,0,9,5v6.85h2Z"></path>
<path d="M30,10H17v2h8v6h2V12h3V26H22V17a2,2,0,0,0-2-2H6a2,2,0,0,0-2,2V31a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V28h8a2,2,0,0,0,2-2V12A2,2,0,0,0,30,10ZM6,31V17H20v9H16V20H14v6a2,2,0,0,0,2,2h4v3Z"></path>
</svg>
abc123
</td>
</tr>
</tbody>
</table>
<div id="" class="dataTables_processing card" style="display: none;">
Processing...
</div>
</div>
<div class="col-sm-8">
<table id="data_table_event" class="table table-striped table-bordered nowrap dataTable no-footer radio-table1" role="grid" aria-describedby="data_table_event_info">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" style="width: 30%;" aria-sort="ascending">
<input type="checkbox" id="">
</th>
<th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" style="width: 30%;" aria-sort="ascending">
Key
</th>
<th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" style="width: 30%;" aria-sort="ascending">
Label
</th>
<th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" style="width: 30%;" aria-sort="ascending">
Capacity
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td><input type="checkbox" class="select-checkbox" id=""></td>
<td>2000</td>
<td>Hard disk 1</td>
<td>10.00 GB</td>
</tr>
</tbody>
</table>
<div id="" class="dataTables_processing card" style="display: none;">
Processing...
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">ok</button>
</div>
</div>
</div>
</div>
<!-- Disk Settings End -->
<!-- Change storage policy -->
<div class="modal fade" id="incoming-changeSP" tabindex="-1" role="dialog" aria-labelledby="changeSPLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="changeSPLabel">Edit Storage Policy&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<label for="">Select the new storage policy placement for the recovered VMs</label><br>
<select class="browser-default custom-select mr-3" style="width: 400px;">
<option selected>Tenantdev (Not encrypted)</option>
<option value="">Reset current storage policy</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">apply</button>
</div>
</div>
</div>
</div>
<!-- Change storage policy End -->
<!-- ===========Instances============== -->
<!-- Sync -->
<div class="modal fade" id="incoming-syncModal" tabindex="-1" role="dialog" aria-labelledby="syncModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="syncModalLabel">Sync&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
You are about to manually <b>create an instance</b> for the selected replications.
<br><br>
This will reschedule the next automatic instance with regard to the RPO settings.
<br><br>
<div class="row">
<div class="col-1"><i class="fas fa-exclamation-triangle py-2" style="color: #c27b00;font-size:25px"></i></div>
<div class="col-11">
1 of the affected virtual machines are powered off.
The operation may <b>take a long time</b> and meanwhile these virtual machines will be <b>inaccessible</b>.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">sync</button>
</div>
</div>
</div>
</div>
<!-- Sync End -->
<!-- Pause -->
<div class="modal fade" id="incoming-pauseModal" tabindex="-1" role="dialog" aria-labelledby="pauseModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="pauseModalLabel">Pause&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to <b>pause</b> the selected replications?
<br><br>
Paused replications will <b>not send data</b> to the destination and may <b>not meet their RPO</b> settings.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">pause</button>
</div>
</div>
</div>
</div>
<!-- Pause End -->
<!-- Resume -->
<div class="modal fade" id="incoming-resumeModal" tabindex="-1" role="dialog" aria-labelledby="resumeModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="resumeModalLabel">Edit Replication Settings&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
You are about to <b>resume</b> the selected replications?
<br><br>
The resumed replications will <b>start sending data</b> to the destination and may temporarily cause higher network traffic.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">resume</button>
</div>
</div>
</div>
</div>
<!-- Resume End -->
<!-- ============Recovery================ -->
<!-- Recovery Settings -->
<div class="modal fade" id="incoming-recoverySettings" tabindex="-1" role="dialog" aria-labelledby="recoverySettingsLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1000px;">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="recoverySettingsLabel">Recovery Settings&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs nav-tabs-table duration border-0" id="rs-tableTab" role="tablist">
<li class="nav-item nav-item-table">
<a class="nav-link nav-link-table active" id="rs-tableTab-migrateTab" data-toggle="tab" href="#rs-tableTab-tabs-migrateTab" role="tab" aria-controls="rs-tableTab-tabs-migrateTab" aria-selected="true">
Migrate/Failover
</a>
</li>
<li class="nav-item nav-item-table">
<a class="nav-link nav-link-table" id="rs-tableTab-tab-testTab" data-toggle="tab" href="#rs-tableTab-tabs-testTab" role="tab" aria-controls="rs-tableTab-tabs-testTab" aria-selected="false">
Test
</a>
</li>
</ul>
<div class="tab-content" id="rs-tableTab-content" style="padding: 20px 0px;height: 60vh;overflow-y:auto;">
<div class="tab-pane fade show active" id="rs-tableTab-tabs-migrateTab" role="tabpanel" aria-labelledby="rs-tableTab-migrateTab">
<div class="row">
<div class="col-3 p-4">
<!-- Migrate/Failover content -->
<div class="list-group list-custom progress-bar" id="list-tab" role="tablist" style="border-radius: 5px; width:200px">
<a class="list-group-item-action list-step disabled" id="" data-toggle="list" href="/" role="tab">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M26.58,32h-18a1,1,0,1,0,0,2h18a1,1,0,0,0,0-2Z"></path>
<path d="M17.75,2a14,14,0,0,0-14,14c0,.45,0,.89.07,1.33l0,0h0A14,14,0,1,0,17.75,2Zm0,2a12,12,0,0,1,8.44,3.48c0,.33,0,.66,0,1A18.51,18.51,0,0,0,14,8.53a2.33,2.33,0,0,0-1.14-.61l-.25,0c-.12-.42-.23-.84-.32-1.27s-.14-.81-.19-1.22A11.92,11.92,0,0,1,17.75,4Zm-3,5.87A17,17,0,0,1,25.92,10a16.9,16.9,0,0,1-3.11,7,2.28,2.28,0,0,0-2.58.57c-.35-.2-.7-.4-1-.63a16,16,0,0,1-4.93-5.23,2.25,2.25,0,0,0,.47-1.77Zm-4-3.6c0,.21.06.43.1.64.09.44.21.87.33,1.3a2.28,2.28,0,0,0-1.1,2.25A18.32,18.32,0,0,0,5.9,14.22,12,12,0,0,1,10.76,6.27Zm0,15.71A2.34,2.34,0,0,0,9.2,23.74l-.64,0A11.94,11.94,0,0,1,5.8,16.92l.11-.19a16.9,16.9,0,0,1,4.81-4.89,2.31,2.31,0,0,0,2.28.63,17.53,17.53,0,0,0,5.35,5.65c.41.27.83.52,1.25.76A2.32,2.32,0,0,0,19.78,20a16.94,16.94,0,0,1-6.2,3.11A2.34,2.34,0,0,0,10.76,22Zm7,6a11.92,11.92,0,0,1-5.81-1.51l.28-.06a2.34,2.34,0,0,0,1.57-1.79,18.43,18.43,0,0,0,7-3.5,2.29,2.29,0,0,0,3-.62,17.41,17.41,0,0,0,4.32.56l.53,0A12,12,0,0,1,17.75,28Zm6.51-8.9a2.33,2.33,0,0,0-.33-1.19,18.4,18.4,0,0,0,3.39-7.37q.75.35,1.48.78a12,12,0,0,1,.42,8.2A16,16,0,0,1,24.27,19.11Z"></path>
</svg>
Networks
</a>
<a class="list-group-item-action list-step active" id="rs-list-nics-list" data-toggle="list" href="#rs-list-nics" role="tab" aria-controls="nics">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M26.58,32h-18a1,1,0,1,0,0,2h18a1,1,0,0,0,0-2Z"></path>
<path d="M17.75,2a14,14,0,0,0-14,14c0,.45,0,.89.07,1.33l0,0h0A14,14,0,1,0,17.75,2Zm0,2a12,12,0,0,1,8.44,3.48c0,.33,0,.66,0,1A18.51,18.51,0,0,0,14,8.53a2.33,2.33,0,0,0-1.14-.61l-.25,0c-.12-.42-.23-.84-.32-1.27s-.14-.81-.19-1.22A11.92,11.92,0,0,1,17.75,4Zm-3,5.87A17,17,0,0,1,25.92,10a16.9,16.9,0,0,1-3.11,7,2.28,2.28,0,0,0-2.58.57c-.35-.2-.7-.4-1-.63a16,16,0,0,1-4.93-5.23,2.25,2.25,0,0,0,.47-1.77Zm-4-3.6c0,.21.06.43.1.64.09.44.21.87.33,1.3a2.28,2.28,0,0,0-1.1,2.25A18.32,18.32,0,0,0,5.9,14.22,12,12,0,0,1,10.76,6.27Zm0,15.71A2.34,2.34,0,0,0,9.2,23.74l-.64,0A11.94,11.94,0,0,1,5.8,16.92l.11-.19a16.9,16.9,0,0,1,4.81-4.89,2.31,2.31,0,0,0,2.28.63,17.53,17.53,0,0,0,5.35,5.65c.41.27.83.52,1.25.76A2.32,2.32,0,0,0,19.78,20a16.94,16.94,0,0,1-6.2,3.11A2.34,2.34,0,0,0,10.76,22Zm7,6a11.92,11.92,0,0,1-5.81-1.51l.28-.06a2.34,2.34,0,0,0,1.57-1.79,18.43,18.43,0,0,0,7-3.5,2.29,2.29,0,0,0,3-.62,17.41,17.41,0,0,0,4.32.56l.53,0A12,12,0,0,1,17.75,28Zm6.51-8.9a2.33,2.33,0,0,0-.33-1.19,18.4,18.4,0,0,0,3.39-7.37q.75.35,1.48.78a12,12,0,0,1,.42,8.2A16,16,0,0,1,24.27,19.11Z"></path>
</svg>
Nics
</a>
<a class="list-group-item-action list-step" id="rs-list-guestCus-list" data-toggle="list" href="#rs-list-guestCus" role="tab" aria-controls="guestCus">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M26.58,32h-18a1,1,0,1,0,0,2h18a1,1,0,0,0,0-2Z"></path>
<path d="M17.75,2a14,14,0,0,0-14,14c0,.45,0,.89.07,1.33l0,0h0A14,14,0,1,0,17.75,2Zm0,2a12,12,0,0,1,8.44,3.48c0,.33,0,.66,0,1A18.51,18.51,0,0,0,14,8.53a2.33,2.33,0,0,0-1.14-.61l-.25,0c-.12-.42-.23-.84-.32-1.27s-.14-.81-.19-1.22A11.92,11.92,0,0,1,17.75,4Zm-3,5.87A17,17,0,0,1,25.92,10a16.9,16.9,0,0,1-3.11,7,2.28,2.28,0,0,0-2.58.57c-.35-.2-.7-.4-1-.63a16,16,0,0,1-4.93-5.23,2.25,2.25,0,0,0,.47-1.77Zm-4-3.6c0,.21.06.43.1.64.09.44.21.87.33,1.3a2.28,2.28,0,0,0-1.1,2.25A18.32,18.32,0,0,0,5.9,14.22,12,12,0,0,1,10.76,6.27Zm0,15.71A2.34,2.34,0,0,0,9.2,23.74l-.64,0A11.94,11.94,0,0,1,5.8,16.92l.11-.19a16.9,16.9,0,0,1,4.81-4.89,2.31,2.31,0,0,0,2.28.63,17.53,17.53,0,0,0,5.35,5.65c.41.27.83.52,1.25.76A2.32,2.32,0,0,0,19.78,20a16.94,16.94,0,0,1-6.2,3.11A2.34,2.34,0,0,0,10.76,22Zm7,6a11.92,11.92,0,0,1-5.81-1.51l.28-.06a2.34,2.34,0,0,0,1.57-1.79,18.43,18.43,0,0,0,7-3.5,2.29,2.29,0,0,0,3-.62,17.41,17.41,0,0,0,4.32.56l.53,0A12,12,0,0,1,17.75,28Zm6.51-8.9a2.33,2.33,0,0,0-.33-1.19,18.4,18.4,0,0,0,3.39-7.37q.75.35,1.48.78a12,12,0,0,1,.42,8.2A16,16,0,0,1,24.27,19.11Z"></path>
</svg>
Guest Customization
</a>
</div>
</div>
<div class="col-9">
<!-- Content that corresponds to the Migrate/Failover tab -->
<div class="tab-content" id="nav-tabContent-1">
<div class="tab-pane fade show active" id="rs-list-nics" role="tabpanel" aria-labelledby="rs-list-nics-list">
<!-- Content for Nics under Migrate/Failover -->
<div class="row mt-3 position-relative">
<div class="col-sm-12">
<table id="second_table" class="table table-striped table-bordered nowrap dataTable no-footer slideTable2" role="grid" style="width: 600px;">
<thead>
<tr role="row">
<th tabindex="0" aria-controls="" rowspan="1" colspan="1"></th>
<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="vApp: activate to sort column descending" style="max-width: 10px;" aria-sort="ascending">vApp
</th>
<th class="sorting" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="VM: activate to sort column ascending" style="width: 78px;">VM</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="btn-slideContent2"><i class="fas fa-chevron-right"></i></td>
<td title="test-policy-23645785-0c73-4763-9dc5-0bfc9a90d270">test-policy-23645785-0c73-4763-9dc5-0bfc9a90d270</td>
<td>1</td>
<td class="slideContent2" style="background-color: #fff;border:none">
<div class="m-3">
<h5 class="modal-title" id="" style="color: #666666;">test-policy-23645785-0c73-4763-9dc5-0bfc9a90d270</h5>
<div class="row my-3">
<div class="col">
<h5 class="modal-title" id="">test-policy</h5>
</div>
<div class="col d-flex">
<select id="" class="box-select mx-1" style="width:160px; padding:5px;">
<option value="" selected>IP MODE ALL NICS</option>
<option value="">Static - IP POOL</option>
<option value="">DHCP</option>
<option value="">Static - Manual</option>
<option value="">None</option>
</select>
<select id="" class="box-select mx-1" style="width:70px; padding:5px;">
<option value="" selected>NICS</option>
<option value="">Connect all nics</option>
<option value="">Disconnect all nics</option>
</select>
<select id="" class="box-select mx-1" style="width:75px; padding:5px;">
<option value="" selected>MACS</option>
<option value="">Reset all MACs</option>
<option value="">Revert all MACs</option>
</select>
</div>
</div>
<div class="m-2">
<div class="card-header card-header-rs">
<h5 class="mb-0">
<div class="row">
<button class="col-6 btn btn-link-collapse collapsed" data-toggle="collapse" data-target="#vAppcollapse" aria-expanded="false" aria-controls="collapse1">
<div class=" font-weight-bold"><i class="fas fa-chevron-right"></i>nic 0</div>
</button>
<div class="col-6 btn btn-link-collapse">None (Not assigned)</div>
</div>
</h5>
</div>
<div id="vAppcollapse" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 0;padding:0;border: 1px solid #f1f1f1;">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Status</div>
<div class="col-6 rs-modal-action ">
<input type="checkbox" class="mr-1">Connect At Power On
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">State
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="right" title="Select this NIC as primary will deselect other selected NIC as primary."></i>
</div>
<div class="col-6 rs-modal-action">
<input type="radio" id="" checked> Primary nic
</div>
</div>
</li>
<li class=" list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">MAC Address</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class=" list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">IP Address</div>
<div class="col-6 rs-modal-action">
<select id="" class="box-select mx-1" style="width:160px; padding:5px;">
<option value="" selected>IP MODE ALL NICS</option>
<option value="">Static - IP POOL</option>
<option value="">DHCP</option>
<option value="">Static - Manual</option>
<option value="">None</option>
</select>
/
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="rs-list-guestCus" role="tabpanel" aria-labelledby="rs-list-guestCus-list">
<!-- Content for Guest Customization under Migrate/Failover -->
<div class="row mt-3">
<div class="col-md-12">
<div class="card">
<div class="alert alert-info m-2 row" role="alert">
<div class="col-1">
<i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
</div>
<div class="col">
The computer name and network settings configured for the VMs are applied to its Guest OS when the VM is powered on.
<br>
Some of the VMs below require Guest Customization enablement due to NICs configuration.
</div>
</div>
<div class="d-flex justify-content-end m-2">
<select id="" class="box-select" style="width:200px; padding:5px;">
<option value="">GUEST CUSTOMIZATION</option>
<option value="">ENABLE ALL</option>
<option value="">DISABLE ALL</option>
</select>
</div>
<div class="m-2">
<div class="card-header card-header-rs">
<h5 class="mb-0">
<div class="row">
<button class="col-4 btn btn-link-collapse collapsed" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class=" font-weight-bold"><i class="fas fa-chevron-right"></i>test-policy</div>
</button>
<div class="col-4 btn btn-link-collapse">Activated</div>
<div class="col-4 d-flex">
<div class="switch_box box_1 py-2">
<input type="checkbox" class="switch_1">
</div>
<div class="btn btn-link-collapse">
Use source settings
</div>
</div>
</div>
</h5>
</div>
<div id="collapse1" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 0;padding:0;">
<!-- Nested collapsibles start here -->
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-col-general"><i class="fas fa-chevron-right"></i>General</button>
</div>
<div id="rs-col-general" class="collapse" style="border: 1px solid #f1f1f1">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Guest Customization
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="right" title="The computer name and network settings configured for this VM are applied to its Guest OS when the VM is powered on. The following settings are only applied the 1st time the VM is powered on or if 'Power on and Force Recustomization' is performed: Change SID, Password Reset, Join Domain and Customization Script. Guest customization should not be enabled if the VM uses Guest Properties for customization."></i>
</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Activated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Computer name</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">
Change SID
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title="Applicable for Windows VMs and will run Sysprep to change Windows SID. On Windows NT, VMware Cloud Director uses Sidgen. Running sysprep is a prerequisite for completing domain join."></i>
</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
</div>
</div>
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-col-password"><i class="fas fa-chevron-right"></i>Password Reset</button>
</div>
<div id="rs-col-password" class="collapse" style="border: 1px solid #f1f1f1">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Allow local administrator password</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Require Administrator to change password on first login</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Auto generate password</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Specify password</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="password" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Number of times to log on automatically
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title="Value of 0 will disable automatic log on as administrator"></i>
</div>
<div class="col-6 rs-modal-action">
<input min="1" value="" type="number" id="" name="" class="form-control" style="width: 80px;height: 20px;">
</div>
</div>
</li>
</div>
</div>
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-col-joinDomain"><i class="fas fa-chevron-right"></i>Join Domain (Applicable for Windows VMs)</button>
</div>
<div id="rs-col-joinDomain" class="collapse" style="border: 1px solid #f1f1f1">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Join domain</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Use organization's domain</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Domain name</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Domain username</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Domain user password</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="password" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Account organizational unit</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
</div>
</div>
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-col-script"><i class="fas fa-chevron-right"></i>Script</button>
</div>
<div id="rs-col-script" class="collapse" style="border: 1px solid #f1f1f1">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Script content</div>
<div class="col-6 rs-modal-action pr-5">
<textarea id="" name="" cols="40" rows="5" class="form-control">
# A sample Linux shell script
#!/bin/sh
if [ $x$1 == "precustomization" ]; then
echo Do Precustomization tasks
elif [ $x$1 == "postcustomization" ]; then
echo Do Postcustomization tasks
fi
</textarea>
</div>
</div>
</div>
</div>
<!-- Nested collapsibles end here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="rs-tableTab-tabs-testTab" role="tabpanel" aria-labelledby="rs-tableTab-tab-testTab">
<div class="row">
<div class="col-3 p-4">
<!-- Test content -->
<div class="list-group list-custom progress-bar" id="list-tab" role="tablist" style="border-radius: 5px; width:200px">
<a class="list-group-item-action list-step disabled" id="" data-toggle="list" href="/" role="tab">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M26.58,32h-18a1,1,0,1,0,0,2h18a1,1,0,0,0,0-2Z"></path>
<path d="M17.75,2a14,14,0,0,0-14,14c0,.45,0,.89.07,1.33l0,0h0A14,14,0,1,0,17.75,2Zm0,2a12,12,0,0,1,8.44,3.48c0,.33,0,.66,0,1A18.51,18.51,0,0,0,14,8.53a2.33,2.33,0,0,0-1.14-.61l-.25,0c-.12-.42-.23-.84-.32-1.27s-.14-.81-.19-1.22A11.92,11.92,0,0,1,17.75,4Zm-3,5.87A17,17,0,0,1,25.92,10a16.9,16.9,0,0,1-3.11,7,2.28,2.28,0,0,0-2.58.57c-.35-.2-.7-.4-1-.63a16,16,0,0,1-4.93-5.23,2.25,2.25,0,0,0,.47-1.77Zm-4-3.6c0,.21.06.43.1.64.09.44.21.87.33,1.3a2.28,2.28,0,0,0-1.1,2.25A18.32,18.32,0,0,0,5.9,14.22,12,12,0,0,1,10.76,6.27Zm0,15.71A2.34,2.34,0,0,0,9.2,23.74l-.64,0A11.94,11.94,0,0,1,5.8,16.92l.11-.19a16.9,16.9,0,0,1,4.81-4.89,2.31,2.31,0,0,0,2.28.63,17.53,17.53,0,0,0,5.35,5.65c.41.27.83.52,1.25.76A2.32,2.32,0,0,0,19.78,20a16.94,16.94,0,0,1-6.2,3.11A2.34,2.34,0,0,0,10.76,22Zm7,6a11.92,11.92,0,0,1-5.81-1.51l.28-.06a2.34,2.34,0,0,0,1.57-1.79,18.43,18.43,0,0,0,7-3.5,2.29,2.29,0,0,0,3-.62,17.41,17.41,0,0,0,4.32.56l.53,0A12,12,0,0,1,17.75,28Zm6.51-8.9a2.33,2.33,0,0,0-.33-1.19,18.4,18.4,0,0,0,3.39-7.37q.75.35,1.48.78a12,12,0,0,1,.42,8.2A16,16,0,0,1,24.27,19.11Z"></path>
</svg>
Networks
</a>
<a class="list-group-item-action list-step active" id="rs-test-list-nics-list" data-toggle="list" href="#rs-test-list-nics" role="tab" aria-controls="nics">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M26.58,32h-18a1,1,0,1,0,0,2h18a1,1,0,0,0,0-2Z"></path>
<path d="M17.75,2a14,14,0,0,0-14,14c0,.45,0,.89.07,1.33l0,0h0A14,14,0,1,0,17.75,2Zm0,2a12,12,0,0,1,8.44,3.48c0,.33,0,.66,0,1A18.51,18.51,0,0,0,14,8.53a2.33,2.33,0,0,0-1.14-.61l-.25,0c-.12-.42-.23-.84-.32-1.27s-.14-.81-.19-1.22A11.92,11.92,0,0,1,17.75,4Zm-3,5.87A17,17,0,0,1,25.92,10a16.9,16.9,0,0,1-3.11,7,2.28,2.28,0,0,0-2.58.57c-.35-.2-.7-.4-1-.63a16,16,0,0,1-4.93-5.23,2.25,2.25,0,0,0,.47-1.77Zm-4-3.6c0,.21.06.43.1.64.09.44.21.87.33,1.3a2.28,2.28,0,0,0-1.1,2.25A18.32,18.32,0,0,0,5.9,14.22,12,12,0,0,1,10.76,6.27Zm0,15.71A2.34,2.34,0,0,0,9.2,23.74l-.64,0A11.94,11.94,0,0,1,5.8,16.92l.11-.19a16.9,16.9,0,0,1,4.81-4.89,2.31,2.31,0,0,0,2.28.63,17.53,17.53,0,0,0,5.35,5.65c.41.27.83.52,1.25.76A2.32,2.32,0,0,0,19.78,20a16.94,16.94,0,0,1-6.2,3.11A2.34,2.34,0,0,0,10.76,22Zm7,6a11.92,11.92,0,0,1-5.81-1.51l.28-.06a2.34,2.34,0,0,0,1.57-1.79,18.43,18.43,0,0,0,7-3.5,2.29,2.29,0,0,0,3-.62,17.41,17.41,0,0,0,4.32.56l.53,0A12,12,0,0,1,17.75,28Zm6.51-8.9a2.33,2.33,0,0,0-.33-1.19,18.4,18.4,0,0,0,3.39-7.37q.75.35,1.48.78a12,12,0,0,1,.42,8.2A16,16,0,0,1,24.27,19.11Z"></path>
</svg>
Nics
</a>
<a class="list-group-item-action list-step" id="rs-test-list-guestCus-list" data-toggle="list" href="#rs-test-list-guestCus" role="tab" aria-controls="guestCus">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
<path d="M26.58,32h-18a1,1,0,1,0,0,2h18a1,1,0,0,0,0-2Z"></path>
<path d="M17.75,2a14,14,0,0,0-14,14c0,.45,0,.89.07,1.33l0,0h0A14,14,0,1,0,17.75,2Zm0,2a12,12,0,0,1,8.44,3.48c0,.33,0,.66,0,1A18.51,18.51,0,0,0,14,8.53a2.33,2.33,0,0,0-1.14-.61l-.25,0c-.12-.42-.23-.84-.32-1.27s-.14-.81-.19-1.22A11.92,11.92,0,0,1,17.75,4Zm-3,5.87A17,17,0,0,1,25.92,10a16.9,16.9,0,0,1-3.11,7,2.28,2.28,0,0,0-2.58.57c-.35-.2-.7-.4-1-.63a16,16,0,0,1-4.93-5.23,2.25,2.25,0,0,0,.47-1.77Zm-4-3.6c0,.21.06.43.1.64.09.44.21.87.33,1.3a2.28,2.28,0,0,0-1.1,2.25A18.32,18.32,0,0,0,5.9,14.22,12,12,0,0,1,10.76,6.27Zm0,15.71A2.34,2.34,0,0,0,9.2,23.74l-.64,0A11.94,11.94,0,0,1,5.8,16.92l.11-.19a16.9,16.9,0,0,1,4.81-4.89,2.31,2.31,0,0,0,2.28.63,17.53,17.53,0,0,0,5.35,5.65c.41.27.83.52,1.25.76A2.32,2.32,0,0,0,19.78,20a16.94,16.94,0,0,1-6.2,3.11A2.34,2.34,0,0,0,10.76,22Zm7,6a11.92,11.92,0,0,1-5.81-1.51l.28-.06a2.34,2.34,0,0,0,1.57-1.79,18.43,18.43,0,0,0,7-3.5,2.29,2.29,0,0,0,3-.62,17.41,17.41,0,0,0,4.32.56l.53,0A12,12,0,0,1,17.75,28Zm6.51-8.9a2.33,2.33,0,0,0-.33-1.19,18.4,18.4,0,0,0,3.39-7.37q.75.35,1.48.78a12,12,0,0,1,.42,8.2A16,16,0,0,1,24.27,19.11Z"></path>
</svg>
Guest Customization
</a>
</div>
</div>
<div class="col-9">
<!-- Content that corresponds to the Test tab -->
<div class="tab-content" id="nav-tabContent-2">
<div class="tab-pane fade show active" id="rs-test-list-nics" role="tabpanel" aria-labelledby="rs-test-list-nics-list">
<!-- Content for Nics under Test -->
<div class="row mt-3 position-relative">
<div class="col-sm-12">
<table id="third_table" class="table table-striped table-bordered nowrap dataTable no-footer slideTable3" role="grid" style="width: 600px;">
<thead>
<tr role="row">
<th tabindex="0" aria-controls="" rowspan="1" colspan="1"></th>
<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="vApp: activate to sort column descending" style="max-width: 10px;" aria-sort="ascending">vApp
</th>
<th class="sorting" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="VM: activate to sort column ascending" style="width: 78px;">VM</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="btn-slideContent3"><i class="fas fa-chevron-right"></i></td>
<td title="test-policy-23645785-0c73-4763-9dc5-0bfc9a90d270">test-policy-23645785-0c73-4763-9dc5-0bfc9a90d270</td>
<td>1</td>
<td class="slideContent3" style="background-color: #fff;border:none">
<div class="m-3">
<h5 class="modal-title" id="" style="color: #666666;">test-policy-23645785-0c73-4763-9dc5-0bfc9a90d270</h5>
<div class="row my-3">
<div class="col">
<h5 class="modal-title" id="">test-policy</h5>
</div>
<div class="col d-flex">
<select id="" class="box-select mx-1" style="width:160px; padding:5px;">
<option value="" selected>IP MODE ALL NICS</option>
<option value="">Static - IP POOL</option>
<option value="">DHCP</option>
<option value="">Static - Manual</option>
<option value="">None</option>
</select>
<select id="" class="box-select mx-1" style="width:70px; padding:5px;">
<option value="" selected>NICS</option>
<option value="">Connect all nics</option>
<option value="">Disconnect all nics</option>
</select>
<select id="" class="box-select mx-1" style="width:75px; padding:5px;">
<option value="" selected>MACS</option>
<option value="">Reset all MACs</option>
<option value="">Revert all MACs</option>
</select>
</div>
</div>
<div class="m-2">
<div class="card-header card-header-rs">
<h5 class="mb-0">
<div class="row">
<button class="col-6 btn btn-link-collapse collapsed" data-toggle="collapse" data-target="#vAppcollapse2" aria-expanded="false" aria-controls="collapse1">
<div class=" font-weight-bold"><i class="fas fa-chevron-right"></i>nic 0</div>
</button>
<div class="col-6 btn btn-link-collapse">None (Not assigned)</div>
</div>
</h5>
</div>
<div id="vAppcollapse2" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 0;padding:0;border: 1px solid #f1f1f1;">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Status</div>
<div class="col-6 rs-modal-action">
<input type="checkbox" class="mr-1">Connect At Power On
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">State
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="right" title="Select this NIC as primary will deselect other selected NIC as primary."></i>
</div>
<div class="col-6 rs-modal-action">
<input type="radio" id="" checked> Primary nic
</div>
</div>
</li>
<li class=" list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">MAC Address</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class=" list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">IP Address</div>
<div class="col-6 rs-modal-action">
<select id="" class="box-select mx-1" style="width:160px; padding:5px;">
<option value="" selected>IP MODE ALL NICS</option>
<option value="">Static - IP POOL</option>
<option value="">DHCP</option>
<option value="">Static - Manual</option>
<option value="">None</option>
</select>
/
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="rs-test-list-guestCus" role="tabpanel" aria-labelledby="rs-test-list-guestCus-list">
<!-- Content for Guest Customization under Test -->
<div class="row mt-3">
<div class="col-md-12">
<div class="card">
<div class="alert alert-info m-2 row" role="alert">
<div class="col-1">
<i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
</div>
<div class="col">
The computer name and network settings configured for the VMs are applied to its Guest OS when the VM is powered on.
<br>
Some of the VMs below require Guest Customization enablement due to NICs configuration.
</div>
</div>
<div class="d-flex justify-content-end m-2">
<select id="" class="box-select" style="width:200px; padding:5px;">
<option value="">GUEST CUSTOMIZATION</option>
<option value="">ENABLE ALL</option>
<option value="">DISABLE ALL</option>
</select>
</div>
<div class="m-2">
<div class="card-header card-header-rs">
<h5 class="mb-0">
<div class="row">
<button class="col-4 btn btn-link-collapse collapsed" data-toggle="collapse" data-target="#rs-test-col-joinDomain" aria-expanded="false" aria-controls="collapse1">
<div class=" font-weight-bold"><i class="fas fa-chevron-right"></i>test-policy</div>
</button>
<div class="col-4 btn btn-link-collapse">Activated</div>
<div class="col-4 d-flex">
<div class="switch_box box_1 py-2">
<input type="checkbox" class="switch_1">
</div>
<div class="btn btn-link-collapse2">
Use source settings
</div>
</div>
</div>
</h5>
</div>
<div id="rs-test-col-joinDomain" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 0;padding:0;">
<!-- Nested collapsibles start here -->
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-test-col-general"><i class="fas fa-chevron-right"></i>General</button>
</div>
<div id="rs-test-col-general" class="collapse" style="border: 1px solid #f1f1f1">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Guest Customization
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="right" title="The computer name and network settings configured for this VM are applied to its Guest OS when the VM is powered on. The following settings are only applied the 1st time the VM is powered on or if 'Power on and Force Recustomization' is performed: Change SID, Password Reset, Join Domain and Customization Script. Guest customization should not be enabled if the VM uses Guest Properties for customization."></i>
</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Activated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Computer name</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">
Change SID
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title="Applicable for Windows VMs and will run Sysprep to change Windows SID. On Windows NT, VMware Cloud Director uses Sidgen. Running sysprep is a prerequisite for completing domain join."></i>
</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
</div>
</div>
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-test-col-password"><i class="fas fa-chevron-right"></i>Password Reset</button>
</div>
<div id="rs-test-col-password" class="collapse" style="border: 1px solid #f1f1f1">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Allow local administrator password</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Require Administrator to change password on first login</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Auto generate password</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Specify password</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="password" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Number of times to log on automatically
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title="Value of 0 will disable automatic log on as administrator"></i>
</div>
<div class="col-6 rs-modal-action">
<input min="1" value="" type="number" id="" name="" class="form-control" style="width: 80px;height: 20px;">
</div>
</div>
</li>
</div>
</div>
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-test2-col-joinDomain"><i class="fas fa-chevron-right"></i>Join Domain (Applicable for Windows VMs)</button>
</div>
<div id="rs-test2-col-joinDomain" class="collapse" style="border: 1px solid #f1f1f1">
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Join domain</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Use organization's domain</div>
<div class="col-6 rs-modal-action d-flex">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>&nbsp;Deactivated
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Domain name</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Domain username</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Domain user password</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="password" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
<li class="list-group-item-rs">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Account organizational unit</div>
<div class="col-6 rs-modal-action">
<input id="" name="" type="text" aria-describedby="" class="form-control" style="width: 200px;height:20px;">
</div>
</div>
</li>
</div>
</div>
<div class="nested-collapse">
<div class="card-header card-header-rs">
<button class="btn btn-link-collapse collapsed font-weight-bold" data-toggle="collapse" data-target="#rs-test-col-script"><i class="fas fa-chevron-right"></i>Script</button>
</div>
<div id="rs-test-col-script" class="collapse" style="border: 1px solid #f1f1f1">
<div class="row rs-modal">
<div class="col-6 rs-modal-title">Script content</div>
<div class="col-6 rs-modal-action pr-5">
<textarea id="" name="" cols="40" rows="5" class="form-control">
# A sample Linux shell script
#!/bin/sh
if [ $x$1 == "precustomization" ]; then
echo Do Precustomization tasks
elif [ $x$1 == "postcustomization" ]; then
echo Do Postcustomization tasks
fi
</textarea>
</div>
</div>
</div>
</div>
<!-- Nested collapsibles end here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">apply</button>
</div>
</div>
</div>
</div>
<!-- Recovery Settings End -->
<!-- migrate -->
<div class="modal fade" id="incoming-migrateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
<div class="modal-content border-0" style="overflow:0 !important;">
<div class="modal-header border-top-blue">
<h5>MIGRATE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row px-3">
<!-- Left Side Bar -->
<div class="col-md-3 col-12 p-0 border-right">
<div class="sidebar-custom flex-column nav-pills text-left progress-bar">
<a class="active step-link sidebar-step" href="#incoming-migrateSettings">Migrate Settings</a>
<a class="step-link sidebar-step" href="incoming-#migrateComplete">Ready To Complete</a>
</div>
</div>
<!-- Right Side bar -->
@include('incomingReplications/form/migrate')
</div>
</div>
<!-- Buttons -->
<div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
<button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
<button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
<button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
</div>
</div>
</div>
</div>
<!-- migrate End -->
<!-- failover -->
<div class="modal fade" id="incoming-failoverModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
<div class="modal-content border-0" style="overflow:0 !important;">
<div class="modal-header border-top-blue">
<h5>FAILOVER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row px-3">
<!-- Left Side Bar -->
<div class="col-md-3 col-12 p-0 border-right">
<div class="sidebar-custom flex-column nav-pills text-left progress-bar">
<a class="active step-link sidebar-step" href="#incoming-recoverySettings">Recovery Settings</a>
<a class="step-link sidebar-step" href="#incoming-recoveryInstance">Recovery Instance</a>
<a class="step-link sidebar-step" href="#incoming-recoveryComplete">Ready To Complete</a>
</div>
</div>
<!-- Right Side bar -->
@include('incomingReplications/form/failover')
</div>
</div>
<!-- Buttons -->
<div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
<button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
<button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
<button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
</div>
</div>
</div>
</div>
<!-- failover End -->
<!-- test -->
<div class="modal fade" id="incoming-testModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
<div class="modal-content border-0" style="overflow:0 !important;">
<div class="modal-header border-top-blue">
<h5>TEST</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0">
<div class="row px-3">
<!-- Left Side Bar -->
<div class="col-md-3 col-12 p-0 border-right">
<div class="sidebar-custom flex-column nav-pills text-left progress-bar">
<a class="active step-link sidebar-step" href="#incoming-recoverySettings">Recovery Settings</a>
<a class="step-link sidebar-step" href="#incoming-recoveryInstance">Recovery Instance</a>
<a class="step-link sidebar-step" href="#incoming-recoveryComplete">Ready To Complete</a>
</div>
</div>
<!-- Right Side bar -->
@include('incomingReplications/form/test')
</div>
</div>
<!-- Buttons -->
<div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
<button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
<button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
<button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
</div>
</div>
</div>
</div>
<!-- test End -->
<!-- =========== Delete=============== -->
<!-- Delete -->
<div class="modal fade" id="incoming-deleteReplication" tabindex="-1" role="dialog" aria-labelledby="deleteReplicationLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-top-blue">
<h5 class="modal-title" id="deleteReplicationLabel">Delete&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete the selected replications?
<br><br>
This will <b>permanently stop replication traffic</b> and <b>remove all retained instances</b> at the destination.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">delete</button>
</div>
</div>
</div>
</div>
<!-- Delete End -->
<!-- =================================== -->
Reference in New Issue View Git Blame Copy Permalink