Merge pull request #108 from rashidkpc/master

Trends panel
elastic · May 24, 2013 · 0dd0cfe · 0dd0cfe
2 parents 267a7c1 + bf456c8
commit 0dd0cfe
Show file tree

Hide file tree

Showing 14 changed files with 413 additions and 106 deletions.
diff --git a/common/css/bootstrap.dark.min.css b/common/css/bootstrap.dark.min.css
@@ -226,7 +226,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 21px;
-  color: #c8c8c8;
+  color: #ddd;
   background-color: #272b30;
 }
 
@@ -1096,7 +1096,7 @@ input[type="color"],
   margin-bottom: 10.5px;
   font-size: 14px;
   line-height: 21px;
-  color: #c8c8c8;
+  color: #fff;
   vertical-align: middle;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
@@ -1129,8 +1129,8 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  background-color: #222;
-  border: 1px solid #333;
+  background-color: #666;
+  border: 1px solid #666;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -1197,8 +1197,8 @@ input[type="file"] {
 
 select {
   width: 220px;
-  background-color: #222;
-  border: 1px solid #333;
+  background-color: #666;
+  border: 1px solid #666;
 }
 
 select[multiple],
@@ -5201,8 +5201,8 @@ input[type="submit"].btn.btn-mini {
   top: 10%;
   left: 50%;
   z-index: 1050;
-  width: 560px;
-  margin-left: -280px;
+  width: 760px;
+  margin-left: -380px;
   background-color: #ffffff;
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -5228,7 +5228,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .modal.fade.in {
-  top: 10%;
+  top: 10px;
 }
 
 .modal-header {
@@ -5247,7 +5247,7 @@ input[type="submit"].btn.btn-mini {
 
 .modal-body {
   position: relative;
-  max-height: 400px;
+  max-height: 500px;
   padding: 15px;
   overflow-y: auto;
 }

diff --git a/common/css/main.css b/common/css/main.css
@@ -131,6 +131,14 @@
   font-weight: bold;
 }
 
+.normal {
+  font-weight: normal;
+}
+
+.light {
+  font-weight: 200;
+}
+
 .input-append label {
   font-size: inherit !important;
 }

diff --git a/config.js b/config.js
@@ -22,6 +22,6 @@ var config = new Settings(
   kibana_index:     "kibana-int", 
   modules:          ['histogram','map','pie','table','stringquery','sort',
                     'timepicker','text','fields','hits','dashcontrol',
-                    'column','derivequeries'],
+                    'column','derivequeries','trends'],
   }
 );
diff --git a/js/services.js b/js/services.js
@@ -83,6 +83,85 @@ angular.module('kibana.services', [])
   return fields;
 
 })
