ux: switching orgs now works through modal

pkg/api/index.go

@@ -133,14 +133,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		}
 
 		data.NavTree = append(data.NavTree, profileNode)
-	} else {
-		data.NavTree = append(data.NavTree, &dtos.NavLink{
-			Text:         "Sign in",
-			Id:           "sign-in",
-			Icon:         "fa fa-fw fa-sign-in",
-			Url:          setting.AppSubUrl + "/login",
-			HideFromMenu: true,
-		})
 	}
 
 	if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {

public/app/core/components/help/help.html

@@ -4,15 +4,6 @@
 			<i class="fa fa-keyboard-o"></i>
 			<span class="p-l-1">Shortcuts</span>
 		</h2>
-
-		<!-- <ul class="gf&#45;tabs"> -->
-		<!-- 	<li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ['Shortcuts']"> -->
-		<!-- 		<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabindex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
-		<!-- 			{{::tab}} -->
-		<!-- 		</a> -->
-		<!-- 	</li> -->
-		<!-- </ul> -->
-
 		<a class="modal-header-close" ng-click="ctrl.dismiss();">
 			<i class="fa fa-remove"></i>
 		</a>

public/app/core/components/org_switcher.ts

@@ -0,0 +1,82 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+import config from 'app/core/config';
+import {contextSrv} from 'app/core/services/context_srv';
+
+const template = `
+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-random"></i>
+			<span class="p-l-1">Switch Organization</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="ctrl.dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content">
+    <div class="gf-form-group">
+    <table class="filter-table form-inline">
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Role</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="org in ctrl.orgs">
+					<td>{{org.name}}</td>
+					<td>{{org.role}}</td>
+					<td class="text-right">
+						<span class="btn btn-primary btn-mini" ng-show="org.orgId === ctrl.currentOrgId">
+							Current
+						</span>
+						<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== ctrl.currentOrgId">
+							Switch to
+						</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>`;
+
+export class OrgSwitchCtrl {
+  orgs: any[];
+  currentOrgId: any;
+
+  /** @ngInject */
+  constructor(private backendSrv) {
+    this.currentOrgId = contextSrv.user.orgId;
+    this.getUserOrgs();
+  }
+
+  getUserOrgs() {
+    this.backendSrv.get('/api/user/orgs').then(orgs => {
+      this.orgs = orgs;
+    });
+  }
+
+  setUsingOrg(org) {
+    this.backendSrv.post('/api/user/using/' + org.orgId).then(() => {
+      window.location.href = window.location.href;
+    });
+  }
+}
+
+export function orgSwitcher() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: OrgSwitchCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {dismiss: "&"},
+  };
+}
+
+coreModule.directive('orgSwitcher', orgSwitcher);

public/app/core/components/sidemenu/sidemenu.html

@@ -28,6 +28,16 @@
 </div>
 
 <div class="sidemenu__bottom">
+	<div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
+		<a href="{{ctrl.loginUrl}}" class="sidemenu-link" target="_self">
+			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
+		</a>
+		<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
+			<li class="side-menu-header">
+				<span class="sidemenu-item-text">Sign In</span>
+			</li>
+		</ul>
+	</div>
 
   <div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
     <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
@@ -57,54 +67,5 @@
       </li>
     </ul>
   </div>
