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];
+ }
+ }
}
};
});