+.service('kbnIndex',function($http) {
+    // returns a promise containing an array of all indices matching the index
+  // pattern that exist in a given range
+  this.indices = function(from,to,pattern,interval) {
+    var possible = [];
+    _.each(expand_range(fake_utc(from),fake_utc(to),interval),function(d){
+      possible.push(d.format(pattern));
+    });
+
+    return all_indices().then(function(p) {
+      var indices = _.intersection(possible,p);
+      indices.reverse();
+      return indices
+    })
+  };
+
+  // returns a promise containing an array of all indices in an elasticsearch
+  // cluster
+  function all_indices() {
+    var something = $http({
+      url: config.elasticsearch + "/_aliases",
+      method: "GET"
+    }).error(function(data, status, headers, config) {
+      // Handle error condition somehow?
+    });
+
+    return something.then(function(p) {
+      var indices = [];
+      _.each(p.data, function(v,k) {
+        indices.push(k)
+      });
+      return indices;
+    });
+  }
+
+  // this is stupid, but there is otherwise no good way to ensure that when
+  // I extract the date from an object that I'm get the UTC date. Stupid js.
+  // I die a little inside every time I call this function.
+  // Update: I just read this again. I died a little more inside.
+  // Update2: More death.
+  function fake_utc(date) {
+    date = moment(date).clone().toDate()
+    return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000));
+  }
+
+  // Create an array of date objects by a given interval
+  function expand_range(start, end, interval) {
+    if(_.contains(['hour','day','week','month','year'],interval)) {
+      var range;
+      start = moment(start).clone();
+      range = [];
+      while (start.isBefore(end)) {
+        range.push(start.clone());
+        switch (interval) {
+        case 'hour':
+          start.add('hours',1)
+          break
+        case 'day':
+          start.add('days',1)
+          break
+        case 'week':
+          start.add('weeks',1)
+          break
+        case 'month':
+          start.add('months',1)
+          break
+        case 'year':
+          start.add('years',1)
+          break
+        }
+      }
+      range.push(moment(end).clone());
+      return range;
+    } else {
+      return false;
+    }
+  }
+})
+
 .service('timer', function($timeout) {
   // This service really just tracks a list of $timeout promises to give us a
   // method for cancelling them all when we need to

diff --git a/panels/histogram/editor.html b/panels/histogram/editor.html
@@ -25,7 +25,7 @@
       <label class="small">Query</label>
       <form class="input-append" style="margin-bottom: 0px">
         <input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
-        <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
+        <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery='';set_refresh(true)"><i class="icon-plus"></i></button>
       </form>
     </div>
     <div class="span1">
@@ -34,7 +34,7 @@
   <div class="row-fluid" ng-repeat="q in panel.query">        
     <div class="span3">
       <form style="margin-bottom: 0px">
-        <input type="text" style="width:70%" ng-model="q.label">
+        <input type="text" style="width:70%" ng-model="q.label" ng-change="set_refresh(true)">
       </form>
     </div>
     <div class="span8">

diff --git a/panels/histogram/module.js b/panels/histogram/module.js
@@ -315,7 +315,7 @@ angular.module('kibana.histogram', [])
                 color: '#ccc'
               },
               grid: {
-                backgroundColor: '#272b30',
+                backgroundColor: null,
                 borderWidth: 0,
                 borderColor: '#eee',
                 color: "#eee",

diff --git a/panels/hits/editor.html b/panels/hits/editor.html
@@ -38,7 +38,7 @@ <h5>Queries</h5>
       <form class="input-append" style="margin-bottom: 0px">
         <label class="small">Query</label>
         <input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
-        <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
+        <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery='';set_refresh(true)"><i class="icon-plus"></i></button>
       </form>
     </div>
     <div class="span1">
@@ -47,12 +47,12 @@ <h5>Queries</h5>
   <div class="row-fluid" ng-repeat="q in panel.query">        
     <div class="span3">
       <form style="margin-bottom: 0px">
-        <input type="text" style="width:70%" ng-model="q.label">
+        <input type="text" style="width:70%" ng-model="q.label" ng-change="set_refresh(true)">
       </form>
     </div>
     <div class="span8">
       <form class="input-append" style="margin-bottom: 0px">
-        <input type="text" style="width:80%" ng-model="q.query">
+        <input type="text" style="width:80%" ng-model="q.query" ng-change="set_refresh(true)">
         <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
       </form>
     </div>

diff --git a/panels/hits/module.js b/panels/hits/module.js
@@ -141,6 +141,17 @@ angular.module('kibana.hits', [])
     $scope.get_data();
   }
 
+  $scope.set_refresh = function (state) { 
+    $scope.refresh = state; 
+  }
+
+  $scope.close_edit = function() {
+    if($scope.refresh)
+      $scope.get_data();
+    $scope.refresh =  false;
+    $scope.$emit('render');
+  }
+
   function set_time(time) {
     $scope.time = time;
     $scope.index = _.isUndefined(time.index) ? $scope.index : time.index

diff --git a/panels/map/module.js b/panels/map/module.js
@@ -145,7 +145,7 @@ angular.module('kibana.map', [])
             map: scope.panel.map,
             regionStyle: {initial: {fill: '#8c8c8c'}},
             zoomOnScroll: false,
-            backgroundColor: '#272b30',
+            backgroundColor: null,
             series: {
               regions: [{
                 values: scope.data,
@@ -157,9 +157,9 @@ angular.module('kibana.map', [])
               $('.jvectormap-label').css({
                 "position"    : "absolute",
                 "display"     : "none",
-                'color'   : "#c8c8c8",
-                'padding' : '10px',
-                'font-size': '11pt',
+                'color'       : "#c8c8c8",
+                'padding'     : '10px',
+                'font-size'   : '11pt',
                 'font-weight' : 200,
                 'background-color': '#1f1f1f',
                 'border-radius': '5px'

diff --git a/panels/pie/module.js b/panels/pie/module.js
@@ -246,14 +246,13 @@ angular.module('kibana.pie', [])
               },
               label: label,
               stroke: {
-                color: '#272b30',
                 width: 0
               }
             }
           },
           //grid: { hoverable: true, clickable: true },
           grid:   { 
-            backgroundColor: '#272b30',
+            backgroundColor: null,
             hoverable: true, 
             clickable: true 
           },