feat(apps): began work on app pages

examples/nginx-app/module.js

 define([
-  'angular',
-  'app/app'
-], function(angular, app)  {
+], function()  {
+  'use strict';
 
-  var module = angular.module('nginx-app', []);
-  app.default.useModule(module);
+  function StreamPageCtrl() {}
+  StreamPageCtrl.templateUrl = 'public/plugins/nginx-app/partials/stream.html';
 
-  module.config(function($routeProvider) {
-    $routeProvider
-      .when('/nginx/stream', {
-        templateUrl: 'public/plugins/nginx-app/partials/stream.html',
-      });
-  });
+  function LogsPageCtrl() {}
+  LogsPageCtrl.templateUrl = 'public/plugins/nginx-app/partials/logs.html';
 
-  function NginxConfigCtrl() {
-    this.appEditCtrl.beforeUpdate = function() {
-      alert('before!');
-    };
-  }
+  function NginxConfigCtrl() {}
   NginxConfigCtrl.templateUrl = 'public/plugins/nginx-app/partials/config.html';
 
-
   return {
-    ConfigCtrl: NginxConfigCtrl
+    ConfigCtrl: NginxConfigCtrl,
+    StreamPageCtrl: StreamPageCtrl,
+    LogsPageCtrl: LogsPageCtrl,
   };
 
 });

examples/nginx-app/partials/logs.html

+
+<h1>Nginx logs view</h1>
+
+Logs!

examples/nginx-app/partials/stream.html

-<topnav title="Nginx" icon="fa fa-fw fa-cubes" subnav="true">
-	<ul class="nav">
-		<li class="active" ><a href="org/apps">Overview</a></li>
-	</ul>
-</topnav>
 
-<div class="page-container" style="background: transparent; border: 0;">
-  <div class="page-wide" ng-init="ctrl.init()">
-		<h1>NGINX app</h1>
-	</div>
-</div>
+<h1>Nginx stream view</h1>
 
+testing!

examples/nginx-app/plugin.json

