feat(plugins): progress on plugin details page, # 4275

examples/nginx-app/plugin.json

@@ -35,7 +35,7 @@
   },
 
   "dependencies": {
-    "grafanaVersion": "2.6.x",
+    "grafanaVersion": "3.x.x",
     "plugins": [
       {"type": "datasource", "id": "graphite", "name": "Graphite", "version": "1.0.0"},
       {"type": "panel", "id": "graph", "name": "Graph", "version": "1.0.0"}

pkg/api/dtos/plugins.go

@@ -3,17 +3,18 @@ package dtos
 import "github.com/grafana/grafana/pkg/plugins"
 
 type PluginSetting struct {
-	Name     string                    `json:"name"`
-	Type     string                    `json:"type"`
-	PluginId string                    `json:"pluginId"`
-	Enabled  bool                      `json:"enabled"`
-	Pinned   bool                      `json:"pinned"`
-	Module   string                    `json:"module"`
-	BaseUrl  string                    `json:"baseUrl"`
-	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"`
+	Type         string                      `json:"type"`
+	PluginId     string                      `json:"pluginId"`
+	Enabled      bool                        `json:"enabled"`
+	Pinned       bool                        `json:"pinned"`
+	Module       string                      `json:"module"`
+	BaseUrl      string                      `json:"baseUrl"`
+	Info         *plugins.PluginInfo         `json:"info"`
+	Pages        []*plugins.AppPluginPage    `json:"pages"`
+	Includes     []*plugins.AppIncludeInfo   `json:"includes"`
+	Dependencies *plugins.PluginDependencies `json:"dependencies"`
+	JsonData     map[string]interface{}      `json:"jsonData"`
 }
 
 type PluginListItem struct {

pkg/api/plugin_setting.go

@@ -42,10 +42,11 @@ func GetPluginSettingById(c *middleware.Context) Response {
 		return ApiError(404, "Plugin not found, no installed plugin with that id", nil)
 	} else {
 		dto := &dtos.PluginSetting{
-			Type:     def.Type,
-			PluginId: def.Id,
-			Name:     def.Name,
-			Info:     &def.Info,
+			Type:         def.Type,
+			PluginId:     def.Id,
+			Name:         def.Name,
+			Info:         &def.Info,
+			Dependencies: &def.Dependencies,
 		}
 
 		if app, exists := plugins.Apps[pluginId]; exists {

pkg/cmd/grafana-server/main.go

@@ -24,7 +24,7 @@ import (
 	"github.com/grafana/grafana/pkg/social"
 )
 
-var version = "master"
+var version = "3.0.0-pre1"
 var commit = "NA"
 var buildstamp string
 var build_date string

pkg/plugins/frontend_plugin.go

@@ -28,8 +28,8 @@ func (fp *FrontendPluginBase) initFrontendPlugin() {
 
 	fp.handleModuleDefaults()
 
-	fp.Info.Logos.Small = evalRelativePluginUrlPath(fp.Info.Logos.Small, fp.Id)
-	fp.Info.Logos.Large = evalRelativePluginUrlPath(fp.Info.Logos.Large, fp.Id)
+	fp.Info.Logos.Small = evalRelativePluginUrlPath(fp.Info.Logos.Small, fp.BaseUrl)
+	fp.Info.Logos.Large = evalRelativePluginUrlPath(fp.Info.Logos.Large, fp.BaseUrl)
 
 	for i := 0; i < len(fp.Info.Screenshots); i++ {
 		fp.Info.Screenshots[i].Path = evalRelativePluginUrlPath(fp.Info.Screenshots[i].Path, fp.Id)
@@ -55,7 +55,7 @@ func (fp *FrontendPluginBase) handleModuleDefaults() {
 	fp.BaseUrl = path.Join("public/app/plugins", fp.Type, fp.Id)
 }
 
-func evalRelativePluginUrlPath(pathStr string, pluginId string) string {
+func evalRelativePluginUrlPath(pathStr string, baseUrl string) string {
 	if pathStr == "" {
 		return ""
 	}
@@ -64,5 +64,5 @@ func evalRelativePluginUrlPath(pathStr string, pluginId string) string {
 	if u.IsAbs() {
 		return pathStr
 	}
-	return path.Join("public/plugins", pluginId, pathStr)
+	return path.Join(baseUrl, pathStr)
 }

pkg/plugins/models.go

@@ -14,10 +14,11 @@ type PluginLoader interface {
 }
 
 type PluginBase struct {
-	Type string     `json:"type"`
-	Name string     `json:"name"`
-	Id   string     `json:"id"`
-	Info PluginInfo `json:"info"`
+	Type         string             `json:"type"`
+	Name         string             `json:"name"`
+	Id           string             `json:"id"`
+	Info         PluginInfo         `json:"info"`
+	Dependencies PluginDependencies `json:"dependencies"`
 
 	IncludedInAppId string `json:"-"`
 	PluginDir       string `json:"-"`
@@ -37,6 +38,18 @@ func (pb *PluginBase) registerPlugin(pluginDir string) error {
 	return nil
 }
 
+type PluginDependencies struct {
+	GrafanaVersion string                 `json:"grafanaVersion"`
+	Plugins        []PluginDependencyItem `json:"plugins"`
+}
+
+type PluginDependencyItem struct {
+	Type    string `json:"type"`
+	Id      string `json:"id"`
+	Name    string `json:"name"`
+	Version string `json:"version"`
+}
+
 type PluginInfo struct {
 	Author      PluginInfoLink      `json:"author"`
 	Description string              `json:"description"`

public/app/features/dashboard/partials/settings.html

@@ -19,7 +19,6 @@
 <div class="tabbed-view-body">
 	<div ng-if="editor.index == 0">
 
-		<h5 class="section-heading">Dashboard Detail</h5>
 		<div class="gf-form-group">
 			<div class="gf-form">
 				<label class="gf-form-label width-7">Title</label>

public/app/features/plugins/edit_ctrl.ts

@@ -5,6 +5,7 @@ import _ from 'lodash';
 
 export class PluginEditCtrl {
   model: any;
+  pluginIcon: string;
   pluginId: any;
   includedPanels: any;
   includedDatasources: any;
@@ -22,9 +23,22 @@ export class PluginEditCtrl {
       this.model = result;
       this.includedPanels = _.where(result.includes, {type: 'panel'});
       this.includedDatasources = _.where(result.includes, {type: 'datasource'});
+      this.pluginIcon = this.getPluginIcon(this.model.type);
+
+      this.model.dependencies.plugins.forEach(plug => {
+        plug.icon = this.getPluginIcon(plug.type);
+      });
     });
   }
 
+  getPluginIcon(type) {
+    switch (type) {
+      case 'datasource':  return 'icon-gf icon-gf-datasources';
+      case 'panel':  return 'icon-gf icon-gf-panel';
+      case 'app':  return 'icon-gf icon-gf-apps';
+    }
+  }
+
   update() {
     var chain = Promise.resolve();
     var self = this;
@@ -53,7 +67,7 @@ export class PluginEditCtrl {
 
     // if set, performt he postUpdate hook. If a promise is returned it will block
     // the final step of the update procedure (reloading the page) until the promise
-    // resolves.  If the promise is rejected the page will not be reloaded. 
+    // resolves.  If the promise is rejected the page will not be reloaded.
     if (this.postUpdateHook != null) {
       chain = chain.then(function() {
         return Promise.resolve(this.postUpdateHook());

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

@@ -1,7 +1,6 @@
 <navbar title="Plugins" title-url="plugins" icon="icon-gf icon-gf-apps">
 	<a href="plugins/apps" class="navbar-page-btn">
-		<i class="fa fa-chevron-right"></i>
-		Apps
+		Plugin details
 	</a>
 </navbar>
 
@@ -15,7 +14,7 @@
 			<div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
 			<div class="plugin-header-stamps">
 				<span class="plugin-header-stamps-type">
-					<i class="icon-gf icon-gf-apps"></i> {{ctrl.model.type}}
+					<i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}}
 				</span>
 			</div>
 		</div>
@@ -59,7 +58,7 @@
 		<aside class="page-sidebar">
 			<section class="page-sidebar-section">
 				<h4>Version</h4>
-				<span>1.0.1</span>
+				<span>{{ctrl.model.info.version}}</span>
 			</section>
 			<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
 				<h5>Includes</h4>
@@ -78,7 +77,30 @@
 			</section>
 			<section class="page-sidebar-section">
 				<h5>Dependencies</h4>
-				<span>TODO</span>
+				<ul class="ui-list">
+					<li>
+						<span class="plugin-dependency-icon">
+							<img src="public/img/grafana_icon.svg"></img>
+						</span>
+						<span class="plugin-dependency-name">
+							Grafana
+						</span>
+						<span class="plugin-dependency-version">
+							{{ctrl.model.dependencies.grafanaVersion}}
+						</span>
+					</li>
+					<li ng-repeat="plugDep in ctrl.model.dependencies.plugins">
+						<span class="plugin-dependency-icon">
+							<i class="{{plugDep.icon}}"></i>
+						</span>
+						<span class="plugin-dependency-name">
+							{{plugDep.name}}
+						</span>
+						<span class="plugin-dependency-version">
+							{{plugDep.version}}
+						</span>
+					</li>
+				</ul>
 			</section>
 			<section class="page-sidebar-section">
 				<h5>Links</h4>

public/app/partials/unsaved-changes.html

@@ -12,7 +12,7 @@
 
 	<div class="modal-content text-center">
 
-		<div class="confirm-modal-title">
+		<div class="confirm-modal-text">
 			What do you want to do?
 		</div>
 

public/app/plugins/datasource/elasticsearch/plugin.json

@@ -3,7 +3,23 @@
   "name": "Elasticsearch",
   "id": "elasticsearch",
 
-  "defaultMatchFormat": "lucene",
+  "info": {
+    "description": "Elasticsearch Data Source for Grafana",
+    "author": {
+      "name": "Grafana Core",
+      "url": "http://grafana.org"
+    },
+    "keywords": ["elasticsearch"],
+    "logos": {
+      "small": "img/logo_large.png",
+      "large": "img/logo_large.png"
+    },
+    "links": [
+      {"name": "elastic.co", "url": "https://www.elastic.co/products/elasticsearch"}
+    ],
+    "version": "3.0.0"
+  },
+
   "annotations": true,
   "metrics": true
 }

public/sass/layout/_page.scss

@@ -84,11 +84,9 @@
   h4 {
     font-size: $font-size-base;
     font-weight: $font-weight-semi-bold;
-    color: $text-color-strong;
   }
   h5 {
     font-size: $font-size-base;
-    color: $text-color-weak;
     font-weight: $font-weight-semi-bold;
   }
 }

public/sass/pages/_plugins.scss

@@ -22,10 +22,16 @@
 }
 
 .plugin-header-stamps-type {
-  color: $link-color-disabled;
+  color: $headings-color-disabled;
   text-transform: uppercase;
 }
 
+.plugin-dependency-icon {
+  img {
+    width: 16px;
+  }
+}
+
 // .app-edit-logo-box {
 //   padding: 1.2rem;
 //   background: $panel-bg;