Added collapsable rows, error handling in table panel, ground work for new kinds of binding, refactored view a bit

common/css/main.css

@@ -17,7 +17,6 @@
 .panel-error {
   opacity: 0.9;
   position:absolute;
-  top:10px;
   z-index: 99999;
 }
 

dashboards.js

@@ -3,7 +3,8 @@ var dashboards =
   title: "Infinite Monkey Dashboard",
   rows: [
     {
-      height: "20px",
+      title:  "Query Control",  
+      height: "30px",
       panels: [
         {
           type    : "stringquery",
@@ -18,15 +19,21 @@ var dashboards =
       ]
     },
     {
+      title:  "Monkey Monitoring",
+      collapse: false,
       height: "300px",
       panels: [
         {
           title   : "Monkey Shakespeare Lines",
           type    : "histogram",
           span    : 6,
-          show    : ['lines','stack'],
+          show    : ['lines','points'],
-          fill    : 1,
+          fill    : 0,
-          query   : [{ label : "lines", query : "*", color: '#86B32D' } ],
+          query   : [
+            { label : "Query", query : "*", color: '#86B32D' },
+            { label : "Hamlet", query : "play_name:Hamlet" },
+            { label : "Macbeth", query : "play_name:macbeth" },
+          ],
           group   : "main"
         },
         {
@@ -43,6 +50,7 @@ var dashboards =
       ]
     },
     {
+      title:  "Lines of Plays",
       height: "300px",
       panels: [
         {

index.html

@@ -31,12 +31,14 @@
   <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
       <div class="container-fluid">
-        <span class="brand">Kibana Dashboard</span>
+        <span class="brand">{{dashboards.title}}</span>
-        <span class="brand"><small>Real time metrics</small></span>
+        <span class="brand"><small><small>Kibana Preview</small></small></span>
+        <div class='pull-right' style="padding-top: 5px; padding-left: 10px"><input type="file" id="upload" upload /></div>
         <div  class="btn-group pull-right">
           <button class="btn" ng-click="pause()"><i ng-class="{'icon-pause': playing,'icon-play': !playing}"></i></button>
           <button class="btn" ng-repeat='timespan in time_options' ng-click="set_timespan(timespan)">{{timespan}}</button>
         </div>
+        
       </div>
     </div>
   </div>

js/app.js

@@ -19,6 +19,7 @@ var labjs = $LAB
   .script("common/lib/modernizr-2.6.1.min.js")
   .script("common/lib/underscore.min.js")
   .script("common/lib/angular.min.js")
+  .script("common/lib/angular-strap.min.js")
   .script("common/lib/elastic.min.js")
   .script("common/lib/elastic-angular-client.min.js")
   .script("common/lib/dateformat.js")

js/controllers.js

@@ -47,6 +47,11 @@ angular.module('kibana.controllers', [])
   // point to your ElasticSearch server
   var ejs = $scope.ejs = ejsResource(config.elasticsearch);  
 
+  $scope.toggle_row = function(row) {
+    $scope.$broadcast('toggle_row',row)
+    row.collapse = row.collapse ? false : true;
+  }
+
   $scope.set_timespan = function(timespan) {
     $scope.timespan = timespan;
     $scope.from = time_ago($scope.timespan);

panels/histogram/module.html

@@ -1,4 +1,4 @@
-<div ng-controller='histogram'>
+<div ng-controller='histogram' style="height:{{row.height}}">
   <h4>{{panel.title}}</h4>
   <div histogram params="{{panel}}" style="height:{{row.height}}"></div>
 </div>         

panels/histogram/module.js

@@ -87,12 +87,15 @@ angular.module('kibana.histogram', [])
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
 
-      scope.$watch('data', function() {
+      // If the data or row state changes, re-render
+      scope.$watch(function () {
+        return angular.toJson([scope.data, scope.row]) 
+      }, function() {
         if(!(_.isUndefined(scope.data)))
           render_panel(scope,elem,attrs);
       });
 
-      // Re-render if the window is
+      // Re-render if the window is resized
       angular.element(window).bind('resize', function(){
           render_panel(scope,elem,attrs);
       });

panels/map/module.js

@@ -63,8 +63,11 @@ angular.module('kibana.map', [])
     restrict: 'A',
     link: function(scope, elem, attrs) {
 
-      // Re-rending panel if data changes
+      // If the data or row state changes, re-render
-      scope.$watch('data', function() {
+      scope.$watch(function () {
+        return angular.toJson([scope.data, scope.row]) 
+      }, function() {
+        if(!(_.isUndefined(scope.data)))
           render_panel(scope,elem,attrs);
       });
 

panels/pie/module.js

@@ -112,13 +112,15 @@ angular.module('kibana.pie', [])
     restrict: 'A',
     link: function(scope, elem, attrs) {
 
-      // Re-rending the panel if it is resized,
+      // Watch if data or row state changes
-      scope.$watch('data', function() {
+      scope.$watch(function () {
+        return angular.toJson([scope.data, scope.row]) 
+      }, function() {
         if(!(_.isUndefined(scope.data)))
           render_panel(scope,elem,attrs);
       });
 
-      // Or if the model changes
+      // Or if the window is resized
       angular.element(window).bind('resize', function(){
           render_panel(scope,elem,attrs);
       });
@@ -152,7 +154,9 @@ angular.module('kibana.pie', [])
         };
 
         // Populate element
+        if(elem.is(":visible")){
           $.plot(elem, scope.data, pie);
+        }
         //elem.show();
       }
     }

panels/sort/module.html

@@ -1,5 +1,5 @@
-<div ng-controller='sort'>
+<div ng-controller='sort' style="white-space: nowrap;">
-  <h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
+  <h4 ng-class="{'ng-cloak': !panel.title}">{{panel.title}}</h4>
-  <select ng-model="panel.sort[0]" ng-options="f for f in fields"></select>
   <i ng-click="toggle_sort()" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
+  <select ng-model="panel.sort[0]" ng-options="f for f in fields"></select>
 </div>

panels/stringquery/module.html

@@ -1,6 +1,6 @@
 <div ng-controller='stringquery'>
-  <h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
+  <h4 ng-class="{'ng-cloak': !panel.title}">{{panel.title}}</h4>
-  <form class="form-search">
+  <form class="form-search" style="margin-bottom:0px">
     <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>

partials/dashboard.html

@@ -1,17 +1,28 @@
 
-<div class="row-fluid" style="margin-top:50px">
+<div class="row-fluid container" style="margin-top:50px">
-  <div class="row-fluid">
+  <!-- Rows -->
-    <div class="span8"><h2>{{dashboards.title}} <small>Last {{timespan}}</small></h2></div>
+  <div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows">
-    <div class="span4"><div><input type="file" id="upload" upload /></div></div>
+    <div class="span12">
+      <div class="row-fluid" style="padding:0px;margin:0px;height:0px">
+        <div class="span12" style="min-height:5px;vertical-align:bottom">
+          <i class="pointer" ng-class="{'icon-minus': !row.collapse,'icon-plus': row.collapse}" ng-click="toggle_row(row)"></i>
+          <span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span>
         </div>
-  <div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows" style="height:{{row.height}}">
+      </div>
-    <div ng-repeat="(name, panel) in row.panels">
+      <div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">
-      <div class="span{{panel.span}}" style="position:relative">
+        <!-- Panels -->
+        <div ng-repeat="(name, panel) in row.panels" class="span{{panel.span}}" style="min-height:{{row.height}}; position:relative">
+          <!-- Error Panel -->
+          <div class="row-fluid">
             <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>
+          <!-- Content Panel -->
+          <div class="row-fluid">
+            <div class="span12" style="margin-top:0px" ng-include="'panels/'+panel.type+'/module.html'"></div>
+          </div>
         </div>
       </div>
     </div>