dsahboard: order vm list with js

circle/dashboard/static/dashboard/dashboard.css

@@ -491,3 +491,7 @@ footer a, footer a:hover, footer a:visited {
   bottom: 10px; 
   right: 20px;
 }
+
+.vm-list-table th i {
+  margin-top: 3px;
+}

circle/dashboard/static/dashboard/js/stupidtable.min.js

+// Stupid jQuery table plugin.
+
+// Call on a table
+// sortFns: Sort functions for your datatypes.
+(function($) {
+
+  $.fn.stupidtable = function(sortFns) {
+    return this.each(function() {
+      var $table = $(this);
+      sortFns = sortFns || {};
+
+      // Merge sort functions with some default sort functions.
+      sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
+
+
+      // ==================================================== //
+      //                  Begin execution!                    //
+      // ==================================================== //
+
+      // Do sorting when THs are clicked
+      $table.on("click.stupidtable", "th, th a", function() {
+      // handle click to links
+      // $table.on("click.stupidtable", "th", function() {
+        var $this = $(this);
+        var th_index = 0;
+        var dir = $.fn.stupidtable.dir;
+
+        $table.find("th").slice(0, $this.index()).each(function() {
+          var cols = $(this).attr("colspan") || 1;
+          th_index += parseInt(cols,10);
+        });
+
+        // Determine (and/or reverse) sorting direction, default `asc`
+        var sort_dir = $this.data("sort-default") || dir.ASC;
+        if ($this.data("sort-dir"))
+           sort_dir = $this.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
+
+        // Choose appropriate sorting function.
+        var type = $this.data("sort") || null;
+
+        // Prevent sorting if no type defined
+        if (type === null) {
+          return;
+        }
+
+        // Trigger `beforetablesort` event that calling scripts can hook into;
+        // pass parameters for sorted column index and sorting direction
+        $table.trigger("beforetablesort", {column: th_index, direction: sort_dir});
+        // More reliable method of forcing a redraw
+        $table.css("display");
+
+        // Run sorting asynchronously on a timout to force browser redraw after
+        // `beforetablesort` callback. Also avoids locking up the browser too much.
+        setTimeout(function() {
+          // Gather the elements for this column
+          var column = [];
+          var sortMethod = sortFns[type];
+          var trs = $table.children("tbody").children("tr");
+
+          // Extract the data for the column that needs to be sorted and pair it up
+          // with the TR itself into a tuple
+          trs.each(function(index,tr) {
+            var $e = $(tr).children().eq(th_index);
+            var sort_val = $e.data("sort-value");
+            var order_by = typeof(sort_val) !== "undefined" ? sort_val : $e.text();
+            column.push([order_by, tr]);
+          });
+
+          // Sort by the data-order-by value
+          column.sort(function(a, b) { return sortMethod(a[0], b[0]); });
+          if (sort_dir != dir.ASC)
+            column.reverse();
+
+          // Replace the content of tbody with the sorted rows. Strangely (and
+          // conveniently!) enough, .append accomplishes this for us.
+          trs = $.map(column, function(kv) { return kv[1]; });
+          $table.children("tbody").append(trs);
+
+          // Reset siblings
+          $table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
+          $this.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);
+
+          // Trigger `aftertablesort` event. Similar to `beforetablesort`
+          $table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
+          // More reliable method of forcing a redraw
+          $table.css("display");
+        }, 10);
+        // this was added my be too - kviktor
+        return false;
+      });
+    });
+  };
+
+  // Enum containing sorting directions
+  $.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
+
+  $.fn.stupidtable.default_sort_fns = {
+    "int": function(a, b) {
+      return parseInt(a, 10) - parseInt(b, 10);
+    },
+    "float": function(a, b) {
+      return parseFloat(a) - parseFloat(b);
+    },
+    "string": function(a, b) {
+      if (a < b) return -1;
+      if (a > b) return +1;
+      return 0;
+    },
+    "string-ins": function(a, b) {
+      a = a.toLowerCase();
+      b = b.toLowerCase();
+      if (a < b) return -1;
+      if (a > b) return +1;
+      return 0;
+    }
+  };
+
+})(jQuery);

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

@@ -154,6 +154,27 @@ $(function() {
     );
     return false;
   });
+
+  /* table sort */
+  var table = $(".vm-list-table").stupidtable();
+
+  table.on("beforetablesort", function(event, data) {
+    return false;
+  });
+
+  table.on("aftertablesort", function(event, data) {
+    // this didn't work ;;
+    // var th = $("this").find("th");
+    
+    $(".vm-list-table thead th i").remove();
+
+    var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right"></i>';
+    $(".vm-list-table thead th").eq(data.column).append(icon_html);
+  });
+
+  //$(".vm-list-table thead th a").attr("href", "#");
+  // only if js is enabled
+  $(".vm-list-table thead th").css("cursor", "pointer");
 });
 
 function collectIds(rows) {

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

@@ -32,7 +32,7 @@
       <div class="panel-body">
         <table class="table table-bordered table-striped table-hover vm-list-table">
           <thead><tr>
-              <th data-sort="int" class="orderable pk sortable vm-list-table-thin">
+              <th data-sort="int" class="orderable pk sortable vm-list-table-thin" style="min-width: 50px;">
                 {% trans "ID" as t %}
                 {% include "dashboard/vm-list/header-link.html" with name=t sort="pk" %}
               </th>
@@ -54,12 +54,14 @@
               </th>{% endif %}
           </tr></thead><tbody>
           {% for i in object_list %}
-          <tr class="{% cycle 'odd' 'even' %}">
+          <tr class="{% cycle 'odd' 'even' %}" data-vm-pk="{{ i.pk }}">
             <td class="pk"><div id="vm-{{i.pk}}">{{i.pk}}</div> </td>
             <td class="name"><a class="real-link" href="{% url "dashboard.views.detail" i.pk %}">{{ i.name }}</a>  </td>
             <td class="state">{{ i.get_status_display }}</td>
             <td>{{ i.owner }}</td>
-            {% if user.is_superuser %}<td>{{ i.node.name|default:"-" }}</td>{% endif %}
+            {% if user.is_superuser %}
+            <td data-sort-value="{{ i.node.normalized_name }}">{{ i.node.name|default:"-" }}</td>
+            {% endif %}
           </tr>
           {% empty %}
           <tr><td colspan="4">{% trans "You have no virtual machines." %}</td></tr>
@@ -107,4 +109,5 @@
 {% block extra_js %}
   <script src="{{ STATIC_URL}}dashboard/vm-list.js"></script>
   <script src="{{ STATIC_URL}}dashboard/vm-common.js"></script>
+  <script src="{{ STATIC_URL}}dashboard/js/stupidtable.min.js"></script>
 {% endblock %}

circle/dashboard/views.py

@@ -996,7 +996,9 @@ class VmList(LoginRequiredMixin, ListView):
         if (sort and
             sort.replace("-", "")
                 in [i.name for i in Instance._meta.fields] + ["pk"]):
-            queryset = queryset.order_by(sort)
+            queryset = queryset.order_by(
+                # we order nodes by the normalized_name
+                sort.replace("node", "node__normalized_name"))
         return queryset.select_related('owner', 'node')