Commit ccbce20a by Kálmán Viktor

dashboard: enhance graphs

- highlight the currently selected option
- switch the images via js
parent dd4d012c
......@@ -397,6 +397,20 @@ $(function () {
clientInstalledAction(connectUri);
return false;
});
/* change graphs */
$(".graph-buttons a").click(function() {
var time = $(this).data("graph-time");
$(".graph-images img").each(function() {
var src = $(this).prop("src");
var new_src = src.substring(0, src.lastIndexOf("/") + 1) + time;
$(this).prop("src", new_src);
});
// change the buttons too
$(".graph-buttons a").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
return false;
});
});
function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
......
{% for o in graph_time_options %}
<a class="btn btn-xs
btn-{% if graph_time == o.time %}primary{% else %}default{% endif %}"
href="?graph_time={{ o.time }}"
data-graph-time="{{ o.time }}">
{{ o.name }}
</a>
{% endfor %}
......@@ -29,26 +29,26 @@
</div><!-- id:node-details-traits -->
</div>
<div class="col-md-8">
<div class="text-center">
{% for o in graph_time_options %}
<a class="btn btn-default btn-xs"
href="?graph_time={{ o.time }}">
{{ o.name }}
</a>
{% endfor %}
</div>
{% if graphite_enabled %}
<img src="{% url "dashboard.views.node-graph" node.pk "cpu" graph_time %}" style="width:100%"/>
<img src="{% url "dashboard.views.node-graph" node.pk "memory" graph_time %}" style="width:100%"/>
<img src="{% url "dashboard.views.node-graph" node.pk "network" graph_time %}" style="width:100%"/>
<img src="{% url "dashboard.views.node-graph" node.pk "vm" graph_time %}" style="width:100%"/>
<img src="{% url "dashboard.views.node-graph" node.pk "alloc" graph_time %}" style="width:100%"/>
{% endif %}
<div class="text-center graph-buttons">
{% include "dashboard/_graph-time-buttons.html" %}
</div>
<div class="graph-images">
<img src="{% url "dashboard.views.node-graph" node.pk "cpu" graph_time %}"/>
<img src="{% url "dashboard.views.node-graph" node.pk "memory" graph_time %}"/>
<img src="{% url "dashboard.views.node-graph" node.pk "network" graph_time %}"/>
<img src="{% url "dashboard.views.node-graph" node.pk "vm" graph_time %}"/>
<img src="{% url "dashboard.views.node-graph" node.pk "alloc" graph_time %}"/>
</div>
{% endif %}
</div>
</div>
<style>
.form-group {
margin: 0px;
}
</style>
.graph-images img {
width: 100%;
}
</style>
......@@ -25,17 +25,12 @@
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right">
{% for o in graph_time_options %}
<a class="btn btn-default btn-xs"
href="?graph_time={{ o.time }}">
{{ o.name }}
</a>
{% endfor %}
<div class="pull-right graph-buttons">
{% include "dashboard/_graph-time-buttons.html" %}
</div>
<h3 class="no-margin"><i class="fa fa-area-chart"></i> {% trans "Graphs" %}</h3>
</div>
<div class="text-center">
<div class="text-center graph-images">
<img src="{% url "dashboard.views.node-list-graph" "alloc" graph_time %}"/>
<img src="{% url "dashboard.views.node-list-graph" "vm" graph_time %}"/>
</div>
......
......@@ -123,17 +123,14 @@
</div>
<div class="col-md-8">
{% if graphite_enabled %}
<div class="text-center">
{% for o in graph_time_options %}
<a class="btn btn-default btn-xs"
href="?graph_time={{ o.time }}">
{{ o.name }}
</a>
{% endfor %}
<div class="text-center graph-buttons">
{% include "dashboard/_graph-time-buttons.html" %}
</div>
<div class="graph-images">
<img src="{% url "dashboard.views.vm-graph" instance.pk "cpu" graph_time %}"/>
<img src="{% url "dashboard.views.vm-graph" instance.pk "memory" graph_time %}"/>
<img src="{% url "dashboard.views.vm-graph" instance.pk "network" graph_time %}"/>
</div>
<img src="{% url "dashboard.views.vm-graph" instance.pk "cpu" graph_time %}" style="width:100%"/>
<img src="{% url "dashboard.views.vm-graph" instance.pk "memory" graph_time %}" style="width:100%"/>
<img src="{% url "dashboard.views.vm-graph" instance.pk "network" graph_time %}" style="width:100%"/>
{% endif %}
</div>
</div>
......@@ -555,6 +555,10 @@ class GraphMixin(object):
"h, d, w, and y."))
graph_time = self.default_graph_time
context['graph_time'] = graph_time
self.graph_time_options = (
self.graph_time_options +
[{'time': self.default_graph_time, 'name': _("default")}]
)
context['graph_time_options'] = self.graph_time_options
return context
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment