Fixes for UI layout
- fixed labels position for Charts
- fixed layout for reports
Closes-Bug: #1474920
Change-Id: I632d7c34828bfa3a1d778ca5eb974e0f4b86fdd7
This commit is contained in:
Kate Pimenova
parent
4b76d287ab
commit
06c0be3292
|
|
@ -59,13 +59,13 @@
|
|||
<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>
|
||||
<svg style="height: 280px;"></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="title">Environments statuses distribution</div>
|
||||
<div id="clusters-distribution">
|
||||
<svg style="height: 250px;"></svg>
|
||||
<svg style="height: 280px;"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,8 @@ function($, d3, D3pie, d3tip, nv, elasticsearch) {
|
|||
var chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label;})
|
||||
.y(function(d) { return d.value;})
|
||||
.margin({top: 30})
|
||||
.margin({top: 30, bottom: 60})
|
||||
.staggerLabels(true)
|
||||
.transitionDuration(350);
|
||||
|
||||
chart.xAxis
|
||||
|
|
@ -176,7 +177,7 @@ function($, d3, D3pie, d3tip, nv, elasticsearch) {
|
|||
|
||||
chart.yAxis
|
||||
.axisLabel('Environments')
|
||||
.axisLabelDistance(50)
|
||||
.axisLabelDistance(30)
|
||||
.tickFormat(d3.format('d'));
|
||||
|
||||
chart.tooltipContent(function(key, x, y) {
|
||||
|
|
@ -225,7 +226,7 @@ function($, d3, D3pie, d3tip, nv, elasticsearch) {
|
|||
var chart = nv.models.multiBarChart()
|
||||
.x(function(d) { return d.label;})
|
||||
.y(function(d) { return d.value;})
|
||||
.margin({top: 30})
|
||||
.margin({top: 30, bottom: 60})
|
||||
.transitionDuration(350)
|
||||
.reduceXTicks(false) //If 'false', every single x-axis tick label will be rendered.
|
||||
.rotateLabels(0) //Angle to rotate x-axis labels.
|
||||
|
|
@ -238,7 +239,7 @@ function($, d3, D3pie, d3tip, nv, elasticsearch) {
|
|||
|
||||
chart.yAxis
|
||||
.axisLabel('Installations')
|
||||
.axisLabelDistance(50)
|
||||
.axisLabelDistance(30)
|
||||
.tickFormat(d3.format('d'));
|
||||
|
||||
chart.tooltipContent(function(key, x, y) {
|
||||
|
|
@ -338,7 +339,7 @@ function($, d3, D3pie, d3tip, nv, elasticsearch) {
|
|||
|
||||
chart.yAxis
|
||||
.axisLabel('Environments')
|
||||
.axisLabelDistance(50)
|
||||
.axisLabelDistance(30)
|
||||
.tickFormat(d3.format('d'));
|
||||
|
||||
chart.tooltipContent(function(key, x, y) {
|
||||
|
|
|
|||
|
|
@ -39,31 +39,27 @@
|
|||
<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">Installations 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 class="content">
|
||||
<h3>Reports</h3>
|
||||
<div class="notice">Set time period for reporting:</div>
|
||||
<div class="row">
|
||||
<label class="col-md-1" for="from">from</label>
|
||||
<div class="col-md-11" ><input type="text" id="from" name="from"></div>
|
||||
<label class="col-md-1" for="to">to</label>
|
||||
<div class="col-md-11" ><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">Installations 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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue