Split cloudstats resource usage graphs to another page (#100)

* Split cloudstats resource usage graphs to another page

* Docs images for cloudstats resource usage graphs

Author: sebastienbonami

cloudstats/templates/cloudstats/index.html

@@ -19,13 +19,13 @@ <h3>{% translate "Your projects" %}</h3>
     {% endif %}
 
 {% if request.user.is_staff %}
-{% include "nav_last_month.html" %}
 
   <h3>{% translate "All projects" %}</h3>
-  <h4>{% translate "CPU used" %}</h4>
-  <div id="graph_cpu"></div>
-  <h4>{% translate "Memory used" %}</h4>
-  <div id="graph_mem"></div>
+  <div class="mb-4">
+    <a href="{% url 'resource_graphs' %}" class="btn btn-primary">
+      {% translate "Resource Usage Graphs" %}
+    </a>
+  </div>
   <h4>{% translate "Projects" %}</h4>
   Total physical cores: {{physical_cores | floatformat:0}}<br>
   Total physical memory: {{physical_memory | floatformat:0}} GB<br>
@@ -58,30 +58,4 @@ <h4>{% translate "Projects" %}</h4>
   </table>
 {% endif %}
 
-{% if request.user.is_staff %}
-<script>
-  function loadGraphs(delta){
-    loadGraph('graph_cpu', 'graph/cpu.json?delta=' + delta);
-    loadGraph('graph_mem', 'graph/mem.json?delta=' + delta);
-}
-$(document).ready(function(){
-    loadGraphs(60*60*24*7);
-
-    $('#myTabs a').click(function (e) {
-        if($(this).attr('href') == '#last_month'){
-          loadGraphs(60*60*24*30);
-        }
-        if($(this).attr('href') == '#last_week'){
-            loadGraphs(60*60*24*7);
-        }
-        if($(this).attr('href') == '#last_day'){
-            loadGraphs(60*60*24);
-        }
-        if($(this).attr('href') == '#last_hour'){
-            loadGraphs(60*60);
-        }
-    })
-});
-</script>
-{% endif %}
 {% endblock content %}

cloudstats/templates/cloudstats/resource_graphs.html

@@ -0,0 +1,45 @@
+{% extends 'base.html' %}
+{% load humanize %}
+{% load i18n %}
+
+{% block title %}{% translate "Your cloud use - Resource Usage Graphs" %}{% endblock title %}
+
+{% block content %}
+<h1>{% translate "Your cloud use" %}</h1>
+<h2>{% translate "Resource Usage Graphs" %}</h2>
+
+{% if request.user.is_staff %}
+{% include "nav_last_month.html" %}
+
+  <h3>{% translate "All projects" %}</h3>
+  <h4>{% translate "CPU used" %}</h4>
+  <div id="graph_cpu"></div>
+  <h4>{% translate "Memory used" %}</h4>
+  <div id="graph_mem"></div>
+
+<script>
+  function loadGraphs(delta){
+    loadGraph('graph_cpu', 'graph/cpu.json?delta=' + delta);
+    loadGraph('graph_mem', 'graph/mem.json?delta=' + delta);
+}
+$(document).ready(function(){
+    loadGraphs(60*60*24*7);
+
+    $('#myTabs a').click(function (e) {
+        if($(this).attr('href') == '#last_month'){
+          loadGraphs(60*60*24*30);
+        }
+        if($(this).attr('href') == '#last_week'){
+            loadGraphs(60*60*24*7);
+        }
+        if($(this).attr('href') == '#last_day'){
+            loadGraphs(60*60*24);
+        }
+        if($(this).attr('href') == '#last_hour'){
+            loadGraphs(60*60);
+        }
+    })
+});
+</script>
+{% endif %}
+{% endblock content %}

cloudstats/tests.py

@@ -21,9 +21,14 @@ def test_cloudstats_admin(self):
         self.assertContains(response, 'Your projects')
         self.assertContains(response, 'All projects')
 
+    def test_cloudstats_resource_graphs(self):
+        response = self.admin_client.get('/secure/cloudstats/resource_graphs/')
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, 'All projects')
+
     def test_cloudstats_graph(self):
         for i in ['cpu', 'mem']:
-            response = self.admin_client.get('/secure/cloudstats/graph/{i}.json?delta=3600'.format(
+            response = self.admin_client.get('/secure/cloudstats/resource_graphs/graph/{i}.json?delta=3600'.format(
                 i=i))
             self.assertEqual(response.status_code, 200)
             self.assertJSONKeys(response, ['data', 'layout'])

cloudstats/urls.py

@@ -3,8 +3,9 @@
 
 urlpatterns = [
     path('', views.index),
-    path('graph/cpu.json', views.projects_graph_cpu),
-    path('graph/mem.json', views.projects_graph_mem),
+    path('resource_graphs/', views.resource_graphs, name='resource_graphs'),
+    path('resource_graphs/graph/cpu.json', views.projects_graph_cpu),
+    path('resource_graphs/graph/mem.json', views.projects_graph_mem),
     path('<str:project>/', views.project),
     path('<str:project>/graph/cpu.json', views.project_graph_cpu),
     path('<str:project>/graph/memory.json', views.project_graph_memory),

cloudstats/views.py

@@ -130,6 +130,11 @@ def index(request):
     return render(request, 'cloudstats/index.html', context)
 
 
+@login_required
+def resource_graphs(request):
+    return render(request, 'cloudstats/resource_graphs.html')
+
+
 @login_required
 @openstackproject_or_staff
 def project(request, project):

docs/cloudstats.md

@@ -4,6 +4,7 @@ The stats of the VM running on Openstack can be viewed. This is using the stats
 ## Screenshots
 ### Overall use
 ![Overall use](cloudstats.png)
+![Overall use - Resource Usage Graphs](cloudstats_resource_graphs.png)
 ### Use within a project
 ![Use within a project](cloudstats_project.png)
 ### Use within a VM