mirror of https://github.com/grafana/grafana
Torkel Ödegaard
9 years ago
parent
aa9a92d2e0
commit
dfcb82d233
@ -0,0 +1,66 @@ |
||||
<ul class="sidemenu sidemenu-main"> |
||||
|
||||
<li class="sidemenu-org-section dropdown" ng-if="ctrl.isSignedIn"> |
||||
<div class="sidemenu-org" data-toggle="dropdown" ng-click="ctrl.openUserDropdown()"> |
||||
<div class="sidemenu-org-avatar"> |
||||
<img ng-src="{{ctrl.user.gravatarUrl}}"> |
||||
</div> |
||||
<div class="sidemenu-org-details"> |
||||
<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span> |
||||
<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span> |
||||
</div> |
||||
<i class="fa fa-caret-right small"></i> |
||||
</div> |
||||
<ul class="dropdown-menu" role="menu"> |
||||
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass"> |
||||
<span ng-if="menuItem.section">{{menuItem.section}}</span> |
||||
<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}"> |
||||
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> |
||||
{{menuItem.text}} |
||||
</a> |
||||
<a ng-click="menuItem.click()" ng-if="menuItem.click"> |
||||
<i class="{{menuItem.icon}}"></i> |
||||
{{menuItem.text}} |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
|
||||
<li class="sidemenu-system-section" ng-if="ctrl.systemSection"> |
||||
<div class="sidemenu-system-section-inner"> |
||||
<i class="fa fa-fw fa-cubes"></i> |
||||
<div class="sidemenu-section-text-wrapper"> |
||||
<div class="sidemenu-section-heading">Grafana Admin</div> |
||||
<div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
|
||||
<li ng-repeat="item in ctrl.mainLinks"> |
||||
<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}"> |
||||
<span class="icon-circle sidemenu-icon"> |
||||
<i class="{{item.icon}}" ng-show="item.icon"></i> |
||||
<img ng-src="{{item.img}}" ng-show="item.img"> |
||||
</span> |
||||
<span class="sidemenu-item-text">{{item.text}}</span> |
||||
</a> |
||||
</li> |
||||
|
||||
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="ctrl.systemSection"> |
||||
<li> |
||||
<a href="{{ctrl.appSubUrl}}/" class="sidemenu-item"> |
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span> |
||||
<span class="sidemenu-item-text">Exit admin</span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<li ng-if="!ctrl.isSignedIn"> |
||||
<a href="login" class="sidemenu-item" target="_self"> |
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span> |
||||
<span class="sidemenu-item-text">Sign in</span> |
||||
</a> |
||||
</li> |
||||
|
||||
</ul> |
||||
|
||||
@ -0,0 +1,146 @@ |
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import config from 'app/core/config'; |
||||
import store from 'app/core/store'; |
||||
import _ from 'lodash'; |
||||
import angular from 'angular'; |
||||
import $ from 'jquery'; |
||||
|
||||
class SideMenuCtrl { |
||||
isSignedIn: boolean; |
||||
showSignout: boolean; |
||||
user: any; |
||||
mainLinks: any; |
||||
orgMenu: any; |
||||
systemSection: any; |
||||
grafanaVersion: any; |
||||
appSubUrl: string; |
||||
|
||||
constructor(private $scope, private $location, private contextSrv, private backendSrv) { |
||||
this.isSignedIn = contextSrv.isSignedIn; |
||||
this.user = contextSrv.user; |
||||
this.appSubUrl = config.appSubUrl; |
||||
this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled']; |
||||
this.updateMenu(); |
||||
this.$scope.$on('$routeChangeSuccess', () => this.updateMenu()); |
||||
} |
||||
|
||||
getUrl(url) { |
||||
return config.appSubUrl + url; |
||||
} |
||||
|
||||
setupMainNav() { |
||||
this.mainLinks = config.bootData.mainNavLinks.map(item => { |
||||
return {text: item.text, icon: item.icon, img: item.img, url: this.getUrl(item.url)}; |
||||
}); |
||||
} |
||||
|
||||
openUserDropdown() { |
||||
this.orgMenu = [ |
||||
{section: 'You', cssClass: 'dropdown-menu-title'}, |
||||
{text: 'Profile', url: this.getUrl('/profile')}, |
||||
]; |
||||
|
||||
if (this.contextSrv.hasRole('Admin')) { |
||||
this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'}); |
||||
this.orgMenu.push({ |
||||
text: "Settings", |
||||
url: this.getUrl("/org"), |
||||
}); |
||||
this.orgMenu.push({ |
||||
text: "Users", |
||||
url: this.getUrl("/org/users"), |
||||
}); |
||||
this.orgMenu.push({ |
||||
text: "API Keys", |
||||
url: this.getUrl("/org/apikeys"), |
||||
}); |
||||
} |
||||
|
||||
this.orgMenu.push({cssClass: "divider"}); |
||||
|
||||
if (config.allowOrgCreate) { |
||||
this.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: this.getUrl('/org/new')}); |
||||
} |
||||
|
||||
this.backendSrv.get('/api/user/orgs').then(orgs => { |
||||
orgs.forEach(org => { |
||||
if (org.orgId === this.contextSrv.user.orgId) { |
||||
return; |
||||
} |
||||
|
||||
this.orgMenu.push({ |
||||
text: "Switch to " + org.name, |
||||
icon: "fa fa-fw fa-random", |
||||
click: () => { |
||||
this.switchOrg(org.orgId); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
this.orgMenu.push({cssClass: "divider"}); |
||||
|
||||
if (this.contextSrv.isGrafanaAdmin) { |
||||
this.orgMenu.push({text: "Server admin", url: this.getUrl("/admin/settings")}); |
||||
} |
||||
if (this.isSignedIn) { |
||||
this.orgMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self"}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
switchOrg(orgId) { |
||||
this.backendSrv.post('/api/user/using/' + orgId).then(() => { |
||||
window.location.href = window.location.href; |
||||
}); |
||||
}; |
||||
|
||||
setupAdminNav() { |
||||
this.systemSection = true; |
||||
this.grafanaVersion = config.buildInfo.version; |
||||
|
||||
this.mainLinks.push({ |
||||
text: "System info", |
||||
icon: "fa fa-fw fa-info", |
||||
href: this.getUrl("/admin/settings"), |
||||
}); |
||||
|
||||
this.mainLinks.push({ |
||||
text: "Global Users", |
||||
icon: "fa fa-fw fa-user", |
||||
href: this.getUrl("/admin/users"), |
||||
}); |
||||
|
||||
this.mainLinks.push({ |
||||
text: "Global Orgs", |
||||
icon: "fa fa-fw fa-users", |
||||
href: this.getUrl("/admin/orgs"), |
||||
}); |
||||
} |
||||
|
||||
updateMenu() { |
||||
this.systemSection = false; |
||||
this.mainLinks = []; |
||||
this.orgMenu = []; |
||||
|
||||
var currentPath = this.$location.path(); |
||||
if (currentPath.indexOf('/admin') === 0) { |
||||
this.setupAdminNav(); |
||||
} else { |
||||
this.setupMainNav(); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
function sideMenuDirective() { |
||||
return { |
||||
restrict: 'E', |
||||
templateUrl: 'app/features/sidemenu/sidemenu.html', |
||||
controller: SideMenuCtrl, |
||||
bindToController: true, |
||||
controllerAs: 'ctrl', |
||||
scope: {}, |
||||
}; |
||||
} |
||||
|
||||
angular.module('grafana.directives').directive('sidemenu', sideMenuDirective); |
||||
@ -1,69 +0,0 @@ |
||||
<div ng-controller="SideMenuCtrl" ng-init="init()"> |
||||
|
||||
<ul class="sidemenu sidemenu-main"> |
||||
|
||||
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn"> |
||||
<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()"> |
||||
<div class="sidemenu-org-avatar"> |
||||
<img ng-src="{{contextSrv.user.gravatarUrl}}"> |
||||
</div> |
||||
<div class="sidemenu-org-details"> |
||||
<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span> |
||||
<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span> |
||||
</div> |
||||
<i class="fa fa-caret-right small"></i> |
||||
</div> |
||||
<ul class="dropdown-menu" role="menu"> |
||||
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass"> |
||||
<span ng-if="menuItem.section">{{menuItem.section}}</span> |
||||
<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}"> |
||||
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> |
||||
{{menuItem.text}} |
||||
</a> |
||||
<a ng-click="menuItem.click()" ng-if="menuItem.click"> |
||||
<i class="{{menuItem.icon}}"></i> |
||||
{{menuItem.text}} |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
|
||||
<li class="sidemenu-system-section" ng-if="systemSection"> |
||||
<div class="sidemenu-system-section-inner"> |
||||
<i class="fa fa-fw fa-cubes"></i> |
||||
<div class="sidemenu-section-text-wrapper"> |
||||
<div class="sidemenu-section-heading">Grafana Admin</div> |
||||
<div class="sidemenu-section-tagline">v {{grafanaVersion}}</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
|
||||
<li ng-repeat="item in mainLinks"> |
||||
<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}"> |
||||
<span class="icon-circle sidemenu-icon"> |
||||
<i class="{{item.icon}}" ng-show="item.icon"></i> |
||||
<img ng-src="{{item.img}}" ng-show="item.img"> |
||||
</span> |
||||
<span class="sidemenu-item-text">{{item.text}}</span> |
||||
</a> |
||||
</li> |
||||
|
||||
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection"> |
||||
<li> |
||||
<a href="{{appSubUrl}}/" class="sidemenu-item"> |
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span> |
||||
<span class="sidemenu-item-text">Exit admin</span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<li ng-if="!contextSrv.isSignedIn"> |
||||
<a href="login" class="sidemenu-item" target="_self"> |
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span> |
||||
<span class="sidemenu-item-text">Sign in</span> |
||||
</a> |
||||
</li> |
||||
|
||||
</ul> |
||||
|
||||
</div> |
||||
Loading…
Reference in new issue