-  <!-- <div ng&#45;show="::!ctrl.isSignedIn" class="sidemenu&#45;item"> -->
-  <!-- 	<a href="{{ctrl.loginUrl}}" class="sidemenu&#45;link" target="_self"> -->
-  <!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;in"></i></span> -->
-  <!-- 	</a> -->
-  <!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu" role="menu"> -->
-  <!-- 		<li class="side&#45;menu&#45;header"> -->
-  <!-- 			<span class="sidemenu&#45;item&#45;text">Sign in</span> -->
-  <!-- 		</li> -->
-  <!-- 	</ul> -->
-  <!-- </div> -->
-  <!--  -->
-  <!-- <div class="sidemenu&#45;item dropup dropdown" ng&#45;if="::ctrl.isSignedIn"> -->
-  <!-- 	<a class="sidemenu&#45;link" href="profile"> -->
-  <!-- 		<span class="icon&#45;circle sidemenu&#45;icon sidemenu&#45;org&#45;avatar"> -->
-  <!-- 			<img ng&#45;src="{{::ctrl.user.gravatarUrl}}"> -->
-  <!-- 			<span class="sidemenu&#45;org&#45;avatar&#45;&#45;missing"> -->
-  <!-- 				<i class="fa fa&#45;fw fa&#45;user"></i> -->
-  <!-- 			</span> -->
-  <!-- 		</span> -->
-  <!-- 	</a> -->
-  <!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu dropup" role="menu"> -->
-  <!-- 		<li ng&#45;repeat="menuItem in ctrl.profileNav.children" ng&#45;class="::menuItem.cssClass" ng&#45;hide="menuItem.hideFromMenu"> -->
-  <!-- 			<a href="{{::menuItem.url}}" ng&#45;show="::menuItem.url" target="{{::menuItem.target}}"> -->
-  <!-- 				<i class="{{::menuItem.icon}}" ng&#45;show="::menuItem.icon"></i> -->
-  <!-- 				{{::menuItem.text}} -->
-  <!-- 			</a> -->
-  <!-- 		</li> -->
-  <!-- 		<li class="side&#45;menu&#45;header"> -->
-  <!-- 			<span class="sidemenu&#45;item&#45;text">{{::ctrl.user.name}}</span> -->
-  <!-- 		</li> -->
-  <!-- 	</ul> -->
-  <!-- </div> -->
-  <!--  -->
-  <!-- <div class="sidemenu&#45;item dropdown dropup"> -->
-  <!-- 	<a href="http://docs.grafana.org" class="sidemenu&#45;link" target="_blank"> -->
-  <!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;question"></i></span> -->
-  <!-- 	</a> -->
-  <!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu" role="menu"> -->
-  <!-- 		<li ng&#45;repeat="menuItem in ctrl.helpNav.children" ng&#45;class="::menuItem.cssClass" ng&#45;hide="menuItem.hideFromMenu"> -->
-  <!-- 			<a href="{{::menuItem.url}}" ng&#45;show="::menuItem.url" target="{{::menuItem.target}}"> -->
-  <!-- 				<i class="{{::menuItem.icon}}" ng&#45;show="::menuItem.icon"></i> -->
-  <!-- 				{{::menuItem.text}} -->
-  <!-- 			</a> -->
-  <!-- 		</li> -->
-  <!-- 		<li class="side&#45;menu&#45;header"> -->
-  <!-- 			<span class="sidemenu&#45;item&#45;text">Help</span> -->
-  <!-- 		</li> -->
-  <!-- 	</ul> -->
-  <!-- </div> -->
 </div>
 

public/app/core/components/sidemenu/sidemenu.ts

@@ -9,18 +9,13 @@ export class SideMenuCtrl {
   user: any;
   mainLinks: any;
   bottomNav: any;
-  appSubUrl: string;
   loginUrl: string;
-  orgFilter: string;
-  orgItems: any;
-  orgs: any;
-  maxShownOrgs: number;
+  isSignedIn: boolean;
 
   /** @ngInject */
   constructor(private $scope, private $rootScope, private $location, private contextSrv, private backendSrv, private $element) {
+    this.isSignedIn = contextSrv.isSignedIn;
     this.user = contextSrv.user;
-    this.appSubUrl = config.appSubUrl;
-    this.maxShownOrgs = 10;
     this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu);
     this.bottomNav = _.filter(config.bootData.navTree, item => item.hideFromMenu);
     this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
@@ -38,17 +33,13 @@ export class SideMenuCtrl {
       }
       this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
     });
-
-    this.orgFilter = '';
   }
 
- getUrl(url) {
-   return config.appSubUrl + url;
- }
-
- search() {
-   this.$rootScope.appEvent('show-dash-search');
- }
+  switchOrg() {
+    this.$rootScope.appEvent('show-modal', {
+      templateHtml: '<org-switcher dismiss="dismiss()"></org-switcher>',
+    });
+  }
 }
 
 export function sideMenuDirective() {

public/app/core/core.ts

@@ -53,6 +53,7 @@ import {userPicker} from './components/user_picker';
 import {userGroupPicker} from './components/user_group_picker';
 import {geminiScrollbar} from './components/scroll/scroll';
 import {gfPageDirective} from './components/gf_page';
+import {orgSwitcher} from './components/org_switcher';
 
 export {
   arrayJoin,
@@ -84,5 +85,6 @@ export {
   userPicker,
   userGroupPicker,
   geminiScrollbar,
-  gfPageDirective
+  gfPageDirective,
+  orgSwitcher,
 };

public/app/core/services/context_srv.ts

@@ -9,6 +9,7 @@ export class User {
   isGrafanaAdmin: any;
   isSignedIn: any;
   orgRole: any;
+  orgId: number;
   timezone: string;
   helpFlags1: number;
   lightTheme: boolean;