From cda78973232ad0f0bea0f603c7e07649771fdb6a Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 16:42:02 +0100
Subject: [PATCH 1/6] started with component for generic panel help

---
 .../core/components/PanelHelp/PanelHelp.tsx   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 public/app/core/components/PanelHelp/PanelHelp.tsx

diff --git a/public/app/core/components/PanelHelp/PanelHelp.tsx b/public/app/core/components/PanelHelp/PanelHelp.tsx
new file mode 100644
index 00000000000..25340640d4b
--- /dev/null
+++ b/public/app/core/components/PanelHelp/PanelHelp.tsx
@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+import Remarkable from 'remarkable';
+import { getBackendSrv } from '../../services/backend_srv';
+import { DataSource } from 'app/types';
+
+interface Props {
+  dataSource: DataSource;
+  type: string;
+}
+
+interface State {
+  isError: boolean;
+  isLoading: boolean;
+  help: any;
+}
+
+export default class PanelHelp extends PureComponent<Props, State> {
+  componentDidMount(): void {
+    this.loadHelp();
+  }
+
+  loadHelp = () => {
+    const { dataSource, type } = this.props;
+    this.setState({ isLoading: true });
+
+    getBackendSrv()
+      .get(`/api/plugins/${dataSource.meta.id}/markdown/${type}`)
+      .then(response => {
+        const markdown = new Remarkable();
+        const helpHtml = markdown.render(response);
+
+        this.setState({
+          isError: false,
+          isLoading: false,
+          help: helpHtml,
+        });
+      })
+      .catch(() => {
+        this.setState({
+          isError: true,
+          isLoading: false,
+        });
+      });
+  };
+
+  render() {
+    const { isError, isLoading, help } = this.state;
+
+    if (isLoading) {
+      return <h2>Loading help...</h2>;
+    }
+
+    if (isError) {
+      return <h3>'Error occurred when loading help'</h3>;
+    }
+
+    return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: help }} />;
+  }
+}

From 65db6a76387d30dc758fcbf9db887af537790427 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 16:54:29 +0100
Subject: [PATCH 2/6] toolbaritems viztab

---
 public/app/features/dashboard/dashgrid/VisualizationTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index 0e31d7cdafc..cdd23fb2ced 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -203,7 +203,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     const { isVizPickerOpen, searchQuery } = this.state;
 
     return (
-      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar}>
+      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[]}>
         <>
           <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
             <VizTypePicker

From a44a07593f633744a826183493169932ffede2ec Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 18 Dec 2018 14:40:54 +0100
Subject: [PATCH 3/6] panel help working

---
 .../core/components/PanelHelp/PanelHelp.tsx   | 51 +++++++++++++++----
 .../dashboard/dashgrid/QueriesTab.tsx         | 35 +------------
 .../dashboard/dashgrid/VisualizationTab.tsx   | 17 ++++++-
 .../features/datasources/state/navModel.ts    |  2 +-
 .../features/plugins/__mocks__/pluginMocks.ts |  2 +-
 public/app/types/plugins.ts                   |  7 ++-
 6 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/public/app/core/components/PanelHelp/PanelHelp.tsx b/public/app/core/components/PanelHelp/PanelHelp.tsx
index 25340640d4b..7920e772b6a 100644
--- a/public/app/core/components/PanelHelp/PanelHelp.tsx
+++ b/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 }} />;
   }
 }
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 8513f061b74..112ba50822c 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/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,
     };
 
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index cdd23fb2ced..f479bab57d5 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/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
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index 3f59812a522..19fc422e3b8 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/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: '',
diff --git a/public/app/features/plugins/__mocks__/pluginMocks.ts b/public/app/features/plugins/__mocks__/pluginMocks.ts
index 358adb112b3..b922840cb43 100644
--- a/public/app/features/plugins/__mocks__/pluginMocks.ts
+++ b/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',
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index bc33ec80409..a3519e5b5cc 100644
--- a/public/app/types/plugins.ts
+++ b/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;

From 95656e1e956935279bb9a354bd05be56bb667a1c Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 18 Dec 2018 14:49:59 +0100
Subject: [PATCH 4/6] renaming component

---
 .../components/PanelHelp/{PanelHelp.tsx => PluginHelp.tsx}    | 4 ++--
 public/app/features/dashboard/dashgrid/QueriesTab.tsx         | 4 ++--
 public/app/features/dashboard/dashgrid/VisualizationTab.tsx   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename public/app/core/components/PanelHelp/{PanelHelp.tsx => PluginHelp.tsx} (93%)

diff --git a/public/app/core/components/PanelHelp/PanelHelp.tsx b/public/app/core/components/PanelHelp/PluginHelp.tsx
similarity index 93%
rename from public/app/core/components/PanelHelp/PanelHelp.tsx
rename to public/app/core/components/PanelHelp/PluginHelp.tsx
index 7920e772b6a..f675ab10ecb 100644
--- a/public/app/core/components/PanelHelp/PanelHelp.tsx
+++ b/public/app/core/components/PanelHelp/PluginHelp.tsx
@@ -14,7 +14,7 @@ interface State {
   help: string;
 }
 
