From d6144d9d44b691cde3abf9a7ca6f18b2d982fbce Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Wed, 2 Mar 2016 16:55:37 -0700 Subject: [PATCH] Add autocomplete to timeseries vis. This completes phase 1 of timelion panels on Kibana dashboards. Closes #13 --- package.json | 2 +- public/app.js | 12 ++-- public/{main.less => app.less} | 60 +++----------------- public/chart.less | 13 +++++ public/directives/expression_directive.js | 2 +- public/suggestions.less | 38 +++++++++++++ public/vis/index.js | 1 + public/vis/timelion_vis.less | 19 +++---- public/vis/timelion_vis_params.html | 13 +++-- public/vis/timelion_vis_params_controller.js | 12 ++++ 10 files changed, 97 insertions(+), 75 deletions(-) rename public/{main.less => app.less} (85%) create mode 100644 public/chart.less create mode 100644 public/suggestions.less create mode 100644 public/vis/timelion_vis_params_controller.js diff --git a/package.json b/package.json index 44c71361bff0d0..c9b903967042c5 100644 --- a/package.json +++ b/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", diff --git a/public/app.js b/public/app.js index 128e7f493b125b..6d72bcbd4f479f 100644 --- a/public/app.js +++ b/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'; diff --git a/public/main.less b/public/app.less similarity index 85% rename from public/main.less rename to public/app.less index 23891dbc5d798f..90bfd6a49d0911 100644 --- a/public/main.less +++ b/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; diff --git a/public/chart.less b/public/chart.less new file mode 100644 index 00000000000000..4d3e0e41206cf6 --- /dev/null +++ b/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; + } +} diff --git a/public/directives/expression_directive.js b/public/directives/expression_directive.js index 7c199cdc9a371a..53a42db1c92547 100644 --- a/public/directives/expression_directive.js +++ b/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: diff --git a/public/suggestions.less b/public/suggestions.less new file mode 100644 index 00000000000000..d04e83446a7827 --- /dev/null +++ b/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; + } + } +} diff --git a/public/vis/index.js b/public/vis/index.js index d06deecb8e558b..19d8e2ecf09342 100644 --- a/public/vis/index.js +++ b/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'); diff --git a/public/vis/timelion_vis.less b/public/vis/timelion_vis.less index 2556efeb1bc09b..942894eb45838a 100644 --- a/public/vis/timelion_vis.less +++ b/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; + } } } diff --git a/public/vis/timelion_vis_params.html b/public/vis/timelion_vis_params.html index cba689827fb702..7bd59c84197dd2 100644 --- a/public/vis/timelion_vis_params.html +++ b/public/vis/timelion_vis_params.html @@ -1,6 +1,11 @@ -
-
- +
+
+
+ +
+
- +
diff --git a/public/vis/timelion_vis_params_controller.js b/public/vis/timelion_vis_params_controller.js new file mode 100644 index 00000000000000..851b314297426e --- /dev/null +++ b/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'); + }; + }); +});