[state] store url states into session storage

src/plugins/kibana/public/discover/controllers/discover.js

@@ -4,10 +4,10 @@ define(function (require) {
   const moment = require('moment');
   const ConfigTemplate = require('ui/ConfigTemplate');
   const getSort = require('ui/doc_table/lib/get_sort');
-  const rison = require('ui/utils/rison');
 
   const dateMath = require('ui/utils/dateMath');
   const stateMonitorFactory = require('ui/state_management/state_monitor_factory');
+  const StateProvider = require('ui/state_management/state');
 
   require('ui/doc_table');
   require('ui/visualize');
@@ -33,18 +33,25 @@ define(function (require) {
     template: require('plugins/kibana/discover/index.html'),
     reloadOnSearch: false,
     resolve: {
-      ip: function (Promise, courier, config, $location) {
+      ip: function (Promise, courier, config, $location, Private) {
+        const State = Private(StateProvider);
         return courier.indexPatterns.getIds()
         .then(function (list) {
-          const stateRison = $location.search()._a;
-
-          let state;
-          try { state = rison.decode(stateRison); }
-          catch (e) { state = {}; }
+          /**
+           *  In making the indexPattern modifiable it was placed in appState. Unfortunately,
+           *  the load order of AppState conflicts with the load order of many other things
+           *  so in order to get the name of the index we should use, and to switch to the
+           *  default if necessary, we parse the appState with a temporary State object and
+           *  then destroy it immediatly after we're done
+           *
+           *  @type {State}
+           */
+          const state = new State('_a', {});
 
           const specified = !!state.index;
           const exists = _.contains(list, state.index);
           const id = exists ? state.index : config.get('defaultIndex');
+          state.destroy();
 
           return Promise.props({
             list: list,

src/testUtils/__tests__/stub_browser_storage.js

@@ -49,10 +49,10 @@ describe('StubBrowserStorage', () => {
     });
   });
 
-  describe('size limiting', () => {
+  describe('#setStubbedSizeLimit', () => {
     it('allows limiting the storage size', () => {
       const store = new StubBrowserStorage();
-      store._setSizeLimit(10);
+      store.setStubbedSizeLimit(10);
       store.setItem('abc', 'def'); // store size is 6, key.length + val.length
       expect(() => {
         store.setItem('ghi', 'jkl');
@@ -61,25 +61,41 @@ describe('StubBrowserStorage', () => {
 
     it('allows defining the limit as infinity', () => {
       const store = new StubBrowserStorage();
-      store._setSizeLimit(Infinity);
+      store.setStubbedSizeLimit(Infinity);
       store.setItem('abc', 'def');
       store.setItem('ghi', 'jkl'); // unlike the previous test, this doesn't throw
     });
 
-    it('requires setting the limit before keys', () => {
+    it('throws an error if the limit is below the current size', () => {
       const store = new StubBrowserStorage();
       store.setItem('key', 'val');
       expect(() => {
-        store._setSizeLimit(10);
-      }).throwError(/before setting/);
+        store.setStubbedSizeLimit(5);
+      }).throwError(Error);
     });
 
     it('respects removed items', () => {
       const store = new StubBrowserStorage();
-      store._setSizeLimit(10);
+      store.setStubbedSizeLimit(10);
       store.setItem('abc', 'def');
       store.removeItem('abc');
       store.setItem('ghi', 'jkl'); // unlike the previous test, this doesn't throw
     });
   });
+
+  describe('#getStubbedSizeLimit', () => {
+    it('returns the size limit', () => {
+      const store = new StubBrowserStorage();
+      store.setStubbedSizeLimit(10);
+      expect(store.getStubbedSizeLimit()).to.equal(10);
+    });
+  });
+
+  describe('#getStubbedSize', () => {
+    it('returns the size', () => {
+      const store = new StubBrowserStorage();
+      store.setItem(1, 1);
+      expect(store.getStubbedSize()).to.equal(2);
+    });
+  });
 });

src/testUtils/stub_browser_storage.js

@@ -1,92 +1,109 @@
-const keys = Symbol('keys');
-const values = Symbol('values');
-const remainingSize = Symbol('remainingSize');
-
 export default class StubBrowserStorage {
   constructor() {
-    this[keys] = [];
-    this[values] = [];
-    this[remainingSize] = 5000000; // 5mb, minimum browser storage size
+    this._keys = [];
+    this._values = [];
+    this._size = 0;
+    this._sizeLimit = 5000000; // 5mb, minimum browser storage size
   }
 
+  // -----------------------------------------------------------------------------------------------
+  // Browser-specific methods.
+  // -----------------------------------------------------------------------------------------------
+
   get length() {
-    return this[keys].length;
+    return this._keys.length;
   }
 
   key(i) {
-    return this[keys][i];
+    return this._keys[i];
   }
 
   getItem(key) {
     key = String(key);
 
-    const i = this[keys].indexOf(key);
+    const i = this._keys.indexOf(key);
     if (i === -1) return null;
-    return this[values][i];
+    return this._values[i];
   }
 
   setItem(key, value) {
     key = String(key);
     value = String(value);
-    this._takeUpSpace(this._calcSizeOfAdd(key, value));
+    const sizeOfAddition = this._getSizeOfAddition(key, value);
+    this._updateSize(sizeOfAddition);
 
-    const i = this[keys].indexOf(key);
+    const i = this._keys.indexOf(key);
     if (i === -1) {
-      this[keys].push(key);
-      this[values].push(value);
+      this._keys.push(key);
+      this._values.push(value);
     } else {
-      this[values][i] = value;
+      this._values[i] = value;
     }
   }
 
   removeItem(key) {
     key = String(key);
-    this._takeUpSpace(this._calcSizeOfRemove(key));
+    const sizeOfRemoval = this._getSizeOfRemoval(key);
+    this._updateSize(sizeOfRemoval);
 
-    const i = this[keys].indexOf(key);
+    const i = this._keys.indexOf(key);
     if (i === -1) return;
-    this[keys].splice(i, 1);
-    this[values].splice(i, 1);
+    this._keys.splice(i, 1);
+    this._values.splice(i, 1);
   }
 
-  // non-standard api methods
-  _getKeys() {
-    return this[keys].slice();
+  // -----------------------------------------------------------------------------------------------
+  // Test-specific methods.
+  // -----------------------------------------------------------------------------------------------
+
+  getStubbedKeys() {
+    return this._keys.slice();
   }
 
-  _getValues() {
-    return this[values].slice();
+  getStubbedValues() {
+    return this._values.slice();
   }
 
-  _setSizeLimit(limit) {
-    if (this[keys].length) {
-      throw new Error('You must call _setSizeLimit() before setting any values');
+  setStubbedSizeLimit(sizeLimit) {
+    // We can't reconcile a size limit with the "stored" items, if the stored items size exceeds it.
+    if (sizeLimit < this._size) {
+      throw new Error(`You can't set a size limit smaller than the current size.`);
     }
 
-    this[remainingSize] = limit;
+    this._sizeLimit = sizeLimit;
+  }
+
+  getStubbedSizeLimit() {
+    return this._sizeLimit;
+  }
+
+  getStubbedSize() {
+    return this._size;
   }
 
-  _calcSizeOfAdd(key, value) {
-    const i = this[keys].indexOf(key);
+  _getSizeOfAddition(key, value) {
+    const i = this._keys.indexOf(key);
     if (i === -1) {
       return key.length + value.length;
     }
-    return value.length - this[values][i].length;
+    // Return difference of what's been stored, and what *will* be stored.
+    return value.length - this._values[i].length;
   }
 
-  _calcSizeOfRemove(key) {
-    const i = this[keys].indexOf(key);
+  _getSizeOfRemoval(key) {
+    const i = this._keys.indexOf(key);
     if (i === -1) {
       return 0;
     }
-    return 0 - (key.length + this[values][i].length);
+    // Return negative value.
+    return -(key.length + this._values[i].length);
   }
 
-  _takeUpSpace(delta) {
-    if (this[remainingSize] - delta < 0) {
+  _updateSize(delta) {
+    if (this._size + delta > this._sizeLimit) {
       throw new Error('something about quota exceeded, browsers are not consistent here');
     }
 
-    this[remainingSize] -= delta;
+    this._size += delta;
   }
 }

src/ui/public/chrome/api/__tests__/apps.js

@@ -152,8 +152,8 @@ describe('Chrome API :: apps', function () {
         expect(chrome.getLastUrlFor('app')).to.equal(null);
         chrome.setLastUrlFor('app', 'url');
         expect(chrome.getLastUrlFor('app')).to.equal('url');
-        expect(store._getKeys().length).to.equal(1);
-        expect(store._getValues().shift()).to.equal('url');
+        expect(store.getStubbedKeys().length).to.equal(1);
+        expect(store.getStubbedValues().shift()).to.equal('url');
       });
     });
   });

src/ui/public/chrome/api/angular.js

@@ -4,7 +4,7 @@ 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;
+const URL_LIMIT_WARN_WITHIN = 1000;
 
 module.exports = function (chrome, internals) {
 
@@ -35,10 +35,20 @@ module.exports = function (chrome, internals) {
 
         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.
-            `);
+            notify.directive({
+              template: `
+                <p>
+                  The URL has gotten big and may cause Kibana
+                  to stop working. Please either enable the
+                  <code>state:storeInSessionStorage</code>
+                  option in the <a href="#/management/kibana/settings">advanced
+                  settings</a> or simplify the onscreen visuals.
+                </p>
+              `
+            }, {
+              type: 'error',
+              actions: [{ text: 'close' }]
+            });
           }
         } catch (e) {
           const { host, path, search, protocol } = parseUrl(window.location.href);

src/ui/public/chrome/directives/kbn_chrome.js

@@ -4,6 +4,10 @@ import { remove } from 'lodash';
 import UiModules from 'ui/modules';
 import ConfigTemplate from 'ui/ConfigTemplate';
 import { isSystemApiRequest } from 'ui/system_api';
+import {
+  getUnhashableStatesProvider,
+  unhashUrl,
+} from 'ui/state_management/state_hashing';
 
 export default function (chrome, internals) {
 
@@ -28,17 +32,19 @@ export default function (chrome, internals) {
       },
 
       controllerAs: 'chrome',
-      controller($scope, $rootScope, $location, $http) {
+      controller($scope, $rootScope, $location, $http, Private) {
+        const getUnhashableStates = Private(getUnhashableStatesProvider);
 
         // are we showing the embedded version of the chrome?
         internals.setVisibleDefault(!$location.search().embed);
 
         // listen for route changes, propogate to tabs
         const onRouteChange = function () {
-          let { href } = window.location;
-          let persist = chrome.getVisible();
-          internals.trackPossibleSubUrl(href);
-          internals.tabs.consumeRouteUpdate(href, persist);
+          const urlWithHashes = window.location.href;
+          const urlWithStates = unhashUrl(urlWithHashes, getUnhashableStates());
+          const persist = chrome.getVisible();
+          internals.trackPossibleSubUrl(urlWithStates);
+          internals.tabs.consumeRouteUpdate(urlWithStates, persist);
         };
 
         $rootScope.$on('$routeChangeSuccess', onRouteChange);

src/ui/public/config/defaults.js

@@ -207,6 +207,12 @@ define(function (require) {
         value: false,
         description: 'New dashboards use dark theme by default',
       },
+      'state:storeInSessionStorage': {
+        value: false,
+        description: 'The URL can sometimes grow to be too large for some browsers to ' +
+          'handle. To counter-act this we are testing if storing parts of the URL in ' +
+          'sessions storage could help. Please let us know how it goes!'
+      }
     };
   };
 });

src/ui/public/crypto/index.js

@@ -0,0 +1 @@
+export { Sha256 } from './sha256';