-export default class PanelHelp extends PureComponent<Props, State> {
+export default class PluginHelp extends PureComponent<Props, State> {
   state = {
     isError: false,
     isLoading: false,
@@ -48,7 +48,7 @@ export default class PanelHelp extends PureComponent<Props, State> {
         const markdown = new Remarkable();
         const helpHtml = markdown.render(response);
 
-        if (response === '' && this.props.type) {
+        if (response === '' && this.props.type === 'help') {
           this.setState({
             isError: false,
             isLoading: false,
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 112ba50822c..36f38cadbd3 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -21,7 +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';
+import PluginHelp from '../../../core/components/PanelHelp/PluginHelp';
 
 interface Props {
   panel: PanelModel;
@@ -134,7 +134,7 @@ export class QueriesTab extends PureComponent<Props, State> {
   };
 
   renderHelp = () => {
-    return <PanelHelp plugin={this.state.currentDS.meta} type="query_help" />;
+    return <PluginHelp plugin={this.state.currentDS.meta} type="query_help" />;
   };
 
   onAddQuery = (query?: Partial<DataQuery>) => {
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index f479bab57d5..2cf03b3a871 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -8,7 +8,7 @@ import { getDatasourceSrv } from '../../plugins/datasource_srv';
 // Components
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
-import PanelHelp from 'app/core/components/PanelHelp/PanelHelp';
+import PluginHelp from 'app/core/components/PanelHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
 
@@ -205,7 +205,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   };
 
-  renderHelp = () => <PanelHelp plugin={this.state.currentDataSource.meta} type="panel_help" />;
+  renderHelp = () => <PluginHelp plugin={this.state.currentDataSource.meta} type="panel_help" />;
 
   render() {
     const { plugin } = this.props;

From bf7ba9a4d1ade9982c585b66a91d199e1ed7387c Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 18 Dec 2018 14:54:50 +0100
Subject: [PATCH 5/6] updating snaps

---
 .../DataSourceSettings.test.tsx.snap          | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
index 9da5904d1ae..bcd8237ff39 100644
--- a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
@@ -61,7 +61,10 @@ exports[`Render should render alpha info text 1`] = `
                 },
                 "description": "pretty decent plugin",
                 "links": Array [
-                  "one link",
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
                 ],
                 "logos": Object {
                   "large": "large/logo",
@@ -160,7 +163,10 @@ exports[`Render should render beta info text 1`] = `
                 },
                 "description": "pretty decent plugin",
                 "links": Array [
-                  "one link",
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
                 ],
                 "logos": Object {
                   "large": "large/logo",
@@ -254,7 +260,10 @@ exports[`Render should render component 1`] = `
                 },
                 "description": "pretty decent plugin",
                 "links": Array [
-                  "one link",
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
                 ],
                 "logos": Object {
                   "large": "large/logo",
@@ -353,7 +362,10 @@ exports[`Render should render is ready only message 1`] = `
                 },
                 "description": "pretty decent plugin",
                 "links": Array [
-                  "one link",
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
                 ],
                 "logos": Object {
                   "large": "large/logo",

From 659b5a3c15f57067c4a03dc5e0a854329e254c7e Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 18 Dec 2018 15:30:34 +0100
Subject: [PATCH 6/6] refactor to not crash when no links

---
 .../core/components/PanelHelp/PluginHelp.tsx  | 20 ++++++++++++-------
 .../dashboard/dashgrid/VisualizationTab.tsx   |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/public/app/core/components/PanelHelp/PluginHelp.tsx b/public/app/core/components/PanelHelp/PluginHelp.tsx
index f675ab10ecb..b43efae2d15 100644
--- a/public/app/core/components/PanelHelp/PluginHelp.tsx
+++ b/public/app/core/components/PanelHelp/PluginHelp.tsx
@@ -25,18 +25,24 @@ export default class PluginHelp extends PureComponent<Props, State> {
     this.loadHelp();
   }
 
-  constructPlaceholderInfo() {
+  constructPlaceholderInfo = () => {
     const { plugin } = this.props;
     const markdown = new Remarkable();
 
-    return markdown.render(
+    const fallBack = 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`;
-      })}`
+      }\n\n${
+        plugin.info.links
+          ? `### Links \n ${plugin.info.links.map(link => {
+              return `${link.name}: <${link.url}>\n`;
+            })}`
+          : ''
+      }`
     );
-  }
+
+    return fallBack;
+  };
 
   loadHelp = () => {
     const { plugin, type } = this.props;
@@ -48,7 +54,7 @@ export default class PluginHelp extends PureComponent<Props, State> {
         const markdown = new Remarkable();
         const helpHtml = markdown.render(response);
 
-        if (response === '' && this.props.type === 'help') {
+        if (response === '' && type === 'help') {
           this.setState({
             isError: false,
             isLoading: false,
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index 2cf03b3a871..70285124b16 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -205,7 +205,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   };
 
-  renderHelp = () => <PluginHelp plugin={this.state.currentDataSource.meta} type="panel_help" />;
+  renderHelp = () => <PluginHelp plugin={this.state.currentDataSource.meta} type="help" />;
 
   render() {
     const { plugin } = this.props;