Explore: Store UI state in URL

Storing queries, split state, and time range in URL.

- harmonize query serialization when generating Explore URLs in
  dashboards (use of `renderUrl`)
- move URL parse/serialization to Wrapper
- keep UI states under two keys, one for left and one for right Explore
- add option to angular router to not reload page on search change
- add lots of types
- fix time service function that gets triggered by URL change

public/app/features/panel/metrics_panel_ctrl.ts

@@ -6,7 +6,7 @@ import kbn from 'app/core/utils/kbn';
 import { PanelCtrl } from 'app/features/panel/panel_ctrl';
 import * as rangeUtil from 'app/core/utils/rangeutil';
 import * as dateMath from 'app/core/utils/datemath';
-import { encodePathComponent } from 'app/core/utils/location_util';
+import { renderUrl } from 'app/core/utils/url';
 
 import { metricsTabDirective } from './metrics_tab';
 
@@ -331,8 +331,8 @@ class MetricsPanelCtrl extends PanelCtrl {
       ...this.datasource.getExploreState(this.panel),
       range,
     };
-    const exploreState = encodePathComponent(JSON.stringify(state));
-    this.$location.url(`/explore?state=${exploreState}`);
+    const exploreState = JSON.stringify(state);
+    this.$location.url(renderUrl('/explore', { state: exploreState }));
   }
 
   addQuery(target) {