feat(plugins): polish to plugin page, better handling for reading readme file contents

pkg/api/api.go

@@ -175,9 +175,8 @@ func Register(r *macaron.Macaron) {
 		r.Group("/plugins", func() {
 			r.Get("/", wrap(GetPluginList))
 
-			r.Get("/dashboards/:pluginId", wrap(GetPluginDashboards))
-			r.Post("/dashboards/import", bind(dtos.ImportDashboardCommand{}), wrap(ImportDashboard))
-
+			r.Get("/:pluginId/readme", wrap(GetPluginReadme))
+			r.Get("/:pluginId/dashboards/", wrap(GetPluginDashboards))
 			r.Get("/:pluginId/settings", wrap(GetPluginSettingById))
 			r.Post("/:pluginId/settings", bind(m.UpdatePluginSettingCmd{}), wrap(UpdatePluginSetting))
 		}, reqOrgAdmin)
@@ -193,6 +192,7 @@ func Register(r *macaron.Macaron) {
 			r.Get("/file/:file", GetDashboardFromJsonFile)
 			r.Get("/home", GetHomeDashboard)
 			r.Get("/tags", GetDashboardTags)
+			r.Post("/import", bind(dtos.ImportDashboardCommand{}), wrap(ImportDashboard))
 		})
 
 		// Dashboard snapshots

pkg/api/plugins.go

@@ -122,6 +122,20 @@ func GetPluginDashboards(c *middleware.Context) Response {
 	}
 }
 
+func GetPluginReadme(c *middleware.Context) Response {
+	pluginId := c.Params(":pluginId")
+
+	if content, err := plugins.GetPluginReadme(pluginId); err != nil {
+		if notfound, ok := err.(plugins.PluginNotFoundError); ok {
+			return ApiError(404, notfound.Error(), nil)
+		}
+
+		return ApiError(500, "Could not get readme", err)
+	} else {
+		return Respond(200, content)
+	}
+}
+
 func ImportDashboard(c *middleware.Context, apiCmd dtos.ImportDashboardCommand) Response {
 
 	cmd := plugins.ImportDashboardCommand{

pkg/plugins/models.go

@@ -43,6 +43,9 @@ type PluginBase struct {
 
 	IncludedInAppId string `json:"-"`
 	PluginDir       string `json:"-"`
+
+	// cache for readme file contents
+	Readme []byte `json:"-"`
 }
 
 func (pb *PluginBase) registerPlugin(pluginDir string) error {

pkg/plugins/plugins.go

@@ -3,6 +3,7 @@ package plugins
 import (
 	"encoding/json"
 	"errors"
+	"io/ioutil"
 	"os"
 	"path"
 	"path/filepath"
@@ -155,3 +156,31 @@ func (scanner *PluginScanner) loadPluginJson(pluginJsonFilePath string) error {
 	reader.Seek(0, 0)
 	return loader.Load(jsonParser, currentDir)
 }
+
+func GetPluginReadme(pluginId string) ([]byte, error) {
+	plug, exists := Plugins[pluginId]
+	if !exists {
+		return nil, PluginNotFoundError{pluginId}
+	}
+
+	if plug.Readme != nil {
+		return plug.Readme, nil
+	}
+
+	readmePath := filepath.Join(plug.PluginDir, "README.md")
+	if _, err := os.Stat(readmePath); os.IsNotExist(err) {
+		readmePath = filepath.Join(plug.PluginDir, "readme.md")
+	}
+
+	if _, err := os.Stat(readmePath); os.IsNotExist(err) {
+		plug.Readme = make([]byte, 0)
+		return plug.Readme, nil
+	}
+
+	if readmeBytes, err := ioutil.ReadFile(readmePath); err != nil {
+		return nil, err
+	} else {
+		plug.Readme = readmeBytes
+		return plug.Readme, nil
+	}
+}

public/app/features/plugins/import_list/import_list.ts

@@ -12,7 +12,7 @@ export class DashImportListCtrl {
   constructor(private $http, private backendSrv, private $rootScope) {
     this.dashboards = [];
 
-    backendSrv.get(`/api/plugins/dashboards/${this.plugin.id}`).then(dashboards => {
+    backendSrv.get(`/api/plugins/${this.plugin.id}/dashboards`).then(dashboards => {
       this.dashboards = dashboards;
     });
   }
@@ -34,7 +34,7 @@ export class DashImportListCtrl {
       });
     }
 
-    this.backendSrv.post(`/api/plugins/dashboards/import`, installCmd).then(res => {
+    this.backendSrv.post(`/api/dashboards/import`, installCmd).then(res => {
       this.$rootScope.appEvent('alert-success', ['Dashboard Installed', dash.title]);
       _.extend(dash, res);
     });

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

@@ -26,8 +26,8 @@
 					{{plugin.type}}
 				</td>
 				<td>
-					<span class="label label-info" ng-if="plugin.enabled">Enabled</span>
-					<span class="label label-info" ng-if="plugin.pinned">Pinned</span>
+					<span class="label label-secondary" ng-if="plugin.enabled">Enabled</span>
+					<span class="label label-secondary" ng-if="plugin.pinned">Pinned</span>
 				</td>
 				<td class="text-right">
 					<a href="plugins/{{plugin.id}}/edit" class="btn btn-inverse btn-small">

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -40,10 +40,10 @@ export class PluginEditCtrl {
   }
 
   initReadme() {
-    return this.$http.get(this.model.baseUrl + '/readme.md').then(res => {
+    return this.backendSrv.get(`/api/plugins/${this.pluginId}/readme`).then(res => {
       return System.import('remarkable').then(Remarkable => {
         var md = new Remarkable();
-        this.readmeHtml = this.$sce.trustAsHtml(md.render(res.data));
+        this.readmeHtml = this.$sce.trustAsHtml(md.render(res));
       });
     });
   }

public/sass/_variables.dark.scss

@@ -113,8 +113,8 @@ $scrollbarBorder: black;
 // Tables
 // -------------------------
 $table-bg:                    transparent; // overall background-color
-$table-bg-accent:             rgba(100, 100, 100, 0.3); // for striping
-$table-bg-hover:              $dark-3; // for hover
+$table-bg-accent:             $dark-3; // for striping
+$table-bg-hover:              $dark-4; // for hover
 $table-border:                $dark-3; // table and cell border
 
 // Buttons

public/sass/pages/_plugins.scss

@@ -30,6 +30,7 @@
   img {
     width: 16px;
   }
+
   white-space: nowrap;
   max-width: $page-sidebar-width;
   text-overflow: ellipsis;
@@ -40,8 +41,25 @@
   img {
     max-width: 100%;
   }
+
   ul {
     padding-left: $spacer*1.5;
+    margin-bottom: $spacer*2;
+  }
+
+  table {
+    td, th {
+      padding: $spacer*.5 $spacer;
+    }
+    th {
+      font-weight: normal;
+      background: $table-bg-accent;
+    }
+  }
+
+  table, th, td {
+    border: 1px solid $table-border;
+    border-collapse: collapse;
   }
 }