Reports page added on UI
Closes-Bug:#1470806 Change-Id: I09465d8ebd544a10263db801fcc1df0b2c423e55
This commit is contained in:
Kate Pimenova
parent
c3d01fd10a
commit
46623af5e5
|
|
@ -2,6 +2,7 @@
|
|||
"name": "fuel-stats",
|
||||
"dependencies": {
|
||||
"jquery": "2.1.1",
|
||||
"jquery-ui": "1.11.4",
|
||||
"bootstrap": "3.2.0",
|
||||
"d3": "3.4.13",
|
||||
"d3-tip": "0.6.3",
|
||||
|
|
@ -22,6 +23,12 @@
|
|||
"dist/css/bootstrap.css.map",
|
||||
"dist/js/bootstrap.js"
|
||||
]
|
||||
},
|
||||
"jquery-ui": {
|
||||
"main": [
|
||||
"themes/base/jquery-ui.css",
|
||||
"jquery-ui.js"
|
||||
]
|
||||
}
|
||||
},
|
||||
"ignore": [
|
||||
|
|
|
|||
|
|
@ -255,3 +255,36 @@ svg text {
|
|||
#release-filter {
|
||||
margin: 10px 0 0 13px;
|
||||
}
|
||||
|
||||
.reports .content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.reports ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reports ul li {
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.reports .notice {
|
||||
font-size: 18px;
|
||||
margin: 20px 0 10px 0;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.reports ul, .reports .row {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.reports label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.reports input {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
|
@ -23,12 +23,16 @@
|
|||
<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 class="nav-item"><a href="reports.html">
|
||||
<div class="icon-reports"></div>
|
||||
<div class="nav-item-name">Reports</div>
|
||||
</a></div>
|
||||
|
||||
</div>
|
||||
<!-- End Left Pannel -->
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
$(function() {
|
||||
var defaultDate = new Date(),
|
||||
reportUrl = '/api/v1/csv/';
|
||||
|
||||
$( '#from' ).datepicker({
|
||||
defaultDate: '-1m',
|
||||
changeMonth: true,
|
||||
numberOfMonths: 3,
|
||||
dateFormat: "yy-mm-dd",
|
||||
onClose: function( selectedDate ) {
|
||||
$( '#to' ).datepicker( 'option', 'minDate', selectedDate );
|
||||
}
|
||||
});
|
||||
$( '#to' ).datepicker({
|
||||
changeMonth: true,
|
||||
numberOfMonths: 3,
|
||||
dateFormat: "yy-mm-dd",
|
||||
onClose: function( selectedDate ) {
|
||||
$( '#from' ).datepicker( 'option', 'maxDate', selectedDate );
|
||||
}
|
||||
});
|
||||
$('#to').datepicker('setDate', defaultDate);
|
||||
defaultDate.setMonth(defaultDate.getMonth() - 1);
|
||||
$('#from').datepicker('setDate', defaultDate);
|
||||
|
||||
$('.btn-link').click(function(e) {
|
||||
e.preventDefault();
|
||||
url = reportUrl + $(this).attr('id') + '?from_date=' + $('#from').val() + '&to_date=' + $('#to').val();
|
||||
window.open(url);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!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">
|
||||
<link href="css/fuel-stat.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="js/libs/jquery-ui.css">
|
||||
<script src="js/libs/jquery.js"></script>
|
||||
<script src="js/libs/jquery-ui.js"></script>
|
||||
<script src="js/reports.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Start Left Pannel -->
|
||||
<div class="nav-pannel">
|
||||
<div class="logo"><a href="#"></a></div>
|
||||
|
||||
<div class="nav-item"><a href="index.html">
|
||||
<div class="icon-graphs"></div>
|
||||
<div class="nav-item-name">Graphics</div>
|
||||
</a></div>
|
||||
|
||||
<div class="nav-item"><a href="#" class="active">
|
||||
<div class="icon-reports"></div>
|
||||
<div class="nav-item-name">Reports</div>
|
||||
</a></div>
|
||||
|
||||
</div>
|
||||
<!-- End Left Pannel -->
|
||||
|
||||
<!-- Start Base Layout -->
|
||||
<div class="base-box">
|
||||
|
||||
<div class="container-fluid reports titul-graph-box">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="content">
|
||||
<h3>Reports</h3>
|
||||
<div class="notice">Set time period for reporting:</div>
|
||||
<div class="row">
|
||||
<label class="col-md-2" for="from">from</label>
|
||||
<div class="col-md-10" ><input type="text" id="from" name="from"></div>
|
||||
<label class="col-md-2" for="to">to</label>
|
||||
<div class="col-md-10" ><input type="text" id="to" name="to"></div>
|
||||
</div>
|
||||
<div class='notice'>Click the link to download report:</div>
|
||||
<ul>
|
||||
<li><button class="btn-link" id="clusters">Istallations info</button></li>
|
||||
<li><button class="btn-link" id="plugins">Plugins</button></li>
|
||||
<li><button class="btn-link" id="flavor">Flavors</button></li>
|
||||
<li><button class="btn-link" id="image">Images</button></li>
|
||||
<li><button class="btn-link" id="keystone_user">Keystone users</button></li>
|
||||
<li><button class="btn-link" id="tenant">Tenants</button></li>
|
||||
<li><button class="btn-link" id="vm">Vms</button></li>
|
||||
<li><button class="btn-link" id="volume">Volumes</button></li>
|
||||
<li><button class="btn-link" id="all">All reports</button> (download can take lot of time, please be patient)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue