Browse Source

a lot of work on sidemenu, and encoding dash edit view in url

Torkel Ödegaard 11 years ago
parent
commit
1fb9bbba91

+ 3 - 1
src/app/controllers/sidemenuCtrl.js

@@ -20,7 +20,8 @@ function (angular, _, $) {
           { text: 'Settings',    editview: 'settings',    icon: "fa fa-cogs" },
           { text: 'Settings',    editview: 'settings',    icon: "fa fa-cogs" },
           { text: 'Templating',  editview: 'templating',  icon: "fa fa-cogs" },
           { text: 'Templating',  editview: 'templating',  icon: "fa fa-cogs" },
           { text: 'Annotations', editview: 'annotations', icon: "fa fa-bolt" },
           { text: 'Annotations', editview: 'annotations', icon: "fa fa-bolt" },
-          { text: 'More', href:"asd", icon: "fa fa-bolt" },
+          { text: 'Export', href:"", icon: "fa fa-bolt" },
+          { text: 'JSON', href:"", icon: "fa fa-bolt" },
         ]
         ]
       },
       },
       {
       {
@@ -63,6 +64,7 @@ function (angular, _, $) {
         if (item.startsWith) {
         if (item.startsWith) {
           if (currentPath.indexOf(item.startsWith) === 0) {
           if (currentPath.indexOf(item.startsWith) === 0) {
             item.active = true;
             item.active = true;
+            item.href = currentPath;
           }
           }
         }
         }
 
 

+ 14 - 8
src/app/directives/dashEditLink.js

@@ -54,12 +54,8 @@ function (angular, $) {
             if (editorScope) { editorScope.dismiss(); }
             if (editorScope) { editorScope.dismiss(); }
           }
           }
 
 
-          scope.onAppEvent('hide-dash-editor', hideEditorPane);
-
-          scope.onAppEvent('show-dash-editor', function(evt, payload) {
-            if (payload.editview) {
-              payload.src = editViewMap[payload.editview];
-            }
+          function showEditorPane(evt, payload, editview) {
+            if (editview) { payload.src = editViewMap[editview]; }
 
 
             if (lastEditor === payload.src) {
             if (lastEditor === payload.src) {
               hideEditorPane();
               hideEditorPane();
@@ -80,9 +76,9 @@ function (angular, $) {
               editorScope = null;
               editorScope = null;
               hideScrollbars(false);
               hideScrollbars(false);
 
 
-              if (payload.editview) {
+              if (editview) {
                 var urlParams = $location.search();
                 var urlParams = $location.search();
-                if (payload.editview === urlParams.editview) {
+                if (editview === urlParams.editview) {
                   delete urlParams.editview;
                   delete urlParams.editview;
                   $location.search(urlParams);
                   $location.search(urlParams);
                 }
                 }
@@ -96,8 +92,18 @@ function (angular, $) {
             var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
             var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
             elem.append(view);
             elem.append(view);
             $compile(elem.contents())(editorScope);
             $compile(elem.contents())(editorScope);
+          }
+
+          scope.$watch("dashboardViewState.state.editview", function(newValue, oldValue) {
+            if (newValue) {
+              showEditorPane(null, {}, newValue);
+            } else if (oldValue) {
+              hideEditorPane();
+            }
           });
           });
 
 
+          scope.onAppEvent('hide-dash-editor', hideEditorPane);
+          scope.onAppEvent('show-dash-editor', showEditorPane);
         }
         }
       };
       };
     });
     });

+ 16 - 0
src/app/features/account/partials/account.html

@@ -1,3 +1,19 @@
 <div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
 <div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
 
 
+<div class="dashboard-edit-view" style="min-height: 500px">
+
+	<div class="dashboard-editor-header">
+		<div class="dashboard-editor-title">
+			<i class="fa fa-shield"></i>
+			Account info
+		</div>
+	</div>
+
+	<div class="dashboard-editor-body">
+
+		<h3>TODO</h3>
+
+	</div>
+</div>
+
 
 

+ 2 - 6
src/app/features/dashboard/viewStateSrv.js

