diff --git a/public/app/features/dashboard/acl/acl.html b/public/app/features/dashboard/acl/acl.html
new file mode 100644
index 00000000000..bdd908a66ba
--- /dev/null
+++ b/public/app/features/dashboard/acl/acl.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
{{permission.userLogin}}
+
{{permission.permissions}}
+
+
+
+
+
+
+
{{permission.userGroup}}
+
{{permission.permissions}}
+
+
+
+
+
+
diff --git a/public/app/features/dashboard/acl/acl.ts b/public/app/features/dashboard/acl/acl.ts
new file mode 100644
index 00000000000..f211c8bceaf
--- /dev/null
+++ b/public/app/features/dashboard/acl/acl.ts
@@ -0,0 +1,70 @@
+///
+
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+
+export class AclCtrl {
+ tabIndex: any;
+ dashboardId: number;
+ userPermissions: Permission[];
+ userGroupPermissions: Permission[];
+
+ /** @ngInject */
+ constructor(private backendSrv, private $scope, $sce) {
+ this.tabIndex = 0;
+ this.userPermissions = [];
+ this.userGroupPermissions = [];
+ this.get(this.$scope.dashboardId);
+ }
+
+ get(dashboardId: number) {
+ return this.backendSrv.get(`/api/dashboards/${dashboardId}/acl`)
+ .then(result => {
+ this.userPermissions = _.filter(result, p => { return p.userId > 0;});
+ this.userGroupPermissions = _.filter(result, p => { return p.userGroupId > 0;});
+ });
+ }
+
+ removeUserPermission(permission: Permission) {
+ this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user/${permission.userId}`).then(() => {
+ this.get(permission.dashboardId);
+ });
+ }
+
+ removeUserGroupPermission(permission: Permission) {
+ this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user-group/${permission.userGroupId}`).then(() => {
+ this.get(permission.dashboardId);
+ });
+ }
+
+ dismiss() {
+ appEvents.emit('hide-modal');
+ }
+}
+
+export function aclModal() {
+ return {
+ restrict: 'E',
+ templateUrl: 'public/app/features/dashboard/acl/acl.html',
+ controller: AclCtrl,
+ bindToController: true,
+ controllerAs: 'ctrl'
+ };
+}
+
+export interface Permission {
+ id: number;
+ orgId: number;
+ dashboardId: number;
+ created: Date;
+ updated: Date;
+ userId: number;
+ userLogin: number;
+ userEmail: string;
+ userGroupId: number;
+ userGroup: string;
+ permissions: number[];
+}
+
+coreModule.directive('aclModal', aclModal);
diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js
index cdea7aab3c6..3599cd05238 100644
--- a/public/app/features/dashboard/all.js
+++ b/public/app/features/dashboard/all.js
@@ -24,4 +24,5 @@ define([
'./ad_hoc_filters',
'./row/row_ctrl',
'./repeat_option/repeat_option',
+ './acl/acl',
], function () {});
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index e77c2bb3e09..02e2457fd7e 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -47,6 +47,15 @@ export class DashNavCtrl {
appEvents.emit('show-modal', {templateHtml: ''});
}
+ showAclModal() {
+ var modalScope = this.$scope.$new();
+ modalScope.dashboardId = this.dashboard.id;
+ appEvents.emit('show-modal', {
+ templateHtml: '',
+ scope: modalScope
+ });
+ }
+
starDashboard() {
if (this.dashboard.meta.isStarred) {
return this.backendSrv.delete('/api/user/stars/dashboard/' + this.dashboard.id).then(() => {
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index cecb9f80525..b94c19a8137 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -49,6 +49,7 @@
@import "components/panel_table";
@import "components/panel_text";
@import "components/panel_heatmap";
+@import "components/settings_permissions";
@import "components/tagsinput";
@import "components/tables_lists";
@import "components/search";
diff --git a/public/sass/components/_settings_permissions.scss b/public/sass/components/_settings_permissions.scss
new file mode 100644
index 00000000000..683676f3da8
--- /dev/null
+++ b/public/sass/components/_settings_permissions.scss
@@ -0,0 +1,38 @@
+.permissionlist {
+ .permissionlist__section {
+ margin-bottom: $spacer*2;
+ }
+
+ .permissionlist__section-header {
+ margin-bottom: $spacer;
+ display: flex;
+ }
+
+ .permissionlist__section-header h6 {
+ margin: auto 5px;
+ color: $text-color-weak;
+ }
+
+ .permissionlist__section-header__add-button {
+ margin-left: auto;
+ width: 105px;
+ }
+
+ .permissionlist__item {
+ display: flex;
+ flex-flow: row;
+ margin: 5px;
+ padding: 7px;
+ background-color: $tight-form-bg;
+
+ &:hover {
+ background-color: $tight-form-func-bg;
+ }
+ }
+
+ .permissionlist__item-buttons {
+ margin-left: auto;
+ }
+}
+
+