@@ -6,8 +6,8 @@
   "staticRoot": ".",
 
   "pages": [
-    {"name": "Live stream", "url": "nginx/stream", "reqRole": "Editor"},
-    {"name": "Log view", "url": "nginx/log", "reqRole": "Editor"}
+    { "name": "Live stream", "component": "StreamPageCtrl", "role": "Editor"},
+    { "name": "Log view", "component": "LogsPageCtrl", "role": "Viewer"}
   ],
 
   "css": {

pkg/api/dtos/apps.go

@@ -6,15 +6,15 @@ import (
 )
 
 type AppSettings struct {
-	Name     string                   `json:"name"`
-	AppId    string                   `json:"appId"`
-	Enabled  bool                     `json:"enabled"`
-	Pinned   bool                     `json:"pinned"`
-	Module   string                   `json:"module"`
-	Info     *plugins.PluginInfo      `json:"info"`
-	Pages    []plugins.AppPluginPage  `json:"pages"`
-	Includes []plugins.AppIncludeInfo `json:"includes"`
-	JsonData map[string]interface{}   `json:"jsonData"`
+	Name     string                    `json:"name"`
+	AppId    string                    `json:"appId"`
+	Enabled  bool                      `json:"enabled"`
+	Pinned   bool                      `json:"pinned"`
+	Module   string                    `json:"module"`
+	Info     *plugins.PluginInfo       `json:"info"`
+	Pages    []*plugins.AppPluginPage  `json:"pages"`
+	Includes []*plugins.AppIncludeInfo `json:"includes"`
+	JsonData map[string]interface{}    `json:"jsonData"`
 }
 
 func NewAppSettingsDto(def *plugins.AppPlugin, data *models.AppSettings) *AppSettings {

pkg/api/index.go

@@ -86,10 +86,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 	}
 
 	for _, plugin := range enabledPlugins.Apps {
-		if plugin.Module != "" {
-			data.PluginModules = append(data.PluginModules, plugin.Module)
-		}
-
 		if plugin.Css != nil {
 			data.PluginCss = append(data.PluginCss, &dtos.PluginCss{Light: plugin.Css.Light, Dark: plugin.Css.Dark})
 		}

pkg/plugins/app_plugin.go

@@ -4,13 +4,15 @@ import (
 	"encoding/json"
 	"strings"
 
+	"github.com/gosimple/slug"
 	"github.com/grafana/grafana/pkg/models"
 )
 
 type AppPluginPage struct {
-	Name    string          `json:"name"`
-	Url     string          `json:"url"`
-	ReqRole models.RoleType `json:"reqRole"`
+	Name      string          `json:"name"`
+	Slug      string          `json:"slug"`
+	Component string          `json:"component"`
+	Role      models.RoleType `json:"role"`
 }
 
 type AppPluginCss struct {
@@ -27,9 +29,9 @@ type AppIncludeInfo struct {
 type AppPlugin struct {
 	FrontendPluginBase
 	Css      *AppPluginCss     `json:"css"`
-	Pages    []AppPluginPage   `json:"pages"`
+	Pages    []*AppPluginPage  `json:"pages"`
 	Routes   []*AppPluginRoute `json:"routes"`
-	Includes []AppIncludeInfo  `json:"-"`
+	Includes []*AppIncludeInfo `json:"-"`
 
 	Pinned  bool `json:"-"`
 	Enabled bool `json:"-"`
@@ -67,7 +69,7 @@ func (app *AppPlugin) Load(decoder *json.Decoder, pluginDir string) error {
 	for _, panel := range Panels {
 		if strings.HasPrefix(panel.PluginDir, app.PluginDir) {
 			panel.IncludedInAppId = app.Id
-			app.Includes = append(app.Includes, AppIncludeInfo{
+			app.Includes = append(app.Includes, &AppIncludeInfo{
 				Name: panel.Name,
 				Id:   panel.Id,
 				Type: panel.Type,
@@ -75,6 +77,12 @@ func (app *AppPlugin) Load(decoder *json.Decoder, pluginDir string) error {
 		}
 	}
 
+	for _, page := range app.Pages {
+		if page.Slug == "" {
+			page.Slug = slug.Make(page.Name)
+		}
+	}
+
 	Apps[app.Id] = app
 	return nil
 }

public/app/app.ts

@@ -72,12 +72,6 @@ export class GrafanaApp {
     this.useModule(coreModule);
 
     var preBootRequires = [System.import('app/features/all')];
-    var pluginModules = config.bootData.pluginModules || [];
-
-    // add plugin modules
-    for (var i = 0; i < pluginModules.length; i++) {
-      preBootRequires.push(System.import(pluginModules[i]));
-    }
 
     Promise.all(preBootRequires).then(() => {
       // disable tool tip animation

public/app/core/core.ts

@@ -28,7 +28,7 @@ import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import 'app/core/controllers/all';
 import 'app/core/services/all';
-import 'app/core/routes/all';
+import 'app/core/routes/routes';
 import './filters/filters';
 import coreModule from './core_module';
 

public/app/core/directives/plugin_component.ts

@@ -143,15 +143,28 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
       }
       // AppConfigCtrl
       case 'app-config-ctrl': {
-        return System.import(scope.ctrl.appModel.module).then(function(appModule) {
+        let appModel = scope.ctrl.appModel;
+        return System.import(appModel.module).then(function(appModule) {
           return {
-            name: 'app-config-' + scope.ctrl.appModel.appId,
+            name: 'app-config-' + appModel.appId,
             bindings: {appModel: "=", appEditCtrl: "="},
             attrs: {"app-model": "ctrl.appModel", "app-edit-ctrl": "ctrl"},
             Component: appModule.ConfigCtrl,
           };
         });
       }
+      // App Page
+      case 'app-page': {
+        let appModel = scope.ctrl.appModel;
+        return System.import(appModel.module).then(function(appModule) {
+          return {
+            name: 'app-page-' + appModel.appId + '-' + scope.ctrl.page.slug,
+            bindings: {appModel: "="},
+            attrs: {"app-model": "ctrl.appModel"},
+            Component: appModule[scope.ctrl.page.component],
+          };
+        });
+      }
       // Panel
       case 'panel': {
         return loadPanelComponentInfo(scope, attrs);

public/app/features/apps/all.ts

 import './edit_ctrl';
+import './page_ctrl';
 import './list_ctrl';

public/app/features/apps/page_ctrl.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+
+export class AppPageCtrl {
+  page: any;
+  appModel: any;
+
+  /** @ngInject */
+  constructor(private backendSrv, private $routeParams: any, private $rootScope) {
+    this.backendSrv.get(`/api/org/apps/${this.$routeParams.appId}/settings`).then(app => {
+      this.appModel = app;
+      this.page = _.findWhere(app.pages, {slug: this.$routeParams.slug});
+      if (!this.page) {
+        $rootScope.appEvent('alert-error', ['App Page Not Found', '']);
+      }
+    });
+  }
+}
+
+angular.module('grafana.controllers').controller('AppPageCtrl', AppPageCtrl);
+

public/app/features/apps/partials/list.html

@@ -24,7 +24,7 @@
               </div>
             </div>
 						<span class="filter-list-card-title">
-							<a href="apps/edit/{{app.appId}}">
+							<a href="apps/{{app.appId}}/edit">
 								{{app.name}}
 							</a>
 							&nbsp; &nbsp;

public/app/features/apps/partials/page.html

+<navbar icon="fa fa-fw fa-cubes" title="{{ctrl.appModel.name}}" subnav="true">
+	<ul class="nav">
+		<li class="active"><a href="apps/nginx">{{ctrl.page.name}}</a></li>
+	</ul>
+</navbar>
+
+<h2>
+	App page
+</h2>
+
+<div ng-if="ctrl.page">
+	<plugin-component type="app-page" page="ctrl.page">
+	</plugin-component>
+</div>

public/views/index.html

@@ -50,7 +50,6 @@
 		window.grafanaBootData = {
 			user:[[.User]],
 			settings: [[.Settings]],
-			pluginModules: [[.PluginModules]],
 			mainNavLinks: [[.MainNavLinks]]
 		};
 	</script>