@@ -53,12 +53,13 @@ function (angular, _, $) {
       state.panelId = parseInt(state.panelId) || null;
       state.panelId = parseInt(state.panelId) || null;
       state.fullscreen = state.fullscreen ? true : null;
       state.fullscreen = state.fullscreen ? true : null;
       state.edit =  (state.edit === "true" || state.edit === true) || null;
       state.edit =  (state.edit === "true" || state.edit === true) || null;
+      state.editview = state.editview || null;
       return state;
       return state;
     };
     };
 
 
     DashboardViewState.prototype.serializeToUrl = function() {
     DashboardViewState.prototype.serializeToUrl = function() {
       var urlState = _.clone(this.state);
       var urlState = _.clone(this.state);
-      urlState.fullscreen = this.state.fullscreen ? true : null,
+      urlState.fullscreen = this.state.fullscreen ? true : null;
       urlState.edit = this.state.edit ? true : null;
       urlState.edit = this.state.edit ? true : null;
       return urlState;
       return urlState;
     };
     };
@@ -81,11 +82,6 @@ function (angular, _, $) {
     };
     };
 
 
     DashboardViewState.prototype.syncState = function() {
     DashboardViewState.prototype.syncState = function() {
-      if (this.state.editview) {
-        this.$scope.appEvent('show-dash-editor', { scope: this.$scope, editview: this.state.editview });
-        return;
-      }
-
       if (this.panelScopes.length === 0) { return; }
       if (this.panelScopes.length === 0) { return; }
 
 
       if (this.fullscreen) {
       if (this.fullscreen) {

+ 10 - 47
src/app/partials/dashboard_topnav.html

@@ -1,4 +1,4 @@
-<div class="navbar navbar-static-top">
+<div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
 	<div class="navbar-inner">
 	<div class="navbar-inner">
 		<div class="container-fluid">
 		<div class="container-fluid">
 			<span class="hamburger">
 			<span class="hamburger">
@@ -8,11 +8,15 @@
 			</span>
 			</span>
 			<span class="brand">
 			<span class="brand">
 				<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
 				<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
-				<span class="page-title">{{dashboard.title}}</span>
+				<a ng-click="openSearch()" class="page-title">
+					{{dashboard.title}}
+					<span class="small">
+						<i class="fa fa-angle-down"></i>
+					</span>
+				</a>
 			</span>
 			</span>
 
 
-			<ul class="nav pull-right" ng-controller='DashboardNavCtrl' ng-init="init()">
-
+			<ul class="nav pull-right">
 				<li ng-show="dashboardViewState.fullscreen">
 				<li ng-show="dashboardViewState.fullscreen">
 					<a ng-click="exitFullscreen()">
 					<a ng-click="exitFullscreen()">
 						Back to dashboard
 						Back to dashboard
@@ -25,53 +29,12 @@
 				</li>
 				</li>
 
 
 				<li class="dropdown grafana-menu-save">
 				<li class="dropdown grafana-menu-save">
-					<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="openSaveDropdown()">
+					<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="saveDashboard()">
 						<i class='fa fa-save'></i>
 						<i class='fa fa-save'></i>
 					</a>
 					</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="fa fa-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="editJson()">Dashboard JSON</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">
-					<a ng-click="openSearch()" bs-tooltip="'Search'" data-placement="bottom">
-						<i class='fa fa-folder-open'></i>
-					</a>
 				</li>
 				</li>
 
 
-				<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/'><i class='fa fa-home'></i></a></li>
-
-				<li class="grafana-menu-edit" ng-show="dashboard.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" dash-editor-link="app/partials/dasheditor.html"><i class='fa fa-cog pointer'></i></a></li>
+				<!-- <li class="grafana&#45;menu&#45;home"><a bs&#45;tooltip="'Goto saved default'" data&#45;placement="bottom" href='#/'><i class='fa fa&#45;home'></i></a></li> -->
 
 
 				<li class="grafana-menu-stop-playlist hide">
 				<li class="grafana-menu-stop-playlist hide">
 					<a class='small' ng-click='stopPlaylist(2)'>
 					<a class='small' ng-click='stopPlaylist(2)'>

+ 6 - 3
src/app/partials/navbar.html

@@ -1,10 +1,13 @@
 <div class="navbar navbar-static-top">
 <div class="navbar navbar-static-top">
 	<div class="navbar-inner">
 	<div class="navbar-inner">
 		<div class="container-fluid">
 		<div class="container-fluid">
-			<span class="brand">
-				<a ng-click="toggleSideMenu()">
-					<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
+			<span class="hamburger">
+				<a class="pointer" ng-click="toggleSideMenu()">
+					<i class="fa fa-bars"></i>
 				</a>
 				</a>
+			</span>
+			<span class="brand">
+				<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
 				<span class="page-title">{{pageTitle}}</span>
 				<span class="page-title">{{pageTitle}}</span>
 			</span>
 			</span>
 		</div>
 		</div>

+ 10 - 28
src/app/partials/sidemenu.html

@@ -1,13 +1,16 @@
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 <div ng-controller="SideMenuCtrl" ng-init="init()">
-	<div class="navbar navbar-static-top">
-		<div class="navbar-inner">
-			<span class="brand">
-				<span class="page-title">Grafana</span>
-			</span>
-		</div>
-	</div>
 
 
 	<ul class="sidemenu">
 	<ul class="sidemenu">
+		<li class="dropdown">
+			<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
+				<span class="gravatar-missing">f</span>
+				<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
+				<span class="gravatar-email small">{{grafana.user.login}}</span>
+			</a>
+			<ul class="dropdown-menu">
+				<li><a href="/login?logout">Logout</a></li>
+			</ul>
+		</li>
 		<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
 		<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
 			<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
 			<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
 		</li>
 		</li>
@@ -20,24 +23,3 @@
 		</li>
 		</li>
 	</ul>
 	</ul>
 </div>
 </div>
-
-<section class="pro-sidemenu-items" style="position: fixed; bottom: 0; width 200px; left: 0;">
-	<a class="pro-sidemenu-link" href="admin/users" ng-if="grafana.user.isGrafanaAdmin">
-		<i class="fa fa-institution"></i>Admin
-	</a>
-
-	<div class="dropdown">
-		<a class="pro-sidemenu-link pointer gravatar" data-toggle="dropdown" title="{{grafana.user.email}}">
-			<span class="gravatar-missing">f</span>
-			<img ng-src="{{grafana.user.gravatarUrl}}" width="35"> <span class="gravatar-email small">{{grafana.user.login}}</span>
-		</a>
-		<ul class="dropdown-menu">
-			<li><a href="/login?logout">Logout</a></li>
-		</ul>
-	</div>
-	<a class="pro-sidemenu-link" href="login?logout">
-		<i class="fa fa-sign-out"></i>Sign out
-	</a>
-</section>
-
-</div>

+ 1 - 0
src/app/routes/backend/dashboard.js

@@ -21,6 +21,7 @@ function (angular, store) {
       // do we have a previous dash
       // do we have a previous dash
       if (prevDashPath) {
       if (prevDashPath) {
         $location.path(prevDashPath);
         $location.path(prevDashPath);
+        return;
       }
       }
 
 
       var savedRoute = store.get('grafanaDashboardDefault');
       var savedRoute = store.get('grafanaDashboardDefault');

+ 23 - 44
src/css/less/p_pro.less

@@ -4,14 +4,14 @@
 
 
 .sidemenu {
 .sidemenu {
   list-style: none;
   list-style: none;
-  background: @bodyBackground;
+  background: @grafanaPanelBackground;
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
 }
 }
 
 
 .sidemenu-links {
 .sidemenu-links {
   margin: 0;
   margin: 0;
-  padding: 0;
+  padding: 5px 0;
   list-style: none;
   list-style: none;
   background: @grafanaTargetFuncBackground;
   background: @grafanaTargetFuncBackground;
   li {
   li {
@@ -20,19 +20,38 @@
 }
 }
 
 
 .sidemenu-link {
 .sidemenu-link {
+  display: block;
   padding: 6px 0 6px 30px;
   padding: 6px 0 6px 30px;
   font-size: 15px;
   font-size: 15px;
-  display: block;
   i {
   i {
     padding-right: 15px;
     padding-right: 15px;
   }
   }
 }
 }
 
 
+.sidemenu-user {
+  padding: 8px 10px 7px 15px;
+  display: block;
+  width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  .gravatar-missing {
+    display: none;
+  }
+  .gravatar-email {
+    padding-left: 4px;
+  }
+  img {
+    width: 35px;
+    padding-right: 10px;
+  }
+  border-bottom: 1px solid black;
+}
+
 .sidemenu-item {
 .sidemenu-item {
   font-size: 17px;
   font-size: 17px;
   padding: 14px 10px 14px 20px;
   padding: 14px 10px 14px 20px;
   display: block;
   display: block;
-  background: @grafanaPanelBackground;
   i {
   i {
     padding-right: 15px;
     padding-right: 15px;
   }
   }
@@ -66,46 +85,6 @@
   }
   }
 }
 }
 
 
-.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;
-  }
-}
-
-.gravatar {
-  width: 170px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  .gravatar-missing {
-    display: none;
-  }
-  .gravatar-email {
-    padding-left: 4px;
-  }
-}
-
 .login-inner-box {
 .login-inner-box {
   background: @grafanaPanelBackground;
   background: @grafanaPanelBackground;
   h1 {
   h1 {