From: Kanika Murarka <kmurarka@redhat.com>
Date: Mon, 19 Nov 2018 08:13:52 +0000 (+0530)
Subject: mgr/dashboard: Show/Hide Grafana tabs according to user role
X-Git-Tag: v14.1.0~870^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=a84bed27b51f0b14431e5138a526190f39e2d558;p=ceph-ci.git

mgr/dashboard: Show/Hide Grafana tabs according to user role

Fixes: http://tracker.ceph.com/issues/36655
Signed-off-by: Kanika Murarka <kmurarka@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/controllers/grafana.py b/src/pybind/mgr/dashboard/controllers/grafana.py
index a18dd9c1853..e24c0cc161b 100644
--- a/src/pybind/mgr/dashboard/controllers/grafana.py
+++ b/src/pybind/mgr/dashboard/controllers/grafana.py
@@ -89,12 +89,8 @@ class Grafana(BaseController):
 
     @Endpoint()
     @ReadPermission
-    def status(self):
-        grafana = GrafanaRestClient.instance()
-        available, msg = grafana.is_service_online()
-        response = {'available': available}
-        if msg:
-            response['message'] = msg
+    def url(self):
+        response = {'instance': Settings.GRAFANA_API_URL}
 
         return response
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
index 974068b972b..0449b299cc9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
@@ -41,6 +41,7 @@
     </cd-cephfs-clients>
   </tab>
   <tab i18n-heading
+       *ngIf="grafanaPermission.read"
        heading="Performance Details">
     <cd-grafana [grafanaPath]="'rRfFzWtik/mds-performance?var-mds_servers=mds.' + grafanaId"
                 grafanaStyle="one">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
index a5ef1733c69..1db21cedac6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
@@ -5,8 +5,10 @@ import * as _ from 'lodash';
 
 import { CephfsService } from '../../../shared/api/cephfs.service';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
+import { Permission } from '../../../shared/models/permissions';
 import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
 import { DimlessPipe } from '../../../shared/pipes/dimless.pipe';
