feat(apps): more work on app pages and sidemenu subnav

pkg/api/dtos/index.go

@@ -19,8 +19,9 @@ type PluginCss struct {
 }
 
 type NavLink struct {
-	Text string `json:"text"`
-	Icon string `json:"icon"`
-	Img  string `json:"img"`
-	Url  string `json:"url"`
+	Text     string     `json:"text"`
+	Icon     string     `json:"icon"`
+	Img      string     `json:"img"`
+	Url      string     `json:"url"`
+	Children []*NavLink `json:"children"`
 }

pkg/api/index.go

@@ -51,32 +51,24 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 	data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 		Text: "Dashboards",
 		Icon: "fa fa-fw fa-th-large",
-		Url:  "/",
-	})
-
-	data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
-		Text: "Playlists",
-		Icon: "fa fa-fw fa-list",
-		Url:  "/playlists",
-	})
-
-	data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
-		Text: "Snapshots",
-		Icon: "fa-fw icon-gf icon-gf-snapshot",
-		Url:  "/dashboard/snapshots",
+		Url:  setting.AppSubUrl + "/",
+		Children: []*dtos.NavLink{
+			{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"},
+		},
 	})
 
 	if c.OrgRole == m.ROLE_ADMIN {
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 			Text: "Data Sources",
 			Icon: "fa fa-fw fa-database",
-			Url:  "/datasources",
+			Url:  setting.AppSubUrl + "/datasources",
 		})
 
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 			Text: "Apps",
 			Icon: "fa fa-fw fa-cubes",
-			Url:  "/apps",
+			Url:  setting.AppSubUrl + "/apps",
 		})
 	}
 
@@ -91,11 +83,20 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		}
 
 		if plugin.Pinned {
-			data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
+			pageLink := &dtos.NavLink{
 				Text: plugin.Name,
-				Url:  "/apps/edit/" + plugin.Id,
+				Url:  setting.AppSubUrl + "/apps/" + plugin.Id + "/edit",
 				Img:  plugin.Info.Logos.Small,
-			})
+			}
+
+			for _, page := range plugin.Pages {
+				pageLink.Children = append(pageLink.Children, &dtos.NavLink{
+					Url:  setting.AppSubUrl + "/apps/" + plugin.Id + "/page/" + page.Slug,
+					Text: page.Name,
+				})
+			}
+
+			data.MainNavLinks = append(data.MainNavLinks, pageLink)
 		}
 	}
 

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

@@ -1,7 +1,7 @@
 <ul class="sidemenu sidemenu-main">
 
-	<li class="sidemenu-org-section dropdown" ng-if="ctrl.isSignedIn">
-		<div class="sidemenu-org" data-toggle="dropdown" ng-click="ctrl.openUserDropdown()">
+	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn">
+		<div class="sidemenu-org">
 			<div class="sidemenu-org-avatar">
 				<img ng-src="{{ctrl.user.gravatarUrl}}">
 			</div>
@@ -43,7 +43,15 @@
 				<img ng-src="{{item.img}}" ng-show="item.img">
 			</span>
 			<span class="sidemenu-item-text">{{item.text}}</span>
+			<i class="fa fa-caret-right small" ng-show="item.children"></i>
 		</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>
+			</li>
+		</ul>
 	</li>
 
 	<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="ctrl.systemSection">

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

@@ -16,7 +16,7 @@ export class SideMenuCtrl {
   appSubUrl: string;
 
   /** @ngInject */
-  constructor(private $scope, private $location, private contextSrv, private backendSrv) {
+  constructor(private $scope, private $location, private contextSrv, private backendSrv, private $element) {
     this.isSignedIn = contextSrv.isSignedIn;
     this.user = contextSrv.user;
     this.appSubUrl = config.appSubUrl;
@@ -29,6 +29,7 @@ export class SideMenuCtrl {
         this.contextSrv.sidemenu = false;
       }
     });
+
   }
 
  getUrl(url) {
@@ -36,9 +37,8 @@ export class SideMenuCtrl {
  }
 
  setupMainNav() {
-   this.mainLinks = config.bootData.mainNavLinks.map(item => {
-     return {text: item.text, icon: item.icon, img: item.img, url: this.getUrl(item.url)};
-   });
+   this.mainLinks = config.bootData.mainNavLinks;
+   this.openUserDropdown();
  }
 
  openUserDropdown() {

public/less/login.less

@@ -84,7 +84,6 @@
     min-width: 150px;
     display: inline-block;
     border: 1px solid lighten(@btnInverseBackground, 10%);
-    color: @grayLight;
   }
 }
 

public/less/sidemenu.less

@@ -41,8 +41,8 @@
   .top-nav-menu-btn {
     a {
       background-color: @sideMenuBackground;
-      padding-right: 46px;
-      padding-left: 24px;
+      padding-right: 54px;
+      padding-left: 16px;
     }
     .icon-gf-grafana_wordmark  {
       display: inline-block;
@@ -76,6 +76,13 @@
       color: @linkColor;
     }
   }
+
+  li:hover {
+    position: relative;
+    .dropdown-menu {
+      display: block;
+    }
+  }
 }
 
 .sidemenu-main-link {
@@ -88,6 +95,7 @@
   vertical-align: middle;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon-circle {
@@ -111,9 +119,8 @@
 .sidemenu-item {
   color: @linkColor;
   line-height: 47px;
-  padding: 0px 10px 0px 20px;
+  padding: 0px 10px 0px 10px;
   display: block;
-  white-space: nowrap;
 
   &:hover {
     background-color: @sideMenuBackgroundHighlight;
@@ -193,7 +200,7 @@
 .sidemenu-org {
   border-bottom: @sideMenuBorder;
   border-top: @sideMenuBorder;
-  padding: 17px 10px 15px 21px;
+  padding: 17px 10px 15px 14px;
   box-sizing: border-box;
   cursor: pointer;
   &:hover {