ux: more work on sidemenu

pkg/api/api.go

@@ -41,6 +41,7 @@ func (hs *HttpServer) registerRoutes() {
 	r.Get("/org/users/", reqSignedIn, Index)
 	r.Get("/org/apikeys/", reqSignedIn, Index)
 	r.Get("/dashboard/import/", reqSignedIn, Index)
+	r.Get("/configuration", reqGrafanaAdmin, Index)
 	r.Get("/admin", reqGrafanaAdmin, Index)
 	r.Get("/admin/settings", reqGrafanaAdmin, Index)
 	r.Get("/admin/users", reqGrafanaAdmin, Index)

pkg/api/avatar/avatar.go

@@ -146,7 +146,7 @@ func CacheServer() http.Handler {
 }
 
 func newNotFound() *Avatar {
-	avatar := &Avatar{}
+	avatar := &Avatar{notFound: true}
 
 	// load transparent png into buffer
 	path := filepath.Join(setting.StaticRootPath, "img", "transparent.png")

pkg/api/index.go

@@ -124,28 +124,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		})
 	}
 
-	if c.OrgRole == m.ROLE_ADMIN {
-		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
-			Text: "Data Sources",
-			Icon: "icon-gf icon-gf-datasources",
-			Url:  setting.AppSubUrl + "/datasources",
-			Children: []*dtos.NavLink{
-				{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
-				{Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"},
-			},
-		})
-		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
-			Text: "Plugins",
-			Icon: "icon-gf icon-gf-apps",
-			Url:  setting.AppSubUrl + "/plugins",
-			Children: []*dtos.NavLink{
-				{Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"},
-				{Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"},
-				{Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"},
-			},
-		})
-	}
-
 	enabledPlugins, err := plugins.GetEnabledPlugins(c.OrgId)
 	if err != nil {
 		return nil, err
@@ -192,10 +170,38 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		}
 	}
 
