dashboard: move activity, operation js to activity.js

circle/circle/settings/base.py

@@ -198,6 +198,7 @@ PIPELINE_JS = {
         "jquery-knob/dist/jquery.knob.min.js",
         "jquery-knob/dist/jquery.knob.min.js",
         "jquery-simple-slider/js/simple-slider.js",
         "jquery-simple-slider/js/simple-slider.js",
         "dashboard/dashboard.js",
         "dashboard/dashboard.js",
+        "dashboard/activity.js",
         "dashboard/group-details.js",
         "dashboard/group-details.js",
         "dashboard/group-list.js",
         "dashboard/group-list.js",
         "dashboard/js/stupidtable.min.js",  # no bower file
         "dashboard/js/stupidtable.min.js",  # no bower file

circle/dashboard/static/dashboard/vm-common.js → circle/dashboard/static/dashboard/activity.js

-/* for functions in both vm list and vm detail */
+var in_progress = false;
+var activity_hash = 5;
+var show_all = false;
+var reload_vm_detail = false;
 
 
 $(function() {
 $(function() {
+  /* do we need to check for new activities */
+  if(decideActivityRefresh()) {
+    if(!in_progress) {
+      checkNewActivity(1);
+      in_progress = true;
+    }
+  }
+
+  $('a[href="#activity"]').click(function(){
+    $('a[href="#activity"] i').addClass('fa-spin');
+    if(!in_progress) {
+      checkNewActivity(1);
+      in_progress = true;
+    }
+  });
 
 
-  /* vm operations */
+  $("#activity-refresh").on("click", "#show-all-activities", function() {
+    $(this).find("i").addClass("fa-spinner fa-spin");
+    show_all = !show_all;
+    $('a[href="#activity"]').trigger("click");
+    return false;
+  });
+
+  /* operations */
   $('#ops, #vm-details-resources-disk, #vm-details-renew-op, #vm-details-pw-reset, #vm-details-add-interface, .operation-wrapper').on('click', '.operation', function(e) {
   $('#ops, #vm-details-resources-disk, #vm-details-renew-op, #vm-details-pw-reset, #vm-details-add-interface, .operation-wrapper').on('click', '.operation', function(e) {
     var icon = $(this).children("i").addClass('fa-spinner fa-spin');
     var icon = $(this).children("i").addClass('fa-spinner fa-spin');
 
 
@@ -78,3 +103,91 @@ $(function() {
   });
   });
 
 
 });
 });
+
+
+function decideActivityRefresh() {
+  var check = false;
+  /* if something is still spinning */
+  if($('.timeline .activity i').hasClass('fa-spin'))
+    check = true;
+
+  return check;
+}
+
+function checkNewActivity(runs) {
+  $.ajax({
+    type: 'GET',
+    url: $('a[href="#activity"]').attr('data-activity-url'),
+    data: {'show_all': show_all},
+    success: function(data) {
+      var new_activity_hash = (data.activities + "").hashCode();
+      if(new_activity_hash != activity_hash) {
+        $("#activity-refresh").html(data.activities);
+      }
+      activity_hash = new_activity_hash;
+
+      $("#ops").html(data.ops);
+      $("#disk-ops").html(data.disk_ops);
+      $("[title]").tooltip();
+
+      /* changing the status text */
+      var icon = $("#vm-details-state i");
+      if(data.is_new_state) {
+        if(!icon.hasClass("fa-spin"))
+          icon.prop("class", "fa fa-spinner fa-spin");
+      } else {
+        icon.prop("class", "fa " + data.icon);
+      }
+      var vm_state = $("#vm-details-state");
+      if (vm_state.length) {
+        vm_state.data("status", data['status']);
+        $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
+      }
+      if(data['status'] == "RUNNING") {
+        if(data['connect_uri']) {
+            $("#dashboard-vm-details-connect-button").removeClass('disabled');
+        }
+        $("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
+      } else {
+        if(data['connect_uri']) {
+            $("#dashboard-vm-details-connect-button").addClass('disabled');
+        }
+        $("[data-target=#_console]").attr("data-toggle", "_pill").attr("href", "#").parent("li").addClass("disabled");
+      }
+
+      if(data.status == "STOPPED" || data.status == "PENDING") {
+        $(".change-resources-button").prop("disabled", false);
+        $(".change-resources-help").hide();
+      } else {
+        $(".change-resources-button").prop("disabled", true);
+        $(".change-resources-help").show();
+      }
+
+      if(runs > 0 && decideActivityRefresh()) {
+        setTimeout(
+          function() {checkNewActivity(runs + 1);},
+          1000 + Math.exp(runs * 0.05)
+        );
+      } else {
+        in_progress = false;
+        if(reload_vm_detail) location.reload();
+      }
+      $('a[href="#activity"] i').removeClass('fa-spin');
+    },
+    error: function() {
+      in_progress = false;
+    }
+  });
+}
+
+String.prototype.hashCode = function() {
+  var hash = 0, i, chr, len;
+  if (this.length == 0) return hash;
+  for (i = 0, len = this.length; i < len; i++) {
+    chr   = this.charCodeAt(i);
+    hash  = ((hash << 5) - hash) + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+};
+

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

-var in_progress = false;
-var activity_hash = 5;
-
 $(function() {
 $(function() {
-  /* do we need to check for new activities */
-  if(decideActivityRefresh()) {
-    if(!in_progress) {
-      checkNewActivity(1);
-      in_progress = true;
-    }
-  }
-
-  $('a[href="#activity"]').click(function(){
-    $('a[href="#activity"] i').addClass('fa-spin');
-    if(!in_progress) {
-      checkNewActivity(1);
-      in_progress = true;
-    }
-  });
-
-  $('a.operation.btn').click(function(e) {
-    $.ajax({
-      type: 'GET',
-      url: $(this).attr('href'),
-      success: function(data) {
-        $('body').append(data);
-        $('#confirmation-modal').modal('show');
-        $('#confirmation-modal').on('hidden.bs.modal', function() {
-          $('#confirmation-modal').remove();
-        });
-      }
-    });
-    return false;
-  });
-
   /* rename */
   /* rename */
   $("#node-details-h1-name, .node-details-rename-button").click(function() {
   $("#node-details-h1-name, .node-details-rename-button").click(function() {
     $("#node-details-h1-name").hide();
     $("#node-details-h1-name").hide();
@@ -89,54 +55,3 @@ $(function() {
   });
   });
 
 
 });
 });
-
-function decideActivityRefresh() {
-  var check = false;
-  /* if something is still spinning */
-  if($('.timeline .activity i').hasClass('fa-spin'))
-    check = true;
-
-  return check;
-}
-
-function checkNewActivity(runs) {
-  var node = location.href.split('/'); node = node[node.length - 2];
-
-  $.ajax({
-    type: 'GET',
-    url: '/dashboard/node/' + node + '/activity/',
-    success: function(data) {
-      var new_activity_hash = (data['activities'] + "").hashCode();
-      if(new_activity_hash != activity_hash) {
-        $("#activity-refresh").html(data['activities']);
-      }
-      activity_hash = new_activity_hash;
-
-      $("[title]").tooltip();
-
-      if(runs > 0 && decideActivityRefresh()) {
-        setTimeout(
-          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;
-    }
-  });
-}
-
-String.prototype.hashCode = function() {
-  var hash = 0, i, chr, len;
-  if (this.length == 0) return hash;
-  for (i = 0, len = this.length; i < len; i++) {
-    chr   = this.charCodeAt(i);
-    hash  = ((hash << 5) - hash) + chr;
-    hash |= 0; // Convert to 32bit integer
-  }
-  return hash;
-};

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

-var show_all = false;
-var in_progress = false;
-var activity_hash = 5;
 var Websock_native; // not sure
 var Websock_native; // not sure
-var reload_vm_detail = false;
 
 
 $(function() {
 $(function() {
-  /* do we need to check for new activities */
-  if(decideActivityRefresh()) {
-    if(!in_progress) {
-      checkNewActivity(1);
-      in_progress = true;
-    }
-  }
-
-  $('a[href="#activity"]').click(function(){
-    $('a[href="#activity"] i').addClass('fa-spin');
-    if(!in_progress) {
-      checkNewActivity(1);
-      in_progress = true;
-    }
-  });
-
-  $("#activity-refresh").on("click", "#show-all-activities", function() {
-    $(this).find("i").addClass("fa-spinner fa-spin");
-    show_all = !show_all;
-    $('a[href="#activity"]').trigger("click");
-    return false;
-  });
-
   /* save resources */
   /* save resources */
   $('#vm-details-resources-save').click(function(e) {
   $('#vm-details-resources-save').click(function(e) {
     var error = false;
     var error = false;
@@ -251,88 +224,3 @@ $(function() {
   });
   });
 
 
 });
 });
-
-function decideActivityRefresh() {
-  var check = false;
-  /* if something is still spinning */
-  if($('.timeline .activity i').hasClass('fa-spin'))
-    check = true;
-
-  return check;
-}
-
-function checkNewActivity(runs) {
-  var instance = location.href.split('/'); instance = instance[instance.length - 2];
-
-  $.ajax({
-    type: 'GET',
-    url: '/dashboard/vm/' + instance + '/activity/',
-    data: {'show_all': show_all},
-    success: function(data) {
-      var new_activity_hash = (data.activities + "").hashCode();
-      if(new_activity_hash != activity_hash) {
-        $("#activity-refresh").html(data.activities);
-      }
-      activity_hash = new_activity_hash;
-
-      $("#ops").html(data.ops);
-      $("#disk-ops").html(data.disk_ops);
-      $("[title]").tooltip();
-
-      /* changing the status text */
-      var icon = $("#vm-details-state i");
-      if(data.is_new_state) {
-        if(!icon.hasClass("fa-spin"))
-          icon.prop("class", "fa fa-spinner fa-spin");
-      } else {
-        icon.prop("class", "fa " + data.icon);
-      }
-      $("#vm-details-state").data("status", data['status']);
-      $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
-      if(data['status'] == "RUNNING") {
-        if(data['connect_uri']) {
-            $("#dashboard-vm-details-connect-button").removeClass('disabled');
-        }
-        $("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
-      } else {
-        if(data['connect_uri']) {
-            $("#dashboard-vm-details-connect-button").addClass('disabled');
-        }
-        $("[data-target=#_console]").attr("data-toggle", "_pill").attr("href", "#").parent("li").addClass("disabled");
-      }
-
-      if(data.status == "STOPPED" || data.status == "PENDING") {
-        $(".change-resources-button").prop("disabled", false);
-        $(".change-resources-help").hide();
-      } else {
-        $(".change-resources-button").prop("disabled", true);
-        $(".change-resources-help").show();
-      }
-
-      if(runs > 0 && decideActivityRefresh()) {
-        setTimeout(
-          function() {checkNewActivity(runs + 1);},
-          1000 + Math.exp(runs * 0.05)
-        );
-      } else {
-        in_progress = false;
-        if(reload_vm_detail) location.reload();
-      }
-      $('a[href="#activity"] i').removeClass('fa-spin');
-    },
-    error: function() {
-      in_progress = false;
-    }
-  });
-}
-
-String.prototype.hashCode = function() {
-  var hash = 0, i, chr, len;
-  if (this.length === 0) return hash;
-  for (i = 0, len = this.length; i < len; i++) {
-    chr   = this.charCodeAt(i);
-    hash  = ((hash << 5) - hash) + chr;
-    hash |= 0; // Convert to 32bit integer
-  }
-  return hash;
-};

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

@@ -80,7 +80,8 @@
             </a>
             </a>
           </li>
           </li>
           <li>
           <li>
-            <a href="#activity" data-toggle="pill" class="text-center">
+            <a href="#activity" data-toggle="pill" class="text-center"
+               data-activity-url="{% url "dashboard.views.node-activity-list" node.pk %}">
               <i class="fa fa-clock-o fa-2x"></i><br>
               <i class="fa fa-clock-o fa-2x"></i><br>
               {% trans "Activity" %}
               {% trans "Activity" %}
             </a>
             </a>

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

@@ -207,7 +207,8 @@
               {% trans "Network" %}</a>
               {% trans "Network" %}</a>
           </li>
           </li>
           <li>
           <li>
-            <a href="#activity" data-toggle="pill" data-target="#_activity" class="text-center">
+            <a href="#activity" data-toggle="pill" data-target="#_activity" class="text-center"
+               data-activity-url="{% url "dashboard.views.vm-activity-list" instance.pk %}">
               <i class="fa fa-clock-o fa-2x"></i><br>
               <i class="fa fa-clock-o fa-2x"></i><br>
               {% trans "Activity" %}</a>
               {% trans "Activity" %}</a>
           </li>
           </li>

circle/dashboard/urls.py

@@ -95,7 +95,8 @@ urlpatterns = patterns(
     url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),
     url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),
     url(r'^vm/create/$', VmCreate.as_view(),
     url(r'^vm/create/$', VmCreate.as_view(),
         name='dashboard.views.vm-create'),
         name='dashboard.views.vm-create'),
-    url(r'^vm/(?P<pk>\d+)/activity/$', vm_activity),
+    url(r'^vm/(?P<pk>\d+)/activity/$', vm_activity,
+        name='dashboard.views.vm-activity-list'),
     url(r'^vm/activity/(?P<pk>\d+)/$', InstanceActivityDetail.as_view(),
     url(r'^vm/activity/(?P<pk>\d+)/$', InstanceActivityDetail.as_view(),
         name='dashboard.views.vm-activity'),
         name='dashboard.views.vm-activity'),
     url(r'^vm/(?P<pk>\d+)/screenshot/$', get_vm_screenshot,
     url(r'^vm/(?P<pk>\d+)/screenshot/$', get_vm_screenshot,
@@ -120,7 +121,8 @@ urlpatterns = patterns(
         name='dashboard.views.template-transfer-ownership-confirm'),
         name='dashboard.views.template-transfer-ownership-confirm'),
     url(r'^node/delete/(?P<pk>\d+)/$', NodeDelete.as_view(),
     url(r'^node/delete/(?P<pk>\d+)/$', NodeDelete.as_view(),
         name="dashboard.views.delete-node"),
         name="dashboard.views.delete-node"),
-    url(r'^node/(?P<pk>\d+)/activity/$', NodeActivityView.as_view()),
+    url(r'^node/(?P<pk>\d+)/activity/$', NodeActivityView.as_view(),
+        name='dashboard.views.node-activity-list'),
     url(r'^node/create/$', NodeCreate.as_view(),
     url(r'^node/create/$', NodeCreate.as_view(),
         name='dashboard.views.node-create'),
         name='dashboard.views.node-create'),
 
 

circle/dashboard/views/node.py

@@ -61,6 +61,8 @@ class NodeOperationView(AjaxOperationMixin, OperationView):
 
 
     model = Node
     model = Node
     context_object_name = 'node'  # much simpler to mock object
     context_object_name = 'node'  # much simpler to mock object
+    with_reload = True
+    wait_for_result = 1
 
 
 
 
 node_ops = OrderedDict([
 node_ops = OrderedDict([