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

examples/nginx-app/Gruntfile.js

@@ -18,14 +18,14 @@ module.exports = function(grunt) {
       },
       pluginDef: {
         expand: true,
-        src: 'plugin.json',
+        src: ['plugin.json', 'readme.md'],
         dest: 'dist',
       }
     },
 
     watch: {
       rebuild_all: {
-        files: ['src/**/*', 'plugin.json'],
+        files: ['src/**/*', 'plugin.json', 'readme.md'],
         tasks: ['default'],
         options: {spawn: false}
       },

examples/nginx-app/package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "babel-plugin-transform-es2015-modules-systemjs": "^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"
 }

examples/nginx-app/readme.md

+## Overview
+
+This application is an example app.
+
+### Awesome
+
+Even though it does not have any features it is still pretty awesome.

package.json

@@ -72,6 +72,7 @@
     "grunt-sync": "^0.4.1",
     "karma-sinon": "^1.0.3",
     "lodash": "^2.4.1",
+    "remarkable": "^1.6.2",
     "sinon": "1.16.1",
     "systemjs-builder": "^0.15.7",
     "tether": "^1.2.0",

pkg/plugins/models.go

@@ -33,6 +33,14 @@ func (pb *PluginBase) registerPlugin(pluginDir string) error {
 		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
 	Plugins[pb.Id] = pb
 	return nil

public/app/features/plugins/edit_ctrl.ts

@@ -8,18 +8,21 @@ export class PluginEditCtrl {
   pluginIcon: string;
   pluginId: any;
   includedPanels: any;
+  readmeHtml: any;
   includedDatasources: any;
   tabIndex: number;
   preUpdateHook: () => any;
   postUpdateHook: () => any;
 
   /** @ngInject */
-  constructor(private backendSrv: any, private $routeParams: any) {
+  constructor(private backendSrv, private $routeParams, private $sce, private $http) {
     this.model = {};
     this.pluginId = $routeParams.pluginId;
     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.includedPanels = _.where(result.includes, {type: 'panel'});
       this.includedDatasources = _.where(result.includes, {type: 'datasource'});
@@ -28,6 +31,17 @@ export class PluginEditCtrl {
       this.model.dependencies.plugins.forEach(plug => {
         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));
+      });
     });
   }
 

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

 <navbar title="Plugins" title-url="plugins" icon="icon-gf icon-gf-apps">
-	<a href="plugins/apps" class="navbar-page-btn">
-		Plugin details
+	<a href="plugins" class="navbar-page-btn">
+    {{ctrl.model.name}}
 	</a>
 </navbar>
 
-<div class="page-container">
+<div class="page-container" ng-init="ctrl.init()">
   <div class="plugin-header">
 		<span ng-show="ctrl.model.info.logos.large" class="plugin-header-logo">
 			<img src="{{ctrl.model.info.logos.large}}">
@@ -30,7 +30,8 @@
 
 	<div class="page-body">
 		<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 0">
-			README.md
+      <div ng-bind-html="ctrl.readmeHtml">
+      </div>
 		</div>
 
 		<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 1">

public/app/plugins/panel/text/module.ts

@@ -62,10 +62,10 @@ export class TextPanelCtrl extends PanelCtrl {
     if (this.converter) {
       this.updateContent(this.converter.makeHtml(text));
     } else {
-      System.import('vendor/showdown').then(Showdown => {
-        this.converter = new Showdown.converter();
+      return System.import('remarkable').then(Remarkable => {
+        var md = new Remarkable();
         this.$scope.$apply(() => {
-          this.updateContent(this.converter.makeHtml(text));
+          this.updateContent(md.render(text));
         });
       });
     }

public/app/system.conf.js

@@ -2,6 +2,7 @@ System.config({
   defaultJSExtenions: true,
   baseURL: 'public',
   paths: {
+    'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
     'tether': 'vendor/npm/tether/dist/js/tether.js',
     'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
     'moment': 'vendor/moment.js',

tasks/options/copy.js

@@ -33,6 +33,8 @@ module.exports = function(config) {
         'rxjs/**/*',
         'tether/**/*',
         'tether-drop/**/*',
+        'tether-drop/**/*',
+        'remarkable/dist/*',
       ],
       dest: '<%= srcDir %>/vendor/npm'
     }