Add autocomplete to timeseries vis. This completes phase 1 of timelio…

…n panels on Kibana dashboards. Closes elastic#13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timelion",
-  "version": "0.1.247",
+  "version": "0.1.248",
   "dependencies": {
     "body-parser": "^1.12.0",
     "boom": "^2.8.0",

public/app.js

@@ -3,12 +3,12 @@ var logoUrl = require('./logo.png');
 
 require('angularSortableView');
 
-require('./directives/chart_directive');
-require('./directives/expression_directive');
-require('./directives/scroll_class');
-require('./directives/timelion_grid');
-require('./directives/docs');
-require('./main.less');
+require('plugins/timelion/directives/chart_directive');
+require('plugins/timelion/directives/expression_directive');
+require('plugins/timelion/directives/scroll_class');
+require('plugins/timelion/directives/timelion_grid');
+require('plugins/timelion/directives/docs');
+require('plugins/timelion/app.less');
 
 var timelionLogo = require('plugins/timelion/header.png');
 document.title = 'Timelion - Kibana';

public/main.less → public/app.less

@@ -1,5 +1,8 @@
 @import "~ui/styles/variables.less";
 @import (reference) "~ui/styles/mixins";
+@import './chart.less';
+@import './suggestions.less';
+
 
 [chart] {
   height: 100%;
@@ -8,6 +11,11 @@
   flex-direction: column;
 }
 
+.suggestions {
+  position: absolute;
+  top: 30px;
+}
+
 .timelion {
   position: relative;
 
@@ -72,20 +80,6 @@
   cursor: pointer;
 }
 
-.chart {
-  &-title {
-    flex: 0;
-    text-align: center;
-    font-weight: bold;
-    font-size: 11px;
-  }
-
-  &-canvas {
-    min-width: 100%;
-    flex: 1;
-  }
-}
-
 .chart-container {
   display: inline-block;
   cursor: pointer;
@@ -154,44 +148,6 @@ input.timelion-interval {
   text-align: center;
 }
 
-.suggestions {
-  position: absolute;
-  top: 30px;
-  left: 0;
-  width: 100% !important;
-  background-color: @body-bg;
-  color: @text-color;
-  border: 1px solid @input-border;
-  border-top: 2px solid @input-border;
-  border-radius: 0px 0px @border-radius-base @border-radius-base !important;
-  z-index: 10000;
-  max-height: 378px; // 5 suggestions
-  overflow-y: auto;
-
-  .suggestion {
-    border-bottom: 1px solid @gray-lighter;
-    padding: 5px 20px;
-
-    &-details {
-      background-color: @body-bg;
-      padding: 10px;
-      border-radius: @border-radius-base;
-
-      > table {
-        margin-bottom: 0px;
-      }
-    }
-
-    &:hover {
-      background-color: @gray-lighter;
-    }
-
-    &.active {
-      background-color: @gray-lighter;
-    }
-  }
-}
-
 div.doc-container {
   &-functions {
     height: 310px;

public/chart.less

@@ -0,0 +1,13 @@
+.chart {
+  &-title {
+    flex: 0;
+    text-align: center;
+    font-weight: bold;
+    font-size: 11px;
+  }
+
+  &-canvas {
+    min-width: 100%;
+    flex: 1;
+  }
+}

public/directives/expression_directive.js

@@ -164,7 +164,7 @@ app.directive('timelionExpression', function ($compile, $http, $timeout, $rootSc
             if ($scope.suggestions.list.length) {
               $scope.completeExpression($scope.suggestions.selected);
             } else {
-              $scope.search();
+              $elem.submit();
             }
             break;
           case keys.ESC:

public/suggestions.less

@@ -0,0 +1,38 @@
+@import "~ui/styles/variables.less";
+
+.suggestions {
+  left: 0;
+  width: 100% !important;
+  background-color: @body-bg;
+  color: @text-color;
+  border: 1px solid @input-border;
+  border-top: 2px solid @input-border;
+  border-radius: 0px 0px @border-radius-base @border-radius-base !important;
+  z-index: 10000;
+  max-height: 378px; // 5 suggestions
+  overflow-y: auto;
+
+  .suggestion {
+    border-bottom: 1px solid @gray-lighter;
+    padding: 5px 20px;
+
+    &-details {
+      background-color: @body-bg;
+      padding: 10px;
+      border-radius: @border-radius-base;
+
+      > table {
+        color: @text-color;
+        margin-bottom: 0px;
+      }
+    }
+
+    &:hover {
+      background-color: @gray-lighter;
+    }
+
+    &.active {
+      background-color: @gray-lighter;
+    }
+  }
+}

public/vis/index.js

@@ -1,6 +1,7 @@
 define(function (require) {
   // we also need to load the controller and used by the template
   require('plugins/timelion/vis/timelion_vis_controller');
+  require('plugins/timelion/vis/timelion_vis_params_controller');
 
   // Stylin
   require('plugins/timelion/vis/timelion_vis.less');

public/vis/timelion_vis.less

@@ -1,4 +1,7 @@
 @import (reference) "~ui/styles/mixins.less";
+@import '../chart.less';
+@import '../suggestions.less';
+
 
 .timelion-vis {
   min-width: 100%;
@@ -11,18 +14,12 @@
     display: flex;
     flex-direction: column;
   }
-}
 
-.chart {
-  &-title {
-    flex: 0;
-    text-align: center;
-    font-weight: bold;
-    font-size: 11px;
-  }
+  &-editor-expression {
+    position: relative;
 
-  &-canvas {
-    min-width: 100%;
-    flex: 1;
+    .suggestions {
+      position: absolute;
+    }
   }
 }

public/vis/timelion_vis_params.html

@@ -1,6 +1,11 @@
-<div class="markdown-vis-options form-group">
-  <div>
-    <label>Timelion Expression</label>
+<div class="form-group" ng-controller="TimelionVisParamsController">
+  <div class="timelion-vis-editor-expression">
+    <div>
+      <label>Timelion Expression</label>
+    </div>
+    <textarea
+      ng-model="vis.params.expression" class="form-control" timelion-expression="{{vis.params.expression}}"
+      rows="5"></textarea>
   </div>
-  <textarea ng-model="vis.params.expression" class="form-control" rows="20"></textarea>
+
 </div>

public/vis/timelion_vis_params_controller.js

@@ -0,0 +1,12 @@
+define(function (require) {
+  require('plugins/timelion/directives/expression_directive');
+
+  var module = require('ui/modules').get('kibana/timelion_vis', ['kibana']);
+  module.controller('TimelionVisParamsController', function ($scope, $rootScope) {
+    $scope.vis.params.expression = $scope.vis.params.expression || '.es(*)';
+
+    $scope.search = function () {
+      $rootScope.$broadcast('courier:searchRefresh');
+    };
+  });
+});