-	if c.IsGrafanaAdmin {
-		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
-			Text: "Admin",
+	if c.OrgRole == m.ROLE_ADMIN {
+		cfgNode := &dtos.NavLink{
+			Text: "Configuration",
 			Icon: "fa fa-fw fa-cogs",
+			Url:  setting.AppSubUrl + "/configuration",
+			Children: []*dtos.NavLink{
+				{
+					Text: "Data Sources",
+					Icon: "icon-gf icon-gf-datasources",
+					Url:  setting.AppSubUrl + "/datasources",
+					Children: []*dtos.NavLink{
+						{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
+						{Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"},
+					},
+				},
+				{
+					Text: "Plugins",
+					Icon: "icon-gf icon-gf-apps",
+					Url:  setting.AppSubUrl + "/plugins",
+					Children: []*dtos.NavLink{
+						{Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"},
+						{Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"},
+						{Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"},
+					},
+				},
+			},
+		}
+
+		if c.IsGrafanaAdmin {
+			cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{
+				Text: "Server Admin",
+				Icon: "fa fa-fw fa-shield",
 				Url:  setting.AppSubUrl + "/admin",
 				Children: []*dtos.NavLink{
 					{Text: "Global Users", Url: setting.AppSubUrl + "/admin/users"},
@@ -206,6 +212,9 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			})
 		}
 
+		data.MainNavLinks = append(data.MainNavLinks, cfgNode)
+	}
+
 	return &data, nil
 }
 

public/app/core/components/sidemenu/sidemenu.html

@@ -1,19 +1,20 @@
 
+<div class="sidemenu__top">
+
 	<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
 		<span class="navbar-brand-btn-background">
 			<img src="public/img/grafana_icon.svg"></img>
 		</span>
 	</a>
 
-<ul class="sidemenu">
-  <li>
-    <a class="sidemenu-item" ng-click="ctrl.search()">
+	<div class="sidemenu-item">
+		<a class="sidemenu-link" ng-click="ctrl.search()">
 			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
 		</a>
-  </li>
+	</div>
 
-  <li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
-    <a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
+	<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
+		<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
 			<span class="icon-circle sidemenu-icon">
 				<i class="{{::item.icon}}" ng-show="::item.icon"></i>
 				<img ng-src="{{::item.img}}" ng-show="::item.img">
@@ -30,36 +31,27 @@
 				</a>
 			</li>
 		</ul>
-  </li>
+	</div>
+</div>
 
-  <li ng-show="::!ctrl.isSignedIn">
-    <a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
+<div class="sidemenu__bottom">
+	<div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
+		<a href="{{ctrl.loginUrl}}" class="sidemenu-link" target="_self">
 			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
 			<span class="sidemenu-item-text">Sign in</span>
 		</a>
-  </li>
+	</div>
 
-  <li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
-    <a class="sidemenu-item" href="profile">
+
+	<div class="sidemenu-item dropup dropdown" ng-if="::ctrl.isSignedIn">
+		<a class="sidemenu-link" href="profile">
 			<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
 				<img ng-src="{{::ctrl.user.gravatarUrl}}">
 				<span class="sidemenu-org-avatar--missing">
 					<i class="fa fa-fw fa-user"></i>
 				</span>
-        </div>
 		</a>
 		<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
-      <li class="side-menu-header">
-        <span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
-        <span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
-      </li>
-      <li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
-        <span ng-show="::menuItem.section">{{::menuItem.section}}</span>
-        <a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
-          <i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
-          {{::menuItem.text}}
-        </a>
-      </li>
 			<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
 				<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
 				<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
@@ -70,8 +62,28 @@
 					{{::orgItem.text}}
 				</a>
 			</li>
-    </ul>
+			<li ng-repeat="menuItem in ctrl.userMenu" ng-class="::menuItem.cssClass">
+				<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
+					<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
+					{{::menuItem.text}}
+				</a>
+			</li>
+			<li class="side-menu-header">
+				<span class="sidemenu-item-text">{{::ctrl.user.name}}</span>
 			</li>
-
 		</ul>
+	</div>
+
+	<div class="sidemenu-item">
+		<a href="http://docs.grafana.org" class="sidemenu-link" target="_blank">
+			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-question"></i></span>
+		</a>
+
+		<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
+			<li class="side-menu-header">
+				<span class="sidemenu-item-text">Documentation</span>
+			</li>
+		</ul>
+	</div>
+</div>
 

public/app/core/components/sidemenu/sidemenu.ts

@@ -10,7 +10,7 @@ export class SideMenuCtrl {
   showSignout: boolean;
   user: any;
   mainLinks: any;
-  orgMenu: any;
+  userMenu: any;
   appSubUrl: string;
   loginUrl: string;
   orgFilter: string;
@@ -49,40 +49,39 @@ export class SideMenuCtrl {
  }
 
  openUserDropdown() {
-   this.orgMenu = [
-     {section: 'You', cssClass: 'dropdown-menu-title'},
-     {text: 'Profile', url: this.getUrl('/profile')},
-   ];
+   this.userMenu = [ ];
 
    if (this.showSignout) {
-     this.orgMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self"});
+     this.userMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self", icon: 'fa fa-sign-out'});
    }
 
-   if (this.contextSrv.hasRole('Admin')) {
-     this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
-     this.orgMenu.push({
-       text: "Preferences",
-       url: this.getUrl("/org")
-     });
-     this.orgMenu.push({
-       text: "Users",
-       url: this.getUrl("/org/users")
-     });
-     this.orgMenu.push({
-       text: "User Groups",
-       url: this.getUrl("/org/user-groups")
-     });
-     this.orgMenu.push({
-       text: "API Keys",
-       url: this.getUrl("/org/apikeys")
-     });
-   }
+   this.userMenu.push({text: 'Profile', url: this.getUrl('/profile'), icon: 'fa fa-user'});
 
-   this.orgMenu.push({cssClass: "divider"});
-   this.backendSrv.get('/api/user/orgs').then(orgs => {
-     this.orgs = orgs;
-     this.loadOrgsItems();
-   });
+   // if (this.contextSrv.hasRole('Admin')) {
+   //   this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
+   //   this.orgMenu.push({
+   //     text: "Preferences",
+   //     url: this.getUrl("/org")
+   //   });
+   //   this.orgMenu.push({
+   //     text: "Users",
+   //     url: this.getUrl("/org/users")
+   //   });
+   //   this.orgMenu.push({
+   //     text: "User Groups",
+   //     url: this.getUrl("/org/user-groups")
+   //   });
+   //   this.orgMenu.push({
+   //     text: "API Keys",
+   //     url: this.getUrl("/org/apikeys")
+   //   });
+   // }
+
+   // this.orgMenu.push({cssClass: "divider"});
+   // this.backendSrv.get('/api/user/orgs').then(orgs => {
+   //   this.orgs = orgs;
+   //   this.loadOrgsItems();
+   // });
  }
 
  loadOrgsItems(){

public/app/core/routes/routes.ts

@@ -44,6 +44,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     templateUrl: 'public/app/features/dashboard/partials/dash_list.html',
     controller : 'DashListCtrl',
   })
+  .when('/configuration', {
+    templateUrl: 'public/app/features/admin/partials/configuration_home.html',
+    controller : 'ConfigurationHomeCtrl',
+    controllerAs: 'ctrl',
+    resolve: loadAdminBundle,
+  })
   .when('/datasources', {
     templateUrl: 'public/app/features/plugins/partials/ds_list.html',
     controller : 'DataSourcesCtrl',

public/app/features/admin/admin.ts

@@ -2,6 +2,7 @@ import  AdminListUsersCtrl from './admin_list_users_ctrl';
 import  './adminListOrgsCtrl';
 import  './adminEditOrgCtrl';
 import  './adminEditUserCtrl';
+import  './configuration_home_ctrl';
 
 import coreModule from 'app/core/core_module';
 
@@ -42,6 +43,16 @@ export class AdminStatsCtrl {
   }
 }
 
+export class ConfigurationHomeCtrl {
+  navModel: any;
+
+  /** @ngInject */
+  constructor(private $scope, private backendSrv, private navModelSrv) {
+    this.navModel = navModelSrv.getAdminNav();
+  }
+}
+
+coreModule.controller('ConfigurationHomeCtrl', ConfigurationHomeCtrl);
 coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl);
 coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
 coreModule.controller('AdminStatsCtrl', AdminStatsCtrl);

public/app/features/admin/partials/configuration_home.html

@@ -0,0 +1,48 @@
+<navbar model="ctrl.navModel"></navbar>
+
+<div class="scroll-canvas">
+	<div class="page-container">
+		<div class="page-header">
+			<h1>
+				<i class="fa fa-cogs"></i>
+				<span>Configuration</span>
+			</h1>
+		</div>
+
+		<section class="card-section" layout-mode>
+			<layout-selector></layout-selector>
+
+			<ol class="card-list" >
+				<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
+					<a class="card-item" href="datasources/edit/{{ds.id}}/">
+						<div class="card-item-header">
+							<div class="card-item-type">
+								{{ds.type}}
+							</div>
+						</div>
+						<div class="card-item-body">
+							<figure class="card-item-figure">
+								<img ng-src="{{ds.typeLogoUrl}}">
+							</figure>
+							<div class="card-item-details">
+								<div class="card-item-name">
+									{{ds.name}}
+									<span ng-if="ds.isDefault">
+										<span class="btn btn-secondary btn-mini">default</span>
+									</span>
+								</div>
+								<div class="card-item-sub-name">
+									{{ds.url}}
+								</div>
+							</div>
+						</div>
+					</a>
+				</li>
+			</ol>
+		</section>
+
+		<div ng-if="ctrl.datasources.length === 0">
+			<em>No data sources defined</em>
+		</div>
+	</div>
+</div>

public/sass/_variables.scss

@@ -219,7 +219,7 @@ $btn-padding-y-lg:               .75rem !default;
 $btn-border-radius:              2px;
 
 // sidemenu
-$side-menu-width:  68px;
+$side-menu-width:  60px;
 
 // dashboard
 $panel-margin: 0.4rem;

public/sass/components/_dropdown.scss

@@ -217,7 +217,7 @@
   // Different positioning for bottom up menu
   .dropdown-menu {
     top: auto;
-    bottom: 100%;
+    bottom: 0;
     margin-bottom: 1px;
   }
 }

public/sass/components/_navbar.scss

@@ -59,7 +59,7 @@
   display: block;
   margin-bottom: 3rem;
   background-color: $side-menu-bg;
-  padding: 0.4rem 1.0rem 0.4rem 1rem;
+  padding: 0.4rem 1.0rem 0.4rem 0.65rem;
   min-height: $navbarHeight;
 
   .fa-caret-down {

public/sass/components/_scrollbar.scss

@@ -107,9 +107,9 @@
 }
 
 
-// // Srollbars
-// //
+// Srollbars
 //
+
 // ::-webkit-scrollbar {
 //   width: 8px;
 //   height: 8px;

public/sass/components/_sidemenu.scss

@@ -12,11 +12,19 @@
 }
 
 .sidemenu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  display: flex;
+  flex-flow: column;
+}
 
-  > li {
+.sidemenu__top {
+  flex-grow: 1;
+}
+
+.sidemenu__bottom {
+  padding-bottom: $spacer;
+}
+
+.sidemenu-item {
   position: relative;
   @include left-brand-border();
 
@@ -34,10 +42,30 @@
       // again by the mouse getting outside the hover space
       left: $side-menu-width - 2px;
       @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
-        z-index: -9999;
+      z-index: 1;
     }
   }
 }
+
+.dropup.sidemenu-item:hover .dropdown-menu {
+  top: auto !important;
+}
+
+.sidemenu-link {
+  color: $link-color;
+  line-height: 42px;
+  padding: 0px 10px 0px 10px;
+  display: block;
+  position: relative;
+  font-size: 16px;
+  border: 1px solid transparent;
+
+  img {
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
+  }
 }
 
 @include keyframes(dropdown-anim) {
@@ -59,7 +87,7 @@
     color: $link-color;
     opacity: .7;
     position: relative;
-    left: 7px;
+    left: 3px;
     font-size: 130%;
   }
 
@@ -72,67 +100,17 @@
   }
 
   img {
-    left: 7px;
+    left: 3px;
     position: relative;
   }
 }
 
