mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
refactor(): began refactoring topnav directive to be more like the new style of components, and also make it usable on all pages including dashboard
This commit is contained in:
Torkel Ödegaard
27
public/app/core/components/navbar/navbar.html
Normal file
27
public/app/core/components/navbar/navbar.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner"><div class="container-fluid">
|
||||
<div class="top-nav">
|
||||
<div class="top-nav-btn top-nav-menu-btn">
|
||||
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
|
||||
<span class="top-nav-logo-background">
|
||||
<img class="logo-icon" src="img/fav32.png"></img>
|
||||
</span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="icon-circle top-nav-icon">
|
||||
<i ng-class="icon"></i>
|
||||
</span>
|
||||
|
||||
<a ng-href="{{titleUrl}}" class="top-nav-title">
|
||||
{{ctrl.title}}
|
||||
</a>
|
||||
<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div ng-transclude></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
36
public/app/core/components/navbar/navbar.ts
Normal file
36
public/app/core/components/navbar/navbar.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import config from 'app/core/config';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import coreModule from '../../core_module';
|
||||
|
||||
export class NavbarCtrl {
|
||||
contextSrv: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, contextSrv) {
|
||||
this.contextSrv = contextSrv;
|
||||
}
|
||||
}
|
||||
|
||||
export function navbarDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/core/components/navbar/navbar.html',
|
||||
controller: NavbarCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
transclude: true,
|
||||
scope: {
|
||||
title: "@",
|
||||
titleUrl: "@",
|
||||
},
|
||||
link: function(scope, elem, attrs) {
|
||||
scope.icon = attrs.icon;
|
||||
scope.subnav = attrs.subnav;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('navbar', navbarDirective);
|
||||
66
public/app/core/components/sidemenu/sidemenu.html
Normal file
66
public/app/core/components/sidemenu/sidemenu.html
Normal file
@@ -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>
|
||||
|
||||
148
public/app/core/components/sidemenu/sidemenu.ts
Normal file
148
public/app/core/components/sidemenu/sidemenu.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import config from 'app/core/config';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import coreModule from '../../core_module';
|
||||
|
||||
export class SideMenuCtrl {
|
||||
isSignedIn: boolean;
|
||||
showSignout: boolean;
|
||||
user: any;
|
||||
mainLinks: any;
|
||||
orgMenu: any;
|
||||
systemSection: any;
|
||||
grafanaVersion: any;
|
||||
appSubUrl: string;
|
||||
|
||||
/** @ngInject */
|
||||
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.contextSrv.sidemenu = false;
|
||||
});
|
||||
}
|
||||
|
||||
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: 'Preferences', url: this.getUrl('/profile')},
|
||||
{text: 'Account', url: this.getUrl('/profile')},
|
||||
];
|
||||
|
||||
if (this.isSignedIn) {
|
||||
this.orgMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self"});
|
||||
}
|
||||
|
||||
if (this.contextSrv.hasRole('Admin')) {
|
||||
this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
|
||||
this.orgMenu.push({
|
||||
text: "Preferences",
|
||||
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 (this.contextSrv.isGrafanaAdmin) {
|
||||
this.orgMenu.push({text: "Grafana adminstration", icon: "fa fa-fw fa-cogs", url: this.getUrl("/admin/settings")});
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
if (config.allowOrgCreate) {
|
||||
this.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: this.getUrl('/org/new')});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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",
|
||||
url: this.getUrl("/admin/settings"),
|
||||
});
|
||||
|
||||
this.mainLinks.push({
|
||||
text: "Global Users",
|
||||
icon: "fa fa-fw fa-user",
|
||||
url: this.getUrl("/admin/users"),
|
||||
});
|
||||
|
||||
this.mainLinks.push({
|
||||
text: "Global Orgs",
|
||||
icon: "fa fa-fw fa-users",
|
||||
url: 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();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function sideMenuDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/features/sidemenu/sidemenu.html',
|
||||
controller: SideMenuCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {},
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('sidemenu', sideMenuDirective);
|
||||
Reference in New Issue
Block a user