Merge pull request #14587 from grafana/panel-help-fixes

Panel help view fixes

pkg/api/plugins.go

@@ -164,6 +164,14 @@ func GetPluginMarkdown(c *m.ReqContext) Response {
 		return Error(500, "Could not get markdown file", err)
 		return Error(500, "Could not get markdown file", err)
 	}
 	}
 
 
+	// fallback try readme
+	if len(content) == 0 {
+		content, err = plugins.GetPluginMarkdown(pluginID, "readme")
+		if err != nil {
+			return Error(501, "Could not get markdown file", err)
+		}
+	}
+
 	resp := Respond(200, content)
 	resp := Respond(200, content)
 	resp.Header("Content-Type", "text/plain; charset=utf-8")
 	resp.Header("Content-Type", "text/plain; charset=utf-8")
 	return resp
 	return resp

pkg/plugins/datasource_plugin.go

@@ -3,10 +3,8 @@ package plugins
 import (
 import (
 	"context"
 	"context"
 	"encoding/json"
 	"encoding/json"
-	"os"
 	"os/exec"
 	"os/exec"
 	"path"
 	"path"
-	"path/filepath"
 	"time"
 	"time"
 
 
 	"github.com/grafana/grafana-plugin-model/go/datasource"
 	"github.com/grafana/grafana-plugin-model/go/datasource"
@@ -29,7 +27,6 @@ type DataSourcePlugin struct {
 	QueryOptions map[string]bool   `json:"queryOptions,omitempty"`
 	QueryOptions map[string]bool   `json:"queryOptions,omitempty"`
 	BuiltIn      bool              `json:"builtIn,omitempty"`
 	BuiltIn      bool              `json:"builtIn,omitempty"`
 	Mixed        bool              `json:"mixed,omitempty"`
 	Mixed        bool              `json:"mixed,omitempty"`
-	HasQueryHelp bool              `json:"hasQueryHelp,omitempty"`
 	Routes       []*AppPluginRoute `json:"routes"`
 	Routes       []*AppPluginRoute `json:"routes"`
 
 
 	Backend    bool   `json:"backend,omitempty"`
 	Backend    bool   `json:"backend,omitempty"`
@@ -48,15 +45,6 @@ func (p *DataSourcePlugin) Load(decoder *json.Decoder, pluginDir string) error {
 		return err
 		return err
 	}
 	}
 
 
-	// look for help markdown
-	helpPath := filepath.Join(p.PluginDir, "QUERY_HELP.md")
-	if _, err := os.Stat(helpPath); os.IsNotExist(err) {
-		helpPath = filepath.Join(p.PluginDir, "query_help.md")
-	}
-	if _, err := os.Stat(helpPath); err == nil {
-		p.HasQueryHelp = true
-	}
-
 	DataSources[p.Id] = p
 	DataSources[p.Id] = p
 	return nil
 	return nil
 }
 }

public/app/core/components/PanelHelp/PluginHelp.tsx → public/app/core/components/PluginHelp/PluginHelp.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import Remarkable from 'remarkable';
 import Remarkable from 'remarkable';
 import { getBackendSrv } from '../../services/backend_srv';
 import { getBackendSrv } from '../../services/backend_srv';
-import { PluginMeta } from 'app/types';
 
 
 interface Props {
 interface Props {
-  plugin: PluginMeta;
+  plugin: {
+    name: string;
+    id: string;
+  };
   type: string;
   type: string;
 }
 }
 
 
@@ -14,7 +16,7 @@ interface State {
   help: string;
   help: string;
 }
 }
 
 
-export default class PluginHelp extends PureComponent<Props, State> {
+export class PluginHelp extends PureComponent<Props, State> {
   state = {
   state = {
     isError: false,
     isError: false,
     isLoading: false,
     isLoading: false,
@@ -25,24 +27,9 @@ export default class PluginHelp extends PureComponent<Props, State> {
     this.loadHelp();
     this.loadHelp();
   }
   }
 
 
-  constructPlaceholderInfo = () => {
-    const { plugin } = this.props;
-    const markdown = new Remarkable();
-
-    const fallBack = markdown.render(
-      `## ${plugin.name} \n by _${plugin.info.author.name} (<${plugin.info.author.url}>)_\n\n${
-        plugin.info.description
-      }\n\n${
-        plugin.info.links
-          ? `### Links \n ${plugin.info.links.map(link => {
-              return `${link.name}: <${link.url}>\n`;
-            })}`
-          : ''
-      }`
-    );
-
-    return fallBack;
-  };
+  constructPlaceholderInfo() {
+    return 'No plugin help or readme markdown file was found';
+  }
 
 
   loadHelp = () => {
   loadHelp = () => {
     const { plugin, type } = this.props;
     const { plugin, type } = this.props;

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -21,7 +21,7 @@ import config from 'app/core/config';
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { DashboardModel } from '../dashboard_model';
 import { DataSourceSelectItem, DataQuery } from 'app/types';
 import { DataSourceSelectItem, DataQuery } from 'app/types';
-import PluginHelp from '../../../core/components/PanelHelp/PluginHelp';
+import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 
 
 interface Props {
 interface Props {
   panel: PanelModel;
   panel: PanelModel;
@@ -203,7 +203,6 @@ export class QueriesTab extends PureComponent<Props, State> {
   render() {
   render() {
     const { panel } = this.props;
     const { panel } = this.props;
     const { currentDS, isAddingMixed } = this.state;
     const { currentDS, isAddingMixed } = this.state;
-    const { hasQueryHelp } = currentDS.meta;
 
 
     const queryInspector = {
     const queryInspector = {
       title: 'Query Inspector',
       title: 'Query Inspector',
@@ -213,7 +212,6 @@ export class QueriesTab extends PureComponent<Props, State> {
     const dsHelp = {
     const dsHelp = {
       heading: 'Help',
       heading: 'Help',
       icon: 'fa fa-question',
       icon: 'fa fa-question',
-      disabled: !hasQueryHelp,
       render: this.renderHelp,
       render: this.renderHelp,
     };
     };
 
 

public/app/features/dashboard/dashgrid/VisualizationTab.tsx

@@ -3,12 +3,11 @@ import React, { PureComponent } from 'react';
 
 
 // Utils & Services
 // Utils & Services
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import { getDatasourceSrv } from '../../plugins/datasource_srv';
 
 
 // Components
 // Components
 import { EditorTabBody } from './EditorTabBody';
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { VizTypePicker } from './VizTypePicker';
-import PluginHelp from 'app/core/components/PanelHelp/PluginHelp';
+import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
 import { PanelOptionSection } from './PanelOptionSection';
 
 
@@ -16,7 +15,6 @@ import { PanelOptionSection } from './PanelOptionSection';
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 import { PanelPlugin } from 'app/types/plugins';
-import { DataSourceSelectItem } from 'app/types';
 
 
 interface Props {
 interface Props {
   panel: PanelModel;
   panel: PanelModel;
@@ -27,7 +25,6 @@ interface Props {
 }
 }
 
 
 interface State {
 interface State {
-  currentDataSource: DataSourceSelectItem;
   isVizPickerOpen: boolean;
   isVizPickerOpen: boolean;
   searchQuery: string;
   searchQuery: string;
 }
 }
@@ -36,16 +33,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
   element: HTMLElement;
   element: HTMLElement;
   angularOptions: AngularComponent;
   angularOptions: AngularComponent;
   searchInput: HTMLElement;
   searchInput: HTMLElement;
-  dataSources: DataSourceSelectItem[] = getDatasourceSrv().getMetricSources();
 
 
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
-    const { panel } = props;
 
 
     this.state = {
     this.state = {
       isVizPickerOpen: false,
       isVizPickerOpen: false,
       searchQuery: '',
       searchQuery: '',
-      currentDataSource: this.dataSources.find(datasource => datasource.value === panel.datasource),
     };
     };
   }
   }
 
 
@@ -205,7 +199,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
     }
   };
   };
 
 
-  renderHelp = () => <PluginHelp plugin={this.state.currentDataSource.meta} type="help" />;
+  renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />;
 
 
   render() {
   render() {
     const { plugin } = this.props;
     const { plugin } = this.props;

public/app/plugins/panel/graph/README.md

-# Graph Panel -  Native Plugin
+# Graph Panel
 
 
-The Graph is the main graph panel and is **included** with Grafana. It provides a very rich set of graphing options.
+This is the main Graph panel and is **included** with Grafana. It provides a very rich set of graphing options.
 
 
-Read more about it here:
+For full reference documentation:
 
 
 [http://docs.grafana.org/reference/graph/](http://docs.grafana.org/reference/graph/)
 [http://docs.grafana.org/reference/graph/](http://docs.grafana.org/reference/graph/)