Show links based on permissions the user have.

client/app/components/app-header/app-header.html

@@ -32,7 +32,7 @@
             <li><a href="queries">Queries</a></li>
           </ul>
         </li>
-        <li>
+        <li ng-if="$ctrl.showAlertsLink">
           <a href="alerts">Alerts</a>
         </li>
       </ul>
@@ -59,7 +59,7 @@
               <a ng-href="users/{{$ctrl.currentUser.id}}">
                 <div class="row">
                   <div class="col-sm-2">
-                    <img ng-src="{{$ctrl.currentUser.gravatar_url}}" size="40px" class="img-circle"/>
+                    <img ng-src="{{$ctrl.currentUser.gravatar_url}}" size="40px" class="img-circle" />
                   </div>
                   <div class="col-sm-10">
                     <p><strong>{{$ctrl.currentUser.name}}</strong></p>
@@ -68,15 +68,15 @@
               </a>
             </li>
             <li class="divider" ng-if="$ctrl.currentUser.hasPermission('super_admin')">
-            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')"><a href="admin/status">System Status</a></li>
-            <li class="divider">
-            </li>
-            <li>
-              <a ng-click="$ctrl.logout()">Log out</a>
-            </li>
+              <li ng-if="$ctrl.currentUser.hasPermission('super_admin')"><a href="admin/status">System Status</a></li>
+              <li class="divider">
+              </li>
+              <li>
+                <a ng-click="$ctrl.logout()">Log out</a>
+              </li>
           </ul>
-        </li>
+          </li>
       </ul>
     </div>
   </div>
-</nav>
+</nav>

client/app/components/app-header/index.js

