ux(): app navigation improvements, changes to plugin.json for apps, merged pages with includes section, #4434

pkg/api/dtos/plugins.go

@@ -11,7 +11,6 @@ type PluginSetting struct {
 	Module       string                      `json:"module"`
 	BaseUrl      string                      `json:"baseUrl"`
 	Info         *plugins.PluginInfo         `json:"info"`
-	Pages        []*plugins.AppPluginPage    `json:"pages"`
 	Includes     []*plugins.PluginInclude    `json:"includes"`
 	Dependencies *plugins.PluginDependencies `json:"dependencies"`
 	JsonData     map[string]interface{}      `json:"jsonData"`

pkg/api/index.go

@@ -56,8 +56,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR {
 		dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Divider: true})
-		dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "New", Url: setting.AppSubUrl + "/dashboard/new"})
-		dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "Import", Url: setting.AppSubUrl + "/import/dashboard"})
+		dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "New", Icon: "fa fa-plus", Url: setting.AppSubUrl + "/dashboard/new"})
+		dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "Import", Icon: "fa fa-download", Url: setting.AppSubUrl + "/import/dashboard"})
 	}
 
 	data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
@@ -88,22 +88,41 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	for _, plugin := range enabledPlugins.Apps {
 		if plugin.Pinned {
-			pageLink := &dtos.NavLink{
+			appLink := &dtos.NavLink{
 				Text: plugin.Name,
 				Url:  setting.AppSubUrl + "/plugins/" + plugin.Id + "/edit",
 				Img:  plugin.Info.Logos.Small,
 			}
 
-			for _, page := range plugin.Pages {
-				if !page.SuppressNav {
-					pageLink.Children = append(pageLink.Children, &dtos.NavLink{
-						Url:  setting.AppSubUrl + "/plugins/" + plugin.Id + "/page/" + page.Slug,
-						Text: page.Name,
-					})
+			for _, include := range plugin.Includes {
+				if include.Type == "page" && include.AddToNav {
+					link := &dtos.NavLink{
+						Url:  setting.AppSubUrl + "/plugins/" + plugin.Id + "/page/" + include.Slug,
+						Text: include.Name,
+					}
+					if include.DefaultNav {
+						appLink.Url = link.Url
+					}
+					appLink.Children = append(appLink.Children, link)
+				}
+				if include.Type == "dashboard" && include.AddToNav {
+					link := &dtos.NavLink{
+						Url:  setting.AppSubUrl + "/dashboard/db/" + include.Slug,
+						Text: include.Name,
+					}
+					if include.DefaultNav {
+						appLink.Url = link.Url
+					}
+					appLink.Children = append(appLink.Children, link)
 				}
 			}
 
-			data.MainNavLinks = append(data.MainNavLinks, pageLink)
+			if c.OrgRole == m.ROLE_ADMIN {
+				appLink.Children = append(appLink.Children, &dtos.NavLink{Divider: true})
+				appLink.Children = append(appLink.Children, &dtos.NavLink{Text: "Config", Icon: "fa fa-cog", Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/edit"})
+			}
+
+			data.MainNavLinks = append(data.MainNavLinks, appLink)
 		}
 	}
 

pkg/api/plugins.go

@@ -82,10 +82,6 @@ func GetPluginSettingById(c *middleware.Context) Response {
 			Module:       def.Module,
 		}
 
-		if app, exists := plugins.Apps[pluginId]; exists {
-			dto.Pages = app.Pages
-		}
-
 		query := m.GetPluginSettingByIdQuery{PluginId: pluginId, OrgId: c.OrgId}
 		if err := bus.Dispatch(&query); err != nil {
 			if err != m.ErrPluginSettingNotFound {

pkg/plugins/app_plugin.go

@@ -8,14 +8,6 @@ import (
 	"github.com/grafana/grafana/pkg/models"
 )
 
-type AppPluginPage struct {
-	Name        string          `json:"name"`
-	Slug        string          `json:"slug"`
-	Component   string          `json:"component"`
-	Role        models.RoleType `json:"role"`
-	SuppressNav bool            `json:"suppressNav"`
-}
-
 type AppPluginCss struct {
 	Light string `json:"light"`
 	Dark  string `json:"dark"`
@@ -23,7 +15,6 @@ type AppPluginCss struct {
 
 type AppPlugin struct {
 	FrontendPluginBase
-	Pages  []*AppPluginPage  `json:"pages"`
 	Routes []*AppPluginRoute `json:"routes"`
 
 	FoundChildPlugins []*PluginInclude `json:"-"`
@@ -85,7 +76,7 @@ func (app *AppPlugin) initApp() {
 	}
 
 	// slugify pages
-	for _, page := range app.Pages {
+	for _, page := range app.Includes {
 		if page.Slug == "" {
 			page.Slug = slug.Make(page.Name)
 		}

pkg/plugins/models.go

@@ -7,6 +7,7 @@ import (
 	"strings"
 
 	"github.com/grafana/grafana/pkg/log"
+	"github.com/grafana/grafana/pkg/models"
 	"github.com/grafana/grafana/pkg/setting"
 )
 
@@ -74,10 +75,16 @@ type PluginDependencies struct {
 }
 
 type PluginInclude struct {
-	Name string `json:"name"`
-	Path string `json:"path"`
-	Type string `json:"type"`
-	Id   string `json:"id"`
+	Name       string          `json:"name"`
+	Path       string          `json:"path"`
+	Type       string          `json:"type"`
+	Component  string          `json:"component"`
+	Role       models.RoleType `json:"role"`
+	AddToNav   bool            `json:"AddToNav"`
+	DefaultNav bool            `json:"defaultNav"`
+	Slug       string          `json:"slug"`
+
+	Id string `json:"-"`
 }
 
 type PluginDependencyItem struct {

public/app/core/components/navbar/navbar.html

@@ -8,9 +8,9 @@
 		<i class="fa fa-chevron-left"></i>
 	</a>
 
-	<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
-		<i class="{{::ctrl.icon}}"></i>
-		{{::ctrl.title}}
+	<a href="{{ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
+		<i class="{{ctrl.icon}}"></i>
+		{{ctrl.title}}
 	</a>
 
 	<div ng-transclude></div>

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

@@ -40,7 +40,10 @@
 		</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>
+				<a href="{{::child.url}}">
+					<i class="{{::child.icon}}" ng-show="::child.icon"></i>
+					{{::child.text}}
+				</a>
 			</li>
 		</ul>
 	</li>

public/app/features/panel/panel_menu.js

@@ -56,6 +56,7 @@ function (angular, $, _, Tether) {
 
           template += '<a class="panel-menu-link" ';
           if (item.click) { template += ' ng-click="' + item.click + '"'; }
+          if (item.href) { template += ' href="' + item.href + '"'; }
           template += '>';
           template += item.text + '</a>';
         });

public/app/features/plugins/partials/plugin_edit.html

@@ -62,10 +62,6 @@
             <i class="{{plug.icon}}"></i>
             {{plug.name}}
           </li>
-          <li ng-repeat="page in ctrl.model.pages" class="plugin-info-list-item">
-            <i class="icon-gf icon-gf-share"></i>
-            <a href="plugins/{{ctrl.model.id}}/page/{{page.slug}}">{{page.name}}</a>
-          </li>
         </ul>
       </section>
       <section class="page-sidebar-section">

public/app/features/plugins/partials/plugin_page.html

@@ -1,7 +1,7 @@
 <navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="plugins/{{ctrl.pluginId}}/edit">
 </navbar>
 
-<div class="page-container">
+<div class="page-container" >
 	<div ng-if="ctrl.page">
 		<plugin-component type="app-page">
 		</plugin-component>

public/app/features/plugins/plugin_page_ctrl.ts

@@ -11,11 +11,12 @@ export class AppPageCtrl {
   /** @ngInject */
   constructor(private backendSrv, private $routeParams: any, private $rootScope) {
     this.pluginId = $routeParams.pluginId;
+
     this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(app => {
       this.appModel = app;
-      this.page = _.findWhere(app.pages, {slug: this.$routeParams.slug});
+      this.page = _.findWhere(app.includes, {slug: this.$routeParams.slug});
       if (!this.page) {
-        $rootScope.appEvent('alert-error', ['App Page Not Found', '']);
+        this.$rootScope.appEvent('alert-error', ['App Page Not Found', '']);
       }
     });
   }