Refactoring apikeys into its own view

src/app/features/account/accountCtrl.js

@@ -9,20 +9,12 @@ function (angular) {
   module.controller('AccountCtrl', function($scope, $http, backendSrv) {
 
     $scope.collaborator = {};
-    $scope.token = {
-      role: "ReadWrite"
-    };
-    $scope.roleTypes = [
-      "ReadWrite",
-      "Read"
-    ];
-    $scope.showTokens = false;
+   $scope.showTokens = false;
 
     $scope.init = function() {
       $scope.getAccount();
       $scope.getOtherAccounts();
-      $scope.getTokens();
-      
+
     };
 
     $scope.getAccount = function() {
@@ -45,25 +37,6 @@ function (angular) {
       }).then($scope.getOtherAccounts);
     };
 
-    $scope.getTokens = function() {
-      backendSrv.get('/api/tokens').then(function(tokens) {
-        $scope.tokens = tokens;
-      });
-    }
-
-    $scope.removeToken = function(id) {
-      backendSrv.delete('/api/tokens/'+id).then($scope.getTokens);
-    }
-
-    $scope.addToken = function() {
-      backendSrv.request({
-        method: 'PUT',
-        url: '/api/tokens',
-        data: $scope.token,
-        desc: 'Add token'
-      }).then($scope.getTokens);
-    }
-
     $scope.update = function() {
       if (!$scope.accountForm.$valid) { return; }
 

src/app/features/account/apiKeysCtrl.js

@@ -0,0 +1,40 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('ApiKeysCtrl', function($scope, $http, backendSrv) {
+
+    $scope.roleTypes = ['Viewer', 'Editor', 'Admin'];
+    $scope.token = { role: 'Viewer' };
+
+    $scope.init = function() {
+      $scope.getTokens();
+    };
+
+    $scope.getTokens = function() {
+      backendSrv.get('/api/tokens').then(function(tokens) {
+        $scope.tokens = tokens;
+      });
+    };
+
+    $scope.removeToken = function(id) {
+      backendSrv.delete('/api/tokens/'+id).then($scope.getTokens);
+    };
+
+    $scope.addToken = function() {
+      backendSrv.request({
+        method: 'PUT',
+        url: '/api/tokens',
+        data: $scope.token,
+        desc: 'Add token'
+      }).then($scope.getTokens);
+    };
+
+    $scope.init();
+
+  });
+});

src/app/features/account/partials/account.html

@@ -1,4 +1,3 @@
-
 <div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account Settings'"></div>
 
 <div class="dashboard-edit-view">
@@ -81,45 +80,6 @@
 			</table>
 
 		</div>
-		<div class="clearfix"></div><br><br>
-		<div class="section">
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
-					<i class="fa fa-key"></i>
-					API Tokens
-					<a ng-click="showTokens=!showTokens">
-						<i class="fa fa-sort-up" ng-show="showTokens"></i>
-						<i class="fa fa-sort-down" ng-hide="showTokens"></i>
-					</a>
-				</div>
-			</div>
-			<br>
-			<div ng-show="showTokens">
-				<div class="editor-row">
-					<div class="editor-option">
-						<form name="addTokenrForm" class="form-inline">
-							<label class="small">Add a Token</label>
-							<input type="text" class="input-xlarge" ng-model='token.name' placeholder="Name"></input>
-							<select ng-model="token.role" ng-options="r for r in roleTypes"></select>
-							<button class="btn btn-success" ng-click="addToken()">Add</button>
-						</form>
-					</div>
-				</div>
-				<table class="grafana-options-table">
-					<tr ng-repeat="t in tokens">
-						<td>{{t.name}}</td>
-						<td>{{t.role}}</td>
-						<td>{{t.token}}</td>
-						<td style="width: 1%">
-							<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
-								<i class="fa fa-remove"></i>
-							</a>
-						</td>
-					</tr>
-				</table>
-			</div>
-
-		</div>
 	</div>
 </div>
 

src/app/features/account/partials/apikeys.html

@@ -0,0 +1,57 @@
+<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account > API Keys'"></div>
+
+<div class="dashboard-edit-view" style="min-height: 500px">
+
+	<div class="dashboard-editor-header">
+		<div class="dashboard-editor-title">
+			<i class="fa fa-key"></i>
+			API Tokens
+		</div>
+	</div>
+
+	<div class="dashboard-editor-body">
+		<div class="editor-row">
+			<div class="section">
+				<form name="addTokenrForm" class="form-inline tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item">
+							Add a Token
+						</li>
+						<li>
+							<input type="text" class="input-xlarge tight-form-input" ng-model='token.name' placeholder="Name"></input>
+						</li>
+						<li class="tight-form-item">
+							Role
+						</li>
+						<li>
+							<select class="input-small tight-form-input" ng-model="token.role" ng-options="r for r in roleTypes"></select>
+						</li>
+						<button class="btn btn-success tight-form-btn" ng-click="addToken()">Add</button>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</form>
+		</div>
+
+		<div class="editor-row row">
+			<div class="section span6">
+				<table class="grafana-options-table">
+					<tr ng-repeat="t in tokens">
+						<td>{{t.name}}</td>
+						<td>{{t.role}}</td>
+						<td>{{t.token}}</td>
+						<td style="width: 1%">
+							<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
+								<i class="fa fa-remove"></i>
+							</a>
+						</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+
+	</div>
+</div>
+
+
+

src/app/features/all.js

@@ -10,6 +10,7 @@ define([
   './account/accountCtrl',
   './account/collaboratorsCtrl',
   './account/datasourcesCtrl',
+  './account/apiKeysCtrl',
   './admin/accountsCtrl',
   './grafanaDatasource/datasource',
 ], function () {});

src/app/partials/sidemenu.html

@@ -31,6 +31,9 @@
 	<a class="pro-sidemenu-link" href="account/collaborators">
 		<i class="fa fa-users"></i>Collaborators
 	</a>
+	<a class="pro-sidemenu-link" href="account/apikeys">
+		<i class="fa fa-key"></i>API Keys
+	</a>
 	<a class="pro-sidemenu-link" href="admin/accounts" ng-if="grafana.user.isAdmin">
 		<i class="fa fa-institution"></i>Admin
 	</a>

src/app/routes/backend/all.js

@@ -38,6 +38,10 @@ define([
         templateUrl: 'app/features/account/partials/collaborators.html',
         controller : 'CollaboratorsCtrl',
       })
+      .when('/account/apikeys', {
+        templateUrl: 'app/features/account/partials/apikeys.html',
+        controller : 'ApiKeysCtrl',
+      })
       .when('/account', {
         templateUrl: 'app/features/account/partials/account.html',
         controller : 'AccountCtrl',