More work on organization / admin nav, views, #1506

pkg/api/api.go

@@ -25,11 +25,11 @@ func Register(r *macaron.Macaron) {
 
 	// authed views
 	r.Get("/profile/", reqSignedIn, Index)
-	r.Get("/account/", reqSignedIn, Index)
-	r.Get("/account/datasources/", reqSignedIn, Index)
-	r.Get("/account/users/", reqSignedIn, Index)
-	r.Get("/account/apikeys/", reqSignedIn, Index)
-	r.Get("/account/import/", reqSignedIn, Index)
+	r.Get("/org/", reqSignedIn, Index)
+	r.Get("/datasources/", reqSignedIn, Index)
+	r.Get("/org/users/", reqSignedIn, Index)
+	r.Get("/org/apikeys/", reqSignedIn, Index)
+	r.Get("/dashboard/import/", reqSignedIn, Index)
 	r.Get("/admin/settings", reqGrafanaAdmin, Index)
 	r.Get("/admin/users", reqGrafanaAdmin, Index)
 	r.Get("/admin/users/create", reqGrafanaAdmin, Index)

src/app/controllers/sidemenuCtrl.js

@@ -15,23 +15,48 @@ function (angular, _, $, config) {
       return config.appSubUrl + url;
     };
 
-    $scope.menu = [];
-    $scope.menu.push({
+    $scope.mainLinks = [];
+    $scope.mainLinks.push({
       text: "Dashboards",
       icon: "fa fa-fw fa-th-large",
       href: $scope.getUrl("/"),
     });
 
     if (contextSrv.hasRole('Admin')) {
-      $scope.menu.push({
+      $scope.mainLinks.push({
         text: "Data Sources",
         icon: "fa fa-fw fa-database",
         href: $scope.getUrl("/datasources"),
       });
-      $scope.menu.push({
-        text: "Organization", href: $scope.getUrl("/org"),
+    }
+
+    $scope.bottomLinks = [];
+    if (contextSrv.user.isSignedIn) {
+      $scope.bottomLinks.push({
+        text: contextSrv.user.name,
+        imgSrc: contextSrv.user.gravatarUrl,
+        href: $scope.getUrl("/profile"),
+      });
+
+      $scope.bottomLinks.push({
+        text: contextSrv.user.orgName,
+        href: $scope.getUrl("/org"),
         icon: "fa fa-fw fa-users",
       });
+
+      if (contextSrv.hasRole('Admin')) {
+        $scope.bottomLinks.push({
+          text: "System admin",
+          icon: "fa fa-fw fa-cog",
+          href: $scope.getUrl("/admin/settings"),
+        });
+      }
+
+      $scope.bottomLinks.push({
+        text: "Sign out",
+        icon: "fa fa-fw fa-sign-out",
+        href: $scope.getUrl("/logout"),
+      });
     }
 
     $scope.updateState = function() {

src/app/features/org/partials/datasourceEdit.html

@@ -1,8 +1,8 @@
 <topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true">
 	<ul class="nav">
-		<li><a href="account/datasources">Overview</a></li>
-		<li ng-class="{active: isNew}"><a href="account/datasources/new">Add new</a></li>
-		<li class="active" ng-show="!isNew"><a href="account/datasources/edit/{{current.name}}">Edit</a></li>
+		<li><a href="datasources">Overview</a></li>
+		<li ng-class="{active: isNew}"><a href="datasources/new">Add new</a></li>
+		<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">Edit</a></li>
 	</ul>
 </topnav>
 

src/app/features/org/partials/datasources.html

@@ -35,7 +35,7 @@
 					</span>
 				</td>
 				<td style="width: 1%">
-					<a href="account/datasources/edit/{{ds.id}}" class="btn btn-inverse btn-mini">
+					<a href="datasources/edit/{{ds.id}}" class="btn btn-inverse btn-mini">
 						<i class="fa fa-edit"></i>
 						Edit
 					</a>

src/app/partials/sidemenu.html

@@ -2,14 +2,14 @@
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 
 	<ul class="sidemenu sidemenu-main">
-		<li style="margin-bottom: 10px;">
+		<li style="margin-bottom: 15px;">
 			<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>
 		</li>
 
-		<li ng-repeat="item in menu">
+		<li ng-repeat="item in mainLinks">
 			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
 				<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
 				<span class="sidemenu-item-text">{{item.text}}</span>
@@ -17,33 +17,41 @@
 		</li>
 	</ul>
 
-	<ul class="sidemenu sidemenu-small" ng-if="contextSrv.user.isSignedIn">
-		<li style="margin-top:50px">
-			<a href="profile" class="sidemenu-item sidemenu-user">
-				<img ng-src="{{contextSrv.user.gravatarUrl}}">
-				<span class="sidemenu-item-text">{{contextSrv.user.name}}</a>
-			</a>
-		</li>
-
-		<li ng-if="contextSrv.user.isGrafanaAdmin">
-			<a href="admin/settings" class="sidemenu-item">
-				<span class="icon-circle sidemenu-icon"><i class="fa fw-fw fa-cogs"></i></span>
-				<span class="sidemenu-item-text">System Admin</span>
-			</a>
-		</li>
-
-		<li>
-			<a href="logout" class="sidemenu-item" target="_self">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
-				<span class="sidemenu-item-text">Sign out</span>
-			</a>
+	<ul class="sidemenu sidemenu-small"  style="margin-top:50px">
+		<!-- <li> -->
+		<!-- 	<a href="profile" class="sidemenu&#45;item sidemenu&#45;user"> -->
+		<!-- 		<img ng&#45;src="{{contextSrv.user.gravatarUrl}}"> -->
+		<!-- 		<span class="sidemenu&#45;item&#45;text">{{contextSrv.user.name}}</a> -->
+		<!-- 	</a> -->
+		<!-- </li> -->
+    <!--  -->
+		<li ng-repeat="item in bottomLinks">
+			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
+				<img ng-if="item.imgSrc" ng-src="{{item.imgSrc}}">
+				<span class="icon-circle sidemenu-icon" ng-if="item.icon"><i class="{{item.icon}}"></i></span>
+				<span class="sidemenu-item-text">{{item.text}}</span>
+	   	</a>
 		</li>
 
-		<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-fw fa-sign-in"></i></span>
-				<span class="sidemenu-item-text">Sign in</span>
-			</a>
-		</li>
+		<!-- <li ng&#45;if="contextSrv.user.isGrafanaAdmin"> -->
+		<!-- 	<a href="admin/settings" class="sidemenu&#45;item"> -->
+		<!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fw&#45;fw fa&#45;cogs"></i></span> -->
+		<!-- 		<span class="sidemenu&#45;item&#45;text">System Admin</span> -->
+		<!-- 	</a> -->
+		<!-- </li> -->
+    <!--  -->
+		<!-- <li> -->
+		<!-- 	<a href="logout" class="sidemenu&#45;item" target="_self"> -->
+		<!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;out"></i></span> -->
+		<!-- 		<span class="sidemenu&#45;item&#45;text">Sign out</span> -->
+		<!-- 	</a> -->
+		<!-- </li> -->
+    <!--  -->
+		<!-- <li ng&#45;if="!contextSrv.user.isSignedIn" style="margin&#45;top:50px"> -->
+		<!-- 	<a href="/login" class="sidemenu&#45;item" target="_self"> -->
+		<!-- 		<span class="sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;in"></i></span> -->
+		<!-- 		<span class="sidemenu&#45;item&#45;text">Sign in</span> -->
+		<!-- 	</a> -->
+		<!-- </li> -->
 	</ul>
 </div>

src/css/less/sidemenu.less

@@ -43,7 +43,7 @@
   padding: 0;
 
   li {
-    margin-bottom: 7px;
+    margin-bottom: 9px;
   }
 
   &.sidemenu-small {
@@ -54,7 +54,7 @@
       height: 28px;
       i {
         top: 1px;
-        left: 6px;
+        left: 4px;
         font-size: 110%;
       }
     }
@@ -62,6 +62,7 @@
     .sidemenu-item {
       color: @textColor;
       line-height: 28px;
+      padding-left: 25px;
     }
   }
 }
@@ -76,13 +77,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  img {
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
   }
-}
 
 .sidemenu-top-btn {
   display: block;
@@ -135,6 +130,12 @@
       padding-left: 59px;
     }
   }
+  img {
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
+  }
 }