Added sorting

modified:   common/css/main.css
	modified:   config.js
	modified:   dashboards.js
	modified:   panels/stringquery/module.html
	modified:   panels/table/module.html
	modified:   panels/table/module.js
	modified:   partials/dashboard.html
	panels/sort/

common/css/main.css

@@ -12,4 +12,15 @@
 
 [ng\:cloak], [ng-cloak], .ng-cloak {
   display: none !important;
+}
+
+.panel-error {
+  opacity: 0.9;
+  position:absolute;
+  top:10px;
+  z-index: 99999;
+}
+
+.pointer {
+  cursor: pointer;
 }

config.js

@@ -24,13 +24,13 @@ json.
 var config = new Settings(
 {
     timespan:       '15m',
-    refresh:        10000,
+    refresh:        30000,
     elasticsearch:  'http://localhost:9200',
     timeformat:     'mm/dd HH:MM:ss',
     timefield:      '@timestamp', 
     //indexpattern:  '"logstash-"yyyy.mm.dd',
     indexpattern:   '"shakespeare"', 
-    modules:        ['histogram','map','pie','table','stringquery'], 
+    modules:        ['histogram','map','pie','table','stringquery','sort'], 
 
     defaultfields:  ['line_text'],
     perpage:        50,

dashboards.js

@@ -3,12 +3,17 @@ var dashboards =
   title: "Infinite Monkey Dashboard",
   rows: [
     {
-      height: "30px",
+      height: "20px",
       panels: [
         {
           type    : "stringquery",
-          span    : 12,
-          group   : "mainsearch"
+          span    : 9,
+          group   : "main"
+        },
+        {
+          type    : "sort",
+          span    : 3,
+          group   : "main"
         }
       ]
     },
@@ -22,17 +27,17 @@ var dashboards =
           show    : ['lines','stack'],
           fill    : 1,
           query   : [{ label : "lines", query : "*", color: '#86B32D' } ],
-          group   : "mainsearch"
+          group   : "main"
         },
         {
-          title   : "World Monkeys",
+          title   : "Monkey Typists Worldwide",
           type    : "map",
           map     : 'world',
           field   : "country",
           span    : 6,
           size    : 500,
           query   : "*",
-          group   : "mainsearch"
+          group   : "main"
 
         }
       ]
@@ -50,7 +55,7 @@ var dashboards =
           field   : 'country',
           //query   : { query: "*", field: "country"}
           query   : { field : "play_name", query : "*" },
-          group   : "mainsearch"
+          group   : "main"
         },
         {
           title   : "Newest Lines",
@@ -58,7 +63,7 @@ var dashboards =
           span    : 8,
           query   : "*",
           fields  : ['@timestamp','speaker','text_entry'],
-          group   : "mainsearch"
+          group   : "main"
         }
       ]
     }

panels/stringquery/module.html

@@ -1,7 +1,7 @@
 <div ng-controller='stringquery'>
   <h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
-    <form class="form-search">
-      <input type="text" class="input-medium search-query" ng-model="query" style="width:90%">
-      <button type="submit" class="btn" ng-click="send_query(query)">Search</button>
-    </form>
+  <form class="form-search">
+    <input type="text" class="input-medium search-query" ng-model="query" style="width:85%">
+    <button type="submit" class="btn" ng-click="send_query(query)">Search</button>
+  </form>
 </div>

panels/table/module.html

@@ -3,7 +3,10 @@
   <div style="height:{{row.height}};overflow-y:auto;overflow-x:hidden"> 
     <table class="table table-condensed table-striped">
       <thead>
-        <th ng-repeat="field in panel.fields">{{field}}</th>
+        <th ng-repeat="field in panel.fields" class="pointer" ng-click="panel.sort[0] = field">
+          {{field}} 
+          <i ng-show='field == panel.sort[0]' ng-click="toggle_sort()" class="pointer" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
+        </th>
       </thead>
       <tr ng-repeat="row in data">
         <td ng-repeat="field in panel.fields">{{row['_source'][field]}}</td>

panels/table/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.table', [])
-.controller('table', function($scope, $location) {
+.controller('table', function($scope, $rootScope, $location) {
 
   // Set and populate defaults
   var _d = {
@@ -12,13 +12,19 @@ angular.module('kibana.table', [])
       ? _d[k] : $scope.panel[k];
   });
 
+  // Events which this panel receives and sends
   if (!(_.isUndefined($scope.panel.group))) {
+    // Receives these events
     $scope.$on($scope.panel.group+"-query", function(event, query) {
       $scope.panel.query = query;
       $scope.get_data();
     });
   }
 
+  $scope.toggle_sort = function() {
+    $scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
+  }
+
   $scope.get_data = function() {
     var request = $scope.ejs.Request().indices($scope.index);
 
@@ -37,26 +43,28 @@ angular.module('kibana.table', [])
 
     // Populate scope when we have results
     results.then(function(results) {
+      if(_.isUndefined(results)) {
+        $scope.panel.error = 'Your query was unsuccessful';
+        return;
+      }
+      $scope.panel.error =  false;
       $scope.hits = results.hits.total;
       $scope.data = results.hits.hits;
-      /*
-      _.each(results.facets.pie.terms, function(v) {
-        var slice = { label : v.term, data : v.count }; 
-        $scope.data.push();
-        if(!(_.isUndefined($scope.panel.colors)) 
-          && _.isArray($scope.panel.colors)
-          && $scope.panel.colors.length > 0) {
-          slice.color = $scope.panel.colors[k%$scope.panel.colors.length];
-        } 
-        $scope.data.push(slice)
-        k = k + 1;
-      });
-*/
+
+      // Broadcast a list of all fields. Note that receivers of field array 
+      // events should be able to receive from multiple sources, merge, dedupe 
+      // and sort on the fly.
+      if (!(_.isUndefined($scope.panel.group)))
+        $rootScope.$broadcast(
+          $scope.panel.group+"-fields", {
+            all   : get_all_fields(results),
+            sort  : $scope.panel.sort
+          });  
     });
   }
 
   $scope.$watch(function() { 
-    return angular.toJson([$scope.from, $scope.to]) 
+    return angular.toJson([$scope.from, $scope.to, $scope.panel.sort]) 
   }, function(){
     $scope.get_data();
   });

partials/dashboard.html

@@ -6,7 +6,13 @@
   </div>
   <div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows" style="height:{{row.height}}">
     <div ng-repeat="(name, panel) in row.panels">
-      <div class="span{{panel.span}}" style="padding: 10px;height={{row.height}}" ng-include="'panels/'+panel.type+'/module.html'">
+      <div class="span{{panel.span}}" style="position:relative">
+        <div class="span12 alert alert-error panel-error" ng-class="{'ng-cloak': !panel.error}">
+          <a class="close" ng-click="panel.error=false">&times;</a>
+          <i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}}
+        </div>
+        <div class="span12" style="padding: 10px;height={{row.height}}" ng-include="'panels/'+panel.type+'/module.html'">
+        </div>
       </div>
     </div>
   </div>