From 81962c831bcd0c9ade170a6a94a905bfc3a23180 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Tue, 12 Feb 2013 16:25:39 -0700 Subject: [PATCH] Started on row editor, removed lots of 's for nice speed increase --- common/css/main.css | 20 ++++++++++++++++---- index.html | 3 ++- js/controllers.js | 32 ++++++++++++++++++++++++++------ js/directives.js | 15 ++------------- js/services.js | 2 ++ panels/histogram/module.js | 22 +++++++++++----------- panels/map/module.js | 14 ++++++-------- panels/pie/module.js | 15 +++++++-------- panels/sort/module.js | 1 - panels/table/module.js | 9 ++------- panels/timepicker/module.js | 8 ++++---- partials/dashboard.html | 7 ++++--- partials/roweditor.html | 23 +++++++++++++++++++++++ 13 files changed, 105 insertions(+), 66 deletions(-) create mode 100644 partials/roweditor.html diff --git a/common/css/main.css b/common/css/main.css index 0278db77224..d2d0e3c8ac9 100644 --- a/common/css/main.css +++ b/common/css/main.css @@ -20,20 +20,32 @@ z-index: 2000; } -span.editlink { +.panel i.editlink { position: absolute; right: 5px; z-index: 800; display: none; } -.panel:hover span.editlink { +.panel:hover i.editlink { display: block; opacity: 0.3; } -.panel span.editlink:hover { - display: block; +.panel i.editlink:hover { + opacity: 1; +} + +.row-header i.editlink { + display: none; +} + +.row-header:hover i.editlink { + display: inline-block; + opacity: 0.3; +} + +.row-header i.editlink:hover { opacity: 1; } diff --git a/index.html b/index.html index a130b322b5b..81f246d0635 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,11 @@
- Kibana Preview + Kibana Preview {{dashboards.title}}
+
diff --git a/js/controllers.js b/js/controllers.js index d16d89c81cc..d72df596de9 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -6,9 +6,13 @@ angular.module('kibana.controllers', []) .controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) { $scope.config = config; + $scope._ = _; - if (Modernizr.localstorage && !(_.isUndefined(localStorage['dashboard']))) { + if (Modernizr.localstorage && + !(_.isUndefined(localStorage['dashboard'])) && + localStorage['dashboard'] !== '' + ) { $scope.dashboards = JSON.parse(localStorage['dashboard']); } else { $scope.dashboards = dashboards; @@ -16,11 +20,6 @@ angular.module('kibana.controllers', []) var ejs = $scope.ejs = ejsResource(config.elasticsearch); - $scope.toggle_row = function(row) { - $scope.$broadcast('toggle_row',row) - row.collapse = row.collapse ? false : true; - } - $scope.export = function() { var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"}); saveAs(blob, $scope.dashboards.title+"-"+new Date().getTime()); @@ -35,6 +34,27 @@ angular.module('kibana.controllers', []) } } + $scope.purge = function() { + if (Modernizr.localstorage) { + localStorage['dashboard'] = ''; + alert('Default dashboard cleared') + } else { + alert("Sorry, your browser is too old for this functionality"); + } + } + +}) +.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) { + + $scope.toggle_row = function(row) { + row.collapse = row.collapse ? false : true; + if (!row.collapse) { + $timeout(function() { + $scope.$broadcast('render') + }); + } + } + }); diff --git a/js/directives.js b/js/directives.js index 8b71c20af4e..720403ca62c 100644 --- a/js/directives.js +++ b/js/directives.js @@ -7,23 +7,12 @@ angular.module('kibana.directives', []) return { restrict: 'E', link: function(scope, elem, attrs) { - var template = ''+ - '

{{panel.title}}

'; + var template = ''+ + '

{{panel.title}}

'; elem.prepend($compile(angular.element(template))(scope)); } }; }) -.directive('panelEdit', function(){ - return { - restrict: 'E', - replace: true, - scope: { - 'panel': '=panel' - }, - templateUrl: 'panels/table/editor.html', - //controller: 'ChildElement' - } -}) .directive('arrayJoin', function() { return { restrict: 'A', diff --git a/js/services.js b/js/services.js index 6f321f36267..c3730ec0b1e 100644 --- a/js/services.js +++ b/js/services.js @@ -9,6 +9,7 @@ angular.module('kibana.services', []) if(_.isUndefined(data)) var data = from + //console.log('Sent: '+type + ' to ' + to + ' from ' + from + ': ' + angular.toJson(data)) $rootScope.$broadcast(type,{ from: from, to: to, @@ -31,6 +32,7 @@ angular.module('kibana.services', []) scope.panel.group = [scope.panel.group]; if(_.intersection(_to,scope.panel.group).length > 0 || _.indexOf(_to,_id) > -1) { + //console.log('Got: '+type + ' from ' + _from + ' to ' + _to + ': ' + angular.toJson(packet.data)) fn(event,packet.data); } }); diff --git a/panels/histogram/module.js b/panels/histogram/module.js index 5fd402e7de4..b351789ffeb 100644 --- a/panels/histogram/module.js +++ b/panels/histogram/module.js @@ -19,8 +19,10 @@ angular.module('kibana.histogram', []) $scope.panel.query[0].query = query; $scope.get_data(); }); - // Now that we're all setup, request the time from our group - eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') + // Now that we're all setup, request the time from our group if we don't + // have it yet + if(_.isUndefined($scope.time)) + eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') } $scope.remove_query = function(q) { @@ -88,6 +90,7 @@ angular.module('kibana.histogram', []) series.data.color = $scope.panel.query[k].color; $scope.data.push(series.data) }); + $scope.$emit('render') }); } @@ -109,20 +112,17 @@ angular.module('kibana.histogram', []) link: function(scope, elem, attrs, ctrl) { // 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); + scope.$on('render',function(){ + render_panel(); }); - + // Re-render if the window is resized angular.element(window).bind('resize', function(){ - render_panel(scope,elem,attrs); + render_panel(); }); // Function for rendering panel - function render_panel(scope,elem,attrs) { + function render_panel() { // Determine format var show = _.isUndefined(scope.panel.show) ? { bars: true, lines: false, points: false @@ -142,7 +142,7 @@ angular.module('kibana.histogram', []) // Populate element. Note that jvectormap appends, does not replace. scripts.wait(function(){ - // Populate element + // Populate element $.plot(elem, scope.data, { legend: { position: "nw", diff --git a/panels/map/module.js b/panels/map/module.js index 8d94e0e831b..623ef2b6fe0 100644 --- a/panels/map/module.js +++ b/panels/map/module.js @@ -53,6 +53,7 @@ angular.module('kibana.map', []) _.each(results.facets.map.terms, function(v) { $scope.data[v.term.toUpperCase()] = v.count; }); + $scope.$emit('render') }); } @@ -70,20 +71,17 @@ angular.module('kibana.map', []) restrict: 'A', link: function(scope, elem, attrs) { - // 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); + // Receive render events + scope.$on('render',function(){ + render_panel(); }); // Or if the window is resized angular.element(window).bind('resize', function(){ - render_panel(scope,elem,attrs); + render_panel(); }); - function render_panel(scope,elem,attrs) { + function render_panel() { // Using LABjs, wait until all scripts are loaded before rendering panel var scripts = $LAB.script("panels/map/lib/jquery.jvectormap.min.js") .script("panels/map/lib/map."+scope.panel.map+".js") diff --git a/panels/pie/module.js b/panels/pie/module.js index 516207c6f03..df8bed36eb0 100644 --- a/panels/pie/module.js +++ b/panels/pie/module.js @@ -92,6 +92,7 @@ angular.module('kibana.pie', []) slice.color = $scope.panel.query[k].color; $scope.data.push(slice) }); + $scope.$emit('render'); }); // If we don't have an array, assume its a term facet. } else { @@ -126,6 +127,7 @@ angular.module('kibana.pie', []) $scope.data.push(slice) k = k + 1; }); + $scope.$emit('render'); }); } } @@ -145,21 +147,18 @@ angular.module('kibana.pie', []) restrict: 'A', link: function(scope, elem, attrs) { - // Watch if data or row state changes - scope.$watch(function () { - return angular.toJson([scope.data, scope.row]) - }, function() { - if(!(_.isUndefined(scope.data))) - render_panel(scope,elem,attrs); + // Receive render events + scope.$on('render',function(){ + render_panel(); }); // Or if the window is resized angular.element(window).bind('resize', function(){ - render_panel(scope,elem,attrs); + render_panel(); }); // Function for rendering panel - function render_panel(scope,elem,attrs) { + function render_panel() { var scripts = $LAB.script("common/lib/panels/jquery.flot.js") .script("common/lib/panels/jquery.flot.pie.js") diff --git a/panels/sort/module.js b/panels/sort/module.js index 9b1f2ddfa3e..6c7c32c050c 100644 --- a/panels/sort/module.js +++ b/panels/sort/module.js @@ -22,7 +22,6 @@ angular.module('kibana.sort', []) } $scope.set_sort = function() { - console.log($scope) eventBus.broadcast($scope.$id,$scope.panel.group,"sort",$scope.panel.sort) } diff --git a/panels/table/module.js b/panels/table/module.js index 685fb4cd5d8..2cfa60b6ab9 100644 --- a/panels/table/module.js +++ b/panels/table/module.js @@ -17,9 +17,6 @@ angular.module('kibana.table', []) $scope.init = function () { $scope.set_listeners($scope.panel.group) - $scope.$watch(function() { - return angular.toJson($scope.panel.sort) - }, function(){$scope.get_data()}); // Now that we're all setup, request the time from our group eventBus.broadcast($scope.$id,$scope.panel.group,"get_time") } @@ -34,6 +31,7 @@ angular.module('kibana.table', []) }); eventBus.register($scope,'sort', function(event,sort){ $scope.panel.sort = _.clone(sort); + $scope.get_data(); }); eventBus.register($scope,'selected_fields', function(event, fields) { $scope.panel.fields = _.clone(fields) @@ -45,6 +43,7 @@ angular.module('kibana.table', []) $scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc'; else $scope.panel.sort[0] = field; + $scope.get_data(); } $scope.toggle_field = function(field) { @@ -89,10 +88,6 @@ angular.module('kibana.table', []) }); } - $scope.move_field = function(field,dir) { - console.log(field,dir) - } - // Broadcast a list of all fields. Note that receivers of field array // events should be able to receive from multiple sources, merge, dedupe // and sort on the fly if needed. diff --git a/panels/timepicker/module.js b/panels/timepicker/module.js index d0366692b56..5013cf50c15 100644 --- a/panels/timepicker/module.js +++ b/panels/timepicker/module.js @@ -102,11 +102,11 @@ angular.module('kibana.timepicker', []) $scope.refresh = function() { if ($scope.panel.refresh.enable) { - $scope.time_apply(); timer.cancel($scope.refresh_timer) - $scope.refresh_timer = timer.register($timeout( - $scope.refresh, - $scope.panel.refresh.interval*1000 + $scope.refresh_timer = timer.register($timeout(function() { + $scope.refresh(); + $scope.time_apply(); + },$scope.panel.refresh.interval*1000 )); } else { timer.cancel($scope.refresh_timer) diff --git a/partials/dashboard.html b/partials/dashboard.html index 9393dc6d263..d5f3c8ccb4a 100644 --- a/partials/dashboard.html +++ b/partials/dashboard.html @@ -1,12 +1,13 @@
-
+
-
+
- {{row.title}} + {{row.title}} +
diff --git a/partials/roweditor.html b/partials/roweditor.html new file mode 100644 index 00000000000..1e73bc396a0 --- /dev/null +++ b/partials/roweditor.html @@ -0,0 +1,23 @@ +
+ +

{{row.title}} editor

+
+
+ + +

General

+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
\ No newline at end of file