x/tuskar-ui
Code Issues Proposed changes

Styling Nodes Overview page

Browse Source 
Styling overview page. Extracting performance charts to
separate template, so it is reusable elsewhere.

Change-Id: Iea55815f7680b8fb15b06670281f3a7105f00d8e
This commit is contained in:
Ladislav Smola 2014-10-22 12:55:08 +02:00
parent 5119af67da
commit afbe1fb481
6 changed files with 124 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tuskar_ui/infrastructure/nodes/tabs.py
View File

@ -59,6 +59,8 @@ class OverviewTab(tabs.Tab):
'nodes_down_count': utils.length(nodes_down),
'nodes_provisioned_count': utils.length(nodes_provisioned),
'nodes_free_count': utils.length(nodes_free),
'nodes_all_count': (utils.length(nodes_provisioned) +
utils.length(nodes_free))
}
if api_base.is_service_enabled(self.request, 'metering'):

143
tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html
View File

@ -6,144 +6,37 @@
<div class="col-xs-4">
<div class="widget">
<h3>{% trans 'Hardware Inventory' %}</h3>
<table class="table">
<tbody>
<tr>
<td>{{ cpus }} {% trans 'CPU cores' %}</td>
</tr>
<tr>
<td>{{ memory_gb }} {% trans 'GB of memory' %}</td>
</tr>
<tr>
<td>{{ local_gb }} {% trans 'GB of storage' %}</td>
</tr>
</tbody>
</table>
<div class="widget-info">
<a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered">
<span class="info">{{ nodes_all_count }} {% trans 'nodes' %}</span>
</a>
</div>
<p>
{{ cpus }} {% trans 'CPUs' %} | {{ memory_gb }} {% trans 'GB RAM' %} | {{ local_gb }} {% trans 'GB HDD' %}
</p>
</div>
</div>
<div class="col-xs-4">
<div class="widget">
<h3>{% trans 'Free Nodes' %}</h3>
<h3>{% trans 'Nodes Status' %}</h3>
<div class="d3_pie_chart_distribution" data-used="Provisioned={{ nodes_provisioned_count }}|Free={{ nodes_free_count }}"></div>
<div class="widget-info">
<a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered&free">
<span class="info">{{ nodes_free_count }}</span>
{% trans 'Free Nodes' %}
</a>
</div>
<div class="widget-info">
<a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered&provisioned">
<span class="info">{{ nodes_provisioned_count }}</span>
{% trans 'Provisioned Nodes' %}
</a>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="widget">
<h2>{% trans 'Power Status' %}</h2>
<h3>{% trans 'Power Status' %}</h3>
<div class="d3_pie_chart_distribution" data-used="Running={{ nodes_up_count }}|Stopped={{ nodes_down_count }}"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>{% trans "Provisioned nodes" %}</h3>
{% if meter_conf %}
{% url 'horizon:infrastructure:nodes:nodes_performance' as node_perf_url %}
<div id="ceilometer-stats" class="clearfix">
<form class="form-horizontal" id="linechart_general_form">
<div class="form-group">
<label for="date_options" class="control-label col-sm-3">{% trans "Period" %}:&nbsp;</label>
<div class="col-sm-4">
<select data-line-chart-command="select_box_change"
id="date_options"
name="date_options"
class="form-control">
<option value="0.041666">{% trans "Last hour" %}</option>
<option value="0.25">{% trans "Last 6 hours" %}</option>
<option value="0.5">{% trans "Last 12 hours" %}</option>
<option value="1" selected="selected">{% trans "Last day" %}</option>
<option value="7">{% trans "Last week" %}</option>
<option value="{% now 'j' %}">{% trans "Month to date" %}</option>
<option value="15">{% trans "Last 15 days" %}</option>
<option value="30">{% trans "Last 30 days" %}</option>
<option value="365">{% trans "Last year" %}</option>
<option value="other">{% trans "Other" %}</option>
</select>
</div>
</div>
<div class="form-group" id="date_from_group">
<label for="date_from" class="control-label col-sm-3">{% trans "From" %}:&nbsp;</label>
<div class="col-sm-4">
<input data-line-chart-command="date_picker_change"
type="text"
id="date_from"
name="date_from"
class="form-control"/>
</div>
</div>
<div class="form-group" id="date_to_group">
<label for="date_to" class="control-label col-sm-3">{% trans "To" %}:&nbsp;</label>
<div class="col-sm-4">
<input data-line-chart-command="date_picker_change"
type="text"
id="date_to"
name="date_to"
class="form-control"/>
</div>
</div>
</form>
</div>
<script type="text/javascript">
if (typeof $ !== 'undefined') {
show_hide_datepickers();
} else {
addHorizonLoadEvent(function() {
show_hide_datepickers();
});
}
// TODO(lsmola) Pull the common code into a js file.
function show_hide_datepickers() {
var date_options = $("#date_options");
date_options.change(function(evt) {
if ($(this).find("option:selected").val() === "other"){
evt.stopPropagation();
$("#date_from, #date_to").val('');
$("#date_from_group, #date_to_group").show();
} else {
$("#date_from_group, #date_to_group").hide();
}
});
if (date_options.find("option:selected").val() === "other"){
$("#date_from_group, #date_to_group").show();
} else {
$("#date_from_group, #date_to_group").hide();
}
}
</script>
<div id="node-charts" class="nodes row">
<div class="col-lg-1">
<div class="col-xs-8">
<div class="nodes row">
<div class="col-xs-12">
<h3>{% trans "Provisioned nodes" %}</h3>
<div class="widget-info">
<a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered&provisioned">
<span class="info">{{ nodes_provisioned_count }}</span><br>
{% trans 'Provisioned' %}<br>
{% trans 'Nodes' %}<br>
<span class="info">{{ nodes_provisioned_count }} {% trans 'provisioned nodes' %}</span>
</a>
</div>
</div>
{% for meter_label, url_part, y_max in meter_conf %}
<div class="col-lg-3">
{% include "infrastructure/_performance_chart.html" with label=meter_label y_max=y_max url=node_perf_url|add:"?"|add:url_part only %}
</div>
{% endfor %}
{% else %}
<p>{% trans 'Metering service is not enabled.' %}</p>
{% endif %}
</div>
{% url 'horizon:infrastructure:nodes:nodes_performance' as node_perf_url %}
{% include "infrastructure/_performance_chart_box.html" with meter_conf=meter_conf node_perf_url=node_perf_url %}
</div>
</div>

