dashboard: show only first 10 activity

circle/dashboard/static/dashboard/dashboard.css

@@ -751,3 +751,7 @@ textarea[name="list-new-namelist"] {
 #group-detail-permissions input[type="submit"]{
   margin-top: -6px;
 }
+
+#show-all-activities-container {
+  margin: 20px 0 0 10px;
+}

circle/dashboard/static/dashboard/vm-details.js

+var show_all = false;
+var in_progress = false;
+
 $(function() {
   /* do we need to check for new activities */
   if(decideActivityRefresh()) {
-    checkNewActivity(false, 1);
+    if(!in_progress) {
+      checkNewActivity(1);
+      in_progress = true;
+    }
   }
+
   $('a[href="#activity"]').click(function(){
     $('a[href="#activity"] i').addClass('fa-spin');
-    checkNewActivity(false, 1);
+    if(!in_progress) {
+      checkNewActivity(1);
+      in_progress = true;
+    }
+  });
+
+  $("#activity-refresh").on("click", "#show-all-activities", function() {
+    show_all = !show_all;
+    $('a[href="#activity"]').trigger("click");
+    return false;
   });
 
   /* save resources */
@@ -134,11 +150,6 @@ $(function() {
     return false;
   });
 
-  /* show help */
-  $(".vm-details-help-button").click(function() {
-    $(".vm-details-help").stop().slideToggle();
-  });
-
   /* for interface remove buttons */
   $('.interface-remove').click(function() {
     var interface_pk = $(this).data('interface-pk');
@@ -320,12 +331,12 @@ function removePort(data) {
 function decideActivityRefresh() {
   var check = false;
   /* if something is still spinning */
-  if($('.timeline .activity:first i:first').hasClass('fa-spin'))
+  if($('.timeline .activity i').hasClass('fa-spin'))
     check = true;
   /* if there is only one activity */
   if($('#activity-timeline div[class="activity"]').length < 2)
     check = true;
-
+  
   return check;
 }
 
@@ -340,25 +351,21 @@ function changeHTML(html) {
   return html.replace(/data-original-title/g, "title").replace(/title=""/g, "").replace(/\//g, '').replace(/ /g, '');
 }
 
-function checkNewActivity(only_status, runs) {
-  // set default only_status to false
-  only_status = typeof only_status !== 'undefined' ? only_status : false;
+function checkNewActivity(runs) {
   var instance = location.href.split('/'); instance = instance[instance.length - 2];
 
   $.ajax({
     type: 'GET',
     url: '/dashboard/vm/' + instance + '/activity/',
-    data: {'only_status': only_status},
+    data: {'show_all': show_all},
     success: function(data) {
-      if(!only_status) {
-        a = unescapeHTML(data['activities']);
-        b = changeHTML($("#activity-timeline").html());
-        if(a != b)
-          $("#activity-timeline").html(data['activities']);
-        $("#ops").html(data['ops']);
-        $("#disk-ops").html(data['disk_ops']);
-        $("[title]").tooltip();
-      }
+      a = unescapeHTML(data['activities']);
+      b = changeHTML($("#activity-refresh").html());
+      if(a != b)
+        $("#activity-refresh").html(data['activities']);
+      $("#ops").html(data['ops']);
+      $("#disk-ops").html(data['disk_ops']);
+      $("[title]").tooltip();
 
       $("#vm-details-state i").prop("class", "fa " + data['icon']);
       $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
@@ -378,14 +385,16 @@ function checkNewActivity(only_status, runs) {
 
       if(runs > 0 && decideActivityRefresh()) {
         setTimeout(
-          function() {checkNewActivity(only_status, runs + 1)}, 
+          function() {checkNewActivity(runs + 1)}, 
           1000 + Math.exp(runs * 0.05)
         );
+      } else {
+        in_progress = false;
       }
       $('a[href="#activity"] i').removeClass('fa-spin');
     },
     error: function() {
-
+      in_progress = false;
     }
   });
 }

circle/dashboard/templates/dashboard/instanceactivity_detail.html

@@ -20,9 +20,9 @@
           <span>{{ object.get_status_id|upper }}</span>
         </span>
       </div>
-      <div id="vm-activity-context" class="timeline">
-        {% include "dashboard/vm-detail/_activity-timeline.html" with active=object %}
-      </div>
+
+      {% include "dashboard/vm-detail/_activity-timeline.html" with active=object %}
+
     </div>
     <div class="col-md-8">
       <div class="panel panel-default">

circle/dashboard/templates/dashboard/vm-detail/_activity-timeline.html

 {% load i18n %}
+
+<div id="activity-timeline" class="timeline">
+
 {% for a in activities %}
 <div class="activity{% if a.pk == active.pk %} activity-active{%endif%}" data-activity-id="{{ a.pk }}">
   <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
@@ -7,7 +10,7 @@
 <strong{% if a.result %} title="{{ a.result.get_user_text }}"{% endif %}>
   <a href="{{ a.get_absolute_url }}">
     {% if a.times > 1 %}({{ a.times }}x){% endif %}
-    {{ a.readable_name.get_user_text }}</a>
+    {{ a.readable_name.get_user_text|capfirst }}</a>
 
 {% if a.has_percent %}
   - {{ a.percentage }}%
@@ -32,7 +35,7 @@
       <div data-activity-id="{{ s.pk }}" class="sub-activity{% if s.has_failed %} sub-activity-failed{% endif %}{% if s.pk == active.pk %} sub-activity-active{% endif %}">
         <span{% if s.result %} title="{{ s.result.get_user_text }}"{% endif %}>
           <a href="{{ s.get_absolute_url }}">
-              {{ s.readable_name.get_user_text }}</a></span> &ndash;
+              {{ s.readable_name.get_user_text|capfirst }}</a></span> &ndash;
         {% if s.finished %}
           {{ s.finished|time:"H:i:s" }}
         {% else %}
@@ -47,3 +50,16 @@
   {% endif %}
 </div>
 {% endfor %}
+</div>
+
+{% if show_show_all %}
+<div id="show-all-activities-container">
+  <a id="show-all-activities" href="#">
+    {% if activities|length > 10 %}
+      <span>{% trans "Show less activities" %}</span>
+    {% else %}
+      <span>{% trans "Show all activities" %}</span>
+    {% endif %}
+  </a>
+</div>
+{% endif %}

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

@@ -2,6 +2,6 @@
 
 <h3>{% trans "Activity" %}</h3>
 
-<div id="activity-timeline" class="timeline">
+<div id="activity-refresh">
   {% include "dashboard/vm-detail/_activity-timeline.html" %}
 </div>

circle/dashboard/views.py

@@ -272,8 +272,11 @@ class VmDetailView(CheckedDetailView):
         })
 
         # activity data
-        context['activities'] = self.object.get_merged_activities(
-            self.request.user)
+        activities = instance.get_merged_activities(self.request.user)
+        show_show_all = len(activities) > 10
+        activities = activities[:10]
+        context['activities'] = activities
+        context['show_show_all'] = show_show_all
 
         context['vlans'] = Vlan.get_objects_with_level(
             'user', self.request.user
@@ -2386,30 +2389,35 @@ def vm_activity(request, pk):
         raise PermissionDenied()
 
     response = {}
-    only_status = request.GET.get("only_status", "false")
+    show_all = request.GET.get("show_all", "false") == "true"
+    activities = instance.get_merged_activities(request.user)
+    show_show_all = len(activities) > 10
+    if not show_all:
+        activities = activities[:10]
 
     response['human_readable_status'] = instance.get_status_display()
     response['status'] = instance.status
     response['icon'] = instance.get_status_icon()
-    if only_status == "false":  # instance activity
-        context = {
-            'instance': instance,
-            'activities': instance.get_merged_activities(request.user),
-            'ops': get_operations(instance, request.user),
-        }
 
-        response['activities'] = render_to_string(
-            "dashboard/vm-detail/_activity-timeline.html",
-            RequestContext(request, context),
-        )
-        response['ops'] = render_to_string(
-            "dashboard/vm-detail/_operations.html",
-            RequestContext(request, context),
-        )
-        response['disk_ops'] = render_to_string(
-            "dashboard/vm-detail/_disk-operations.html",
-            RequestContext(request, context),
-        )
+    context = {
+        'instance': instance,
+        'activities': activities,
+        'show_show_all': show_show_all,
+        'ops': get_operations(instance, request.user),
+    }
+
+    response['activities'] = render_to_string(
+        "dashboard/vm-detail/_activity-timeline.html",
+        RequestContext(request, context),
+    )
+    response['ops'] = render_to_string(
+        "dashboard/vm-detail/_operations.html",
+        RequestContext(request, context),
+    )
+    response['disk_ops'] = render_to_string(
+        "dashboard/vm-detail/_disk-operations.html",
+        RequestContext(request, context),
+    )
 
     return HttpResponse(
         json.dumps(response),