From 4707508f4b1c0d936c517f52f7e3369a2cc4f566 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Fri, 11 Sep 2020 15:53:55 +0200 Subject: [PATCH] grafana/ui: Documenting DataSourceHttpSettings (#27547) * documenting component * Update packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx Co-authored-by: Alex Khomenko * text updates Co-authored-by: Alex Khomenko --- .../CustomHeaderSettings.story.tsx | 46 ------------------- .../DataSourceHttpSettings.mdx | 32 +++++++++++++ .../DataSourceHttpSettings.story.tsx | 8 +++- .../DataSourceHttpSettings.tsx | 9 ++-- .../components/DataSourceSettings/types.ts | 4 ++ 5 files changed, 47 insertions(+), 52 deletions(-) delete mode 100644 packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx deleted file mode 100644 index fea0ad5adcc..00000000000 --- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { CustomHeadersSettings } from './CustomHeadersSettings'; -import { DataSourceSettings } from '@grafana/data'; - -export default { - title: 'Data Source/CustomHeadersSettings', - component: CustomHeadersSettings, - decorators: [withCenteredStory, withHorizontallyCenteredStory], -}; - -export const simple = () => { - const dataSourceConfig: DataSourceSettings = { - id: 4, - orgId: 1, - name: 'gdev-influxdb', - type: 'influxdb', - typeLogoUrl: '', - access: 'direct', - url: 'http://localhost:8086', - password: '', - user: 'grafana', - database: 'site', - basicAuth: false, - basicAuthUser: '', - basicAuthPassword: '', - withCredentials: false, - isDefault: false, - jsonData: { - timeInterval: '15s', - httpMode: 'GET', - keepCookies: ['cookie1', 'cookie2'], - httpHeaderName1: 'X-Custom-Header', - }, - secureJsonData: { - password: true, - httpHeaderValue1: 'X-Custom-Header', - }, - secureJsonFields: { - httpHeaderValue1: true, - }, - readOnly: true, - }; - - return {}} />; -}; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx new file mode 100644 index 00000000000..da2a62446c9 --- /dev/null +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx @@ -0,0 +1,32 @@ +import { Meta, Props } from '@storybook/addon-docs/blocks'; +import { DataSourceHttpSettings } from './DataSourceHttpSettings'; + + + +# DataSourceHttpSettings +Component for displaying the configuration options for a data source plugin. + +### When to use +It is used in a `ConfigEditor` for data source plugins. You can find more examples in our core data source + plugins [here](https://github.com/grafana/grafana/tree/master/public/app/plugins/datasource). + +### Example usage +```jsx +export const ConfigEditor = (props: Props) => { + const { options, onOptionsChange } = props; + return ( + <> + + + {/* Additional configuration settings for your data source plugin.*/} + + ); +}; +``` + + diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx index ddd5dc18517..768ec624964 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx @@ -1,8 +1,9 @@ import React from 'react'; +import { DataSourceSettings } from '@grafana/data'; import { DataSourceHttpSettings } from './DataSourceHttpSettings'; -import { DataSourceSettings } from '@grafana/data'; import { UseState } from '../../utils/storybook/UseState'; +import mdx from './DataSourceHttpSettings.mdx'; const settingsMock: DataSourceSettings = { id: 4, @@ -35,6 +36,11 @@ const settingsMock: DataSourceSettings = { export default { title: 'Data Source/DataSourceHttpSettings', component: DataSourceHttpSettings, + parameters: { + docs: { + page: mdx, + }, + }, }; export const basic = () => { diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index 1c14b412a8b..b64674eb3e4 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -1,20 +1,19 @@ import React, { useState, useCallback } from 'react'; -import { SelectableValue } from '@grafana/data'; import { css, cx } from 'emotion'; -import { useTheme } from '../../themes'; +import { DataSourceSettings, SelectableValue } from '@grafana/data'; import { BasicAuthSettings } from './BasicAuthSettings'; import { HttpProxySettings } from './HttpProxySettings'; import { TLSAuthSettings } from './TLSAuthSettings'; -import { DataSourceSettings } from '@grafana/data'; -import { HttpSettingsProps } from './types'; import { CustomHeadersSettings } from './CustomHeadersSettings'; import { Select } from '../Forms/Legacy/Select/Select'; import { Input } from '../Forms/Legacy/Input/Input'; +import { Switch } from '../Forms/Legacy/Switch/Switch'; import { Icon } from '../Icon/Icon'; import { FormField } from '../FormField/FormField'; import { FormLabel } from '../FormLabel/FormLabel'; -import { Switch } from '../Forms/Legacy/Switch/Switch'; import { TagsInput } from '../TagsInput/TagsInput'; +import { useTheme } from '../../themes'; +import { HttpSettingsProps } from './types'; const ACCESS_OPTIONS: Array> = [ { diff --git a/packages/grafana-ui/src/components/DataSourceSettings/types.ts b/packages/grafana-ui/src/components/DataSourceSettings/types.ts index 1d9f475c582..8cb66ef0ebe 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/types.ts +++ b/packages/grafana-ui/src/components/DataSourceSettings/types.ts @@ -1,11 +1,15 @@ import { DataSourceSettings } from '@grafana/data'; export interface HttpSettingsBaseProps { + /** The configuration object of the data source */ dataSourceConfig: DataSourceSettings; + /** Callback for handling changes to the configuration object */ onChange: (config: DataSourceSettings) => void; } export interface HttpSettingsProps extends HttpSettingsBaseProps { + /** The default url for the data source */ defaultUrl: string; + /** Show the http access help box */ showAccessOptions?: boolean; }