+import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 
 @Component({
   selector: 'cd-cephfs-detail',
@@ -32,16 +34,20 @@ export class CephfsDetailComponent implements OnChanges, OnInit {
   clientCount: number;
   mdsCounters = {};
   grafanaId: any;
+  grafanaPermission: Permission;
 
   objectValues = Object.values;
   clientsSelect = false;
 
   constructor(
+    private authStorageService: AuthStorageService,
     private cephfsService: CephfsService,
     private dimlessBinary: DimlessBinaryPipe,
     private dimless: DimlessPipe,
     private i18n: I18n
-  ) {}
+  ) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
+  }
 
   ngOnChanges() {
     if (this.selection.hasSelection) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
index 2f26bf7d46f..ca992c9f16b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
@@ -1,4 +1,4 @@
-<tabset *ngIf="selection.hasSingleSelection">
+<tabset *ngIf="selection.hasSingleSelection && grafanaPermission.read">
   <tab i18n-heading
        heading="Performance Details">
     <cd-grafana [grafanaPath]="'7IGu2Ttmz/host-details?'"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts
index f72b7b2b959..dfd3c16f31d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts
@@ -1,6 +1,8 @@
 import { Component, Input, OnChanges } from '@angular/core';
 
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+import { Permission } from '../../../../shared/models/permissions';
+import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
 
 @Component({
   selector: 'cd-host-details',
@@ -8,11 +10,14 @@ import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
   styleUrls: ['./host-details.component.scss']
 })
 export class HostDetailsComponent implements OnChanges {
+  grafanaPermission: Permission;
   @Input()
   selection: CdTableSelection;
   host: any;
 
-  constructor() {}
+  constructor(private authStorageService: AuthStorageService) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
+  }
 
   ngOnChanges() {
     if (this.selection.hasSelection) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
index 614f172cc8b..e514b610ed0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -25,6 +25,7 @@
     </cd-table>
   </tab>
   <tab i18n-heading
+       *ngIf="permissions.grafana.read"
        heading="Overall Performance">
     <cd-grafana [grafanaPath]="'lxnjcTAmk/host-overview?'"
                 grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
index c037ebac55d..a7238b7a3e9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
@@ -42,6 +42,7 @@
     </div>
   </tab>
   <tab i18n-heading
+       *ngIf="grafanaPermission.read"
        heading="Performance Details">
     <cd-grafana [grafanaPath]="'MKj_9ipiz/osd-device-details?var-osd_id=' + osd['id']"
                 grafanaStyle="GrafanaStyles.two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
index d4ace9fb377..766fc2dbc24 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
@@ -4,6 +4,8 @@ import * as _ from 'lodash';
 
 import { OsdService } from '../../../../shared/api/osd.service';
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+import { Permission } from '../../../../shared/models/permissions';
+import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
 
 @Component({
   selector: 'cd-osd-details',
@@ -15,8 +17,11 @@ export class OsdDetailsComponent implements OnChanges {
   selection: CdTableSelection;
 
   osd: any;
+  grafanaPermission: Permission;
 
-  constructor(private osdService: OsdService) {}
+  constructor(private osdService: OsdService, private authStorageService: AuthStorageService) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
+  }
 
   ngOnChanges() {
     this.osd = {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index dffa66292da..88a71102329 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -8,7 +8,7 @@
               (updateSelection)="updateSelection($event)"
               [updateSelectionOnRefresh]="'never'">
       <div class="table-actions btn-toolbar">
-        <cd-table-actions [permission]="permission"
+        <cd-table-actions [permission]="permissions.osd"
                           [selection]="selection"
                           class="btn-group"
                           [tableActions]="tableActions">
@@ -46,6 +46,7 @@
     </ng-template>
   </tab>
   <tab i18n-heading
+       *ngIf="permissions.grafana.read"
        heading="Overall Performance">
     <cd-grafana [grafanaPath]="'lo02I1Aiz/osd-overview?'"
                 grafanaStyle="three">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
index 53fb10e29a3..7288cee3e26 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
@@ -51,6 +51,7 @@ describe('OsdListComponent', () => {
     component.selection.selected = selection;
     component.selection.update();
     component.osds = data;
+    component.permissions = fakeAuthStorageService.getPermissions();
   };
 
   const openActionModal = (actionName) => {
@@ -110,7 +111,7 @@ describe('OsdListComponent', () => {
     };
 
     beforeEach(() => {
-      permissionHelper = new PermissionHelper(component.permission, () =>
+      permissionHelper = new PermissionHelper(component.permissions.osd, () =>
         getTableActionComponent()
       );
       scenario = {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 1aadc0219eb..e685e1de85a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -12,7 +12,7 @@ import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
 import { CdTableAction } from '../../../../shared/models/cd-table-action';
 import { CdTableColumn } from '../../../../shared/models/cd-table-column';
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
-import { Permission } from '../../../../shared/models/permissions';
+import { Permissions } from '../../../../shared/models/permissions';
 import { DimlessBinaryPipe } from '../../../../shared/pipes/dimless-binary.pipe';
 import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
 import { OsdFlagsModalComponent } from '../osd-flags-modal/osd-flags-modal.component';
@@ -40,7 +40,7 @@ export class OsdListComponent implements OnInit {
   @ViewChild('safeToDestroyBodyTpl')
   safeToDestroyBodyTpl: TemplateRef<any>;
 
-  permission: Permission;
+  permissions: Permissions;
   tableActions: CdTableAction[];
   bsModalRef: BsModalRef;
   columns: CdTableColumn[];
@@ -59,7 +59,7 @@ export class OsdListComponent implements OnInit {
     private modalService: BsModalService,
     private i18n: I18n
   ) {
-    this.permission = this.authStorageService.getPermissions().osd;
+    this.permissions = this.authStorageService.getPermissions();
     this.tableActions = [
       {
         name: this.i18n('Scrub'),
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
index 7b5ec49d5eb..3dea670f777 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
@@ -10,7 +10,7 @@
               selectionType="single"
               (updateSelection)="updateSelection($event)">
       <cd-table-actions class="table-actions"
-                        [permission]="permission"
+                        [permission]="permissions.pool"
                         [selection]="selection"
                         [tableActions]="tableActions">
       </cd-table-actions>
@@ -23,6 +23,7 @@
           </cd-table-key-value>
         </tab>
         <tab i18n-heading
+             *ngIf="permissions.grafana.read"
              heading="Performance Details">
           <cd-grafana [grafanaPath]="'8ypfkWpik/ceph-pool-detail?var-pool_name='
                       + selection.first()['pool_name']"
@@ -34,6 +35,7 @@
   </tab>
 
   <tab i18n-heading
+       *ngIf="permissions.grafana.read"
        heading="Overall Performance">
     <cd-grafana [grafanaPath]="'z99hzWtmk/ceph-pools-overview?'"
                 grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.spec.ts
index 52c6674bdac..c24138b98cf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.spec.ts
@@ -37,7 +37,7 @@ describe('PoolListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PoolListComponent);
     component = fixture.componentInstance;
-    component.permission.read = true;
+    component.permissions.pool.read = true;
     poolService = TestBed.get(PoolService);
     fixture.detectChanges();
   });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
index 83b9774d43b..12d094b06c4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
@@ -13,7 +13,7 @@ import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { ExecutingTask } from '../../../shared/models/executing-task';
 import { FinishedTask } from '../../../shared/models/finished-task';
-import { Permission } from '../../../shared/models/permissions';
+import { Permissions } from '../../../shared/models/permissions';
 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 import { TaskListService } from '../../../shared/services/task-list.service';
 import { TaskWrapperService } from '../../../shared/services/task-wrapper.service';
@@ -34,7 +34,7 @@ export class PoolListComponent implements OnInit {
   selection = new CdTableSelection();
   modalRef: BsModalRef;
   executingTasks: ExecutingTask[] = [];
-  permission: Permission;
+  permissions: Permissions;
   tableActions: CdTableAction[];
   viewCacheStatusList: any[];
 
@@ -46,7 +46,7 @@ export class PoolListComponent implements OnInit {
     private modalService: BsModalService,
     private i18n: I18n
   ) {
-    this.permission = this.authStorageService.getPermissions().pool;
+    this.permissions = this.authStorageService.getPermissions();
     this.tableActions = [
       {
         permission: 'create',
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
index 2881e958c1c..93a0c17e2c6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
@@ -12,6 +12,7 @@
     </cd-table-performance-counter>
   </tab>
   <tab i18n-heading
+       *ngIf="grafanaPermission.read"
        heading="Performance Details">
     <cd-grafana [grafanaPath]="'x5ARzZtmk/rgw-instance-detail?var-rgw_servers=rgw.' + this.selection.first().id"
                 grafanaStyle="one">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts
index 4c6135accfe..ff9badf3d89 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts
@@ -4,6 +4,8 @@ import * as _ from 'lodash';
 
 import { RgwDaemonService } from '../../../shared/api/rgw-daemon.service';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
+import { Permission } from '../../../shared/models/permissions';
+import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 
 @Component({
   selector: 'cd-rgw-daemon-details',
@@ -13,11 +15,17 @@ import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 export class RgwDaemonDetailsComponent implements OnChanges {
   metadata: any;
   serviceId = '';
+  grafanaPermission: Permission;
 
   @Input()
   selection: CdTableSelection;
 
-  constructor(private rgwDaemonService: RgwDaemonService) {}
+  constructor(
+    private rgwDaemonService: RgwDaemonService,
+    private authStorageService: AuthStorageService
+  ) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
+  }
 
   ngOnChanges() {
     // Get the service id of the first selected row.
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
index 73fbc0f233a..ee417def63a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
@@ -12,6 +12,7 @@
   </tab>
 
   <tab i18n-heading
+       *ngIf="grafanaPermission.read"
        heading="Overall Performance">
     <cd-grafana [grafanaPath]="'WAkugZpiz/rgw-overview?'"
                 grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts
index d0eaaac9d43..7f689615527 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts
@@ -6,7 +6,9 @@ import { RgwDaemonService } from '../../../shared/api/rgw-daemon.service';
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
+import { Permission } from '../../../shared/models/permissions';
 import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
+import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 
 @Component({
   selector: 'cd-rgw-daemon-list',
@@ -17,12 +19,15 @@ export class RgwDaemonListComponent {
   columns: CdTableColumn[] = [];
   daemons: object[] = [];
   selection: CdTableSelection = new CdTableSelection();
+  grafanaPermission: Permission;
 
   constructor(
     private rgwDaemonService: RgwDaemonService,
+    private authStorageService: AuthStorageService,
     cephShortVersionPipe: CephShortVersionPipe,
     private i18n: I18n
   ) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
     this.columns = [
       {
         name: this.i18n('ID'),
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/grafana.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/grafana.service.spec.ts
new file mode 100644
index 00000000000..4deecf42177
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/grafana.service.spec.ts
@@ -0,0 +1,34 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { configureTestBed } from '../../../testing/unit-test-helper';
+import { GrafanaService } from './grafana.service';
+
+describe('GrafanaService', () => {
+  let service: GrafanaService;
+  let httpTesting: HttpTestingController;
+
+  configureTestBed({
+    providers: [GrafanaService],
+    imports: [HttpClientTestingModule]
+  });
+
+  beforeEach(() => {
+    service = TestBed.get(GrafanaService);
+    httpTesting = TestBed.get(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTesting.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should get protocol', () => {
+    service.getGrafanaApiUrl().subscribe();
+    const req = httpTesting.expectOne('api/grafana/url');
+    expect(req.request.method).toBe('GET');
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/grafana.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/grafana.service.ts
new file mode 100755
index 00000000000..6a37c2179ed
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/grafana.service.ts
@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { ApiModule } from './api.module';
+
+@Injectable({
+  providedIn: ApiModule
+})
+export class GrafanaService {
+  constructor(private http: HttpClient) {}
+
+  getGrafanaApiUrl() {
+    return this.http.get('api/grafana/url');
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/settings.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/settings.service.spec.ts
deleted file mode 100644
index ef96ac1e4b2..00000000000
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/settings.service.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-
-import { configureTestBed } from '../../../testing/unit-test-helper';
-import { SettingsService } from './settings.service';
-
-describe('SettingsService', () => {
-  let service: SettingsService;
-  let httpTesting: HttpTestingController;
-
-  configureTestBed({
-    providers: [SettingsService],
-    imports: [HttpClientTestingModule]
-  });
-
-  beforeEach(() => {
-    service = TestBed.get(SettingsService);
-    httpTesting = TestBed.get(HttpTestingController);
-  });
-
-  afterEach(() => {
-    httpTesting.verify();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should get protocol', () => {
-    service.getGrafanaApiUrl().subscribe();
-    const req = httpTesting.expectOne('api/settings/GRAFANA_API_URL');
-    expect(req.request.method).toBe('GET');
-  });
-});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/settings.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/settings.service.ts
deleted file mode 100755
index db52c968ba5..00000000000
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/settings.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-
-import { ApiModule } from './api.module';
-
-@Injectable({
-  providedIn: ApiModule
-})
-export class SettingsService {
-  constructor(private http: HttpClient) {}
-
-  getGrafanaApiUrl() {
-    return this.http.get('api/settings/GRAFANA_API_URL');
-  }
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
index 8bdca309858..a295049e02f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
@@ -5,7 +5,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AlertModule } from 'ngx-bootstrap/alert';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
-import { SettingsService } from '../../../shared/api/settings.service';
+import { GrafanaService } from '../../../shared/api/grafana.service';
+
 import { SummaryService } from '../../../shared/services/summary.service';
 import { CephReleaseNamePipe } from '../../pipes/ceph-release-name.pipe';
 import { InfoPanelComponent } from '../info-panel/info-panel.component';
@@ -19,7 +20,7 @@ describe('GrafanaComponent', () => {
   configureTestBed({
     declarations: [GrafanaComponent, InfoPanelComponent, LoadingPanelComponent],
     imports: [AlertModule.forRoot(), HttpClientTestingModule, RouterTestingModule],
-    providers: [CephReleaseNamePipe, SettingsService, SummaryService, i18nProviders]
+    providers: [CephReleaseNamePipe, GrafanaService, SummaryService, i18nProviders]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
index 00fd332981a..77dcfa232ee 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
@@ -3,9 +3,9 @@ import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SafeUrl } from '@angular/platform-browser';
 
-import { SettingsService } from '../../api/settings.service';
-import { CephReleaseNamePipe } from '../../pipes/ceph-release-name.pipe';
-import { SummaryService } from '../../services/summary.service';
+import { GrafanaService } from '../../../shared/api/grafana.service';
+import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
+import { SummaryService } from '../../../shared/services/summary.service';
 
 @Component({
   selector: 'cd-grafana',
@@ -38,7 +38,7 @@ export class GrafanaComponent implements OnInit, OnChanges {
   constructor(
     private summaryService: SummaryService,
     private sanitizer: DomSanitizer,
-    private settingsService: SettingsService,
+    private grafanaService: GrafanaService,
     private cephReleaseNamePipe: CephReleaseNamePipe
   ) {}
 
@@ -64,8 +64,8 @@ export class GrafanaComponent implements OnInit, OnChanges {
       }, 0);
     });
 
-    this.settingsService.getGrafanaApiUrl().subscribe((data: any) => {
-      this.grafanaUrl = data.value;
+    this.grafanaService.getGrafanaApiUrl().subscribe((data: any) => {
+      this.grafanaUrl = data.instance;
       if (this.grafanaUrl === '') {
         this.grafanaExist = false;
         return;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts
index e8a50e9e42b..0938e264b65 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts
@@ -26,6 +26,7 @@ export class Permissions {
   manager: Permission;
   log: Permission;
   user: Permission;
+  grafana: Permission;
 
   constructor(serverPermissions: any) {
     this.hosts = new Permission(serverPermissions['hosts']);
@@ -41,5 +42,6 @@ export class Permissions {
     this.manager = new Permission(serverPermissions['manager']);
     this.log = new Permission(serverPermissions['log']);
     this.user = new Permission(serverPermissions['user']);
+    this.grafana = new Permission(serverPermissions['grafana']);
   }
 }