Commit 4cd4ce50 by Torkel Ödegaard

feat(plugins): worked on markdown support for plugin page, #4275

parent a6c6b00d
...@@ -18,14 +18,14 @@ module.exports = function(grunt) { ...@@ -18,14 +18,14 @@ module.exports = function(grunt) {
}, },
pluginDef: { pluginDef: {
expand: true, expand: true,
src: 'plugin.json', src: ['plugin.json', 'readme.md'],
dest: 'dist', dest: 'dist',
} }
}, },
watch: { watch: {
rebuild_all: { rebuild_all: {
files: ['src/**/*', 'plugin.json'], files: ['src/**/*', 'plugin.json', 'readme.md'],
tasks: ['default'], tasks: ['default'],
options: {spawn: false} options: {spawn: false}
}, },
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
"dependencies": { "dependencies": {
"babel-plugin-transform-es2015-modules-systemjs": "^6.5.0", "babel-plugin-transform-es2015-modules-systemjs": "^6.5.0",
"babel-preset-es2015": "^6.5.0", "babel-preset-es2015": "^6.5.0",
"lodash": "~4.0.0" "lodash": "~4.0.0",
}, },
"homepage": "https://github.com/raintank/kentik-app-poc#readme" "homepage": "https://github.com/raintank/kentik-app-poc#readme"
} }
## Overview
This application is an example app.
### Awesome
Even though it does not have any features it is still pretty awesome.
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
"grunt-sync": "^0.4.1", "grunt-sync": "^0.4.1",
"karma-sinon": "^1.0.3", "karma-sinon": "^1.0.3",
"lodash": "^2.4.1", "lodash": "^2.4.1",
"remarkable": "^1.6.2",
"sinon": "1.16.1", "sinon": "1.16.1",
"systemjs-builder": "^0.15.7", "systemjs-builder": "^0.15.7",
"tether": "^1.2.0", "tether": "^1.2.0",
......
...@@ -33,6 +33,14 @@ func (pb *PluginBase) registerPlugin(pluginDir string) error { ...@@ -33,6 +33,14 @@ func (pb *PluginBase) registerPlugin(pluginDir string) error {
log.Info("Plugins: Registering plugin %v", pb.Name) log.Info("Plugins: Registering plugin %v", pb.Name)
} }
if len(pb.Dependencies.Plugins) == 0 {
pb.Dependencies.Plugins = []PluginDependencyItem{}
}
if pb.Dependencies.GrafanaVersion == "" {
pb.Dependencies.GrafanaVersion = "*"
}
pb.PluginDir = pluginDir pb.PluginDir = pluginDir
Plugins[pb.Id] = pb Plugins[pb.Id] = pb
return nil return nil
......
...@@ -8,18 +8,21 @@ export class PluginEditCtrl { ...@@ -8,18 +8,21 @@ export class PluginEditCtrl {
pluginIcon: string; pluginIcon: string;
pluginId: any; pluginId: any;
includedPanels: any; includedPanels: any;
readmeHtml: any;
includedDatasources: any; includedDatasources: any;
tabIndex: number; tabIndex: number;
preUpdateHook: () => any; preUpdateHook: () => any;
postUpdateHook: () => any; postUpdateHook: () => any;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv: any, private $routeParams: any) { constructor(private backendSrv, private $routeParams, private $sce, private $http) {
this.model = {}; this.model = {};
this.pluginId = $routeParams.pluginId; this.pluginId = $routeParams.pluginId;
this.tabIndex = 0; this.tabIndex = 0;
}
this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => { init() {
return this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => {
this.model = result; this.model = result;
this.includedPanels = _.where(result.includes, {type: 'panel'}); this.includedPanels = _.where(result.includes, {type: 'panel'});
this.includedDatasources = _.where(result.includes, {type: 'datasource'}); this.includedDatasources = _.where(result.includes, {type: 'datasource'});
...@@ -28,6 +31,17 @@ export class PluginEditCtrl { ...@@ -28,6 +31,17 @@ export class PluginEditCtrl {
this.model.dependencies.plugins.forEach(plug => { this.model.dependencies.plugins.forEach(plug => {
plug.icon = this.getPluginIcon(plug.type); plug.icon = this.getPluginIcon(plug.type);
}); });
return this.initReadme();
});
}
initReadme() {
return this.$http.get(this.model.baseUrl + '/readme.md').then(res => {
return System.import('remarkable').then(Remarkable => {
var md = new Remarkable();
this.readmeHtml = this.$sce.trustAsHtml(md.render(res.data));
});
}); });
} }
......
<navbar title="Plugins" title-url="plugins" icon="icon-gf icon-gf-apps"> <navbar title="Plugins" title-url="plugins" icon="icon-gf icon-gf-apps">
<a href="plugins/apps" class="navbar-page-btn"> <a href="plugins" class="navbar-page-btn">
Plugin details {{ctrl.model.name}}
</a> </a>
</navbar> </navbar>
<div class="page-container"> <div class="page-container" ng-init="ctrl.init()">
<div class="plugin-header"> <div class="plugin-header">
<span ng-show="ctrl.model.info.logos.large" class="plugin-header-logo"> <span ng-show="ctrl.model.info.logos.large" class="plugin-header-logo">
<img src="{{ctrl.model.info.logos.large}}"> <img src="{{ctrl.model.info.logos.large}}">
...@@ -30,7 +30,8 @@ ...@@ -30,7 +30,8 @@
<div class="page-body"> <div class="page-body">
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 0"> <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 0">
README.md <div ng-bind-html="ctrl.readmeHtml">
</div>
</div> </div>
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 1"> <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 1">
......
...@@ -62,10 +62,10 @@ export class TextPanelCtrl extends PanelCtrl { ...@@ -62,10 +62,10 @@ export class TextPanelCtrl extends PanelCtrl {
if (this.converter) { if (this.converter) {
this.updateContent(this.converter.makeHtml(text)); this.updateContent(this.converter.makeHtml(text));
} else { } else {
System.import('vendor/showdown').then(Showdown => { return System.import('remarkable').then(Remarkable => {
this.converter = new Showdown.converter(); var md = new Remarkable();
this.$scope.$apply(() => { this.$scope.$apply(() => {
this.updateContent(this.converter.makeHtml(text)); this.updateContent(md.render(text));
}); });
}); });
} }
......
...@@ -2,6 +2,7 @@ System.config({ ...@@ -2,6 +2,7 @@ System.config({
defaultJSExtenions: true, defaultJSExtenions: true,
baseURL: 'public', baseURL: 'public',
paths: { paths: {
'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
'tether': 'vendor/npm/tether/dist/js/tether.js', 'tether': 'vendor/npm/tether/dist/js/tether.js',
'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js', 'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
'moment': 'vendor/moment.js', 'moment': 'vendor/moment.js',
......
...@@ -33,6 +33,8 @@ module.exports = function(config) { ...@@ -33,6 +33,8 @@ module.exports = function(config) {
'rxjs/**/*', 'rxjs/**/*',
'tether/**/*', 'tether/**/*',
'tether-drop/**/*', 'tether-drop/**/*',
'tether-drop/**/*',
'remarkable/dist/*',
], ],
dest: '<%= srcDir %>/vendor/npm' dest: '<%= srcDir %>/vendor/npm'
} }
......
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