@@ -11,6 +11,7 @@ function controller($rootScope, $location, $uibModal, Auth, currentUser, clientC
   this.basePath = clientConfig.basePath;
   this.currentUser = currentUser;
   this.showQueriesMenu = currentUser.hasPermission('view_query');
+  this.showAlertsLink = currentUser.hasPermission('list_alerts');
   this.showNewQueryMenu = currentUser.hasPermission('create_query');
   this.showSettingsMenu = currentUser.hasPermission('list_users');
   this.showDashboardsMenu = currentUser.hasPermission('list_dashboards');

client/app/components/settings-screen.html

@@ -8,11 +8,11 @@
       <li ng-class="{'active': usersPage }" ng-if="showUsersLink"><a href="users">Users</a></li>
       <li ng-class="{'active': groupsPage }" ng-if="showGroupsLink"><a href="groups">Groups</a></li>
       <li ng-class="{'active': destinationsPage }" ng-if="showDestinationsLink"><a href="destinations">Alert Destinations</a></li>
-      <li ng-class="{'active': snippetsPage }"><a href="query_snippets">Query Snippets</a></li>
+      <li ng-class="{'active': snippetsPage }" ng-if="showQuerySnippetsLink"><a href="query_snippets">Query Snippets</a></li>
     </ul>
 
     <div ng-transclude>
 
     </div>
   </div>
-</div>
+</div>

client/app/components/settings-screen.js

@@ -2,22 +2,22 @@ import startsWith from 'underscore.string/startsWith';
 import template from './settings-screen.html';
 
 export default function init(ngModule) {
-  ngModule.directive('settingsScreen', $location =>
-    ({
-      restrict: 'E',
-      transclude: true,
-      template,
-      controller($scope, currentUser) {
-        $scope.usersPage = startsWith($location.path(), '/users');
-        $scope.groupsPage = startsWith($location.path(), '/groups');
-        $scope.dsPage = startsWith($location.path(), '/data_sources');
-        $scope.destinationsPage = startsWith($location.path(), '/destinations');
-        $scope.snippetsPage = startsWith($location.path(), '/query_snippets');
+  ngModule.directive('settingsScreen', $location => ({
+    restrict: 'E',
+    transclude: true,
+    template,
+    controller($scope, currentUser) {
+      $scope.usersPage = startsWith($location.path(), '/users');
+      $scope.groupsPage = startsWith($location.path(), '/groups');
+      $scope.dsPage = startsWith($location.path(), '/data_sources');
+      $scope.destinationsPage = startsWith($location.path(), '/destinations');
+      $scope.snippetsPage = startsWith($location.path(), '/query_snippets');
 
-        $scope.showGroupsLink = currentUser.hasPermission('list_users');
-        $scope.showUsersLink = currentUser.hasPermission('list_users');
-        $scope.showDsLink = currentUser.hasPermission('admin');
-        $scope.showDestinationsLink = currentUser.hasPermission('admin');
-      },
-    }));
+      $scope.showGroupsLink = currentUser.hasPermission('list_users');
+      $scope.showUsersLink = currentUser.hasPermission('list_users');
+      $scope.showDsLink = currentUser.hasPermission('admin');
+      $scope.showDestinationsLink = currentUser.hasPermission('admin');
+      $scope.showQuerySnippetsLink = currentUser.hasPermission('create_query');
+    },
+  }));
 }

client/app/pages/home/home.html

@@ -1,34 +1,33 @@
 <div class="container">
-  <div class="tile m-t-10 m-b-5">
+  <div class="tile m-t-10 m-b-5" ng-if="$ctrl.canCreateQuery || $ctrl.canCreateDashboard || $ctrl.canCreateAlert">
     <div class="t-body p-5">
       <a href="queries/new" ng-show="$ctrl.canCreateQuery" class="btn btn-default">New Query</a>
       <button ng-show="$ctrl.canCreateDashboard" class="btn btn-default" ng-click="$ctrl.newDashboard()">New Dashboard
       </button>
-      <a href="alerts/new" class="btn btn-default">New Alert</a>
+      <a href="alerts/new" ng-show="$ctrl.canCreateAlert" class="btn btn-default">New Alert</a>
     </div>
   </div>
 
   <div class="tile">
     <div class="t-body tb-padding">
       <div class="row">
-          <div class="col-md-6">
-            <p class="f-500 m-b-20 c-black">Recent Dashboards</p>
-            <div class="list-group">
-              <a ng-href="dashboard/{{dashboard.slug}}" class="list-group-item" ng-repeat="dashboard in $ctrl.recentDashboards">
+        <div class="col-md-6">
+          <p class="f-500 m-b-20 c-black">Recent Dashboards</p>
+          <div class="list-group">
+            <a ng-href="dashboard/{{dashboard.slug}}" class="list-group-item" ng-repeat="dashboard in $ctrl.recentDashboards">
                 {{dashboard.name}} <span class="label label-default" ng-if="dashboard.is_draft">Unpublished</span>
               </a>
-            </div>
           </div>
+        </div>
 
-          <div class="col-md-6">
-            <p class="f-500 m-b-20 c-black">Recent Queries</p>
-            <div class="list-group">
-              <a ng-href="queries/{{query.id}}" class="list-group-item"
-                 ng-repeat="query in $ctrl.recentQueries">{{query.name}} <span class="label label-default" ng-if="query.is_draft">Unpublished</span></a>
-            </div>
+        <div class="col-md-6">
+          <p class="f-500 m-b-20 c-black">Recent Queries</p>
+          <div class="list-group">
+            <a ng-href="queries/{{query.id}}" class="list-group-item" ng-repeat="query in $ctrl.recentQueries">{{query.name}} <span class="label label-default" ng-if="query.is_draft">Unpublished</span></a>
           </div>
+        </div>
       </div>
 
     </div>
   </div>
-</div>
+</div>

client/app/pages/home/index.js

@@ -6,6 +6,7 @@ function HomeCtrl($scope, $uibModal, currentUser, Events, Dashboard, Query) {
   // todo: maybe this should come from some serivce as we have this logic elsewhere.
   this.canCreateQuery = currentUser.hasPermission('create_query');
   this.canCreateDashboard = currentUser.hasPermission('create_dashboard');
+  this.canCreateAlert = currentUser.hasPermission('list_alerts');
 
   this.recentQueries = Query.recent();
   this.recentDashboards = Dashboard.recent();