ソースを参照

began work on pro side menu

Torkel Ödegaard 11 年 前
コミット
9951c3825e

+ 1 - 1
src/app/controllers/all.js

@@ -1,5 +1,5 @@
 define([
 define([
-  './grafanaCtrl',
+  './p_grafanaCtrl',
   './dashboardCtrl',
   './dashboardCtrl',
   './dashboardNavCtrl',
   './dashboardNavCtrl',
   './row',
   './row',

+ 118 - 0
src/app/controllers/p_grafanaCtrl.js

@@ -0,0 +1,118 @@
+define([
+  'angular',
+  'config',
+  'lodash',
+  'jquery',
+],
+function (angular, config, _, $) {
+  "use strict";
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope) {
+
+    $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
+    $scope.consoleEnabled = (window.localStorage && window.localStorage.grafanaConsole === 'true');
+
+    $rootScope.profilingEnabled = (window.localStorage && window.localStorage.profilingEnabled === 'true');
+    $rootScope.performance = { loadStart: new Date().getTime() };
+
+    $scope.init = function() {
+      $scope._ = _;
+      if ($rootScope.profilingEnabled) {
+        $scope.initProfiling();
+      }
+
+      $scope.dashAlerts = alertSrv;
+      $scope.grafana = {
+        style: 'dark'
+      };
+    };
+
+    $scope.toggleProSideMenu = function() {
+      $scope.showProSideMenu = !$scope.showProSideMenu;
+    };
+
+    $scope.toggleConsole = function() {
+      $scope.consoleEnabled = !$scope.consoleEnabled;
+      window.localStorage.grafanaConsole = $scope.consoleEnabled ? 'true' : 'false';
+    };
+
+    $rootScope.onAppEvent = function(name, callback) {
+      var unbind = $rootScope.$on(name, callback);
+      this.$on('$destroy', unbind);
+    };
+
+    $rootScope.emitAppEvent = function(name, payload) {
+      $rootScope.$emit(name, payload);
+    };
+
+    $rootScope.colors = [
+      "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", //1
+      "#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477", //2
+      "#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0", //3
+      "#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93", //4
+      "#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7", //5
+      "#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B", //6
+      "#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7"  //7
+    ];
+
+    $scope.getTotalWatcherCount = function() {
+      var count = 0;
+      var scopes = 0;
+      var root = $(document.getElementsByTagName('body'));
+
+      var f = function (element) {
+        if (element.data().hasOwnProperty('$scope')) {
+          scopes++;
+          angular.forEach(element.data().$scope.$$watchers, function () {
+            count++;
+          });
+        }
+
+        angular.forEach(element.children(), function (childElement) {
+          f($(childElement));
+        });
+      };
+
+      f(root);
+      $rootScope.performance.scopeCount = scopes;
+      return count;
+    };
+
+    $scope.initProfiling = function() {
+      var count = 0;
+
+      $scope.$watch(function digestCounter() {
+        count++;
+      }, function() {
+      });
+
+      $scope.onAppEvent('setup-dashboard', function() {
+        count = 0;
+
+        setTimeout(function() {
+          console.log("Dashboard::Performance Total Digests: " + count);
+          console.log("Dashboard::Performance Total Watchers: " + $scope.getTotalWatcherCount());
+          console.log("Dashboard::Performance Total ScopeCount: " + $rootScope.performance.scopeCount);
+
+          var timeTaken = $rootScope.performance.allPanelsInitialized - $rootScope.performance.dashboardLoadStart;
+          console.log("Dashboard::Performance - All panels initialized in " + timeTaken + " ms");
+
+          // measure digest performance
+          var rootDigestStart = window.performance.now();
+          for (var i = 0; i < 30; i++) {
+            $rootScope.$apply();
+          }
+          console.log("Dashboard::Performance Root Digest " + ((window.performance.now() - rootDigestStart) / 30));
+
+        }, 3000);
+
+      });
+
+    };
+
+    $scope.init();
+
+  });
+});

+ 1 - 1
src/app/partials/dashboard.html

@@ -1,6 +1,6 @@
 <div ng-controller="DashboardCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 <div ng-controller="DashboardCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 
 
-	<div ng-include="'app/partials/dashboard_topnav.html'">
+	<div ng-include="'app/partials/p_dashboard_topnav.html'">
 	</div>
 	</div>
 
 
 	<div class="submenu-controls">
 	<div class="submenu-controls">

+ 82 - 0
src/app/partials/p_dashboard_topnav.html

@@ -0,0 +1,82 @@
+<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" bs-tooltip="'Grafana'" data-placement="bottom">
+				</a>
+				{{dashboard.title}}
+			</span>
+			<ul class="nav pull-right" ng-controller='DashboardNavCtrl' ng-init="init()">
+
+				<li ng-show="dashboardViewState.fullscreen">
+					<a ng-click="exitFullscreen()">
+						Back to dashboard
+					</a>
+				</li>
+
+				<li class="grafana-menu-zoom-out">
+					<a class='small' ng-click='zoom(2)'>
+						Zoom Out
+					</a>
+				</li>
+
+				<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
+					<grafana-simple-panel type="pulldown.type" ng-cloak>
+					</grafana-simple-panel>
+				</li>
+
+				<li class="dropdown grafana-menu-save">
+					<a href="#"  bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="openSaveDropdown()">
+						<i class='icon-save'></i>
+					</a>
+
+					<ul class="save-dashboard-dropdown dropdown-menu" ng-if="saveDropdownOpened">
+						<li>
+							<form class="input-prepend nomargin save-dashboard-dropdown-save-form">
+								<input class='input-medium' ng-model="dashboard.title" type="text" />
+								<button class="btn" ng-click="saveDashboard()"><i class="icon-save"></i></button>
+							</form>
+						</li>
+
+						<li>
+							<a class="link" ng-click="set_default()">Save as Home</a>
+						</li>
+						<li>
+							<a class="link" ng-click="purge_default()">Reset Home</a>
+						</li>
+						<li ng-show="!isFavorite">
+							<a class="link" ng-click="markAsFavorite()">Mark as favorite</a>
+						</li>
+						<li ng-show="isFavorite">
+							<a class="link" ng-click="removeAsFavorite()">Remove as favorite</a>
+						</li>
+						<li>
+							<a class="link" ng-click="exportDashboard()">Export dashboard</a>
+						</li>
+						<li ng-show="db.saveTemp">
+							<a bs-tooltip="'Share'" data-placement="bottom" ng-click="saveForSharing()" config-modal="app/partials/dashLoaderShare.html">
+								Share temp copy
+							</a>
+						</li>
+					</ul>
+				</li>
+
+				<li class="dropdown grafana-menu-load" ng-controller="SearchCtrl" ng-init="init()" ng-include="'app/partials/search.html'">
+				</li>
+
+				<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/'><i class='icon-home'></i></a></li>
+
+				<li class="grafana-menu-edit" ng-show="dashboard.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
+
+				<li class="grafana-menu-stop-playlist hide">
+					<a class='small' ng-click='stopPlaylist(2)'>
+						Stop playlist
+					</a>
+				</li>
+
+			</ul>
+		</div>
+	</div>
+</div>
+

+ 26 - 0
src/css/less/p_pro.less

@@ -1,3 +1,29 @@
+.pro-sidemenu {
+  display: none;
+}
+
+.pro-sidemenu-open {
+  .pro-sidemenu {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    background: @grafanaPanelBackground;
+    border-right: 2px solid black;
+    min-height: 100%;
+    z-index: 101;
+  }
+
+  .pro-main-view {
+    padding-left: 200px;
+  }
+
+  .panel-fullscreen {
+    left: 200px;
+  }
+}
+
 .login-box {
 .login-box {
   width: 700px;
   width: 700px;
   margin: 100px auto 0 auto;
   margin: 100px auto 0 auto;