Skip to content

N
nexpie-grafana-theme
Commit 18eb9d60 by Torkel Ödegaard
Options

feat(apps): began work on app pages

parent 82d5d1b0
Showing with 106 additions and 65 deletions
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 0 → 100644
<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
......@@ -12,8 +12,8 @@ type AppSettings struct {
Pinned bool `json:"pinned"`
Module string `json:"module"`
Info *plugins.PluginInfo `json:"info"`
Pages []plugins.AppPluginPage `json:"pages"`
Includes []plugins.AppIncludeInfo `json:"includes"`
Pages []*plugins.AppPluginPage `json:"pages"`
Includes []*plugins.AppIncludeInfo `json:"includes"`
JsonData map[string]interface{} `json:"jsonData"`
}
......
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"`
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/core/routes/all.js → public/app/core/routes/routes.ts
define([
'angular',
'../core_module',
'./bundle_loader',
'./dashboard_loaders',
], function(angular, coreModule, BundleLoader) {
"use strict";
///<reference path="../../headers/common.d.ts" />
coreModule.default.config(function($routeProvider, $locationProvider) {
import angular from 'angular';
import coreModule from 'app/core/core_module';
import {BundleLoader} from './bundle_loader';
/** @ngInject **/
function setupAngularRoutes($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var loadOrgBundle = new BundleLoader.BundleLoader('app/features/org/all');
var loadAppsBundle = new BundleLoader.BundleLoader('app/features/apps/all');
var loadOrgBundle = new BundleLoader('app/features/org/all');
var loadAppsBundle = new BundleLoader('app/features/apps/all');
$routeProvider
.when('/', {
......@@ -148,12 +147,18 @@ define([
controllerAs: 'ctrl',
resolve: loadAppsBundle,
})
.when('/apps/edit/:appId', {
.when('/apps/:appId/edit', {
templateUrl: 'public/app/features/apps/partials/edit.html',
controller: 'AppEditCtrl',
controllerAs: 'ctrl',
resolve: loadAppsBundle,
})
.when('/apps/:appId/page/:slug', {
templateUrl: 'public/app/features/apps/partials/page.html',
controller: 'AppPageCtrl',
controllerAs: 'ctrl',
resolve: loadAppsBundle,
})
.when('/global-alerts', {
templateUrl: 'public/app/features/dashboard/partials/globalAlerts.html',
})
......@@ -161,6 +166,6 @@ define([
templateUrl: 'public/app/partials/error.html',
controller: 'ErrorCtrl'
});
});
}
});
coreModule.config(setupAngularRoutes);
public/app/features/apps/all.ts
import './edit_ctrl';
import './page_ctrl';
import './list_ctrl';
public/app/features/apps/page_ctrl.ts 0 → 100644
///<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 0 → 100644
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment