From 89bbb05a6ec6055f110ca04f277f5562098497b0 Mon Sep 17 00:00:00 2001 From: Court Ewing Date: Mon, 15 Aug 2016 10:50:07 -0400 Subject: [PATCH] Backport PR #6773 --------- **Commit 1:** [state] add configurable warning level based on url length * Original sha: 55db90d3ab1d3ae8fef8c450b72c351978a67ab0 * Authored by spalger on 2016-04-04T21:57:45Z **Commit 2:** [state] add a hard length limit that will start throwing errors * Original sha: 64699aa53df0f20fd4a962dbd3e14a092b9d8355 * Authored by spalger on 2016-04-04T22:14:06Z **Commit 3:** Merge branch 'master' of github.com:elastic/kibana into implement/betterWarningForUrlLength * Original sha: 4c70d6959d2c07fc0a4de2a58cb68e8846d7eb1d * Authored by spalger on 2016-04-06T07:05:47Z **Commit 4:** [dashboard] cleanup quietly to prevent error * Original sha: 1dace5c5a3a585a699d079865320129130df0357 * Authored by spalger on 2016-04-06T08:50:55Z **Commit 5:** [errorview] add url overflow display * Original sha: 8b4ebf5fcfb3d119da21dc88c46acedc55582370 * Authored by spalger on 2016-04-06T08:51:47Z **Commit 6:** [errorview] persist the overflow url so that refresh works * Original sha: e308db927c9895e330a04fb3a8dccf7dc86aec22 * Authored by spalger on 2016-04-06T09:05:13Z **Commit 7:** Merge branch 'master' of github.com:elastic/kibana into implement/betterWarningForUrlLength * Original sha: 121e4f23f4d4830230c7e7b65d8119a1cf824a93 * Authored by spalger on 2016-04-15T18:49:12Z **Commit 8:** [config] remove url limit config, it should adapt automatically * Original sha: 281b38b4afcae934a19edfd29ac14a3b52d68c73 * Authored by spalger on 2016-04-15T23:38:05Z **Commit 9:** [chrome] rework url overflow detection The previous version of this pr relied on the State service to catch times when the URL would grow out of control. While overflows will commonly occur in the State service, this didn't handle urls that were navigated to using a link. They worked because the state service would eventually be called, but the failure was unexpected and required interaction to trigger. This new approach does the checking at a higher level, in the chrome. We also removed the `url:limit` configuration value in favor of browser detection (I was not able to find or come up with a way to quietly and quickly feature detect this). The new limits are 2000 characters for IE and 25000 for all other browsers. * Original sha: 116521c6be68676ac2c808bfb065d209f3fa708c * Authored by spalger on 2016-04-15T23:40:18Z **Commit 10:** Merge branch 'master' of github.com:elastic/kibana into implement/betterWarningForUrlLength * Original sha: aa030d758958821c387dba19defb2ab5d1fafaff * Authored by spalger on 2016-04-26T16:51:22Z **Commit 11:** [ui/config] remove unused default * Original sha: b333c514cc44df787b6fe997dc6f70a04755498e * Authored by spalger on 2016-04-26T16:52:29Z **Commit 12:** Merge branch 'master' of github.com:elastic/kibana into implement/betterWarningForUrlLength * Original sha: 133d7e577ab16343b50e556d14b66096a5f73c4d * Authored by spalger on 2016-04-27T23:17:44Z **Commit 13:** [urlOverflow] assign magic numbers to variables * Original sha: 8b978818fca895400aac640391d253528586ae50 * Authored by spalger on 2016-04-27T23:24:17Z --- .../public/dashboard/directives/grid.js | 7 +- src/ui/public/chrome/api/angular.js | 32 ++++++++- src/ui/public/config/defaults.js | 2 +- .../error_url_overflow.html | 18 +++++ .../error_url_overflow/error_url_overflow.js | 30 +++++++++ .../error_url_overflow.less | 7 ++ .../url_overflow_service.js | 65 +++++++++++++++++++ src/ui/public/state_management/state.js | 6 +- 8 files changed, 160 insertions(+), 7 deletions(-) create mode 100644 src/ui/public/error_url_overflow/error_url_overflow.html create mode 100644 src/ui/public/error_url_overflow/error_url_overflow.js create mode 100644 src/ui/public/error_url_overflow/error_url_overflow.less create mode 100644 src/ui/public/error_url_overflow/url_overflow_service.js diff --git a/src/plugins/kibana/public/dashboard/directives/grid.js b/src/plugins/kibana/public/dashboard/directives/grid.js index da93a5b5a271a..039de84df7230 100644 --- a/src/plugins/kibana/public/dashboard/directives/grid.js +++ b/src/plugins/kibana/public/dashboard/directives/grid.js @@ -83,14 +83,15 @@ define(function (require) { }); $scope.$on('$destroy', function () { + safeLayout.cancel(); $window.off('resize', safeLayout); if (!gridster) return; gridster.$widgets.each(function (i, el) { const panel = getPanelFor(el); - removePanel(panel); // stop any animations panel.$el.stop(); + removePanel(panel, true); // not that we will, but lets be safe makePanelSerializeable(panel); }); @@ -125,9 +126,9 @@ define(function (require) { } // tell gridster to remove the panel, and cleanup our metadata - function removePanel(panel) { + function removePanel(panel, silent) { // remove from grister 'silently' (don't reorganize after) - gridster.remove_widget(panel.$el); + gridster.remove_widget(panel.$el, silent); // destroy the scope panel.$scope.$destroy(); diff --git a/src/ui/public/chrome/api/angular.js b/src/ui/public/chrome/api/angular.js index 79af632c405b8..9d5734948ec36 100644 --- a/src/ui/public/chrome/api/angular.js +++ b/src/ui/public/chrome/api/angular.js @@ -1,4 +1,10 @@ let _ = require('lodash'); +import { format as formatUrl, parse as parseUrl } from 'url'; + +import Notifier from 'ui/notify/notifier'; +import { UrlOverflowServiceProvider } from '../../error_url_overflow'; + +const URL_LIMIT_WARN_WITHIN = 150; module.exports = function (chrome, internals) { @@ -20,7 +26,31 @@ module.exports = function (chrome, internals) { a.href = chrome.addBasePath('/elasticsearch'); return a.href; }())) - .config(chrome.$setupXsrfRequestInterceptor); + .config(chrome.$setupXsrfRequestInterceptor) + .run(($location, $rootScope, Private) => { + const notify = new Notifier(); + const urlOverflow = Private(UrlOverflowServiceProvider); + const check = (event) => { + if ($location.path() === '/error/url-overflow') return; + + try { + if (urlOverflow.check($location.absUrl()) <= URL_LIMIT_WARN_WITHIN) { + notify.warning(` + The URL has gotten big and may cause Kibana + to stop working. Please simplify the data on screen. + `); + } + } catch (e) { + const { host, path, search, protocol } = parseUrl(window.location.href); + // rewrite the entire url to force the browser to reload and + // discard any potentially unstable state from before + window.location.href = formatUrl({ host, path, search, protocol, hash: '#/error/url-overflow' }); + } + }; + + $rootScope.$on('$routeUpdate', check); + $rootScope.$on('$routeChangeStart', check); + }); require('../directives')(chrome, internals); diff --git a/src/ui/public/config/defaults.js b/src/ui/public/config/defaults.js index 7122b56366c53..9fb26f941f452 100644 --- a/src/ui/public/config/defaults.js +++ b/src/ui/public/config/defaults.js @@ -206,7 +206,7 @@ define(function (require) { 'dashboard:defaultDarkTheme': { value: false, description: 'New dashboards use dark theme by default', - } + }, }; }; }); diff --git a/src/ui/public/error_url_overflow/error_url_overflow.html b/src/ui/public/error_url_overflow/error_url_overflow.html new file mode 100644 index 0000000000000..a69ce9975352e --- /dev/null +++ b/src/ui/public/error_url_overflow/error_url_overflow.html @@ -0,0 +1,18 @@ +
+

+ Woah there! +

+

+ That's a big URL you have there. I have some unfortunate news: Your browser doesn't play nice with Kibana's bacon-double-cheese-burger-with-extra-fries sized URL. To keep you from running into problems Kibana limits URLs in your browser to {{controller.limit}} characters for your safety. +

+ +

Ok, how do I fix this?

+

This usually only happens with big, complex dashboards, so you have some options:

+
    +
  1. Remove some stuff from your dashboard. This will reduce the length of the URL and keep IE in a good place.
    2. +
  2. Don't use IE. Every other supported browser we know of doesn't have this limit.
    3. +
+
+
+

Foot note: Party size candy bars are tiny. Party size sub sandwiches are massive. Really makes you think.

+
diff --git a/src/ui/public/error_url_overflow/error_url_overflow.js b/src/ui/public/error_url_overflow/error_url_overflow.js new file mode 100644 index 0000000000000..f8897beff7314 --- /dev/null +++ b/src/ui/public/error_url_overflow/error_url_overflow.js @@ -0,0 +1,30 @@ +import uiRoutes from 'ui/routes'; +import uiModules from 'ui/modules'; +import KbnUrlProvider from 'ui/url'; + +import './error_url_overflow.less'; +import template from './error_url_overflow.html'; +import { UrlOverflowServiceProvider } from './url_overflow_service'; + +export * from './url_overflow_service'; + +uiRoutes +.when('/error/url-overflow', { + template, + controllerAs: 'controller', + controller: class OverflowController { + constructor(Private, config, $scope) { + const kbnUrl = Private(KbnUrlProvider); + const urlOverflow = Private(UrlOverflowServiceProvider); + + if (!urlOverflow.get()) { + kbnUrl.redirectPath('/'); + return; + } + + this.url = urlOverflow.get(); + this.limit = urlOverflow.failLength(); + $scope.$on('$destroy', () => urlOverflow.clear()); + } + } +}); diff --git a/src/ui/public/error_url_overflow/error_url_overflow.less b/src/ui/public/error_url_overflow/error_url_overflow.less new file mode 100644 index 0000000000000..efc1e066d38c8 --- /dev/null +++ b/src/ui/public/error_url_overflow/error_url_overflow.less @@ -0,0 +1,7 @@ +.error-url-overflow-app { + padding: 25px; + + pre { + white-space: pre-wrap; + } +} diff --git a/src/ui/public/error_url_overflow/url_overflow_service.js b/src/ui/public/error_url_overflow/url_overflow_service.js new file mode 100644 index 0000000000000..5282b74004175 --- /dev/null +++ b/src/ui/public/error_url_overflow/url_overflow_service.js @@ -0,0 +1,65 @@ +const URL_MAX_IE = 2000; +const URL_MAX_OTHERS = 25000; +const IE_REGEX = /(;MSIE |Edge\/\d)/; + +export class UrlOverflowService { + constructor() { + const key = 'error/url-overflow/url'; + const store = window.sessionStorage || { + getItem() {}, + setItem() {}, + removeItem() {}, + }; + + // FIXME: Couldn't find a way to test for browser compatibility without + // complex redirect and cookie based "feature-detection" page, so going + // with user-agent detection for now. + this._ieLike = IE_REGEX.test(window.navigator.userAgent); + + this._val = store.getItem(key); + this._sync = () => { + if (this._val == null) store.removeItem(key); + else store.setItem(key, this._val); + }; + } + + failLength() { + return this._ieLike ? URL_MAX_IE : URL_MAX_OTHERS; + } + + set(v) { + this._val = v; + this._sync(); + } + + get() { + return this._val; + } + + check(absUrl) { + if (!this.get()) { + const urlLength = absUrl.length; + const remaining = this.failLength() - urlLength; + + if (remaining > 0) { + return remaining; + } + + this.set(absUrl); + } + + throw new Error(` + The URL has gotten too big and kibana can no longer + continue. Please refresh to return to your previous state. + `); + } + + clear() { + this._val = undefined; + this._sync(); + } +} + +export function UrlOverflowServiceProvider() { + return new UrlOverflowService(); +} diff --git a/src/ui/public/state_management/state.js b/src/ui/public/state_management/state.js index 373639037ab99..8a182abb8e62f 100644 --- a/src/ui/public/state_management/state.js +++ b/src/ui/public/state_management/state.js @@ -1,3 +1,5 @@ +import KbnUrlProvider from 'ui/url'; + define(function (require) { let _ = require('lodash'); let rison = require('ui/utils/rison'); @@ -6,7 +8,8 @@ define(function (require) { let qs = require('ui/utils/query_string'); return function StateProvider(Notifier, Private, $rootScope, $location) { - let Events = Private(require('ui/events')); + const notify = new Notifier(); + const Events = Private(require('ui/events')); _.class(State).inherits(Events); function State(urlParam, defaults) { @@ -43,7 +46,6 @@ define(function (require) { try { return search[this._urlParam] ? rison.decode(search[this._urlParam]) : null; } catch (e) { - let notify = new Notifier(); notify.error('Unable to parse URL'); search[this._urlParam] = rison.encode(this._defaults); $location.search(search).replace();