-.sidemenu-item {
-  color: $link-color;
-  line-height: 42px;
-  padding: 0px 10px 0px 10px;
-  display: block;
-  position: relative;
-  font-size: 16px;
-  border: 1px solid transparent;
-
-  img {
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
-  }
-}
-
 .side-menu-header {
   padding: 10px 10px 10px 20px;
   white-space: nowrap;
   background-color: $side-menu-item-hover-bg;
-  font-size: 18px;
-}
-
-.sidemenu-org-section .dropdown-menu-title {
-  margin: 0 10px 0 6px;
-  padding: 7px 0 7px;
-  overflow: hidden;
-  color: $dropdownTitle;
-}
-
-.sidemenu-org-section .dropdown-menu-title > span {
-  display: inline-block;
-  position: relative;
-
-  &::after {
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 100%;
-    width: 200px;
-    height: 1px;
-    margin-left: 5px;
-    background: $dropdownDivider;
-    content: '';
-  }
-}
-
-.sidemenu-org {
-  padding: 17px 10px 15px 14px;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: table;
-  position: relative;
-  width: 100%;
+  font-size: 17px;
+  font-weight: normal;
 }
 
 .sidemenu .fa-caret-right {
@@ -143,20 +121,14 @@
   color: $text-color-faint;
 }
 
-.sidemenu-org-avatar,
-.sidemenu-org-details {
-  display: table-cell;
-  vertical-align: top;
-}
-
 .sidemenu-org-avatar {
   >img {
     position: absolute;
-    width: 35px;
-    height: 35px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     left: 14px;
-    top: 12px;
+    top: 6px;
     z-index: 10;
   }
 }
@@ -168,19 +140,3 @@
   font-size: $font-size-lg;
 }
 
-.sidemenu-org-details {
-  padding-left: 10px;
-  color: $link-color;
-  display: none;
-}
-
-.sidemenu-org-name {
-  display: block;
-  font-size: 13px;
-  color: $link-color-disabled;
-}
-
-.sidemenu-org-user {
-  display: block;
-}
-

public/views/index.html

@@ -25,7 +25,7 @@
 	<body ng-cloak>
 		<grafana-app class="grafana-app">
 
-      <sidemenu class="sidemenu-wrapper"></sidemenu>
+      <sidemenu class="sidemenu"></sidemenu>
 
 			<div class="page-alert-list">
 				<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">