WIP: rollback

public/app/features/dashboard/acl/acl.html

+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-share"></i>
+			<span class="p-l-1">Dashboard Permissions</span>
+		</h2>
+
+    <a class="modal-header-close" ng-click="ctrl.dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content acl-modal">
+    <div class="permissionlist">
+      <div class="permissionlist__section">
+        <div class="permissionlist__section-header">
+          <h6>Users</h6>
+          <a href="#" class="btn btn-success btn-small permissionlist__section-header__add-button">Add User</a>
+        </div>
+        <div class="permissionlist__item" ng-repeat="permission in ctrl.userPermissions">
+          <span class="permissionlist__item-text">{{permission.userLogin}}</span>
+          <div>{{permission.permissions}}</div>
+          <div class="permissionlist__item-buttons">
+            <a href="#" class="btn btn-inverse btn-small">
+              <i class="fa fa-edit"></i>
+              Edit
+            </a>
+            &nbsp;&nbsp;
+            <a ng-click="ctrl.removeUserPermission(permission)" class="btn btn-danger btn-small">
+              <i class="fa fa-remove"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="permissionlist__section">
+        <div class="permissionlist__section-header">
+          <h6>Groups</h6>
+          <a href="#" class="btn btn-success btn-small permissionlist__section-header__add-button">Add Group</a>
+        </div>
+        <div class="permissionlist__item" ng-repeat="permission in ctrl.userGroupPermissions">
+          <span class="permissionlist__item-text">{{permission.userGroup}}</span>
+          <div>{{permission.permissions}}</div>
+          <div class="permissionlist__item-buttons">
+            <a href="#" class="btn btn-inverse btn-small">
+              <i class="fa fa-edit"></i>
+              Edit
+            </a>
+            &nbsp;&nbsp;
+            <a ng-click="ctrl.removeUserGroupPermission(permission)" class="btn btn-danger btn-small">
+              <i class="fa fa-remove"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

public/app/features/dashboard/acl/acl.ts

+///<reference path="../../../headers/common.d.ts" />
+
+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);

public/app/features/dashboard/all.js

@@ -24,4 +24,5 @@ define([
   './ad_hoc_filters',
   './row/row_ctrl',
   './repeat_option/repeat_option',
+  './acl/acl',
 ], function () {});

public/app/features/dashboard/dashnav/dashnav.ts

@@ -47,6 +47,15 @@ export class DashNavCtrl {
       appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
     }
 
+    showAclModal() {
+      var modalScope = this.$scope.$new();
+      modalScope.dashboardId = this.dashboard.id;
+      appEvents.emit('show-modal', {
+        templateHtml: '<acl-modal></acl-modal>',
+        scope: modalScope
+      });
+    }
+
     starDashboard() {
       if (this.dashboard.meta.isStarred) {
         return this.backendSrv.delete('/api/user/stars/dashboard/' + this.dashboard.id).then(() =>  {

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";

public/sass/components/_settings_permissions.scss

+.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;
+  }
+}
+
+