From e54c868e7f9953116453d38a8088266bba254db8 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Tue, 8 Oct 2013 18:38:08 +0200 Subject: [PATCH] Added pulldowns for query and filter. Added filter notifications, moved timepicker to navbar, reimplemented auto refresh --- src/app/components/kbn.js | 3 - src/app/controllers/all.js | 3 +- src/app/controllers/dashLoader.js | 9 +- src/app/controllers/pulldown.js | 44 ++++++ src/app/dashboards/default.json | 97 +++++++++--- src/app/dashboards/logstash.js | 55 +------ src/app/dashboards/logstash.json | 197 +++++++++++++----------- src/app/directives/kibanaSimplePanel.js | 1 + src/app/panels/histogram/editor.html | 2 +- src/app/panels/histogram/module.html | 50 +++--- src/app/panels/histogram/module.js | 4 +- src/app/panels/table/module.html | 4 +- src/app/panels/timepicker2/custom.html | 4 +- src/app/panels/timepicker2/editor.html | 8 +- src/app/panels/timepicker2/module.html | 20 ++- src/app/panels/timepicker2/module.js | 14 +- src/app/partials/dashLoader.html | 128 +++++++++------ src/app/partials/dashboard.html | 14 +- src/app/partials/dasheditor.html | 35 +++-- src/app/services/dashboard.js | 38 ++++- src/app/services/panelMove.js | 17 +- src/index.html | 2 +- 22 files changed, 442 insertions(+), 307 deletions(-) create mode 100755 src/app/controllers/pulldown.js diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index c784620c5d5..3a9c958f816 100755 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -295,7 +295,6 @@ function($, _, moment) { } else if (c === '-') { type = 2; } else { - console.log("no type"); return false; } @@ -311,7 +310,6 @@ function($, _, moment) { if (type === 0) { // rounding is only allowed on whole numbers if (num !== 1) { - console.log("nbad rounding"); return false; } } @@ -373,7 +371,6 @@ function($, _, moment) { } break; default: - console.log("unknown unit"); return false; } } diff --git a/src/app/controllers/all.js b/src/app/controllers/all.js index 158bf04c818..476236ebbbb 100755 --- a/src/app/controllers/all.js +++ b/src/app/controllers/all.js @@ -1,5 +1,6 @@ define([ './dash', './dashLoader', - './row' + './row', + './pulldown' ], function () {}); \ No newline at end of file diff --git a/src/app/controllers/dashLoader.js b/src/app/controllers/dashLoader.js index 7bcfd396d55..ae438309f3f 100755 --- a/src/app/controllers/dashLoader.js +++ b/src/app/controllers/dashLoader.js @@ -11,13 +11,20 @@ function (angular, _) { $scope.loader = dashboard.current.loader; $scope.init = function() { + $scope.advancedLoad = false; + $scope.advancedSave = false; + $scope.gist_pattern = /(^\d{5,}$)|(^[a-z0-9]{10,}$)|(gist.github.com(\/*.*)\/[a-z0-9]{5,}\/*$)/; $scope.gist = $scope.gist || {}; $scope.elasticsearch = $scope.elasticsearch || {}; }; $scope.showDropdown = function(type) { - var _l = $scope.loader; + if(_.isUndefined(dashboard.current.loader)) { + return true; + } + + var _l = dashboard.current.loader; if(type === 'load') { return (_l.load_elasticsearch || _l.load_gist || _l.load_local); } diff --git a/src/app/controllers/pulldown.js b/src/app/controllers/pulldown.js new file mode 100755 index 00000000000..2e2059ceaac --- /dev/null +++ b/src/app/controllers/pulldown.js @@ -0,0 +1,44 @@ +define([ + 'angular', + 'app', + 'underscore' +], +function (angular, app, _) { + 'use strict'; + + var module = angular.module('kibana.controllers'); + + module.controller('PulldownCtrl', function($scope, $rootScope, $timeout,ejsResource, querySrv) { + var _d = { + collapse: false, + notice: false, + }; + + _.defaults($scope.pulldown,_d); + + $scope.init = function() { + $scope.querySrv = querySrv; + + // Provide a combined skeleton for panels that must interact with panel and row. + // This might create name spacing issues. + $scope.panel = $scope.pulldown; + $scope.row = $scope.pulldown; + }; + + $scope.toggle_pulldown = function(pulldown) { + pulldown.collapse = pulldown.collapse ? false : true; + if (!pulldown.collapse) { + $timeout(function() { + $scope.$broadcast('render'); + }); + } else { + $scope.row.notice = false; + } + }; + + $scope.init(); + + } + ); + +}); \ No newline at end of file diff --git a/src/app/dashboards/default.json b/src/app/dashboards/default.json index 8400a154cec..38420d6a5dd 100755 --- a/src/app/dashboards/default.json +++ b/src/app/dashboards/default.json @@ -13,7 +13,9 @@ "query": "*", "alias": "", "color": "#7EB26D", - "id": 0 + "id": 0, + "pin": false, + "type": "lucene" } }, "ids": [ @@ -22,24 +24,12 @@ }, "filter": { "idQueue": [ + 0, 1, 2 ], - "list": { - "0": { - "from": "2013-07-27T22:08:06.800Z", - "to": "2013-07-27T23:08:06.801Z", - "field": "@timestamp", - "type": "time", - "mandate": "must", - "active": true, - "alias": "", - "id": 0 - } - }, - "ids": [ - 0 - ] + "list": {}, + "ids": [] } }, "rows": [ @@ -77,7 +67,8 @@ "style": {}, "status": "Stable" } - ] + ], + "notice": false } ], "editable": false, @@ -85,5 +76,73 @@ "interval": "none", "pattern": "[logstash-]YYYY.MM.DD", "default": "_all" - } -} + }, + "style": "dark", + "failover": false, + "panel_hints": true, + "pulldowns": [ + { + "type": "query", + "collapse": true, + "notice": false, + "query": "*", + "pinned": true, + "history": [], + "remember": 10 + }, + { + "type": "filtering", + "collapse": true, + "notice": false + } + ], + "nav": [ + { + "type": "timepicker2", + "collapse": false, + "notice": false, + "status": "Stable", + "time_options": [ + "5m", + "15m", + "1h", + "6h", + "12h", + "24h", + "2d", + "7d", + "30d" + ], + "refresh_intervals": [ + "5s", + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ], + "timefield": "@timestamp", + "now": true, + "filter_id": 0 + } + ], + "loader": { + "save_gist": false, + "save_elasticsearch": true, + "save_local": true, + "save_default": true, + "save_temp": true, + "save_temp_ttl_enable": true, + "save_temp_ttl": "30d", + "load_gist": true, + "load_elasticsearch": true, + "load_elasticsearch_size": 20, + "load_local": true, + "hide": false + }, + "refresh": false +} \ No newline at end of file diff --git a/src/app/dashboards/logstash.js b/src/app/dashboards/logstash.js index 26d82d23c1e..60f800e5c4f 100755 --- a/src/app/dashboards/logstash.js +++ b/src/app/dashboards/logstash.js @@ -1,4 +1,4 @@ -/* global _, kbn */ +/* global _ */ /* * Complex scripted Logstash dashboard @@ -29,7 +29,7 @@ var dashboard, queries, _d_timespan; var ARGS; // Set a default timespan if one isn't specified -_d_timespan = '1h'; +_d_timespan = '1d'; // Intialize a skeleton with nothing but a rows array and service object dashboard = { @@ -85,12 +85,11 @@ dashboard.services.query = { }; // Lets also add a default time filter, the value of which can be specified by the user -// This isn't strictly needed, but it gets rid of the info alert about the missing time filter dashboard.services.filter = { list: { 0: { - from: kbn.time_ago(ARGS.from||_d_timespan), - to: new Date(), + from: "now-"+(ARGS.from||_d_timespan), + to: "now", field: ARGS.timefield||"@timestamp", type: "time", active: true, @@ -102,19 +101,6 @@ dashboard.services.filter = { // Ok, lets make some rows. The Filters row is collapsed by default dashboard.rows = [ - { - title: "Time span", - height: "30px" - }, - { - title: "Query", - height: "30px" - }, - { - title: "Filters", - height: "100px", - collapse: true - }, { title: "Chart", height: "300px" @@ -125,37 +111,8 @@ dashboard.rows = [ } ]; -// Setup some panels. A query panel and a filter panel on the same row -dashboard.rows[0].panels = [ - { - title: "Set time filter", - type: 'timepicker', - span: 6, - timespan: ARGS.from||_d_timespan - } -]; - -// Add a filtering panel to the 3rd row -dashboard.rows[1].panels = [ - { - title: 'search', - type: 'query', - span: 12 - } -]; - - -// Add a filtering panel to the 3rd row -dashboard.rows[2].panels = [ - { - title: 'filters (applied globally)', - type: 'filtering', - span: 12 - } -]; - // And a histogram that allows the user to specify the interval and time field -dashboard.rows[3].panels = [ +dashboard.rows[0].panels = [ { title: 'events over time', type: 'histogram', @@ -166,7 +123,7 @@ dashboard.rows[3].panels = [ ]; // And a table row where you can specify field and sort order -dashboard.rows[4].panels = [ +dashboard.rows[1].panels = [ { title: 'all events', type: 'table', diff --git a/src/app/dashboards/logstash.json b/src/app/dashboards/logstash.json index 2dbd5faee42..5ec9188d64b 100755 --- a/src/app/dashboards/logstash.json +++ b/src/app/dashboards/logstash.json @@ -10,7 +10,9 @@ "query": "{{ARGS.query || '*'}}", "alias": "", "color": "#7EB26D", - "id": 0 + "id": 0, + "pin": false, + "type": "lucene" } }, "ids": [ @@ -23,10 +25,10 @@ ], "list": { "0": { - "from": "2013-07-30T18:58:13.977Z", - "to": "2013-07-30T19:58:13.977Z", - "field": "@timestamp", "type": "time", + "field": "@timestamp", + "from": "now-{{ARGS.from || '24h'}}", + "to": "now", "mandate": "must", "active": true, "alias": "", @@ -39,90 +41,6 @@ } }, "rows": [ - { - "title": "Options", - "height": "50px", - "editable": true, - "collapse": false, - "collapsable": true, - "panels": [ - { - "title": "Set time span", - "error": "", - "span": 6, - "editable": true, - "group": [ - "default" - ], - "type": "timepicker", - "mode": "relative", - "time_options": [ - "5m", - "15m", - "1h", - "6h", - "12h", - "24h", - "2d", - "7d", - "30d" - ], - "timespan": "{{ARGS.from || '1h'}}", - "timefield": "@timestamp", - "timeformat": "", - "refresh": { - "enable": false, - "interval": 30, - "min": 3 - }, - "filter_id": 0, - "status": "Stable" - } - ] - }, - { - "title": "Query", - "height": "50px", - "editable": true, - "collapse": false, - "collapsable": true, - "panels": [ - { - "title": "Search", - "error": false, - "span": 12, - "editable": true, - "group": [ - "default" - ], - "type": "query", - "label": "Search", - "history": [], - "remember": 10, - "pinned": true, - "query": "*" - } - ] - }, - { - "title": "Filters", - "height": "50px", - "editable": true, - "collapse": true, - "collapsable": true, - "panels": [ - { - "title": "dashboard filters", - "error": false, - "span": 12, - "editable": true, - "group": [ - "default" - ], - "type": "filtering" - } - ] - }, { "title": "Graph", "height": "350px", @@ -142,7 +60,7 @@ "value_field": null, "auto_int": true, "resolution": 100, - "interval": "30s", + "interval": "10m", "fill": 3, "linewidth": 3, "timezone": "browser", @@ -163,9 +81,30 @@ 0 ] }, - "title": "Events over time" + "title": "Events over time", + "intervals": [ + "auto", + "1s", + "1m", + "5m", + "10m", + "30m", + "1h", + "3h", + "12h", + "1d", + "1w", + "1M", + "1y" + ], + "options": true, + "tooltip": { + "value_type": "cumulative", + "query_as_alias": false + } } - ] + ], + "notice": false }, { "title": "Events", @@ -207,9 +146,12 @@ ] }, "field_list": true, - "status": "Stable" + "status": "Stable", + "trimFactor": 300, + "normTimes": true } - ] + ], + "notice": false } ], "editable": true, @@ -218,5 +160,72 @@ "interval": "day", "pattern": "[logstash-]YYYY.MM.DD", "default": "NO_TIME_FILTER_OR_INDEX_PATTERN_NOT_MATCHED" - } + }, + "style": "dark", + "panel_hints": true, + "pulldowns": [ + { + "type": "query", + "collapse": false, + "notice": false, + "query": "*", + "pinned": true, + "history": [], + "remember": 10 + }, + { + "type": "filtering", + "collapse": true, + "notice": false + } + ], + "nav": [ + { + "type": "timepicker2", + "collapse": false, + "notice": false, + "status": "Stable", + "time_options": [ + "5m", + "15m", + "1h", + "6h", + "12h", + "24h", + "2d", + "7d", + "30d" + ], + "refresh_intervals": [ + "5s", + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ], + "timefield": "@timestamp", + "now": true, + "filter_id": 0 + } + ], + "loader": { + "save_gist": false, + "save_elasticsearch": true, + "save_local": true, + "save_default": true, + "save_temp": true, + "save_temp_ttl_enable": true, + "save_temp_ttl": "30d", + "load_gist": true, + "load_elasticsearch": true, + "load_elasticsearch_size": 20, + "load_local": true, + "hide": false + }, + "refresh": false } \ No newline at end of file diff --git a/src/app/directives/kibanaSimplePanel.js b/src/app/directives/kibanaSimplePanel.js index 1378507fd52..f99859949fc 100644 --- a/src/app/directives/kibanaSimplePanel.js +++ b/src/app/directives/kibanaSimplePanel.js @@ -10,6 +10,7 @@ function (angular) { return { restrict: 'E', link: function($scope, elem, attr) { + // once we have the template, scan it for controllers and // load the module.js if we have any diff --git a/src/app/panels/histogram/editor.html b/src/app/panels/histogram/editor.html index acf0f854aea..981992c2a97 100755 --- a/src/app/panels/histogram/editor.html +++ b/src/app/panels/histogram/editor.html @@ -1,7 +1,7 @@
- +
diff --git a/src/app/panels/histogram/module.html b/src/app/panels/histogram/module.html index f369f08b2de..ebad97ab5f9 100755 --- a/src/app/panels/histogram/module.html +++ b/src/app/panels/histogram/module.html @@ -50,30 +50,32 @@ {{panel.value_field}} {{panel.mode}} per {{panel.interval}} | ({{hits}} hits)
-
- -
-
- -
-
- -
-
- -
+ +
+ +
+
+ +
+
+ +
+
+ +
+