611 lines
37 KiB
PHP
611 lines
37 KiB
PHP
<!-- New Recovery Plan Modal -->
|
|
<div class="modal fade" id="newRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="newRecoveryplanLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content" id="newRecoveryplanForm">
|
|
<div class="modal-header border-top-blue">
|
|
<h5 class="modal-title" id="newRecoveryplanLabel">Create a new Recovery Plan</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="needs-validation" novalidate>
|
|
<div class="mb-2">
|
|
<label for="plan-name-input">Plan Name:</label>
|
|
<input type="text" class="form-control" id="plan-name-input" required name="name">
|
|
<div class="invalid-feedback">
|
|
Mandatory field.
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="planDescription">Description:</label>
|
|
<textarea id="planDescription" name="" cols="40" rows="5" class="form-control"></textarea>
|
|
</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- New Recovery Plan End -->
|
|
<!-- New Migration Plan Modal -->
|
|
<div class="modal fade" id="newMigrationplan" tabindex="-1" role="dialog" aria-labelledby="newMigrationLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content" id="newMigrationForm">
|
|
<div class="modal-header border-top-blue">
|
|
<h5 class="modal-title" id="newMigrationLabel">Create a new Migration Plan</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="needs-validation" novalidate>
|
|
<div class="mb-2">
|
|
<label for="plan-name-input">Plan Name:</label>
|
|
<input type="text" class="form-control" id="plan-name-input" required>
|
|
<div class="invalid-feedback">
|
|
Mandatory field.
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="planDescription">Description:</label>
|
|
<textarea id="planDescription" name="" cols="40" rows="5" class="form-control"></textarea>
|
|
</div>
|
|
<div class="d-flex">
|
|
<label for="" class="pr-2">Enable auto sync:</label>
|
|
<div class="switch_box box_1">
|
|
<input type="checkbox" class="switch_1">
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
at:
|
|
<input type="datetime-local" class="form-datetime-picker">
|
|
</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- New Migration Plan End -->
|
|
<!-- Edit Recovery Plan Modal -->
|
|
<div class="modal fade" id="editRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="editRecoveryplanLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content" id="editRecoveryplanForm">
|
|
<div class="modal-header border-top-blue">
|
|
<h5 class="modal-title" id="editRecoveryplanLabel">Edit Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="needs-validation" novalidate>
|
|
<div class="mb-2">
|
|
<label for="plan-name-input">Plan Name:</label>
|
|
<input type="text" class="form-control" id="plan-name-input" required>
|
|
<div class="invalid-feedback">
|
|
Mandatory field.
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="planDescription">Description:</label>
|
|
<textarea id="planDescription" name="" cols="40" rows="5" class="form-control"></textarea>
|
|
</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Edit Recovery Plan End -->
|
|
<!-- Delete Recovery Plan Modal -->
|
|
<div class="modal fade" id="deleteRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="deleteRecoveryplanLabel" 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="deleteRecoveryplanLabel">Delete Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to delete the selected plan?
|
|
</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 Recovery Plan End -->
|
|
<!-- Suspend Recovery Plan Modal -->
|
|
<div class="modal fade" id="suspendRecoveryPlan" tabindex="-1" role="dialog" aria-labelledby="deleteRecoveryplanLabel" 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="deleteRecoveryplanLabel">Suspend Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to suspend the selected plan?
|
|
</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>
|
|
<!-- Suspend Recovery Plan End -->
|
|
<!-- Test Recovery Plan Modal -->
|
|
<div class="modal fade" id="testRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="testRecoveryplanLabel" 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="testRecoveryplanLabel">Test Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to test the selected plan?
|
|
</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>
|
|
<!-- Test Recovery Plan End -->
|
|
<!-- Clean Up Recovery Plan Modal -->
|
|
<div class="modal fade" id="cleanupRecoveryPlan" tabindex="-1" role="dialog" aria-labelledby="testRecoveryplanLabel" 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="testRecoveryplanLabel">Cleanup Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to cleanup the selected plan?
|
|
</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>
|
|
<!-- Clean Up Recovery Plan End -->
|
|
<!-- Failover Recovery Plan Modal -->
|
|
<div class="modal fade" id="failoverRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="failoverRecoveryplanLabel" 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="failoverRecoveryplanLabel">Failover Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to start the selected plan?
|
|
</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>
|
|
<!-- Failover Recovery Plan End -->
|
|
<!-- Migrate Recovery Plan Modal -->
|
|
<div class="modal fade" id="migrateRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="migrateRecoveryplanLabel" 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="migrateRecoveryplanLabel">Migrate Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to migrate the selected plan?
|
|
</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>
|
|
<!-- Migrate Recovery Plan End -->
|
|
<!-- Executions Modal -->
|
|
<div class="modal fade" id="executionModal" tabindex="-1" role="dialog" aria-labelledby="executionModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document" style="max-width: 900px;">
|
|
<div class="modal-content" id="">
|
|
<div class="modal-header border-top-blue">
|
|
<h5 class="modal-title" id="migrateRecoveryplanLabel">Recovery Plan Executions</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row my-3">
|
|
<div class="col-md-12">
|
|
<!-- Buttons -->
|
|
<div class="row m-3">
|
|
<div class="col text-left pl-0">
|
|
<button class="btn-action text-primary border-0 bg-transparent font-weight-bold text-capitalize mr-2" id="button_download" data-toggle="modal" data-target="#formModal">view report file</button>
|
|
</div>
|
|
<div class="col-6 text-right pr-0">
|
|
<div class="datePicker">
|
|
from<input type="date" class="picker" id="startTimeAfter">to<input type="date" class="picker" id="startTimeBefore">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- table -->
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<table id="headercontainer-1066" class="table table-striped table-bordered nowrap dataTable no-footer" role="grid" aria-describedby="data_table_event_info">
|
|
<thead>
|
|
<tr role="row">
|
|
<th></th>
|
|
<th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Operation: activate to sort column descending" style="width: 300px;" aria-sort="ascending">Operation</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Start Date: activate to sort column ascending" style="width: 43px;">Start Date</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="End Date: activate to sort column ascending" style="width: 105px;">End Date</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Result: activate to sort column ascending" style="width: 202px;">Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr role="row" class="odd">
|
|
<td><input type="radio"></td>
|
|
<td>Test</td>
|
|
<td>1/2/2024, 3:17:01 PM</td>
|
|
<td>1/2/2024, 3:17:01 PM</td>
|
|
<td><i class="fas fa-check-circle" style="color: #54b948;"></i> Success</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="" class="dataTables_processing card" style="display: none;">
|
|
Processing...
|
|
</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">ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Executions End -->
|
|
<!-- Clone Recovery Plan Modal -->
|
|
<div class="modal fade" id="cloneRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="cloneRecoveryplanLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content" id="cloneRecoveryplanForm">
|
|
<div class="modal-header border-top-blue">
|
|
<h5 class="modal-title" id="cloneRecoveryplanLabel">Clone Recovery Plan | <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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="needs-validation" novalidate>
|
|
<div class="mb-4">
|
|
<label for="plan-name-input">Plan Name:</label>
|
|
<input type="text" class="form-control" id="plan-name-input" required>
|
|
<div class="invalid-feedback">
|
|
Mandatory field.
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="switch_box box_1 pr-2">
|
|
<input type="checkbox" class="switch_1">
|
|
</div>
|
|
<label for="" class="">Do not attach replications</label>
|
|
</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Clone Recovery Plan End -->
|
|
|
|
<!-- New Recovery Step -->
|
|
<div class="modal fade" id="newRecoveryStep" 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 RECOVERY STEP</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</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="#step-settings-recover">Step Settings</a>
|
|
<a class="step-link sidebar-step" href="#source-replications-recover">Recover Replications</a>
|
|
<a class="step-link sidebar-step" href="#complete-recover">Ready to Complete</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right Side Bar -->
|
|
<div class="col-md-9 col-12 p-0">
|
|
<!-- Adjust column size based on screen width -->
|
|
<!--=========== Step Settings =================== -->
|
|
<div class="main-form active" id="step-settings-recover">
|
|
<div class="m-3">
|
|
<div class="mb-3">
|
|
<label for="">Step Name:</label>
|
|
<input id="" name="jobName" type="text" aria-describedby="HelpBlock" required="required" class="form-control">
|
|
</div>
|
|
<ul class="list-group list-stepSettings mb-3">
|
|
<li class="list-group-item list-stepSettings-Title" style="border-radius: 10px 10px 0px 0px !important;">
|
|
<input type="checkbox" name="" id="">
|
|
Wait specific amount of time after failover completes
|
|
</li>
|
|
<li class="list-group-item list-stepSettings-content">
|
|
<label class="pr-2 m-0">Delay</label>
|
|
<input min="1" value="" type="number" id="" name="" class="line-select" style="width: 100px">
|
|
<select class="line-select" style="width: 100px;">
|
|
<option value="">seconds</option>
|
|
<option value="">minutes</option>
|
|
</select>
|
|
</li>
|
|
<li class="list-group-item list-stepSettings-Title">
|
|
<input type="checkbox" name="" id="">
|
|
Prompt user after failover of all replications in this step completes
|
|
<i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title=" The prompt message will pause plan execution. It needs to be confirmed to allow execution to continue. "></i>
|
|
|
|
</li>
|
|
<li class="list-group-item list-stepSettings-content">
|
|
<div class="mb-3">
|
|
<label for="textarea-1501-inputEl">Message:</label>
|
|
<textarea id="textarea-1501-inputEl" name="textarea-1483-inputEl" cols="40" rows="5" class="form-control"></textarea>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--=========== Source Replications =================== -->
|
|
<div class="main-form" id="step-settings-recover">
|
|
<div class="m-3">
|
|
<div class="table-responsive scroll-widget">
|
|
<div id="data_table_s3_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="dataTables_length" id="data_table_s3_length">
|
|
<label>Show
|
|
<select name="data_table_s3_length" aria-controls="data_table_s3" class="custom-select custom-select-sm form-control form-control-sm" style="width: 70px;">
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select> entries
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 py-2 text-right">
|
|
<a href="" class=""> <i class="fas fa-sync fa-rotate-90" style="color: #57ba4b;"></i> Refresh</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<table id="data_table_event" class="table table-striped table-bordered nowrap dataTable no-footer" 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>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
|
|
Recovery State</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
|
|
Destination Organization</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
|
|
Replication Type</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
|
|
Replication State</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
|
|
Overall Health</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr role="row" class="odd">
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="" class="dataTables_processing card" style="display: none;">
|
|
Processing...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-5">
|
|
<div class="dataTables_info" id="data_table_s3_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-7">
|
|
<div class="dataTables_paginate paging_simple_numbers" id="data_table_s3_paginate">
|
|
<ul class="pagination">
|
|
<li class="paginate_button page-item previous disabled" id="data_table_s3_previous"><a href="#" aria-controls="data_table_s3" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
|
|
<li class="paginate_button page-item active"><a href="#" aria-controls="data_table_s3" data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
|
|
<li class="paginate_button page-item next disabled" id="data_table_s3_next"><a href="#" aria-controls="data_table_s3" data-dt-idx="2" tabindex="0" class="page-link">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
By selecting a vApp, if later on a new VM is added to it, executing this plan will also affect the additionally added VM.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--=========== Ready to complete =================== -->
|
|
<div class="main-form" id="complete-recover">
|
|
<h5 class="font-weight-bold p-2 border-bottom">Ready to Complete</h5>
|
|
<div class="m-3">
|
|
<p>Verify the selected settings before clicking Finish:</p>
|
|
<table class="tg" style="table-layout: fixed; width: 539px">
|
|
<colgroup>
|
|
<col style="width: 270px">
|
|
<col style="width: 269px">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<td class="tg-1wig"><span style="color:#000;background-color:#FFF">Step Name</span></td>
|
|
<td class="tg-0lax"><span style="color:#000;background-color:#FFF">111</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tg-1wig"><span style="color:#000;background-color:#FFF">Delay</span></td>
|
|
<td class="tg-0lax">22 seconds</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tg-1wig"><span style="color:#000;background-color:#FFF">Prompt VM placement policy</span></td>
|
|
<td class="tg-0lax">None</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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>
|
|
|
|
<!-- Attach Replications Modal -->
|
|
<div class="modal fade" id="attachReplications" tabindex="-1" role="dialog" aria-labelledby="attachReplicationsLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document" style="max-width: 900px;">
|
|
<div class="modal-content" id="">
|
|
<div class="modal-header border-top-blue">
|
|
<h5 class="modal-title" id="attachReplicationsLabel">Attach Replications</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row my-3">
|
|
<div class="col-md-12">
|
|
<!-- table -->
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<table id="attachRep-table" class="table table-striped table-bordered nowrap dataTable no-footer" 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="VM: activate to sort column descending" style="width: 300px;" aria-sort="ascending">VM</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Recovery State: activate to sort column ascending" style="width: 43px;">Recovery State</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Replication Type: activate to sort column ascending" style="width: 105px;">Replication Type</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Replication State: activate to sort column ascending" style="width: 202px;">Replication State</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Overall Health: activate to sort column ascending" style="width: 202px;">Overall Health</th>
|
|
<th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Destination Organization: activate to sort column ascending" style="width: 202px;">Destination Organization</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr role="row" class="odd">
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="" class="dataTables_processing card" style="display: none;">
|
|
Processing...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert info -->
|
|
<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">
|
|
By selecting a vApp, if later on a new VM is added to it, executing this plan will also affect the additionally added VM.
|
|
</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">ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Attach Replications End -->
|
|
|
|
|
|
|
|
|
|
<script>
|
|
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
|
(function() {
|
|
'use strict';
|
|
window.addEventListener('load', function() {
|
|
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
|
var forms = document.getElementsByClassName('needs-validation');
|
|
// Loop over them and prevent submission
|
|
var validation = Array.prototype.filter.call(forms, function(form) {
|
|
form.addEventListener('submit', function(event) {
|
|
if (form.checkValidity() === false) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
});
|
|
}, false);
|
|
})();
|
|
</script> |