ux(): added New and Import under divider to dashboard subnav

pkg/api/dtos/index.go

@@ -16,9 +16,10 @@ type PluginCss struct {
 }
 
 type NavLink struct {
-	Text     string     `json:"text"`
-	Icon     string     `json:"icon"`
-	Img      string     `json:"img"`
-	Url      string     `json:"url"`
-	Children []*NavLink `json:"children"`
+	Text     string     `json:"text,omitempty"`
+	Icon     string     `json:"icon,omitempty"`
+	Img      string     `json:"img,omitempty"`
+	Url      string     `json:"url,omitempty"`
+	Divider  bool       `json:"divider,omitempty"`
+	Children []*NavLink `json:"children,omitempty"`
 }

pkg/api/index.go

@@ -53,9 +53,12 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		Icon: "icon-gf icon-gf-dashboard",
 		Url:  setting.AppSubUrl + "/",
 		Children: []*dtos.NavLink{
-			{Text: "Home dashboard", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/"},
-			{Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"},
-			{Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"},
+			{Text: "Home", Url: setting.AppSubUrl + "/"},
+			{Text: "Playlists", Url: setting.AppSubUrl + "/playlists"},
+			{Text: "Snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots"},
+			{Divider: true},
+			{Text: "New", Url: setting.AppSubUrl + "/dashboard/new"},
+			{Text: "Import", Url: setting.AppSubUrl + "/import/dashboard"},
 		},
 	})
 

public/app/core/components/grafana_app.ts

@@ -77,8 +77,8 @@ export class GrafanaCtrl {
         });
       };
 
-      $rootScope.performance.scopeCount = scopes;
       f(root);
+      $rootScope.performance.scopeCount = scopes;
       return count;
     };
 

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

 <ul class="sidemenu">
 
-	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
+	<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
 		<a class="sidemenu-org" href="profile">
 			<div class="sidemenu-org-avatar">
-				<img ng-if="ctrl.user.gravatarUrl" ng-src="{{ctrl.user.gravatarUrl}}">
+				<img ng-src="{{::ctrl.user.gravatarUrl}}">
 				<span class="sidemenu-org-avatar--missing">
 					<i class="fa fa-fw fa-user"></i>
 				</span>
 			</div>
 			<div class="sidemenu-org-details">
-				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
-				<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
+				<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
+				<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
 			</div>
 		</a>
 		<i class="fa fa-caret-right"></i>
 		<ul class="dropdown-menu" role="menu">
-			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">
-				<span ng-if="menuItem.section">{{menuItem.section}}</span>
-				<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}">
-					<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
-					{{menuItem.text}}
+			<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>
-				<a ng-click="menuItem.click()" ng-if="menuItem.click">
-					<i class="{{menuItem.icon}}"></i>
-					{{menuItem.text}}
+				<a ng-click="menuItem.click()" ng-show="::menuItem.click">
+					<i class="{{::menuItem.icon}}"></i>
+					{{::menuItem.text}}
 				</a>
 			</li>
 		</ul>
 	</li>
 
-	<li ng-repeat="item in ctrl.mainLinks" class="dropdown">
-		<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
+	<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
+		<a href="{{::item.url}}" class="sidemenu-item sidemenu-main-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">
+				<i class="{{::item.icon}}" ng-show="::item.icon"></i>
+				<img ng-src="{{::item.img}}" ng-show="::item.img">
 			</span>
-			<span class="sidemenu-item-text">{{item.text}}</span>
-			<span class="fa fa-caret-right" ng-if="item.children"></span>
+			<span class="sidemenu-item-text">{{::item.text}}</span>
+			<span class="fa fa-caret-right" ng-if="::item.children"></span>
 		</a>
-		<ul class="dropdown-menu" role="menu" ng-if="item.children">
-			<li ng-repeat="child in item.children">
-				<a href="{{child.url}}">
-					{{child.text}}
-				</a>
+		<ul class="dropdown-menu" role="menu" ng-if="::item.children">
+			<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
+				<a href="{{::child.url}}">{{::child.text}}</a>
 			</li>
 		</ul>
 	</li>
 
-	<li ng-if="!ctrl.isSignedIn">
+	<li ng-show="::!ctrl.isSignedIn">
 		<a href="login" class="sidemenu-item" 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>

public/sass/components/_dropdown.scss

@@ -59,8 +59,8 @@
   }
 
   .divider {
-    height: 1px;
-    margin: (($line-height-base / 2) - 1) 1px; // 8px 1px
+    height: 0.1rem;
+    margin: 0.5rem 0; // 8px 1px
     overflow: hidden;
     background-color: $dropdownDividerTop;
     border-bottom: 1px solid $dropdownDividerBottom;