ux: switching orgs now works through modal

This commit is contained in:
Torkel Ödegaard
2017-08-16 15:37:13 +02:00
parent 95f5c84a57
commit a4da0adf38
7 changed files with 103 additions and 83 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -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);

View File

@ -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>

View File

@ -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() {

View File

@ -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,
};

View File

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