DataSourceSettings: Fix recent changes to HttpDataSourceSettings (#67436)

This commit is contained in:
Torkel Ödegaard 2023-04-28 07:17:18 +02:00 committed by GitHub
parent f5d97c677b
commit ea536411f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 28 deletions

View File

@ -73,11 +73,13 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
azureAuthSettings, azureAuthSettings,
renderSigV4Editor, renderSigV4Editor,
secureSocksDSProxyEnabled, secureSocksDSProxyEnabled,
connectionElements, urlLabel,
urlDocs,
} = props; } = props;
let urlTooltip;
const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false); const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
const theme = useTheme2(); const theme = useTheme2();
let urlTooltip;
const onSettingsChange = useCallback( const onSettingsChange = useCallback(
(change: Partial<DataSourceSettings<any, any>>) => { (change: Partial<DataSourceSettings<any, any>>) => {
@ -94,7 +96,7 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
urlTooltip = ( urlTooltip = (
<> <>
Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser. Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser.
{connectionElements?.tooltip} {urlDocs}
</> </>
); );
break; break;
@ -103,12 +105,12 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
<> <>
Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana
backend/server. backend/server.
{connectionElements?.tooltip} {urlDocs}
</> </>
); );
break; break;
default: default:
urlTooltip = <>Specify a complete HTTP URL (for example http://your_server:8080) {connectionElements?.tooltip}</>; urlTooltip = <>Specify a complete HTTP URL (for example http://your_server:8080) {urlDocs}</>;
} }
const accessSelect = ( const accessSelect = (
@ -146,24 +148,20 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
const azureAuthEnabled: boolean = const azureAuthEnabled: boolean =
(azureAuthSettings?.azureAuthSupported && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig)) || false; (azureAuthSettings?.azureAuthSupported && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig)) || false;
const connectionLabel = connectionElements?.label ? connectionElements?.label : 'URL';
return ( return (
<div className="gf-form-group"> <div className="gf-form-group">
<> <>
<h3 className="page-heading">HTTP</h3> <h3 className="page-heading">HTTP</h3>
<div className="gf-form-group"> <div className="gf-form-group">
{defaultUrl && ( <div className="gf-form">
<div className="gf-form"> <FormField
<FormField interactive={urlDocs ? true : false}
interactive={connectionElements?.tooltip ? true : false} label={urlLabel ?? 'URL'}
label={connectionLabel} labelWidth={13}
labelWidth={13} tooltip={urlTooltip}
tooltip={urlTooltip} inputEl={urlInput}
inputEl={urlInput} />
/> </div>
</div>
)}
{showAccessOptions && ( {showAccessOptions && (
<> <>

View File

@ -30,7 +30,11 @@ export interface HttpSettingsBaseProps<JSONData extends DataSourceJsonData = any
export interface HttpSettingsProps extends HttpSettingsBaseProps { export interface HttpSettingsProps extends HttpSettingsBaseProps {
/** The default url for the data source */ /** The default url for the data source */
defaultUrl?: string; defaultUrl: string;
/** Set label for url option */
urlLabel?: string;
/** Added to default url tooltip */
urlDocs?: React.ReactNode;
/** Show the http access help box */ /** Show the http access help box */
showAccessOptions?: boolean; showAccessOptions?: boolean;
/** Show the SigV4 auth toggle option */ /** Show the SigV4 auth toggle option */
@ -41,9 +45,4 @@ export interface HttpSettingsProps extends HttpSettingsBaseProps {
renderSigV4Editor?: React.ReactNode; renderSigV4Editor?: React.ReactNode;
/** Show the Secure Socks Datasource Proxy toggle option */ /** Show the Secure Socks Datasource Proxy toggle option */
secureSocksDSProxyEnabled?: boolean; secureSocksDSProxyEnabled?: boolean;
/** connection URL label and tooltip */
connectionElements?: {
label?: string;
tooltip?: React.ReactNode;
};
} }

View File

@ -49,10 +49,8 @@ export const ConfigEditor = (props: Props) => {
azureAuthSettings={azureAuthSettings} azureAuthSettings={azureAuthSettings}
renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>} renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled} secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
connectionElements={{ urlLabel="Prometheus server URL"
label: 'Prometheus server URL', urlDocs={docsTip()}
tooltip: docsTip(),
}}
/> />
<> <>
<hr className={styles.hrTopSpace} /> <hr className={styles.hrTopSpace} />