Skip to content

CIRCLE / cloud

Go to a project
Commit ccbce20a by Kálmán Viktor
Options

dashboard: enhance graphs 

- highlight the currently selected option
- switch the images via js
parent dd4d012c
Showing with 52 additions and 34 deletions
circle/dashboard/static/dashboard/dashboard.js
...@@ -397,6 +397,20 @@ $(function () { ...@@ -397,6 +397,20 @@ $(function () {
clientInstalledAction(connectUri); clientInstalledAction(connectUri);
return false; 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) { function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
......
circle/dashboard/templates/dashboard/_graph-time-buttons.html 0 → 100644
{% 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 %}
circle/dashboard/templates/dashboard/node-detail/home.html
...@@ -29,26 +29,26 @@ ...@@ -29,26 +29,26 @@
</div><!-- id:node-details-traits --> </div><!-- id:node-details-traits -->
</div> </div>
<div class="col-md-8"> <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 %} {% if graphite_enabled %}
<img src="{% url "dashboard.views.node-graph" node.pk "cpu" graph_time %}" style="width:100%"/> <div class="text-center graph-buttons">
<img src="{% url "dashboard.views.node-graph" node.pk "memory" graph_time %}" style="width:100%"/> {% include "dashboard/_graph-time-buttons.html" %}
<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> </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>
</div>
<style> <style>
.form-group { .form-group {
margin: 0px; margin: 0px;
} }
.graph-images img {
</style> width: 100%;
}
</style>
circle/dashboard/templates/dashboard/node-list.html
...@@ -25,17 +25,12 @@ ...@@ -25,17 +25,12 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<div class="pull-right"> <div class="pull-right graph-buttons">
{% for o in graph_time_options %} {% include "dashboard/_graph-time-buttons.html" %}
<a class="btn btn-default btn-xs"
href="?graph_time={{ o.time }}">
{{ o.name }}
</a>
{% endfor %}
</div> </div>
<h3 class="no-margin"><i class="fa fa-area-chart"></i> {% trans "Graphs" %}</h3> <h3 class="no-margin"><i class="fa fa-area-chart"></i> {% trans "Graphs" %}</h3>
</div> </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" "alloc" graph_time %}"/>
<img src="{% url "dashboard.views.node-list-graph" "vm" graph_time %}"/> <img src="{% url "dashboard.views.node-list-graph" "vm" graph_time %}"/>
</div> </div>
......
circle/dashboard/templates/dashboard/vm-detail/home.html
...@@ -123,17 +123,14 @@ ...@@ -123,17 +123,14 @@
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
{% if graphite_enabled %} {% if graphite_enabled %}
<div class="text-center"> <div class="text-center graph-buttons">
{% for o in graph_time_options %} {% include "dashboard/_graph-time-buttons.html" %}
<a class="btn btn-default btn-xs" </div>
href="?graph_time={{ o.time }}"> <div class="graph-images">
{{ o.name }} <img src="{% url "dashboard.views.vm-graph" instance.pk "cpu" graph_time %}"/>
</a> <img src="{% url "dashboard.views.vm-graph" instance.pk "memory" graph_time %}"/>
{% endfor %} <img src="{% url "dashboard.views.vm-graph" instance.pk "network" graph_time %}"/>
</div> </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 %} {% endif %}
</div> </div>
</div> </div>
circle/dashboard/views/util.py
...@@ -555,6 +555,10 @@ class GraphMixin(object): ...@@ -555,6 +555,10 @@ class GraphMixin(object):
"h, d, w, and y.")) "h, d, w, and y."))
graph_time = self.default_graph_time graph_time = self.default_graph_time
context['graph_time'] = 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 context['graph_time_options'] = self.graph_time_options
return context 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