dashboard: enhance graphs

- highlight the currently selected option
- switch the images via js

circle/dashboard/static/dashboard/dashboard.js

@@ -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) {

circle/dashboard/templates/dashboard/_graph-time-buttons.html

+{% 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 @@
     </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%"/>
+    <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;
-  }
+</div>
 
-</style>
+  <style>
+    .form-group {
+      margin: 0px;
+    }
+    .graph-images img {
+      width: 100%;
+    }
+  </style>

circle/dashboard/templates/dashboard/node-list.html

@@ -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>

circle/dashboard/templates/dashboard/vm-detail/home.html

@@ -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>

circle/dashboard/views/util.py

@@ -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