7
tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss Normal file
View File

@ -0,0 +1,7 @@
form.performance_charts {
.pull-right {
input {
margin-left: 0;
}
}
}

1
tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss
View File

@ -11,3 +11,4 @@
@import "_index_pages";
@import "_individual_pages";
@import "_tables";
@import "_charts";

91
tuskar_ui/infrastructure/templates/infrastructure/_performance_chart_box.html Normal file
View File

@ -0,0 +1,91 @@
{% load i18n %}
{% load url from future%}
{% if meter_conf %}
<div class="nodes row">
<div id="ceilometer-stats" class="clearfix">
<form class="form-inline performance_charts" id="linechart_general_form">
<div class="pull-right">
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
<select data-line-chart-command="select_box_change"
id="date_options"
name="date_options"
class="form-control">
<option value="0.041666">{% trans "Last hour" %}</option>
<option value="0.25">{% trans "Last 6 hours" %}</option>
<option value="0.5">{% trans "Last 12 hours" %}</option>
<option value="1" selected="selected">{% trans "Last day" %}</option>
<option value="7">{% trans "Last week" %}</option>
<option value="{% now 'j' %}">{% trans "Month to date" %}</option>
<option value="15">{% trans "Last 15 days" %}</option>
<option value="30">{% trans "Last 30 days" %}</option>
<option value="365">{% trans "Last year" %}</option>
<option value="other">{% trans "Other" %}</option>
</select>
</div>
</div>
<div class="form-group" id="date_from_group">
<div class="input-group input-group-sm">
<div class="input-group-addon">{% trans "From" %}</div>
<input data-line-chart-command="date_picker_change"
type="text"
id="date_from"
name="date_from"
class="form-control"/>
</div>
</div>
<div class="form-group" id="date_to_group">
<div class="input-group input-group-sm">
<div class="input-group-addon">{% trans "To" %}</div>
<input data-line-chart-command="date_picker_change"
type="text"
id="date_to"
name="date_to"
class="form-control"/>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
if (typeof $ !== 'undefined') {
show_hide_datepickers();
} else {
addHorizonLoadEvent(function() {
show_hide_datepickers();
});
}
// TODO(lsmola) Pull the common code into a js file.
function show_hide_datepickers() {
var date_options = $("#date_options");
date_options.change(function(evt) {
if ($(this).find("option:selected").val() === "other"){
evt.stopPropagation();
$("#date_from, #date_to").val('');
$("#date_from_group, #date_to_group").show();
} else {
$("#date_from_group, #date_to_group").hide();
}
});
if (date_options.find("option:selected").val() === "other"){
$("#date_from_group, #date_to_group").show();
} else {
$("#date_from_group, #date_to_group").hide();
}
}
</script>
<div id="node-charts" class="nodes row">
{% for meter_label, url_part, y_max in meter_conf %}
<div class="col-lg-4">
{% include "infrastructure/_performance_chart.html" with label=meter_label y_max=y_max url=node_perf_url|add:"?"|add:url_part only %}
</div>
{% endfor %}
</div>
{% else %}
<p>{% trans 'Metering service is not enabled.' %}</p>
{% endif %}

9
tuskar_ui/utils/metering.py
View File

@ -20,6 +20,7 @@ from django.utils import timezone
from django.utils.translation import ugettext_lazy as _
from horizon import exceptions
from openstack_dashboard.api import ceilometer
import pytz
SETTINGS = {
'settings': {
@ -140,8 +141,8 @@ def _calc_date_args(date_from, date_to, date_options):
if date_options == "other":
try:
if date_from:
date_from = datetime.strptime(date_from,
"%Y-%m-%d")
date_from = pytz.utc.localize(
datetime.strptime(date_from, "%Y-%m-%d"))
else:
# TODO(lsmola) there should be probably the date
# of the first sample as default, so it correctly
@ -149,8 +150,8 @@ def _calc_date_args(date_from, date_to, date_options):
# and limit of samples to obtain that.
pass
if date_to:
date_to = datetime.strptime(date_to,
"%Y-%m-%d")
date_to = pytz.utc.localize(
datetime.strptime(date_to, "%Y-%m-%d"))
# It return beginning of the day, I want the and of
# the day, so i will add one day without a second.
date_to = (date_to + timedelta(days=1) -