Merge pull request #12108 from grafana/davkal/12001-explore-permissions

Restrict Explore UI to Editor and Admin roles

pkg/api/api.go

@@ -77,6 +77,9 @@ 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("/playlists/", reqSignedIn, Index)
 	r.Get("/playlists/*", reqSignedIn, Index)
 	r.Get("/alerting/", reqSignedIn, Index)

pkg/api/index.go

@@ -128,7 +128,7 @@ func setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, error) {
 		Children: dashboardChildNavs,
 	})
 
-	if setting.ExploreEnabled {
+	if setting.ExploreEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
 		data.NavTree = append(data.NavTree, &dtos.NavLink{
 			Text:     "Explore",
 			Id:       "explore",

public/app/core/services/keybindingSrv.ts

@@ -14,7 +14,7 @@ export class KeybindingSrv {
   timepickerOpen = false;
 
   /** @ngInject */
-  constructor(private $rootScope, private $location, private datasourceSrv, private timeSrv) {
+  constructor(private $rootScope, private $location, private datasourceSrv, private timeSrv, private contextSrv) {
     // clear out all shortcuts on route change
     $rootScope.$on('$routeChangeSuccess', () => {
       Mousetrap.reset();
@@ -177,21 +177,24 @@ export class KeybindingSrv {
       }
     });
 
-    this.bind('x', async () => {
+    // jump to explore if permissions allow
-      if (dashboard.meta.focusPanelId) {
+    if (this.contextSrv.isEditor) {
-        const panel = dashboard.getPanelById(dashboard.meta.focusPanelId);
+      this.bind('x', async () => {
-        const datasource = await this.datasourceSrv.get(panel.datasource);
+        if (dashboard.meta.focusPanelId) {
-        if (datasource && datasource.supportsExplore) {
+          const panel = dashboard.getPanelById(dashboard.meta.focusPanelId);
-          const range = this.timeSrv.timeRangeForUrl();
+          const datasource = await this.datasourceSrv.get(panel.datasource);
-          const state = {
+          if (datasource && datasource.supportsExplore) {
-            ...datasource.getExploreState(panel),
+            const range = this.timeSrv.timeRangeForUrl();
-            range,
+            const state = {
-          };
+              ...datasource.getExploreState(panel),
-          const exploreState = encodePathComponent(JSON.stringify(state));
+              range,
-          this.$location.url(`/explore/${exploreState}`);
+            };
+            const exploreState = encodePathComponent(JSON.stringify(state));
+            this.$location.url(`/explore/${exploreState}`);
+          }
         }
-      }
+      });
-    });
+    }
 
     // delete panel
     this.bind('p r', () => {

public/app/features/panel/metrics_panel_ctrl.ts

@@ -1,9 +1,9 @@
-import config from 'app/core/config';
 import $ from 'jquery';
 import _ from 'lodash';
+
+import config from 'app/core/config';
 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';
@@ -16,6 +16,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   datasourceName: any;
   $q: any;
   $timeout: any;
+  contextSrv: any;
   datasourceSrv: any;
   timeSrv: any;
   templateSrv: any;
@@ -37,6 +38,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     // make metrics tab the default
     this.editorTabIndex = 1;
     this.$q = $injector.get('$q');
+    this.contextSrv = $injector.get('contextSrv');
     this.datasourceSrv = $injector.get('datasourceSrv');
     this.timeSrv = $injector.get('timeSrv');
     this.templateSrv = $injector.get('templateSrv');
@@ -312,7 +314,7 @@ class MetricsPanelCtrl extends PanelCtrl {
 
   getAdditionalMenuItems() {
     const items = [];
-    if (this.datasource && this.datasource.supportsExplore) {
+    if (this.contextSrv.isEditor && this.datasource && this.datasource.supportsExplore) {
       items.push({
         text: 'Explore',
         click: 'ctrl.explore();',

public/app/features/panel/specs/metrics_panel_ctrl.jest.ts

@@ -24,8 +24,9 @@ describe('MetricsPanelCtrl', () => {
       });
     });
 
-    describe('and has datasource set that supports explore', () => {
+    describe('and has datasource set that supports explore and user has powers', () => {
       beforeEach(() => {
+        ctrl.contextSrv = { isEditor: true };
         ctrl.datasource = { supportsExplore: true };
         additionalItems = ctrl.getAdditionalMenuItems();
       });

public/app/routes/ReactContainer.tsx

@@ -6,6 +6,7 @@ import coreModule from 'app/core/core_module';
 import { store } from 'app/stores/store';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { ContextSrv } from 'app/core/services/context_srv';
 
 function WrapInProvider(store, Component, props) {
   return (
@@ -16,16 +17,31 @@ function WrapInProvider(store, Component, props) {
 }
 
 /** @ngInject */
-export function reactContainer($route, $location, backendSrv: BackendSrv, datasourceSrv: DatasourceSrv) {
+export function reactContainer(
+  $route,
+  $location,
+  backendSrv: BackendSrv,
+  datasourceSrv: DatasourceSrv,
+  contextSrv: ContextSrv
+) {
   return {
     restrict: 'E',
     template: '',
     link(scope, elem) {
-      let component = $route.current.locals.component;
+      // Check permissions for this component
+      const { roles } = $route.current.locals;
+      if (roles && roles.length) {
+        if (!roles.some(r => contextSrv.hasRole(r))) {
+          $location.url('/');
+        }
+      }
+
+      let { component } = $route.current.locals;
       // Dynamic imports return whole module, need to extract default export
       if (component.default) {
         component = component.default;
       }
+
       const props = {
         backendSrv: backendSrv,
         datasourceSrv: datasourceSrv,

public/app/routes/routes.ts

@@ -113,6 +113,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
     .when('/explore/:initial?', {
       template: '<react-container />',
       resolve: {
+        roles: () => ['Editor', 'Admin'],
         component: () => import(/* webpackChunkName: "explore" */ 'app/containers/Explore/Wrapper'),
       },
     })

public/test/specs/helpers.ts

@@ -11,6 +11,7 @@ export function ControllerTestContext() {
   this.$element = {};
   this.$sanitize = {};
   this.annotationsSrv = {};
+  this.contextSrv = {};
   this.timeSrv = new TimeSrvStub();
   this.templateSrv = new TemplateSrvStub();
   this.datasourceSrv = {
@@ -27,6 +28,7 @@ export function ControllerTestContext() {
 
   this.providePhase = function(mocks) {
     return angularMocks.module(function($provide) {
+      $provide.value('contextSrv', self.contextSrv);
       $provide.value('datasourceSrv', self.datasourceSrv);
       $provide.value('annotationsSrv', self.annotationsSrv);
       $provide.value('timeSrv', self.timeSrv);