Refactoring of grafana (root scope view model), into contextSrv, made sidemenu always hide after login

This commit is contained in:
Torkel Ödegaard 2015-02-08 09:00:58 +01:00
parent f82cb3aefe
commit ab55412264
26 changed files with 106 additions and 105 deletions

View File

@ -8,13 +8,13 @@ function (angular) {
var module = angular.module('grafana.controllers');
module.controller('ErrorCtrl', function($scope) {
module.controller('ErrorCtrl', function($scope, contextSrv) {
var showSideMenu = $scope.grafana.sidemenu;
$scope.grafana.sidemenu = false;
var showSideMenu = contextSrv.sidemenu;
contextSrv.sidemenu = false;
$scope.$on('$destroy', function() {
$scope.grafana.sidemenu = showSideMenu;
$scope.contextSrv.sidemenu = showSideMenu;
});
});

View File

@ -10,11 +10,11 @@ function (angular, config, _, $, store) {
var module = angular.module('grafana.controllers');
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv, $timeout) {
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) {
$scope.init = function() {
$scope.grafana = {};
$scope.grafana.version = grafanaVersion;
$scope.contextSrv = contextSrv;
$scope._ = _;
$rootScope.profilingEnabled = store.getBool('profilingEnabled');
@ -27,30 +27,12 @@ function (angular, config, _, $, store) {
utilSrv.init();
$scope.dashAlerts = alertSrv;
$scope.grafana.lightTheme = false;
$scope.grafana.user = userSrv.getSignedInUser();
$scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
$scope.topnav = { title: 'Grafana' };
$scope.onAppEvent('logged-out', function() {
$scope.grafana.sidemenu = false;
$scope.grafana.user = {};
});
};
$scope.initDashboard = function(dashboardData, viewScope) {
$controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
};
$scope.toggleSideMenu = function() {
$scope.grafana.sidemenu = !$scope.grafana.sidemenu;
store.set('grafana.sidemenu', $scope.grafana.sidemenu);
$timeout(function() {
$scope.$broadcast("render");
}, 50);
};
$rootScope.onAppEvent = function(name, callback) {
var unbind = $rootScope.$on(name, callback);
this.$on('$destroy', unbind);

View File

@ -7,14 +7,14 @@ function (angular, config) {
var module = angular.module('grafana.controllers');
module.controller('LoginCtrl', function($scope, backendSrv) {
module.controller('LoginCtrl', function($scope, backendSrv, contextSrv) {
$scope.formModel = {
user: '',
email: '',
password: '',
};
$scope.grafana.sidemenu = false;
contextSrv.setSideMenuState(false);
$scope.googleAuthEnabled = config.googleAuthEnabled;
$scope.githubAuthEnabled = config.githubAuthEnabled;

View File

@ -74,8 +74,8 @@ function (angular, _, config, $) {
.then(function(results) {
if (localSearchId < $scope.currentSearchId) { return; }
if ($scope.query.query === "") {
results.dashboards.splice(0, 1, { title: 'Home', url: config.appSubUrl + '/', isHome: true });
if ($scope.query.query === "" && !$scope.query.starred) {
results.dashboards.unshift({ title: 'Home', url: config.appSubUrl + '/', isHome: true });
}
$scope.results.dashboards = results.dashboards;

View File

@ -9,7 +9,7 @@ function (angular, _, $, config) {
var module = angular.module('grafana.controllers');
module.controller('SideMenuCtrl', function($scope, $location) {
module.controller('SideMenuCtrl', function($scope, $location, contextSrv) {
$scope.getUrl = function(url) {
return config.appSubUrl + url;
@ -22,7 +22,7 @@ function (angular, _, $, config) {
href: $scope.getUrl("/"),
});
if ($scope.grafana.user.accountRole === 'Admin') {
if (contextSrv.hasRole('Admin')) {
$scope.menu.push({
text: "Data Sources",
icon: "fa fa-database",
@ -35,7 +35,7 @@ function (angular, _, $, config) {
});
}
if ($scope.grafana.user.isGrafanaAdmin) {
if (contextSrv.user.isGrafanaAdmin) {
$scope.menu.push({
text: "Admin", href: $scope.getUrl("/admin/users"),
icon: "fa fa-cube",

View File

@ -56,8 +56,8 @@ function (angular, $) {
function showEditorPane(evt, payload, editview) {
if (editview) {
scope.grafana.editview = editViewMap[editview];
payload.src = scope.grafana.editview.src;
scope.contextSrv.editview = editViewMap[editview];
payload.src = scope.contextSrv.editview.src;
}
if (lastEditor === payload.src) {
@ -106,12 +106,12 @@ function (angular, $) {
if (newValue) {
showEditorPane(null, {}, newValue);
} else if (oldValue) {
scope.grafana.editview = null;
scope.contextSrv.editview = null;
hideEditorPane();
}
});
scope.grafana.editview = null;
scope.contextSrv.editview = null;
scope.$on("$destroy", hideEditorPane);
scope.onAppEvent('hide-dash-editor', hideEditorPane);
scope.onAppEvent('show-dash-editor', showEditorPane);

View File

@ -7,7 +7,7 @@ function (angular) {
angular
.module('grafana.directives')
.directive('topnav', function() {
.directive('topnav', function($rootScope, contextSrv) {
return {
restrict: 'E',
transclude: true,
@ -15,8 +15,6 @@ function (angular) {
title: "@",
section: "@",
titleAction: "&",
toggle: "&",
showMenuBtn: "=",
subnav: "=",
},
template:
@ -43,6 +41,11 @@ function (angular) {
'</div><div ng-transclude></div></div></div></div>',
link: function(scope, elem, attrs) {
scope.icon = attrs.icon;
scope.showMenuBtn = !contextSrv.sidemenu;
scope.toggle = function() {
$rootScope.appEvent('toggle-sidemenu');
};
}
};
});

View File

@ -1,4 +1,4 @@
<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
<topnav icon="fa fa-shield" title="Account" subnav="true">
<ul class="nav">
<li class="active"><a href="account">Overview</a></li>
<li><a href="account/users">Users</a></li>

View File

@ -1,8 +1,6 @@
<topnav toggle="toggleSideMenu()"
title="API Keys"
<topnav title="API Keys"
icon="fa fa-shield"
section="Account"
show-menu-btn="!grafana.sidemenu">
section="Account">
</topnav>
<div class="gf-box" style="min-height: 500px">

View File

@ -1,7 +1,5 @@
<topnav toggle="toggleSideMenu()"
title="Data sources"
icon="fa fa-database"
show-menu-btn="!grafana.sidemenu">
<topnav title="Data sources"
icon="fa fa-database">
</topnav>
<div class="gf-box" style="min-height: 500px; max-width: 900px">

View File

@ -1,4 +1,4 @@
<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
<topnav icon="fa fa-shield" title="Account" subnav="true">
<ul class="nav">
<li><a href="account">Overview</a></li>
<li><a href="account/users">Users</a></li>

View File

@ -1,4 +1,4 @@
<topnav toggle="toggleSideMenu()" title="Account" icon="fa fa-shield" show-menu-btn="!grafana.sidemenu" subnav="true">
<topnav title="Account" icon="fa fa-shield" subnav="true">
<ul class="nav">
<li><a href="account">Overview</a></li>
<li class="active"><a href="account/users">Users</a></li>

View File

@ -1,4 +1,4 @@
<topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
<topnav icon="fa fa-cube" title="Admin" subnav="true">
<ul class="nav">
<li class="active"><a href="admin">Settings</a></li>
<li><a href="admin/users">Users</a></li>

View File

@ -1,4 +1,4 @@
<topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
<topnav icon="fa fa-cube" title="Admin" subnav="true">
<ul class="nav">
<li><a href="admin">Settings</a></li>
<li class="active"><a href="admin/users">Users</a></li>

View File

@ -61,11 +61,11 @@ function (angular, $, config) {
$scope.setWindowTitleAndTheme = function() {
window.document.title = config.window_title_prefix + $scope.dashboard.title;
$scope.grafana.lightTheme = $scope.dashboard.style === 'light';
$scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
};
$scope.styleUpdated = function() {
$scope.grafana.lightTheme = $scope.dashboard.style === 'light';
$scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
};
$scope.add_row = function(dash, row) {

View File

@ -25,10 +25,12 @@ function (angular, $) {
$scope.initPanelScope = function(dashboard) {
$scope.dashboard = dashboardSrv.create(dashboard.model);
$scope.grafana.style = $scope.dashboard.style;
$scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
$scope.row = {
height: $(window).height() + 'px',
};
$scope.test = "Hej";
$scope.$index = 0;
$scope.panel = $scope.getPanelById(panelId);

View File

@ -1,8 +1,6 @@
<topnav toggle="toggleSideMenu()"
title="{{grafana.user.name}}"
<topnav title="{{contextSrv.user.name}}"
section="Profile"
icon="fa fa-user"
show-menu-btn="!grafana.sidemenu">
icon="fa fa-user">
</topnav>
<div class="page-container">

View File

@ -1,19 +0,0 @@
<div class="grafana-console" ng-controller="ConsoleCtrl">
<div class="grafana-console-header">
<span class="grafana-console-title large"><i class="fa fa-terminal"></i></span>
</div>
<div class="grafana-console-body">
<div class="grafana-console-item" ng-repeat="item in events" ng-class="{'grafana-console-error': item.error}">
<span class="grafana-console-time gfc-col" ng-bind="item.time"></span>
<span class="grafana-console-type gfc-col">
<span class="label label-info" ng-bind="item.type"></span>
</span>
<span class="gfc-col grafana-console-method" ng-bind="item.method"></span>
<span class="gfc-col grafana-console-title" ng-bind="item.title"></span>
<span class="gfc-col grafana-console-elapsed" ng-bind="item.elapsed"></span>
<span class="gfc-col grafana-console-field1" ng-bind="item.field1"></span>
<span class="gfc-col grafana-console-field2" ng-bind="item.field2"></span>
<span class="gfc-col grafana-console-field3" ng-bind="item.field3"></span>
</div>
</div>
</div>

View File

@ -3,7 +3,7 @@
<div class="container-fluid">
<div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-bars"></i>
</a>

View File

@ -100,7 +100,7 @@
<div class="gf-box-footer">
<div class="grafana-version-info" ng-show="editor.index === 0">
<span class="editor-option small">
Grafana version: {{grafana.version}} &nbsp;&nbsp;
Grafana version: {{contextSrv.version}} &nbsp;&nbsp;
</span>
<span grafana-version-check>
</span>

View File

@ -1,14 +0,0 @@
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<topnav toggle="toggleSideMenu()"
title="{{pageTitle}}"
icon="{{pageIcon}}"
section="{{pageSection}}"
show-menu-btn="!grafana.sidemenu">
</topnav>
</div>
</div>
</div>

View File

@ -2,7 +2,7 @@
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li style="margin-bottom: 2px;">
<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
<a class="pointer sidemenu-top-btn" ng-click="contextSrv.toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="pull-right fa fa-angle-left"></i>
</a>
@ -15,20 +15,20 @@
</a>
</li>
<li ng-if="grafana.user.isSignedIn" style="margin-top:50px">
<li ng-if="contextSrv.user.isSignedIn" style="margin-top:50px">
<a href="profile" class="sidemenu-item sidemenu-user">
<img ng-src="{{grafana.user.gravatarUrl}}">
<span class="sidemenu-item-text">{{grafana.user.name}}</a>
<img ng-src="{{contextSrv.user.gravatarUrl}}">
<span class="sidemenu-item-text">{{contextSrv.user.name}}</a>
</a>
</li>
<li ng-if="grafana.user.isSignedIn">
<li ng-if="contextSrv.user.isSignedIn">
<a href="logout" class="sidemenu-item" target="_self">
<span class="sidemenu-item-text no-icon">Sign out</span>
</a>
</li>
<li ng-if="!grafana.user.isSignedIn" style="margin-top:50px">
<li ng-if="!contextSrv.user.isSignedIn" style="margin-top:50px">
<a href="/login" class="sidemenu-item" target="_self">
<span class="sidemenu-icon"><i class="fa fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span>

View File

@ -2,7 +2,7 @@ define([
'./alertSrv',
'./utilSrv',
'./datasourceSrv',
'./userSrv',
'./contextSrv',
'./timer',
'./keyboardManager',
'./popoverSrv',

View File

@ -0,0 +1,49 @@
define([
'angular',
'lodash',
'store',
],
function (angular, _, store) {
'use strict';
var module = angular.module('grafana.services');
module.service('contextSrv', function(grafanaVersion, $rootScope, $timeout) {
var self = this;
function User() {
if (window.grafanaBootData.user) {
_.extend(this, window.grafanaBootData.user);
}
}
this.version = grafanaVersion;
this.lightTheme = false;
this.user = new User();
this.sidemenu = store.getBool('grafana.sidemenu');
// events
$rootScope.$on('toggle-sidemenu', function() {
self.toggleSideMenu();
});
this.hasRole = function(role) {
return this.user.accountRole === role;
};
this.setSideMenuState = function(state) {
this.sidemenu = state;
store.set('grafana.sidemenu', state);
};
this.toggleSideMenu = function() {
this.setSideMenuState(!this.sidemenu);
$timeout(function() {
$rootScope.$broadcast("render");
}, 50);
};
});
});

View File

@ -34,7 +34,7 @@ define([
return inject(function($controller, $rootScope, $q, $location) {
self.scope = $rootScope.$new();
self.$location = $location;
self.scope.grafana = {};
self.scope.contextSrv = {};
self.scope.panel = {};
self.scope.row = { panels:[] };
self.scope.dashboard = {};

View File

@ -20,16 +20,16 @@
<script src="[[.AppSubUrl]]/public/app/components/require.backend.js"></script>
<!-- endbuild -->
<script>require(['app'], function (app) { app.boot(); })</script>
</head>
<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': grafana.sidemenu}">
<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': contextSrv.sidemenu}">
<link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.lightTheme">
<div class="sidemenu-canvas">
<aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu">
<div ng-include="'app/partials/sidemenu.html'"></div>
</aside>
@ -55,5 +55,9 @@
user:[[.User]],
settings: [[.Settings]],
};
require(['app'], function (app) {
app.boot();
})
</script>
</html>