Use url params for explore state

- putting state in the path components led to 400 on reload
- use `/explore?state=JSON` instead

pkg/api/api.go

@@ -73,8 +73,7 @@ func (hs *HTTPServer) registerRoutes() {
 	r.Get("/dashboards/", reqSignedIn, Index)
 	r.Get("/dashboards/*", reqSignedIn, Index)
 
-	r.Get("/explore/", reqEditorRole, Index)
-	r.Get("/explore/*", reqEditorRole, Index)
+	r.Get("/explore", reqEditorRole, Index)
 
 	r.Get("/playlists/", reqSignedIn, Index)
 	r.Get("/playlists/*", reqSignedIn, Index)

public/app/containers/Explore/Explore.tsx

@@ -67,7 +67,7 @@ interface IExploreState {
 export class Explore extends React.Component<any, IExploreState> {
   constructor(props) {
     super(props);
-    const { datasource, queries, range } = parseInitialState(props.routeParams.initial);
+    const { datasource, queries, range } = parseInitialState(props.routeParams.state);
     this.state = {
       datasource: null,
       datasourceError: null,

public/app/core/services/keybindingSrv.ts

@@ -191,7 +191,7 @@ export class KeybindingSrv {
               range,
             };
             const exploreState = encodePathComponent(JSON.stringify(state));
-            this.$location.url(`/explore/${exploreState}`);
+            this.$location.url(`/explore?state=${exploreState}`);
           }
         }
       });

public/app/features/panel/metrics_panel_ctrl.ts

@@ -332,7 +332,7 @@ class MetricsPanelCtrl extends PanelCtrl {
       range,
     };
     const exploreState = encodePathComponent(JSON.stringify(state));
-    this.$location.url(`/explore/${exploreState}`);
+    this.$location.url(`/explore?state=${exploreState}`);
   }
 
   addQuery(target) {

public/app/routes/routes.ts

@@ -112,7 +112,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'FolderDashboardsCtrl',
       controllerAs: 'ctrl',
     })
-    .when('/explore/:initial?', {
+    .when('/explore', {
       template: '<react-container />',
       resolve: {
         roles: () => ['Editor', 'Admin'],