diff --git a/src/kibana/components/visualize/spy/_spy.html b/src/kibana/components/visualize/spy/_spy.html index 75a5596e4bfcd..59ced8d205e21 100644 --- a/src/kibana/components/visualize/spy/_spy.html +++ b/src/kibana/components/visualize/spy/_spy.html @@ -14,7 +14,7 @@
- + diff --git a/src/kibana/components/visualize/spy/_table.js b/src/kibana/components/visualize/spy/_table.js index 13ea255671ad6..5dc42f9d61fb7 100644 --- a/src/kibana/components/visualize/spy/_table.js +++ b/src/kibana/components/visualize/spy/_table.js @@ -14,11 +14,9 @@ define(function (require) { var perPageDefault = 10; var perPageExtended = 20; - // TODO: finish this - the list should get longer in full screen mode - // $scope.$parent.$watch('spyMode.fill', function (fill) { - // $scope.perPage = (fill) ? perPageExtended : perPageDefault; - // }); - $scope.perPage = perPageDefault; + $scope.$parent.$watch('spyMode.fill', function (fill) { + $scope.perPage = (fill) ? perPageExtended : perPageDefault; + }); $scope.sort = null; $scope.csv = { diff --git a/src/kibana/components/visualize/spy/spy.js b/src/kibana/components/visualize/spy/spy.js index a95ec8ead0906..ccb0a82618652 100644 --- a/src/kibana/components/visualize/spy/spy.js +++ b/src/kibana/components/visualize/spy/spy.js @@ -22,14 +22,12 @@ define(function (require) { $scope.modes = modes; $scope.toggleDisplay = function () { + $scope.showPageToggle = !$scope.fullScreenSpy; $scope.setSpyMode($scope.spyMode ? null : defaultMode); }; $scope.toggleFullPage = function () { fullPageSpy = $scope.spyMode.fill = !fullPageSpy; - - // tell any listeners spyMode changed - $scope.$emit('change:spyMode', $scope.spyMode); }; $scope.setSpyMode = function (newMode) { @@ -71,8 +69,6 @@ define(function (require) { // wrapped in fn to enable early return set(); - - if (change) $scope.$emit('change:spyMode', current); }; } }; diff --git a/src/kibana/components/visualize/visualize.js b/src/kibana/components/visualize/visualize.js index de72c8a71bc6b..0cac6f933e86b 100644 --- a/src/kibana/components/visualize/visualize.js +++ b/src/kibana/components/visualize/visualize.js @@ -24,28 +24,25 @@ define(function (require) { template: require('text!components/visualize/visualize.html'), link: function ($scope, $el, attr) { var chart; // set in "vis" watcher - var $visualize = $el.find('.visualize-chart'); + var $visChart = $el.find('.visualize-chart'); var $spy = $el.find('visualize-spy'); + var minVisChartHeight = 180; $scope.spyMode = false; - $scope.onlyShowSpy = false; + $scope.fullScreenSpy = false; var applyClassNames = function () { + var fullSpy = ($scope.spyMode && ($scope.spyMode.fill || $scope.fullScreenSpy)); + // external $el.toggleClass('only-visualization', !$scope.spyMode); - $el.toggleClass('visualization-and-spy', $scope.spyMode && !$scope.onlyShowSpy); - $el.toggleClass('only-spy', Boolean($scope.onlyShowSpy)); - - $spy.toggleClass('only', Boolean($scope.onlyShowSpy)); + $el.toggleClass('visualization-and-spy', $scope.spyMode && !fullSpy); + $el.toggleClass('only-spy', Boolean(fullSpy)); + $spy.toggleClass('only', Boolean(fullSpy)); // internal - $visualize.toggleClass('spy-visible', Boolean($scope.spyMode)); - $visualize.toggleClass('spy-only', Boolean($scope.onlyShowSpy)); - }; - - var calcResponsiveStuff = function () { - $scope.onlyShowSpy = $scope.spyMode && ($scope.spyMode.fill || $el.height() < 550); - applyClassNames(); + $visChart.toggleClass('spy-visible', Boolean($scope.spyMode)); + $visChart.toggleClass('spy-only', Boolean(fullSpy)); }; // we need to wait for come watchers to fire at least once @@ -69,8 +66,13 @@ define(function (require) { }; }()); - $scope.$on('change:spyMode', function (event, spyMode) { - calcResponsiveStuff(); + $scope.$watchCollection('spyMode', function (spyMode, oldSpyMode) { + $scope.spyMode = spyMode; + // if the spy has been opened, check chart height + if (spyMode && !oldSpyMode) { + $scope.fullScreenSpy = $visChart.height() < minVisChartHeight; + } + applyClassNames(); }); $scope.$watch('vis', prereq(function (vis, prevVis) { @@ -91,7 +93,7 @@ define(function (require) { vis.vislibParams ); - chart = new visLib.Vis($visualize[0], vislibParams); + chart = new visLib.Vis($visChart[0], vislibParams); _.each(vis.listeners, function (listener, event) { chart.on(event, listener); diff --git a/src/kibana/directives/paginate.js b/src/kibana/directives/paginate.js index a5dcdef8710a7..44834cfd63b02 100644 --- a/src/kibana/directives/paginate.js +++ b/src/kibana/directives/paginate.js @@ -15,45 +15,18 @@ define(function (require) { $scope.paginate = {}; - // pagination controls + // watchers on attributes + $scope.$watchCollection(attrs.list, function (list) { + $scope.list = list; + renderList(); + }); $scope.$watch(attrs.perPage, function (perPage) { $scope.paginate.perPage = perPage || perPageDefault; }); + $scope.$watch('paginate.perPage', renderList); var getOtherWidth = $parse(attrs.otherWidth); - $scope.$watchCollection(attrs.list, function (list) { - $scope.pages = []; - if (!list) return; - - var perPage = $scope.paginate.perPage; - var count = Math.ceil(list.length / perPage); - - _.times(count, function (i) { - var start = perPage * i; - var page = list.slice(start, start + perPage); - - page.number = i + 1; - page.i = i; - - page.count = count; - page.first = page.number === 1; - page.last = page.number === count; - - page.prev = $scope.pages[i - 1]; - if (page.prev) page.prev.next = page; - - $scope.pages.push(page); - }); - - // set the new page, or restore the previous page number - if ($scope.page && $scope.page.i < $scope.pages.length) { - $scope.page = $scope.pages[$scope.page.i]; - } else { - $scope.page = $scope.pages[0]; - } - }); - $scope.$watch('page', function (newPage, oldPage) { if (!newPage) { delete $scope.otherPages; @@ -96,6 +69,38 @@ define(function (require) { $scope.page = $scope.pages[number - 1] || $scope.pages[0]; } }; + + function renderList() { + $scope.pages = []; + if (!$scope.list) return; + + var perPage = $scope.paginate.perPage; + var count = Math.ceil($scope.list.length / perPage); + + _.times(count, function (i) { + var start = perPage * i; + var page = $scope.list.slice(start, start + perPage); + + page.number = i + 1; + page.i = i; + + page.count = count; + page.first = page.number === 1; + page.last = page.number === count; + + page.prev = $scope.pages[i - 1]; + if (page.prev) page.prev.next = page; + + $scope.pages.push(page); + }); + + // set the new page, or restore the previous page number + if ($scope.page && $scope.page.i < $scope.pages.length) { + $scope.page = $scope.pages[$scope.page.i]; + } else { + $scope.page = $scope.pages[0]; + } + } } }; });