No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

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.

Example usage

export const ConfigEditor = (props: Props) => {
  const { options, onOptionsChange } = props;
  return (
    <>
      <DataSourceHttpSettings
        defaultUrl="http://localhost:9090"
        dataSourceConfig={options}
        showAccessOptions={true}
        onChange={onOptionsChange}
        sigV4AuthEnabled={false}
      />

      {/* Additional configuration settings for your data source plugin.*/}
    </>
  );
};
NameDescriptionDefault
defaultUrl*
The default url for the data source
string
-
urlLabel
Set label for url option
string
-
urlDocs
Added to default url tooltip
ReactNode
-
showAccessOptions
Show the http access help box
boolean
-
sigV4AuthToggleEnabled
Show the SigV4 auth toggle option
boolean
-
azureAuthSettings
Azure authentication settings *
AzureAuthSettings
-
renderSigV4Editor
If SIGV4 is enabled, provide an editor for SIGV4 connection config *
ReactNode
-
secureSocksDSProxyEnabled
Show the Secure Socks Datasource Proxy toggle option
boolean
-
dataSourceConfig*
The configuration object of the data source
DataSourceSettings<any, any>
-
onChange*
Callback for handling changes to the configuration object
(config: DataSourceSettings<any, any>) => void
-
showForwardOAuthIdentityOption
Show the Forward OAuth identity option
boolean
-