247 lines
15 KiB
PHP
247 lines
15 KiB
PHP
<div class="page-header">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-12">
|
|
<div class="page-header-title">
|
|
<div class="d-inline">
|
|
<h4>Dashboard</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin:20px 0;">
|
|
<div class="col-md-12 col-lg-6">
|
|
<div class="card table-card dashboard-card" style="overflow-x: scroll;">
|
|
<div class="card-header border-top-black">
|
|
<h3>On-Premises VM replication status</h3>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="li-donut-title">Incoming VMs</div>
|
|
<div class="d-flex" style="text-align: center;">
|
|
<div class="bg-donut mx-5 my-2 rounded-circle donut-vm d-flex align-items-center justify-content-center">
|
|
<span>0</span>
|
|
</div>
|
|
<div class="py-5 d-inline mx-5">
|
|
<i class="fas fa-circle li-donut-none"></i>
|
|
<span class="li-donut-status">No replications</span>
|
|
</div>
|
|
</div>
|
|
<div class="li-donut-title">Outgoing VMs</div>
|
|
<div class="d-flex mb-2" style="text-align: center;">
|
|
<div class="bg-donut mx-5 my-2 rounded-circle donut-vm-data d-flex align-items-center justify-content-center">
|
|
1
|
|
</div>
|
|
<div class="py-5 d-inline mx-5">
|
|
<i class="fas fa-circle li-donut"></i>
|
|
<span class="li-donut-status">1 warnings and 0 RPO violations</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-6">
|
|
<div class="card table-card dashboard-card" style="overflow-x: scroll;">
|
|
<div class="card-header border-top-black">
|
|
<h3> Cloud vApp/VM/templates replication status</h3>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="li-donut-title">Incoming VMs</div>
|
|
<div class="d-flex" style="text-align: center;">
|
|
<div class="bg-donut mx-5 my-2 rounded-circle donut-vm d-flex align-items-center justify-content-center">
|
|
<span>0</span>
|
|
</div>
|
|
<div class="py-5 d-inline mx-5">
|
|
<i class="fas fa-circle li-donut-none"></i>
|
|
<span class="li-donut-status">No replications</span>
|
|
</div>
|
|
</div>
|
|
<div class="li-donut-title">Outgoing VMs</div>
|
|
<div class="d-flex mb-2" style="text-align: center;">
|
|
<div class="bg-donut mx-5 my-2 rounded-circle donut-vm-data d-flex align-items-center justify-content-center">
|
|
1
|
|
</div>
|
|
<div class="py-5 d-inline mx-5">
|
|
<i class="fas fa-circle li-donut"></i>
|
|
<span class="li-donut-status">1 warnings and 0 RPO violations</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-6">
|
|
<div class="card table-card dashboard-card">
|
|
<div class="card-header border-top-black">
|
|
<h3> organization-developer traffic data chart</h3>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="data-chart-title d-flex">
|
|
<div class="datePicker">
|
|
between<input type="date" class="picker" id="startTimeAfter">and<input type="date" class="picker" id="startTimeBefore">interval
|
|
</div>
|
|
<select id="timeInterval" class="box-select mx-3" style="width: 110px;">
|
|
<option value="5">5 MINUTES</option>
|
|
<option value="60">1 HOUR</option>
|
|
<option value="1440">1 DAY</option>
|
|
</select>
|
|
<i class="fas fa-info-circle py-2" style="color: #5aa6c9;" title="Traffic stats retention depends on aggregation level: . 5 minute totals are kept for the last 5 hours; . hourly totals are kept for the last 14 days; . daily totals are kept for the last 60 days; *Start dates earlier that these will be reset to fit."></i>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<canvas id="lineChart" class="mx-3 mb-2"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer" style="padding: 10px 15px;margin:0;">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
|
|
<path d="M26.5,4.08C22.77,4.08,19,5.4,19,7.91V9.5a18.75,18.75,0,0,1,2,.2V7.91c0-.65,2.09-1.84,5.5-1.84S32,7.27,32,7.91V18.24c0,.54-1.46,1.44-3.9,1.73v2c3.13-.32,5.9-1.6,5.9-3.75V7.91C34,5.4,30.23,4.08,26.5,4.08Z"></path>
|
|
<path d="M4,18.24V7.91c0-.65,2.09-1.84,5.5-1.84S15,7.27,15,7.91V9.7a18.75,18.75,0,0,1,2-.2V7.91c0-2.52-3.77-3.84-7.5-3.84S2,5.4,2,7.91V18.24C2,20.4,4.77,21.67,7.9,22V20C5.46,19.68,4,18.78,4,18.24Z"></path>
|
|
<path d="M18,10.85c-4.93,0-8.65,1.88-8.65,4.38V27.54c0,2.5,3.72,4.38,8.65,4.38s8.65-1.88,8.65-4.38V15.23C26.65,12.73,22.93,10.85,18,10.85Zm6.65,7.67c-.85,1-3.42,2-6.65,2A14.49,14.49,0,0,1,14,20v1.46a16.33,16.33,0,0,0,4,.47,12.76,12.76,0,0,0,6.65-1.56v3.12c-.85,1-3.42,2-6.65,2a14.49,14.49,0,0,1-4-.53v1.46a16.33,16.33,0,0,0,4,.47,12.76,12.76,0,0,0,6.65-1.56v2.29c0,.95-2.65,2.38-6.65,2.38s-6.65-1.43-6.65-2.38V15.23c0-.95,2.65-2.38,6.65-2.38s6.65,1.43,6.65,2.38Z"></path>
|
|
</svg>
|
|
No data available for the selected period.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-6">
|
|
<div class="card table-card dashboard-card">
|
|
<div class="card-header border-top-black">
|
|
<h3>organization-developer disk usage chart</h3>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="data-chart-title d-flex">
|
|
<div class="datePicker">
|
|
between<input type="date" class="picker" id="startTimeAfter">and<input type="date" class="picker" id="startTimeBefore">interval
|
|
</div>
|
|
<select id="timeInterval2" class="box-select mx-3" style="width: 110px;">
|
|
<option value="5">5 MINUTES</option>
|
|
<option value="60">1 HOUR</option>
|
|
<option value="1440">1 DAY</option>
|
|
</select>
|
|
<i class="fas fa-info-circle py-2" style="color: #5aa6c9;" title="Traffic stats retention depends on aggregation level: . 5 minute totals are kept for the last 5 hours; . hourly totals are kept for the last 14 days; . daily totals are kept for the last 60 days; *Start dates earlier that these will be reset to fit."></i>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<canvas id="lineChart2" class="mx-3 mb-2"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer" style="padding: 10px 15px;margin:0;">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon-details">
|
|
<path d="M26.5,4.08C22.77,4.08,19,5.4,19,7.91V9.5a18.75,18.75,0,0,1,2,.2V7.91c0-.65,2.09-1.84,5.5-1.84S32,7.27,32,7.91V18.24c0,.54-1.46,1.44-3.9,1.73v2c3.13-.32,5.9-1.6,5.9-3.75V7.91C34,5.4,30.23,4.08,26.5,4.08Z"></path>
|
|
<path d="M4,18.24V7.91c0-.65,2.09-1.84,5.5-1.84S15,7.27,15,7.91V9.7a18.75,18.75,0,0,1,2-.2V7.91c0-2.52-3.77-3.84-7.5-3.84S2,5.4,2,7.91V18.24C2,20.4,4.77,21.67,7.9,22V20C5.46,19.68,4,18.78,4,18.24Z"></path>
|
|
<path d="M18,10.85c-4.93,0-8.65,1.88-8.65,4.38V27.54c0,2.5,3.72,4.38,8.65,4.38s8.65-1.88,8.65-4.38V15.23C26.65,12.73,22.93,10.85,18,10.85Zm6.65,7.67c-.85,1-3.42,2-6.65,2A14.49,14.49,0,0,1,14,20v1.46a16.33,16.33,0,0,0,4,.47,12.76,12.76,0,0,0,6.65-1.56v3.12c-.85,1-3.42,2-6.65,2a14.49,14.49,0,0,1-4-.53v1.46a16.33,16.33,0,0,0,4,.47,12.76,12.76,0,0,0,6.65-1.56v2.29c0,.95-2.65,2.38-6.65,2.38s-6.65-1.43-6.65-2.38V15.23c0-.95,2.65-2.38,6.65-2.38s6.65,1.43,6.65,2.38Z"></path>
|
|
</svg>
|
|
No data available for the selected period.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-6">
|
|
<div class="card table-card dashboard-card">
|
|
<div class="card-header border-top-black">
|
|
<h3>Topology</h3>
|
|
</div>
|
|
<div class="card-block m-3">
|
|
<div class="row topology">
|
|
<div class="col">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="topology-icon">
|
|
<path d="M31,8H23v2h8V31H23v2H33V10A2,2,0,0,0,31,8Z"></path>
|
|
<path d="M19.88,3H6.12A2.12,2.12,0,0,0,4,5.12V33H22V5.12A2.12,2.12,0,0,0,19.88,3ZM20,31H17V28H9v3H6V5.12A.12.12,0,0,1,6.12,5H19.88a.12.12,0,0,1,.12.12Z"></path>
|
|
<rect x="8" y="8" width="2" height="2"></rect>
|
|
<rect x="12" y="8" width="2" height="2"></rect>
|
|
<rect x="16" y="8" width="2" height="2"></rect>
|
|
<rect x="8" y="13" width="2" height="2"></rect>
|
|
<rect x="12" y="13" width="2" height="2"></rect>
|
|
<rect x="16" y="13" width="2" height="2"></rect>
|
|
<rect x="8" y="18" width="2" height="2"></rect>
|
|
<rect x="12" y="18" width="2" height="2"></rect>
|
|
<rect x=" 16" y="18" width="2" height="2"></rect>
|
|
<rect x=" 8" y="23" width="2" height="2"></rect>
|
|
<rect x=" 12" y="23" width="2" height="2"></rect>
|
|
<rect x=" 16" y="23" width="2" height="2"></rect>
|
|
<rect x=" 23" y="13" width="2" height="2"></rect>
|
|
<rect x=" 27" y="13" width="2" height="2"></rect>
|
|
<rect x=" 23" y="18" width="2" height="2"></rect>
|
|
<rect x=" 27" y="18" width="2" height="2"></rect>
|
|
<rect x=" 23" y="23" width="2" height="2"></rect>
|
|
<rect x=" 27" y="23" width="2" height="2"></rect>
|
|
</svg>
|
|
<div class="topology-item">0 On-Premises sites</div>
|
|
</div>
|
|
<div class="col">
|
|
<i class="fas fa-exchange-alt" style="color: #1f73f7;font-size:50px"></i>
|
|
</div>
|
|
<div class="col">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="topology-icon">
|
|
<path d="M27.14,33H10.62C5.67,33,1,28.19,1,23.1a10,10,0,0,1,8-9.75,10.19,10.19,0,0,1,20.33,1.06A10.07,10.07,0,0,1,29,16.66a8.29,8.29,0,0,1,6,8C35,29.1,31.33,33,27.14,33ZM19.09,6.23a8.24,8.24,0,0,0-8.19,8l0,.87-.86.1A7.94,7.94,0,0,0,3,23.1c0,4,3.77,7.9,7.62,7.9H27.14C30.21,31,33,28,33,24.65a6.31,6.31,0,0,0-5.37-6.26l-1.18-.18.39-1.13A8.18,8.18,0,0,0,19.09,6.23Z"></path>
|
|
</svg>
|
|
<div class="topology-item"><b>avmzone3vcf</b></div>
|
|
</div>
|
|
<div class="col">
|
|
<i class="fas fa-exchange-alt" style="color: #1f73f7;font-size:50px"></i>
|
|
</div>
|
|
<div class="col">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="topology-icon">
|
|
<path d="M6.32,11.11H7.84L8,10.24A7.19,7.19,0,0,1,15.07,4h.07a7.15,7.15,0,0,1,4.71,1.83,11.1,11.1,0,0,1,3.09.64A9.18,9.18,0,0,0,15.16,2h-.09A9.2,9.2,0,0,0,6.13,9.11,6.15,6.15,0,0,0,2.33,19.95,8.09,8.09,0,0,1,3,17.71a4.12,4.12,0,0,1-.81-2.44A4.16,4.16,0,0,1,6.32,11.11Z"></path>
|
|
<path d="M10.4,16.91h1.52L12,16a7.19,7.19,0,0,1,7.12-6.25h.07a7.17,7.17,0,0,1,5.7,2.92,11.05,11.05,0,0,1,2.72.77,9.2,9.2,0,0,0-8.4-5.69h-.09a9.2,9.2,0,0,0-8.94,7.12,6.15,6.15,0,0,0-3.64,11,8.11,8.11,0,0,1,.79-2,4.14,4.14,0,0,1,3-7Z"></path>
|
|
<path d="M32.42,24.47v-.62a9.18,9.18,0,0,0-18.13-2.16A6.16,6.16,0,0,0,14.48,34H31a4.88,4.88,0,0,0,1.46-9.53ZM31,32H14.48a4.16,4.16,0,1,1,0-8.32H16l.11-.87a7.19,7.19,0,0,1,7.12-6.25h.07a7.21,7.21,0,0,1,7.12,7.25v1c0,.07,0,.13,0,.2l-.07,1.11.94.11A2.88,2.88,0,0,1,31,32Z"></path>
|
|
</svg>
|
|
<div class="topology-item">2 Cloud sites</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-6">
|
|
<div class="card table-card dashboard-card" style="overflow-x: scroll;">
|
|
<div class="card-header border-top-black">
|
|
<h3>Required resources</h3>
|
|
</div>
|
|
<div class="card-block m-3">
|
|
<div class="d-flex mb-2">
|
|
<label for="clr-form-control-161" style="font-size: 14px; width:150px;" class="text-left p-1">Select Options:</label>
|
|
<select multiple class="form-control" id="clr-form-control-161">
|
|
<option value="clr-option-clr-id-6">All</option>
|
|
<option value="clr-option-clr-id-8">avmzone1</option>
|
|
<option value="clr-option-clr-id-9">avmzone1vcf</option>
|
|
<option value="clr-option-clr-id-10">avmzone3vcf</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4 col-md-4 col-lg-4 border-right">
|
|
<div class="resources-title">CPU</div>
|
|
<div class="d-flex">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="resource-icon">
|
|
<path d="M23.08,23.07h-11v1.5H23.83a.75.75,0,0,0,.75-.75V11.33h-1.5Z"></path>
|
|
<path d="M32.2,18.15a.8.8,0,1,0,0-1.6H30v-5.4h2.2a.8.8,0,1,0,0-1.6H30V8.1A2.1,2.1,0,0,0,27.9,6H26.35V3.8a.8.8,0,1,0-1.6,0V6h-5.4V3.8a.8.8,0,1,0-1.6,0V6h-5.4V3.8a.8.8,0,1,0-1.6,0V6H8.1A2.1,2.1,0,0,0,6,8.1V9.55H3.8a.8.8,0,1,0,0,1.6H6v5.4H3.8a.8.8,0,1,0,0,1.6H6v5.4H3.8a.8.8,0,1,0,0,1.6H6V27.9A2.1,2.1,0,0,0,8.1,30h2.65v2.2a.8.8,0,1,0,1.6,0V30h5.4v2.2a.8.8,0,1,0,1.6,0V30h5.4v2.2a.8.8,0,1,0,1.6,0V30H27.9A2.1,2.1,0,0,0,30,27.9V25.15h2.2a.8.8,0,1,0,0-1.6H30v-5.4ZM28,27.9a.1.1,0,0,1-.1.1H8.1a.1.1,0,0,1-.1-.1V8.1A.1.1,0,0,1,8.1,8H27.9a.1.1,0,0,1,.1.1Z"></path>
|
|
</svg>
|
|
<div class="recources-data">0 CPU(s)</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 col-md-4 col-lg-4 border-right">
|
|
<div class="resources-title">Memory</div>
|
|
<div class="d-flex">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="resource-icon">
|
|
<rect x="8" y="12" width="4" height="8"></rect>
|
|
<rect x="16" y="12" width="4" height="8"></rect>
|
|
<rect x="24" y="12" width="4" height="8"></rect>
|
|
<path d="M15,27H4V17H2V27a2,2,0,0,0,2,2H16.61V25.55h2.26V24H15Z"></path>
|
|
<path d="M32,7H4A2,2,0,0,0,2,9v4H4V9H32v4h2V9A2,2,0,0,0,32,7Z"></path>
|
|
<path d="M32,27H19v2H32a2,2,0,0,0,2-2V17H32Z"></path>
|
|
</svg>
|
|
<div class="recources-data">0.00 B</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 col-md-4 col-lg-4">
|
|
<div class="resources-title">Disk capacity</div>
|
|
<div class="d-flex">
|
|
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="resource-icon">
|
|
<path d="M33,6.69h0c-.18-3.41-9.47-4.33-15-4.33S3,3.29,3,6.78V29.37c0,3.49,9.43,4.43,15,4.43s15-.93,15-4.43V6.78s0,0,0,0S33,6.7,33,6.69Zm-2,7.56c-.33.86-5.06,2.45-13,2.45A37.45,37.45,0,0,1,7,15.34v2.08A43.32,43.32,0,0,0,18,18.7c4,0,9.93-.48,13-2v5.17c-.33.86-5.06,2.45-13,2.45A37.45,37.45,0,0,1,7,22.92V25a43.32,43.32,0,0,0,11,1.28c4,0,9.93-.48,13-2v5.1c-.35.86-5.08,2.45-13,2.45S5.3,30.2,5,29.37V6.82C5.3,6,10,4.36,18,4.36c7.77,0,12.46,1.53,13,2.37-.52.87-5.21,2.39-13,2.39A37.6,37.6,0,0,1,7,7.76V9.85a43.53,43.53,0,0,0,11,1.27c4,0,9.93-.48,13-2Z"></path>
|
|
</svg>
|
|
<div class="recources-data">0.00 B</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |