Skip to content

N
nexpie-grafana-theme
Commit 34ab1e52 by Torkel Ödegaard
Options

Lots of work on the side menu

parent c892d9d6
Showing with 218 additions and 20 deletions
src/app/controllers/p_grafanaCtrl.js
......@@ -3,8 +3,9 @@ define([
'config',
'lodash',
'jquery',
'store',
],
function (angular, config, _, $) {
function (angular, config, _, $, store) {
"use strict";
var module = angular.module('grafana.controllers');
......@@ -12,30 +13,37 @@ function (angular, config, _, $) {
module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope) {
$scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
$scope.consoleEnabled = (window.localStorage && window.localStorage.grafanaConsole === 'true');
$scope.consoleEnabled = store.getBool('grafanaConsole');
$scope.showProSideMenu = store.getBool('grafanaProSideMenu');
$rootScope.profilingEnabled = (window.localStorage && window.localStorage.profilingEnabled === 'true');
$rootScope.profilingEnabled = store.getBool('profilingEnabled');
$rootScope.performance = { loadStart: new Date().getTime() };
$scope.init = function() {
$scope._ = _;
if ($rootScope.profilingEnabled) {
$scope.initProfiling();
}
if ($rootScope.profilingEnabled) { $scope.initProfiling(); }
$scope.dashAlerts = alertSrv;
$scope.grafana = {
style: 'dark'
};
$scope.grafana = { style: 'dark' };
$scope.onAppEvent('logged-out', function() {
$scope.showProSideMenu = false;
});
$scope.onAppEvent('logged-in', function() {
$scope.showProSideMenu = store.getBool('grafanaProSideMenu');
});
};
$scope.toggleProSideMenu = function() {
$scope.showProSideMenu = !$scope.showProSideMenu;
store.set('grafanaProSideMenu', $scope.showProSideMenu);
};
$scope.toggleConsole = function() {
$scope.consoleEnabled = !$scope.consoleEnabled;
window.localStorage.grafanaConsole = $scope.consoleEnabled ? 'true' : 'false';
store.set('grafanaConsole', $scope.consoleEnabled);
};
$rootScope.onAppEvent = function(name, callback) {
......
src/app/controllers/p_loginCtrl.js
......@@ -6,27 +6,48 @@ function (angular) {
var module = angular.module('grafana.controllers');
module.controller('LoginCtrl', function($scope, $http, $location) {
module.controller('LoginCtrl', function($scope, $http, $location, $routeParams, alertSrv) {
$scope.loginModel = {};
$scope.init = function() {
if ($routeParams.logout) {
$scope.logout();
}
};
$scope.logout = function() {
$http.post('/logout').then(function() {
alertSrv.set('Logged out!', '', 'success', 3000);
$scope.emitAppEvent('logged-out');
}, function() {
alertSrv.set('Logout failed:', 'Unexpected error', 'error', 3000);
});
};
$scope.login = function() {
delete $scope.loginError;
if (!$scope.loginForm.$valid) {
return;
}
$http.post('/login', $scope.loginModel).then(function() {
$scope.emitAppEvent('logged-in');
$location.path('/');
}, function(err) {
if (err.status === 401) {
$scope.loginError = "Username or password is incorrect";
}
else {
$scope.loginErro = "Unexpected error";
$scope.loginError = "Unexpected error";
}
});
};
$scope.init();
});
});
src/app/partials/dashboard.html
<div ng-controller="DashboardCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
<div ng-include="'app/partials/p_dashboard_topnav.html'">
<div ng-include="'app/partials/pro/dashboard_topnav.html'">
</div>
<div class="submenu-controls">
......
src/app/partials/pro/admin_datasources.html 0 → 100644
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<span class="brand">
<a ng-click="toggleProSideMenu()">
<img src="img/small.png">
</a>
Admin / Data sources
</span>
</div>
</div>
</div>
src/app/partials/p_dashboard_topnav.html → src/app/partials/pro/dashboard_topnav.html
......@@ -3,7 +3,7 @@
<div class="container-fluid">
<span class="brand">
<a ng-click="toggleProSideMenu()">
<img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom">
<img src="img/small.png">
</a>
{{dashboard.title}}
</span>
......
src/app/partials/p_login.html → src/app/partials/pro/login.html
......@@ -2,6 +2,7 @@
<div class="container">
<div class="login-box">
<div class="login-box-logo">
<img src="/img/logo_transparent_200x75.png">
</div>
......
src/app/partials/pro/sidemenu.html 0 → 100644
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<span class="brand">
<i class="icon-gears" style=""></i>
<span style="color: white; padding-left: 4px;">Grafana</span>
<ul class="nav" ng-controller='DashboardNavCtrl' ng-init="init()">
</span>
</ul>
</div>
</div>
</div>
<section class="pro-sidemenu-items">
<a class="pro-sidemenu-link pro-side-menu-user" href="/login?logout">
<img src="https://secure.gravatar.com/avatar/c8656e8972626f01e1703681d5e55f92?s=90&default=blank">
logout
</a>
<a class="pro-sidemenu-link" href="/dashboard/db/home">
<i class="icon-th-large"></i>
Dashboards
</a>
<a class="pro-sidemenu-link" href="/charts">
<i class="icon-signal"></i>
Graphs
</a>
<a class="pro-sidemenu-link" href="/charts">
<i class="icon-bolt" style="padding-right: 23px"></i>
Alerts
</a>
<a class="pro-sidemenu-link" href="/admin/datasources">
<i class="icon-sitemap"></i>
Data sources
</a>
<a class="pro-sidemenu-link" href="/admin">
<i class="icon-tasks"></i>
Global options
</a>
<a class="pro-sidemenu-link" href="/admin">
<i class="icon-user"></i>
User accounts
</a>
</section>
</div>
src/app/routes/p_admin.js 0 → 100644
define([
'angular',
],
function (angular) {
"use strict";
var module = angular.module('grafana.routes');
module.config(function($routeProvider) {
$routeProvider
.when('/admin/datasources', {
templateUrl: 'app/partials/pro/admin_datasources.html',
controller : 'AdminCtrl',
});
});
module.controller('AdminCtrl', function() {
});
});
src/app/routes/p_all.js
define([
'./p_dashboard',
'./p_solo-panel',
'./p_admin',
'./p_login',
],
function () {});
src/app/routes/p_dashboard.js
define([
'angular',
'controllers/p_loginCtrl'
],
function (angular) {
"use strict";
......@@ -23,10 +22,6 @@ function (angular) {
templateUrl: '/app/partials/dashboard.html',
controller : 'DashFromDBProvider',
reloadOnSearch: false,
})
.when('/login', {
templateUrl: '/app/partials/p_login.html',
controller : 'LoginCtrl',
});
});
......
src/app/routes/p_login.js 0 → 100644
define([
'angular',
],
function (angular) {
"use strict";
var module = angular.module('grafana.routes');
module.config(function($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/partials/pro/login.html',
controller : 'LoginCtrl',
});
});
module.controller('LoginCtrl', function($scope, $http, $location, $routeParams, alertSrv) {
$scope.loginModel = {};
$scope.init = function() {
if ($routeParams.logout) {
$scope.logout();
}
};
$scope.logout = function() {
$http.post('/logout').then(function() {
alertSrv.set('Logged out!', '', 'success', 3000);
$scope.emitAppEvent('logged-out');
}, function() {
alertSrv.set('Logout failed:', 'Unexpected error', 'error', 3000);
});
};
$scope.login = function() {
delete $scope.loginError;
if (!$scope.loginForm.$valid) {
return;
}
$http.post('/login', $scope.loginModel).then(function() {
$scope.emitAppEvent('logged-in');
$location.path('/');
}, function(err) {
if (err.status === 401) {
$scope.loginError = "Username or password is incorrect";
}
else {
$scope.loginError = "Unexpected error";
}
});
};
$scope.init();
});
});
src/css/less/p_pro.less
......@@ -9,12 +9,17 @@
top: 0;
left: 0;
width: 200px;
background: @grafanaPanelBackground;
background: @bodyBackground;
border-right: 2px solid black;
min-height: 100%;
z-index: 101;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
}
.pro-main-view {
padding-left: 200px;
}
......@@ -24,6 +29,33 @@
}
}
.pro-sidemenu-items {
}
.pro-sidemenu-link {
font-size: 1.0rem;
padding: 14px 10px 14px 20px;
display: block;
background: @grafanaPanelBackground;
color: @grayLight;
i {
padding-right: 15px;
}
border-bottom: 1px solid black;
}
.pro-sidemenu-link:first-child {
// border-top: 1px solid black;
}
.pro-side-menu-user {
padding-left: 5px;
img {
width: 49px;
padding-right: 10px;
}
}
.login-box {
width: 700px;
margin: 100px auto 0 auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment