panel help working

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

@@ -1,39 +1,66 @@
 import React, { PureComponent } from 'react';
 import Remarkable from 'remarkable';
 import { getBackendSrv } from '../../services/backend_srv';
-import { DataSource } from 'app/types';
+import { PluginMeta } from 'app/types';
 
 interface Props {
-  dataSource: DataSource;
+  plugin: PluginMeta;
   type: string;
 }
 
 interface State {
   isError: boolean;
   isLoading: boolean;
-  help: any;
+  help: string;
 }
 
 export default class PanelHelp extends PureComponent<Props, State> {
+  state = {
+    isError: false,
+    isLoading: false,
+    help: '',
+  };
+
   componentDidMount(): void {
     this.loadHelp();
   }
 
+  constructPlaceholderInfo() {
+    const { plugin } = this.props;
+    const markdown = new Remarkable();
+
+    return markdown.render(
+      `## ${plugin.name} \n by _${plugin.info.author.name} (<${plugin.info.author.url}>)_\n\n${
+        plugin.info.description
+      }\n\n### Links \n ${plugin.info.links.map(link => {
+        return `${link.name}: <${link.url}>\n`;
+      })}`
+    );
+  }
+
   loadHelp = () => {
-    const { dataSource, type } = this.props;
+    const { plugin, type } = this.props;
     this.setState({ isLoading: true });
 
     getBackendSrv()
-      .get(`/api/plugins/${dataSource.meta.id}/markdown/${type}`)
+      .get(`/api/plugins/${plugin.id}/markdown/${type}`)
       .then(response => {
         const markdown = new Remarkable();
         const helpHtml = markdown.render(response);
 
-        this.setState({
-          isError: false,
-          isLoading: false,
-          help: helpHtml,
-        });
+        if (response === '' && this.props.type) {
+          this.setState({
+            isError: false,
+            isLoading: false,
+            help: this.constructPlaceholderInfo(),
+          });
+        } else {
+          this.setState({
+            isError: false,
+            isLoading: false,
+            help: helpHtml,
+          });
+        }
       })
       .catch(() => {
         this.setState({
@@ -44,6 +71,7 @@ export default class PanelHelp extends PureComponent<Props, State> {
   };
 
   render() {
+    const { type } = this.props;
     const { isError, isLoading, help } = this.state;
 
     if (isLoading) {
@@ -54,6 +82,9 @@ export default class PanelHelp extends PureComponent<Props, State> {
       return <h3>'Error occurred when loading help'</h3>;
     }
 
+    if (type === 'panel_help' && help === '') {
+    }
+
     return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: help }} />;
   }
 }

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

@@ -1,6 +1,5 @@
 // Libraries
 import React, { SFC, PureComponent } from 'react';
-import Remarkable from 'remarkable';
 import _ from 'lodash';
 
 // Components
@@ -22,6 +21,7 @@ import config from 'app/core/config';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { DataSourceSelectItem, DataQuery } from 'app/types';
+import PanelHelp from '../../../core/components/PanelHelp/PanelHelp';
 
 interface Props {
   panel: PanelModel;
@@ -128,43 +128,13 @@ export class QueriesTab extends PureComponent<Props, State> {
     });
   };
 
-  loadHelp = () => {
-    const { currentDS } = this.state;
-    const hasHelp = currentDS.meta.hasQueryHelp;
-
-    if (hasHelp) {
-      this.setState({
-        helpContent: <h3>Loading help...</h3>,
-        isLoadingHelp: true,
-      });
-
-      this.backendSrv
-        .get(`/api/plugins/${currentDS.meta.id}/markdown/query_help`)
-        .then(res => {
-          const md = new Remarkable();
-          const helpHtml = md.render(res);
-          this.setState({
-            helpContent: <div className="markdown-html" dangerouslySetInnerHTML={{ __html: helpHtml }} />,
-            isLoadingHelp: false,
-          });
-        })
-        .catch(() => {
-          this.setState({
-            helpContent: <h3>'Error occured when loading help'</h3>,
-            isLoadingHelp: false,
-          });
-        });
-    }
-  };
-
   renderQueryInspector = () => {
     const { panel } = this.props;
     return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />;
   };
 
   renderHelp = () => {
-    const { helpContent, isLoadingHelp } = this.state;
-    return isLoadingHelp ? <LoadingPlaceholder text="Loading help..." /> : helpContent;
+    return <PanelHelp plugin={this.state.currentDS.meta} type="query_help" />;
   };
 
   onAddQuery = (query?: Partial<DataQuery>) => {
@@ -244,7 +214,6 @@ export class QueriesTab extends PureComponent<Props, State> {
       heading: 'Help',
       icon: 'fa fa-question',
       disabled: !hasQueryHelp,
-      onClick: this.loadHelp,
       render: this.renderHelp,
     };
 

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

@@ -3,10 +3,12 @@ import React, { PureComponent } from 'react';
 
 // Utils & Services
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { getDatasourceSrv } from '../../plugins/datasource_srv';
 
 // Components
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
+import PanelHelp from 'app/core/components/PanelHelp/PanelHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
 
@@ -14,6 +16,7 @@ import { PanelOptionSection } from './PanelOptionSection';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
+import { DataSourceSelectItem } from 'app/types';
 
 interface Props {
   panel: PanelModel;
@@ -24,6 +27,7 @@ interface Props {
 }
 
 interface State {
+  currentDataSource: DataSourceSelectItem;
   isVizPickerOpen: boolean;
   searchQuery: string;
 }
@@ -32,13 +36,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
   element: HTMLElement;
   angularOptions: AngularComponent;
   searchInput: HTMLElement;
+  dataSources: DataSourceSelectItem[] = getDatasourceSrv().getMetricSources();
 
   constructor(props) {
     super(props);
+    const { panel } = props;
 
     this.state = {
       isVizPickerOpen: false,
       searchQuery: '',
+      currentDataSource: this.dataSources.find(datasource => datasource.value === panel.datasource),
     };
   }
 
@@ -198,12 +205,20 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   };
 
+  renderHelp = () => <PanelHelp plugin={this.state.currentDataSource.meta} type="panel_help" />;
+
   render() {
     const { plugin } = this.props;
     const { isVizPickerOpen, searchQuery } = this.state;
 
+    const pluginHelp = {
+      heading: 'Help',
+      icon: 'fa fa-question',
+      render: this.renderHelp,
+    };
+
     return (
-      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[]}>
+      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]}>
         <>
           <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
             <VizTypePicker

public/app/features/datasources/state/navModel.ts

@@ -73,7 +73,7 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
           url: '',
         },
         description: '',
-        links: [''],
+        links: [{ name: '', url: '' }],
         logos: {
           large: '',
           small: '',

public/app/features/plugins/__mocks__/pluginMocks.ts

@@ -70,7 +70,7 @@ export const getMockPlugin = () => {
         url: 'url/to/GrafanaLabs',
       },
       description: 'pretty decent plugin',
-      links: ['one link'],
+      links: [{ name: 'project', url: 'one link' }],
       logos: { small: 'small/logo', large: 'large/logo' },
       screenshots: [{ path: `screenshot` }],
       updated: '2018-09-26',

public/app/types/plugins.ts

@@ -57,13 +57,18 @@ export interface PluginInclude {
   path: string;
 }
 
+interface PluginMetaInfoLink {
+  name: string;
+  url: string;
+}
+
 export interface PluginMetaInfo {
   author: {
     name: string;
     url?: string;
   };
   description: string;
-  links: string[];
+  links: PluginMetaInfoLink[];
   logos: {
     large: string;
     small: string;