From 34ab1e529b499af836631f8076c2c4df02be5860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 16 Aug 2014 21:54:05 +0200 Subject: [PATCH] Lots of work on the side menu --- src/app/controllers/p_grafanaCtrl.js | 28 +++++---- src/app/controllers/p_loginCtrl.js | 25 +++++++- src/app/partials/dashboard.html | 2 +- src/app/partials/pro/admin_datasources.html | 14 +++++ .../dashboard_topnav.html} | 2 +- .../partials/{p_login.html => pro/login.html} | 1 + src/app/partials/pro/sidemenu.html | 45 ++++++++++++++ src/app/routes/p_admin.js | 21 +++++++ src/app/routes/p_all.js | 2 + src/app/routes/p_dashboard.js | 5 -- src/app/routes/p_login.js | 59 +++++++++++++++++++ src/css/less/p_pro.less | 34 ++++++++++- 12 files changed, 218 insertions(+), 20 deletions(-) create mode 100644 src/app/partials/pro/admin_datasources.html rename src/app/partials/{p_dashboard_topnav.html => pro/dashboard_topnav.html} (97%) rename src/app/partials/{p_login.html => pro/login.html} (99%) create mode 100644 src/app/partials/pro/sidemenu.html create mode 100644 src/app/routes/p_admin.js create mode 100644 src/app/routes/p_login.js diff --git a/src/app/controllers/p_grafanaCtrl.js b/src/app/controllers/p_grafanaCtrl.js index 2793eabafdf..e9484d76d64 100644 --- a/src/app/controllers/p_grafanaCtrl.js +++ b/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) { diff --git a/src/app/controllers/p_loginCtrl.js b/src/app/controllers/p_loginCtrl.js index 1c729a843d7..793cd357844 100644 --- a/src/app/controllers/p_loginCtrl.js +++ b/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(); + }); }); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 1593501adf8..acfd80518e9 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/app/partials/pro/admin_datasources.html b/src/app/partials/pro/admin_datasources.html new file mode 100644 index 00000000000..10276b5a136 --- /dev/null +++ b/src/app/partials/pro/admin_datasources.html @@ -0,0 +1,14 @@ +
+
+
+ + + + + Admin / Data sources + +
+
+
+ + diff --git a/src/app/partials/p_dashboard_topnav.html b/src/app/partials/pro/dashboard_topnav.html similarity index 97% rename from src/app/partials/p_dashboard_topnav.html rename to src/app/partials/pro/dashboard_topnav.html index d248121602b..fdd0cba101d 100644 --- a/src/app/partials/p_dashboard_topnav.html +++ b/src/app/partials/pro/dashboard_topnav.html @@ -3,7 +3,7 @@
- + {{dashboard.title}} diff --git a/src/app/partials/p_login.html b/src/app/partials/pro/login.html similarity index 99% rename from src/app/partials/p_login.html rename to src/app/partials/pro/login.html index 0f75a687c0f..92f1c4e8923 100644 --- a/src/app/partials/p_login.html +++ b/src/app/partials/pro/login.html @@ -2,6 +2,7 @@
diff --git a/src/app/routes/p_admin.js b/src/app/routes/p_admin.js new file mode 100644 index 00000000000..75bf5b27223 --- /dev/null +++ b/src/app/routes/p_admin.js @@ -0,0 +1,21 @@ +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() { + + }); + +}); diff --git a/src/app/routes/p_all.js b/src/app/routes/p_all.js index 24b09715204..185563c1592 100644 --- a/src/app/routes/p_all.js +++ b/src/app/routes/p_all.js @@ -1,5 +1,7 @@ define([ './p_dashboard', './p_solo-panel', + './p_admin', + './p_login', ], function () {}); diff --git a/src/app/routes/p_dashboard.js b/src/app/routes/p_dashboard.js index 7bf16f51cb5..08c729c2a8c 100644 --- a/src/app/routes/p_dashboard.js +++ b/src/app/routes/p_dashboard.js @@ -1,6 +1,5 @@ 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', }); }); diff --git a/src/app/routes/p_login.js b/src/app/routes/p_login.js new file mode 100644 index 00000000000..127c4d47f81 --- /dev/null +++ b/src/app/routes/p_login.js @@ -0,0 +1,59 @@ +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(); + + }); + +}); diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less index f50658e3f25..029d312d473 100644 --- a/src/css/less/p_pro.less +++ b/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;