mirror of https://github.com/grafana/grafana
ReactMigration: Migrate DataSource HTTP Settings to React (#19452)
* Basic components for HTTP settings migration WIP * Add secureJsonFields to DataSourceSettings * Introduce datasource-http-settings-next directive for backward compatibility * fix lint * renames * rename fix * TagsInput component * move tags from app to grafana/ui * implement tagsinput on datasourcesettings * capitalize * new file for react directive for testing * some layout touch ups * FormField story * Minor touch ups * add url validation * using prevent default to prevent updating datasource when adding tag * using Stylefactory and fix tslint issue on MouseEvent * only show tlsauthsettings if tls or ca cert * fix url input length * fix for showAccessOptions * Implemented CertTextArea, removed commented code * removed commented / not used code * Rename and add more elements to Certification component * fixing newSecureJsonData * spelling * Fix issue with checkboxes being undefined * Removed old partials and minor fix * removed unused props from storypull/19756/head^2
Dominik Prokop
6 years ago
committed by
Torkel Ödegaard
parent
cb0e80e7b9
commit
c9b11bfc7a
@ -0,0 +1,61 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { HttpSettingsProps } from './types'; |
||||||
|
import { FormField } from '../FormField/FormField'; |
||||||
|
import { SecretFormField } from '../SecretFormFied/SecretFormField'; |
||||||
|
|
||||||
|
export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfig, onChange }) => { |
||||||
|
const password = dataSourceConfig.secureJsonData ? dataSourceConfig.secureJsonData.basicAuthPassword : ''; |
||||||
|
|
||||||
|
const onPasswordReset = () => { |
||||||
|
onChange({ |
||||||
|
...dataSourceConfig, |
||||||
|
basicAuthPassword: '', |
||||||
|
secureJsonData: { |
||||||
|
...dataSourceConfig.secureJsonData, |
||||||
|
basicAuthPassword: '', |
||||||
|
}, |
||||||
|
secureJsonFields: { |
||||||
|
...dataSourceConfig.secureJsonFields, |
||||||
|
basicAuthPassword: false, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const onPasswordChange = (event: React.SyntheticEvent<HTMLInputElement>) => { |
||||||
|
onChange({ |
||||||
|
...dataSourceConfig, |
||||||
|
secureJsonData: { |
||||||
|
...dataSourceConfig.secureJsonData, |
||||||
|
basicAuthPassword: event.currentTarget.value, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="gf-form"> |
||||||
|
<FormField |
||||||
|
label="User" |
||||||
|
labelWidth={10} |
||||||
|
inputWidth={18} |
||||||
|
placeholder="user" |
||||||
|
value={dataSourceConfig.basicAuthUser} |
||||||
|
onChange={event => onChange({ ...dataSourceConfig, basicAuthUser: event.currentTarget.value })} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="gf-form"> |
||||||
|
<SecretFormField |
||||||
|
isConfigured={ |
||||||
|
!!dataSourceConfig.basicAuthPassword || |
||||||
|
!!(dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.basicAuthPassword) |
||||||
|
} |
||||||
|
value={password || ''} |
||||||
|
inputWidth={18} |
||||||
|
labelWidth={10} |
||||||
|
onReset={onPasswordReset} |
||||||
|
onChange={onPasswordChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import React, { ChangeEvent, MouseEvent, FC } from 'react'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
label: string; |
||||||
|
hasCert: boolean; |
||||||
|
placeholder: string; |
||||||
|
|
||||||
|
onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void; |
||||||
|
onClick: (event: MouseEvent<HTMLAnchorElement>) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => { |
||||||
|
return ( |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<div className="gf-form gf-form--v-stretch"> |
||||||
|
<label className="gf-form-label width-7">{label}</label> |
||||||
|
</div> |
||||||
|
{!hasCert && ( |
||||||
|
<div className="gf-form gf-form--grow"> |
||||||
|
<textarea |
||||||
|
rows={7} |
||||||
|
className="gf-form-input gf-form-textarea" |
||||||
|
onChange={onChange} |
||||||
|
placeholder={placeholder} |
||||||
|
required |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{hasCert && ( |
||||||
|
<div className="gf-form"> |
||||||
|
<input type="text" className="gf-form-input max-width-12" disabled value="configured" /> |
||||||
|
<a className="btn btn-secondary gf-form-btn" onClick={onClick}> |
||||||
|
reset |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { storiesOf } from '@storybook/react'; |
||||||
|
import { DataSourceHttpSettings } from './DataSourceHttpSettings'; |
||||||
|
import { DataSourceSettings } from '../../types'; |
||||||
|
import { UseState } from '../../utils/storybook/UseState'; |
||||||
|
|
||||||
|
const settingsMock: DataSourceSettings<any, any> = { |
||||||
|
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'], |
||||||
|
}, |
||||||
|
secureJsonData: { |
||||||
|
password: true, |
||||||
|
}, |
||||||
|
readOnly: true, |
||||||
|
}; |
||||||
|
|
||||||
|
const DataSourceHttpSettingsStories = storiesOf('UI/DataSource/DataSourceHttpSettings', module); |
||||||
|
|
||||||
|
DataSourceHttpSettingsStories.add('default', () => { |
||||||
|
return ( |
||||||
|
<UseState initialState={settingsMock} logState> |
||||||
|
{(dataSourceSettings, updateDataSourceSettings) => { |
||||||
|
return ( |
||||||
|
<DataSourceHttpSettings |
||||||
|
defaultUrl="http://localhost:9999" |
||||||
|
dataSourceConfig={dataSourceSettings} |
||||||
|
onChange={updateDataSourceSettings} |
||||||
|
showAccessOptions={true} |
||||||
|
/> |
||||||
|
); |
||||||
|
}} |
||||||
|
</UseState> |
||||||
|
); |
||||||
|
}); |
||||||
@ -0,0 +1,208 @@ |
|||||||
|
import React, { useState, useCallback } from 'react'; |
||||||
|
import { SelectableValue } from '@grafana/data'; |
||||||
|
import { css, cx } from 'emotion'; |
||||||
|
import { FormField, FormLabel, Input, Select, Switch, TagsInput } from '..'; |
||||||
|
import { useTheme } from '../../themes'; |
||||||
|
import { BasicAuthSettings } from './BasicAuthSettings'; |
||||||
|
import { HttpProxySettings } from './HttpProxySettings'; |
||||||
|
import { TLSAuthSettings } from './TLSAuthSettings'; |
||||||
|
import { DataSourceSettings } from '../../types'; |
||||||
|
import { HttpSettingsProps } from './types'; |
||||||
|
|
||||||
|
const ACCESS_OPTIONS: Array<SelectableValue<string>> = [ |
||||||
|
{ |
||||||
|
label: 'Server (default)', |
||||||
|
value: 'proxy', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'Browser', |
||||||
|
value: 'direct', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const DEFAULT_ACCESS_OPTION = { |
||||||
|
label: 'Server (default)', |
||||||
|
value: 'proxy', |
||||||
|
}; |
||||||
|
|
||||||
|
const HttpAccessHelp = () => ( |
||||||
|
<div className="grafana-info-box m-t-2"> |
||||||
|
<p> |
||||||
|
Access mode controls how requests to the data source will be handled. |
||||||
|
<strong> |
||||||
|
<i>Server</i> |
||||||
|
</strong>{' '} |
||||||
|
should be the preferred way if nothing else stated. |
||||||
|
</p> |
||||||
|
<div className="alert-title">Server access mode (Default):</div> |
||||||
|
<p> |
||||||
|
All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to |
||||||
|
the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs |
||||||
|
to be accessible from the grafana backend/server if you select this access mode. |
||||||
|
</p> |
||||||
|
<div className="alert-title">Browser access mode:</div> |
||||||
|
<p> |
||||||
|
All requests will be made from the browser directly to the data source and may be subject to Cross-Origin Resource |
||||||
|
Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access mode. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => { |
||||||
|
const { defaultUrl, dataSourceConfig, onChange, showAccessOptions } = props; |
||||||
|
let urlTooltip; |
||||||
|
const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false); |
||||||
|
const theme = useTheme(); |
||||||
|
|
||||||
|
const onSettingsChange = useCallback( |
||||||
|
(change: Partial<DataSourceSettings<any, any>>) => { |
||||||
|
onChange({ |
||||||
|
...dataSourceConfig, |
||||||
|
...change, |
||||||
|
}); |
||||||
|
}, |
||||||
|
[dataSourceConfig] |
||||||
|
); |
||||||
|
|
||||||
|
switch (dataSourceConfig.access) { |
||||||
|
case 'direct': |
||||||
|
urlTooltip = ( |
||||||
|
<> |
||||||
|
Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser. |
||||||
|
</> |
||||||
|
); |
||||||
|
break; |
||||||
|
case 'proxy': |
||||||
|
urlTooltip = ( |
||||||
|
<> |
||||||
|
Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana |
||||||
|
backend/server. |
||||||
|
</> |
||||||
|
); |
||||||
|
break; |
||||||
|
default: |
||||||
|
urlTooltip = 'Specify a complete HTTP URL (for example http://your_server:8080)'; |
||||||
|
} |
||||||
|
|
||||||
|
const accessSelect = ( |
||||||
|
<Select |
||||||
|
width={20} |
||||||
|
options={ACCESS_OPTIONS} |
||||||
|
value={ACCESS_OPTIONS.filter(o => o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION} |
||||||
|
onChange={selectedValue => onSettingsChange({ access: selectedValue.value })} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const isValidUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test( |
||||||
|
dataSourceConfig.url |
||||||
|
); |
||||||
|
|
||||||
|
const notValidStyle = css` |
||||||
|
box-shadow: inset 0 0px 5px ${theme.colors.red}; |
||||||
|
`;
|
||||||
|
|
||||||
|
const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl }); |
||||||
|
|
||||||
|
const urlInput = ( |
||||||
|
<Input |
||||||
|
className={inputStyle} |
||||||
|
placeholder={defaultUrl} |
||||||
|
value={dataSourceConfig.url} |
||||||
|
onChange={event => onSettingsChange({ url: event.currentTarget.value })} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="gf-form-group"> |
||||||
|
<> |
||||||
|
<h3 className="page-heading">HTTP</h3> |
||||||
|
<div className="gf-form-group"> |
||||||
|
<div className="gf-form"> |
||||||
|
<FormField label="URL" labelWidth={11} tooltip={urlTooltip} inputEl={urlInput} /> |
||||||
|
</div> |
||||||
|
|
||||||
|
{showAccessOptions && ( |
||||||
|
<> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<div className="gf-form"> |
||||||
|
<FormField label="Access" labelWidth={11} inputWidth={20} inputEl={accessSelect} /> |
||||||
|
</div> |
||||||
|
<div className="gf-form"> |
||||||
|
<label |
||||||
|
className="gf-form-label query-keyword pointer" |
||||||
|
onClick={() => setIsAccessHelpVisible(isVisible => !isVisible)} |
||||||
|
> |
||||||
|
Help |
||||||
|
<i className={`fa fa-caret-${isAccessHelpVisible ? 'down' : 'right'}`} /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{isAccessHelpVisible && <HttpAccessHelp />} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{dataSourceConfig.access === 'proxy' && ( |
||||||
|
<div className="gf-form"> |
||||||
|
<FormLabel |
||||||
|
width={11} |
||||||
|
tooltip="Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source." |
||||||
|
> |
||||||
|
Whitelisted Cookies |
||||||
|
</FormLabel> |
||||||
|
<TagsInput |
||||||
|
tags={dataSourceConfig.jsonData.keepCookies} |
||||||
|
onChange={cookies => |
||||||
|
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } }) |
||||||
|
} |
||||||
|
width={20} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</> |
||||||
|
|
||||||
|
<> |
||||||
|
<h3 className="page-heading">Auth</h3> |
||||||
|
<div className="gf-form-group"> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<Switch |
||||||
|
label="Basic auth" |
||||||
|
labelClass="width-13" |
||||||
|
checked={dataSourceConfig.basicAuth} |
||||||
|
onChange={event => { |
||||||
|
onSettingsChange({ basicAuth: event!.currentTarget.checked }); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Switch |
||||||
|
label="With Credentials" |
||||||
|
labelClass="width-13" |
||||||
|
checked={dataSourceConfig.withCredentials} |
||||||
|
onChange={event => { |
||||||
|
onSettingsChange({ withCredentials: event!.currentTarget.checked }); |
||||||
|
}} |
||||||
|
tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
{dataSourceConfig.access === 'proxy' && ( |
||||||
|
<HttpProxySettings |
||||||
|
dataSourceConfig={dataSourceConfig} |
||||||
|
onChange={jsonData => onSettingsChange({ jsonData })} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{dataSourceConfig.basicAuth && ( |
||||||
|
<> |
||||||
|
<h6>Basic Auth Details</h6> |
||||||
|
<div className="gf-form-group"> |
||||||
|
<BasicAuthSettings {...props} /> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && ( |
||||||
|
<TLSAuthSettings dataSourceConfig={dataSourceConfig} onChange={onChange} /> |
||||||
|
)} |
||||||
|
</> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { HttpSettingsBaseProps } from './types'; |
||||||
|
import { Switch } from '../Switch/Switch'; |
||||||
|
|
||||||
|
export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<Switch |
||||||
|
label="TLS Client Auth" |
||||||
|
labelClass="width-13" |
||||||
|
checked={dataSourceConfig.jsonData.tlsAuth || false} |
||||||
|
onChange={event => onChange({ ...dataSourceConfig.jsonData, tlsAuth: event!.currentTarget.checked })} |
||||||
|
/> |
||||||
|
|
||||||
|
<Switch |
||||||
|
label="With CA Cert" |
||||||
|
labelClass="width-13" |
||||||
|
checked={dataSourceConfig.jsonData.tlsAuthWithCACert || false} |
||||||
|
onChange={event => |
||||||
|
onChange({ ...dataSourceConfig.jsonData, tlsAuthWithCACert: event!.currentTarget.checked }) |
||||||
|
} |
||||||
|
tooltip="Needed for verifying self-signed TLS Certs" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<Switch |
||||||
|
label="Skip TLS Verify" |
||||||
|
labelClass="width-13" |
||||||
|
checked={dataSourceConfig.jsonData.tlsSkipVerify || false} |
||||||
|
onChange={event => onChange({ ...dataSourceConfig.jsonData, tlsSkipVerify: event!.currentTarget.checked })} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="gf-form-inline"> |
||||||
|
<Switch |
||||||
|
label="Forward OAuth Identity" |
||||||
|
labelClass="width-13" |
||||||
|
checked={dataSourceConfig.jsonData.oauthPassThru || false} |
||||||
|
onChange={event => onChange({ ...dataSourceConfig.jsonData, oauthPassThru: event!.currentTarget.checked })} |
||||||
|
tooltip="Forward the user's upstream OAuth identity to the data source (Their access token gets passed along)." |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { KeyValue } from '@grafana/data'; |
||||||
|
import { css, cx } from 'emotion'; |
||||||
|
import { Tooltip } from '..'; |
||||||
|
import { CertificationKey } from './CertificationKey'; |
||||||
|
import { HttpSettingsBaseProps } from './types'; |
||||||
|
|
||||||
|
export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => { |
||||||
|
const hasTLSCACert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsCACert; |
||||||
|
const hasTLSClientCert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientCert; |
||||||
|
const hasTLSClientKey = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientKey; |
||||||
|
|
||||||
|
const onResetClickFactory = (field: string) => (event: React.MouseEvent<HTMLAnchorElement>) => { |
||||||
|
event.preventDefault(); |
||||||
|
const newSecureJsonFields: KeyValue<boolean> = { ...dataSourceConfig.secureJsonFields }; |
||||||
|
newSecureJsonFields[field] = false; |
||||||
|
onChange({ |
||||||
|
...dataSourceConfig, |
||||||
|
secureJsonFields: newSecureJsonFields, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const onCertificateChangeFactory = (field: string) => (event: React.SyntheticEvent<HTMLTextAreaElement>) => { |
||||||
|
const newSecureJsonData = { ...dataSourceConfig.secureJsonData }; |
||||||
|
newSecureJsonData[field] = event.currentTarget.value; |
||||||
|
|
||||||
|
onChange({ |
||||||
|
...dataSourceConfig, |
||||||
|
secureJsonData: newSecureJsonData, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="gf-form-group"> |
||||||
|
<div |
||||||
|
className={cx( |
||||||
|
'gf-form', |
||||||
|
css` |
||||||
|
align-items: baseline; |
||||||
|
` |
||||||
|
)} |
||||||
|
> |
||||||
|
<h6>TLS Auth Details</h6> |
||||||
|
<Tooltip |
||||||
|
placement="right-end" |
||||||
|
content="TLS Certs are encrypted and stored in the Grafana database." |
||||||
|
theme="info" |
||||||
|
> |
||||||
|
<div className="gf-form-help-icon gf-form-help-icon--right-normal"> |
||||||
|
<i className="fa fa-info-circle" /> |
||||||
|
</div> |
||||||
|
</Tooltip> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
{dataSourceConfig.jsonData.tlsAuthWithCACert && ( |
||||||
|
<CertificationKey |
||||||
|
hasCert={!!hasTLSCACert} |
||||||
|
onChange={onCertificateChangeFactory('tlsCACert')} |
||||||
|
placeholder="Begins with -----BEGIN CERTIFICATE-----" |
||||||
|
label="CA Cert" |
||||||
|
onClick={onResetClickFactory('tlsCACert')} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{dataSourceConfig.jsonData.tlsAuth && ( |
||||||
|
<> |
||||||
|
<CertificationKey |
||||||
|
hasCert={!!hasTLSClientCert} |
||||||
|
label="Client Cert" |
||||||
|
onChange={onCertificateChangeFactory('tlsClientCert')} |
||||||
|
placeholder="Begins with -----BEGIN CERTIFICATE-----" |
||||||
|
onClick={onResetClickFactory('tlsClientCert')} |
||||||
|
/> |
||||||
|
|
||||||
|
<CertificationKey |
||||||
|
hasCert={!!hasTLSClientKey} |
||||||
|
label="Client Key" |
||||||
|
placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----" |
||||||
|
onChange={onCertificateChangeFactory('tlsClientKey')} |
||||||
|
onClick={onResetClickFactory('tlsClientKey')} |
||||||
|
/> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import { DataSourceSettings } from '../../types'; |
||||||
|
|
||||||
|
export interface HttpSettingsBaseProps { |
||||||
|
dataSourceConfig: DataSourceSettings<any, any>; |
||||||
|
onChange: (config: DataSourceSettings) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export interface HttpSettingsProps extends HttpSettingsBaseProps { |
||||||
|
defaultUrl: string; |
||||||
|
showAccessOptions?: boolean; |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { storiesOf } from '@storybook/react'; |
||||||
|
import { number, text } from '@storybook/addon-knobs'; |
||||||
|
|
||||||
|
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; |
||||||
|
import { FormField } from './FormField'; |
||||||
|
|
||||||
|
const getKnobs = () => { |
||||||
|
return { |
||||||
|
label: text('label', 'Test'), |
||||||
|
tooltip: text('tooltip', 'This is a tooltip with information about this FormField'), |
||||||
|
labelWidth: number('labelWidth', 10), |
||||||
|
inputWidth: number('inputWidth', 20), |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const FormFieldStories = storiesOf('UI/FormField', module); |
||||||
|
|
||||||
|
FormFieldStories.addDecorator(withCenteredStory); |
||||||
|
|
||||||
|
FormFieldStories.add('default', () => { |
||||||
|
const { inputWidth, label, labelWidth } = getKnobs(); |
||||||
|
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />; |
||||||
|
}); |
||||||
|
|
||||||
|
FormFieldStories.add('with tooltip', () => { |
||||||
|
const { inputWidth, label, labelWidth, tooltip } = getKnobs(); |
||||||
|
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />; |
||||||
|
}); |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import React, { FC } from 'react'; |
||||||
|
import { css, cx } from 'emotion'; |
||||||
|
import { getTagColorsFromName } from '../../utils'; |
||||||
|
import { stylesFactory } from '../../themes'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
name: string; |
||||||
|
|
||||||
|
onRemove: (tag: string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const TagItem: FC<Props> = ({ name, onRemove }) => { |
||||||
|
const { color, borderColor } = getTagColorsFromName(name); |
||||||
|
|
||||||
|
const getStyles = stylesFactory(() => ({ |
||||||
|
itemStyle: css` |
||||||
|
background-color: ${color}; |
||||||
|
border: 1px solid ${borderColor}; |
||||||
|
border-radius: 3px; |
||||||
|
padding: 3px 6px; |
||||||
|
margin: 3px; |
||||||
|
white-space: nowrap; |
||||||
|
text-shadow: none; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 14px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
`,
|
||||||
|
|
||||||
|
nameStyle: css` |
||||||
|
margin-right: 3px; |
||||||
|
`,
|
||||||
|
|
||||||
|
removeStyle: cx([ |
||||||
|
'fa fa-times', |
||||||
|
css` |
||||||
|
cursor: pointer; |
||||||
|
`,
|
||||||
|
]), |
||||||
|
})); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={getStyles().itemStyle}> |
||||||
|
<span className={getStyles().nameStyle}>{name}</span> |
||||||
|
<i className={getStyles().removeStyle} onClick={() => onRemove(name)} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { storiesOf } from '@storybook/react'; |
||||||
|
import { action } from '@storybook/addon-actions'; |
||||||
|
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; |
||||||
|
import { UseState } from '../../utils/storybook/UseState'; |
||||||
|
import { TagsInput } from './TagsInput'; |
||||||
|
|
||||||
|
const TagsInputStories = storiesOf('UI/TagsInput', module); |
||||||
|
const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component']; |
||||||
|
|
||||||
|
TagsInputStories.addDecorator(withCenteredStory); |
||||||
|
|
||||||
|
TagsInputStories.add('default', () => { |
||||||
|
return <TagsInput tags={[]} onChange={tags => action('tags updated')(tags)} />; |
||||||
|
}); |
||||||
|
|
||||||
|
TagsInputStories.add('with mock tags', () => { |
||||||
|
return ( |
||||||
|
<UseState initialState={mockTags}> |
||||||
|
{tags => { |
||||||
|
return <TagsInput tags={tags} onChange={tags => action('tags updated')(tags)} />; |
||||||
|
}} |
||||||
|
</UseState> |
||||||
|
); |
||||||
|
}); |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
import React, { ChangeEvent, KeyboardEvent, PureComponent } from 'react'; |
||||||
|
import { css, cx } from 'emotion'; |
||||||
|
import { stylesFactory } from '../../themes/stylesFactory'; |
||||||
|
import { Button, Input } from '..'; |
||||||
|
import { TagItem } from './TagItem'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
tags?: string[]; |
||||||
|
width?: number; |
||||||
|
|
||||||
|
onChange: (tags: string[]) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface State { |
||||||
|
newTag: string; |
||||||
|
tags: string[]; |
||||||
|
} |
||||||
|
|
||||||
|
export class TagsInput extends PureComponent<Props, State> { |
||||||
|
constructor(props: Props) { |
||||||
|
super(props); |
||||||
|
|
||||||
|
this.state = { |
||||||
|
newTag: '', |
||||||
|
tags: this.props.tags || [], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
onNameChange = (event: ChangeEvent<HTMLInputElement>) => { |
||||||
|
this.setState({ |
||||||
|
newTag: event.target.value, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
onRemove = (tagToRemove: string) => { |
||||||
|
this.setState( |
||||||
|
(prevState: State) => ({ |
||||||
|
...prevState, |
||||||
|
tags: prevState.tags.filter(tag => tagToRemove !== tag), |
||||||
|
}), |
||||||
|
() => this.onChange() |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
// Using React.MouseEvent to avoid tslint error
|
||||||
|
onAdd = (event: React.MouseEvent) => { |
||||||
|
event.preventDefault(); |
||||||
|
if (this.state.newTag !== '') { |
||||||
|
this.setNewTags(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
onKeyboardAdd = (event: KeyboardEvent) => { |
||||||
|
event.preventDefault(); |
||||||
|
if (event.key === 'Enter' && this.state.newTag !== '') { |
||||||
|
this.setNewTags(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
setNewTags = () => { |
||||||
|
// We don't want to duplicate tags, clearing the input if
|
||||||
|
// the user is trying to add the same tag.
|
||||||
|
if (!this.state.tags.includes(this.state.newTag)) { |
||||||
|
this.setState( |
||||||
|
(prevState: State) => ({ |
||||||
|
...prevState, |
||||||
|
tags: [...prevState.tags, prevState.newTag], |
||||||
|
newTag: '', |
||||||
|
}), |
||||||
|
() => this.onChange() |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.setState({ newTag: '' }); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
onChange = () => { |
||||||
|
this.props.onChange(this.state.tags); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { tags, newTag } = this.state; |
||||||
|
|
||||||
|
const getStyles = stylesFactory(() => ({ |
||||||
|
tagsCloudStyle: css` |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
flex-wrap: wrap; |
||||||
|
`,
|
||||||
|
|
||||||
|
addButtonStyle: css` |
||||||
|
margin-left: 8px; |
||||||
|
margin-top: 2px; |
||||||
|
`,
|
||||||
|
})); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="width-20"> |
||||||
|
<div |
||||||
|
className={cx( |
||||||
|
['gf-form-inline'], |
||||||
|
css` |
||||||
|
margin-bottom: 4px; |
||||||
|
` |
||||||
|
)} |
||||||
|
> |
||||||
|
<Input placeholder="Add Name" onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} /> |
||||||
|
<Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md"> |
||||||
|
Add |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
<div className={getStyles().tagsCloudStyle}> |
||||||
|
{tags && |
||||||
|
tags.map((tag: string, index: number) => { |
||||||
|
return <TagItem key={`${tag}-${index}`} name={tag} onRemove={this.onRemove} />; |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,114 +0,0 @@ |
|||||||
<div class="gf-form-group"> |
|
||||||
<h3 class="page-heading">HTTP</h3> |
|
||||||
<div class="gf-form-group"> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<div class="gf-form max-width-30"> |
|
||||||
<span class="gf-form-label width-10">URL</span> |
|
||||||
<input class="gf-form-input gf-form-input--has-help-icon" type="text" |
|
||||||
ng-model='current.url' placeholder="{{suggestUrl}}" |
|
||||||
bs-typeahead="getSuggestUrls" min-length="0" |
|
||||||
ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input> |
|
||||||
<info-popover mode="right-absolute"> |
|
||||||
<p>Specify a complete HTTP URL (for example http://your_server:8080)</p> |
|
||||||
<span ng-show="current.access === 'direct'"> |
|
||||||
Your access method is <em>Browser</em>, this means the URL |
|
||||||
needs to be accessible from the browser. |
|
||||||
</span> |
|
||||||
<span ng-show="current.access === 'proxy'"> |
|
||||||
Your access method is <em>Server</em>, this means the URL |
|
||||||
needs to be accessible from the grafana backend/server. |
|
||||||
</span> |
|
||||||
</info-popover> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="gf-form-inline" ng-if="showAccessOption"> |
|
||||||
<div class="gf-form max-width-30"> |
|
||||||
<span class="gf-form-label width-10">Access</span> |
|
||||||
<div class="gf-form-select-wrapper max-width-24"> |
|
||||||
<select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="gf-form"> |
|
||||||
<label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()"> |
|
||||||
Help |
|
||||||
<i class="fa fa-caret-down" ng-show="showAccessHelp"></i> |
|
||||||
<i class="fa fa-caret-right" ng-hide="showAccessHelp"> </i> |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="grafana-info-box m-t-2" ng-show="showAccessHelp"> |
|
||||||
<p> |
|
||||||
Access mode controls how requests to the data source will be handled. |
|
||||||
<strong><i>Server</i></strong> should be the preferred way if nothing else stated. |
|
||||||
</p> |
|
||||||
<div class="alert-title">Server access mode (Default):</div> |
|
||||||
<p> |
|
||||||
All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source |
|
||||||
and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. |
|
||||||
The URL needs to be accessible from the grafana backend/server if you select this access mode. |
|
||||||
</p> |
|
||||||
<div class="alert-title">Browser access mode:</div> |
|
||||||
<p> |
|
||||||
All requests will be made from the browser directly to the data source and may be subject to |
|
||||||
Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this |
|
||||||
access mode. |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="gf-form-inline" ng-if="current.access=='proxy'"> |
|
||||||
<div class="gf-form"> |
|
||||||
<span class="gf-form-label width-10">Whitelisted Cookies</span> |
|
||||||
<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20 gf-form-input--has-help-icon" tagclass="label label-tag" placeholder="Add Name"> |
|
||||||
</bootstrap-tagsinput> |
|
||||||
<info-popover mode="right-absolute"> |
|
||||||
Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source. |
|
||||||
</info-popover> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<h3 class="page-heading">Auth</h3> |
|
||||||
<div class="gf-form-group"> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<gf-form-checkbox class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-13" switch-class="max-width-6"></gf-form-checkbox> |
|
||||||
<gf-form-checkbox class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth |
|
||||||
headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-13" |
|
||||||
switch-class="max-width-6"></gf-form-checkbox> |
|
||||||
</div> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-13" |
|
||||||
checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox> |
|
||||||
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for |
|
||||||
verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-13" |
|
||||||
switch-class="max-width-6"></gf-form-checkbox> |
|
||||||
</div> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-13" |
|
||||||
checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox> |
|
||||||
</div> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Forward OAuth Identity" label-class="width-13" tooltip="Forward the user's upstream OAuth identity to the datasource (Their access token gets passed along)." checked="current.jsonData.oauthPassThru" switch-class="max-width-6"></gf-form-checkbox> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="gf-form-group" ng-if="current.basicAuth"> |
|
||||||
<h6>Basic Auth Details</h6> |
|
||||||
<div class="gf-form" ng-if="current.basicAuth"> |
|
||||||
<span class="gf-form-label width-10">User</span> |
|
||||||
<input class="gf-form-input max-width-21" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input> |
|
||||||
</div> |
|
||||||
<div class="gf-form"> |
|
||||||
<secret-form-field |
|
||||||
isConfigured="current.basicAuthPassword || current.secureJsonFields.basicAuthPassword" |
|
||||||
value="current.secureJsonData.basicAuthPassword || ''" |
|
||||||
on-reset="onBasicAuthPasswordReset" |
|
||||||
on-change="onBasicAuthPasswordChange" |
|
||||||
inputWidth="18" |
|
||||||
labelWidth="10" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<datasource-tls-auth-settings current="current" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'"> |
|
||||||
</datasource-tls-auth-settings> |
|
||||||
@ -0,0 +1 @@ |
|||||||
|
<datasource-http-settings-next on-change="onChange" dataSourceConfig="current" showAccessOptions="showAccessOption" defaultUrl="suggestUrl" /> |
||||||
@ -1,62 +0,0 @@ |
|||||||
<div class="gf-form-group"> |
|
||||||
<div class="gf-form"> |
|
||||||
<h6>TLS Auth Details</h6> |
|
||||||
<info-popover mode="header">TLS Certs are encrypted and stored in the Grafana database.</info-popover> |
|
||||||
</div> |
|
||||||
<div ng-if="current.jsonData.tlsAuthWithCACert"> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">CA Cert</label></div> |
|
||||||
<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert"> |
|
||||||
<textarea |
|
||||||
rows="7" |
|
||||||
class="gf-form-input gf-form-textarea" |
|
||||||
ng-model="current.secureJsonData.tlsCACert" |
|
||||||
placeholder="Begins with -----BEGIN CERTIFICATE-----" |
|
||||||
></textarea> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="gf-form" ng-if="current.secureJsonFields.tlsCACert"> |
|
||||||
<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" /> |
|
||||||
<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsCACert = false">reset</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div ng-if="current.jsonData.tlsAuth"> |
|
||||||
<div class="gf-form-inline"> |
|
||||||
<div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">Client Cert</label></div> |
|
||||||
<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert"> |
|
||||||
<textarea |
|
||||||
rows="7" |
|
||||||
class="gf-form-input gf-form-textarea" |
|
||||||
ng-model="current.secureJsonData.tlsClientCert" |
|
||||||
placeholder="Begins with -----BEGIN CERTIFICATE-----" |
|
||||||
required |
|
||||||
></textarea> |
|
||||||
</div> |
|
||||||
<div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert"> |
|
||||||
<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" /> |
|
||||||
<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientCert = false" |
|
||||||
>reset</a |
|
||||||
> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="gf-form-inline"> |
|
||||||
<div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">Client Key</label></div> |
|
||||||
<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey"> |
|
||||||
<textarea |
|
||||||
rows="7" |
|
||||||
class="gf-form-input gf-form-textarea" |
|
||||||
ng-model="current.secureJsonData.tlsClientKey" |
|
||||||
placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----" |
|
||||||
required |
|
||||||
></textarea> |
|
||||||
</div> |
|
||||||
<div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey"> |
|
||||||
<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" /> |
|
||||||
<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientKey = false">reset</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
Loading…
Reference in new issue