From a44a07593f633744a826183493169932ffede2ec Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 18 Dec 2018 14:40:54 +0100 Subject: [PATCH] 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 { + 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 { }; render() { + const { type } = this.props; const { isError, isLoading, help } = this.state; if (isLoading) { @@ -54,6 +82,9 @@ export default class PanelHelp extends PureComponent { return

'Error occurred when loading help'

; } + if (type === 'panel_help' && help === '') { + } + return
; } } 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 { }); }; - loadHelp = () => { - const { currentDS } = this.state; - const hasHelp = currentDS.meta.hasQueryHelp; - - if (hasHelp) { - this.setState({ - helpContent:

Loading help...

, - 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:
, - isLoadingHelp: false, - }); - }) - .catch(() => { - this.setState({ - helpContent:

'Error occured when loading help'

, - isLoadingHelp: false, - }); - }); - } - }; - renderQueryInspector = () => { const { panel } = this.props; return ; }; renderHelp = () => { - const { helpContent, isLoadingHelp } = this.state; - return isLoadingHelp ? : helpContent; + return ; }; onAddQuery = (query?: Partial) => { @@ -244,7 +214,6 @@ export class QueriesTab extends PureComponent { 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 { 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 { } }; + renderHelp = () => ; + render() { const { plugin } = this.props; const { isVizPickerOpen, searchQuery } = this.state; + const pluginHelp = { + heading: 'Help', + icon: 'fa fa-question', + render: this.renderHelp, + }; + return ( - + <> { 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;