156 lines
7.0 KiB
HTML
156 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="favicon.ico">
|
|
<title>Fuel Statistics</title>
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="js/libs/bootstrap.css" rel="stylesheet">
|
|
<!-- Custom styles for this template -->
|
|
<link href="css/nv.d3.css" rel="stylesheet">
|
|
<link href="css/fuel-stat.css" rel="stylesheet">
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<script data-main="js/main" src="js/libs/require.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Start Left Pannel -->
|
|
<div class="nav-pannel">
|
|
<div class="logo"><a href="#"></a></div>
|
|
|
|
<!-- Nav item 1 -->
|
|
<div class="nav-item"><a href="#" class="active">
|
|
<div class="icon-graphs"></div>
|
|
<div class="nav-item-name">Graphics</div>
|
|
</a></div>
|
|
|
|
</div>
|
|
<!-- End Left Pannel -->
|
|
|
|
<!-- Start Base Layout -->
|
|
<div class="base-box">
|
|
<select id="release-filter"></select>
|
|
|
|
<!-- TOP BIG GRAPH -->
|
|
<div class="container-fluid titul-graph-box">
|
|
<div class="row top-graph">
|
|
<div class="col-md-4">
|
|
<div class="header">
|
|
<p>
|
|
<div class="title">
|
|
Number of installations: <b><span id="installations-count"></span></b>
|
|
</div>
|
|
</p>
|
|
<p>
|
|
<div class="title">Total number of environments: <b><span id="environments-count"></span></b>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="title">Distribution of installations by number of environments</div>
|
|
<div id="env-distribution">
|
|
<svg style="height: 250px;"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="title">Environments statuses distribution</div>
|
|
<div id="clusters-distribution">
|
|
<svg style="height: 250px;"></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Block with small graphics -->
|
|
<div class="container-fluid small-graphs-box">
|
|
<div class="row">
|
|
|
|
<!-- Start Graphics Items -->
|
|
<div class="container-fluid standard-graph-box">
|
|
<div class="row">
|
|
|
|
<!-- Start Item 1 -->
|
|
<div class="col-md-4">
|
|
<div class="graph-item-box">
|
|
<!-- Start Item Header -->
|
|
<div class="header">
|
|
<div class="title">Environment Size</div>
|
|
<!-- <div class="icon"><a href="#"></a></div> -->
|
|
</div>
|
|
<!-- End Item Header -->
|
|
<!-- Start Item Content -->
|
|
<div class="content">
|
|
<div class="image">
|
|
<div id="nodes-distribution">
|
|
<svg style="height: 280px;"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="description">Number of environments: <span
|
|
id="count-nodes-distribution"></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Item Content -->
|
|
</div>
|
|
</div>
|
|
<!-- End Item 1 -->
|
|
|
|
<!-- Start Item 2 -->
|
|
<div class="col-md-4">
|
|
<div class="graph-item-box">
|
|
<!-- Start Item Header -->
|
|
<div class="header">
|
|
<div class="title">Hypervisor</div>
|
|
</div>
|
|
<!-- End Item Header -->
|
|
<!-- Start Item Content -->
|
|
<div class="content">
|
|
<div class="image">
|
|
<div id="releases-distribution"></div>
|
|
</div>
|
|
<div class="description">Number of environments: <span
|
|
id="count-releases-distribution"></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Item Content -->
|
|
</div>
|
|
</div>
|
|
<!-- End Item 2 -->
|
|
|
|
<!-- Start Item 3 -->
|
|
<div class="col-md-4">
|
|
<div class="graph-item-box">
|
|
<!-- Start Item Header -->
|
|
<div class="header">
|
|
<div class="title">Operating System</div>
|
|
</div>
|
|
<!-- End Item Header -->
|
|
<!-- Start Item Content -->
|
|
<div class="content">
|
|
<div class="image">
|
|
<div id="distribution-of-oses"></div>
|
|
</div>
|
|
<div class="description">Number of environments: <span
|
|
id="count-distribution-of-oses"></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Item Content -->
|
|
</div>
|
|
</div>
|
|
<!-- End Item 3 -->
|
|
</div>
|
|
</div>
|
|
<!-- End Graphics Items -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|