IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Plugins: add UI for more supported datasources with secure socks proxy feature toggle (#61962)

Browse Source
This commit is contained in:
Stephanie Hingtgen 2023-01-25 09:39:17 -06:00 committed by GitHub
parent 0c8a2bbfd5
commit 0a1f31814a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 106 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from 'react';
import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { InlineSwitch } from '../../components/Switch/Switch';
import { InlineField } from '../Forms/InlineField';
export interface Props<T extends DataSourceJsonData>
extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}
export interface SecureSocksProxyConfig extends DataSourceJsonData {
enableSecureSocksProxy?: boolean;
}
export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
options,
onOptionsChange,
}: Props<T>): JSX.Element {
return (
<>
<h3 className="page-heading">Secure Socks Proxy</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<InlineField
labelWidth={26}
label="Enabled"
tooltip="Connect to this datasource via the secure socks proxy."
>
<InlineSwitch
value={options.jsonData.enableSecureSocksProxy ?? false}
onChange={(event) =>
onOptionsChange({
...options,
jsonData: { ...options.jsonData, enableSecureSocksProxy: event!.currentTarget.checked },
})
}
/>
</InlineField>
</div>
</div>
</div>
</>
);
}

1
packages/grafana-ui/src/components/index.ts
View File

@ -185,6 +185,7 @@ export {
export { ErrorWithStack } from './ErrorBoundary/ErrorWithStack';
export { DataSourceHttpSettings } from './DataSourceSettings/DataSourceHttpSettings';
export { AlertingSettings } from './DataSourceSettings/AlertingSettings';
export { SecureSocksProxySettings } from './DataSourceSettings/SecureSocksProxySettings';
export { TLSAuthSettings } from './DataSourceSettings/TLSAuthSettings';
export { CertificationKey } from './DataSourceSettings/CertificationKey';
export { Spinner } from './Spinner/Spinner';

6
public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { Alert, DataSourceHttpSettings } from '@grafana/ui';
import { Alert, DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
import { config } from 'app/core/config';
import { ElasticsearchOptions } from '../types';
@ -57,6 +57,10 @@ export const ConfigEditor = (props: Props) => {
renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<ElasticDetails value={options} onChange={onOptionsChange} />
<LogsConfig

13
public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
View File

@ -6,7 +6,15 @@ import {
onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceJsonDataOptionChecked,
} from '@grafana/data';
import { Alert, DataSourceHttpSettings, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
import {
Alert,
DataSourceHttpSettings,
InlineFormLabel,
LegacyForms,
Select,
SecureSocksProxySettings,
} from '@grafana/ui';
import { config } from 'app/core/config';
import store from 'app/core/store';
import { GraphiteOptions, GraphiteType } from '../types';
@ -75,6 +83,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
dataSourceConfig={options}
onChange={onOptionsChange}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<h3 className="page-heading">Graphite details</h3>
<div className="gf-form-group">
<div className="gf-form-inline">

16
public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
View File

@ -11,7 +11,17 @@ import {
onUpdateDatasourceSecureJsonDataOption,
updateDatasourcePluginJsonDataOption,
} from '@grafana/data';
import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
import {
Alert,
DataSourceHttpSettings,
InfoBox,
InlineField,
InlineFormLabel,
LegacyForms,
Select,
SecureSocksProxySettings,
} from '@grafana/ui';
import { config } from 'app/core/config';
const { Input, SecretFormField } = LegacyForms;
import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
@ -316,6 +326,10 @@ export class ConfigEditor extends PureComponent<Props, State> {
onChange={onOptionsChange}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<div className="gf-form-group">
<div>
<h3 className="page-heading">InfluxDB Details</h3>

6
public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { config } from '@grafana/runtime';
import { DataSourceHttpSettings } from '@grafana/ui';
import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
import { SpanBarSettings } from '@jaegertracing/jaeger-ui-components';
import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
@ -20,6 +20,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
onChange={onOptionsChange}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<div className="gf-form-group">
<TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
</div>

28
public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
View File

@ -1,12 +1,8 @@
import React from 'react';
import {
DataSourcePluginOptionsEditorProps,
DataSourceSettings,
onUpdateDatasourceJsonDataOptionChecked,
} from '@grafana/data';
import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
import { config } from '@grafana/runtime';
import { AlertingSettings, DataSourceHttpSettings, InlineField, InlineSwitch } from '@grafana/ui';
import { AlertingSettings, DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
import { LokiOptions } from '../types';
@ -32,7 +28,6 @@ const setDerivedFields = makeJsonUpdater('derivedFields');
export const ConfigEditor = (props: Props) => {
const { options, onOptionsChange } = props;
const socksProxy = config.featureToggles.secureSocksDatasourceProxy;
return (
<>
@ -43,23 +38,8 @@ export const ConfigEditor = (props: Props) => {
onChange={onOptionsChange}
/>
{socksProxy && (
<>
<h3 className="page-heading">Secure Socks Proxy</h3>
<div className="gf-form-group">
<div className="gf-form-inline"></div>
<InlineField
labelWidth={28}
label="Enabled"
tooltip="Connect to this datasource via the secure socks proxy."
>
<InlineSwitch
value={options.jsonData.enableSecureSocksProxy ?? false}
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'enableSecureSocksProxy')}
/>
</InlineField>
</div>
</>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<AlertingSettings<LokiOptions> options={options} onOptionsChange={onOptionsChange} />

1
public/app/plugins/datasource/loki/types.ts
View File

@ -56,7 +56,6 @@ export interface LokiOptions extends DataSourceJsonData {
derivedFields?: DerivedFieldConfig[];
alertmanager?: string;
keepCookies?: string[];
enableSecureSocksProxy?: boolean;
}
export interface LokiStats {

6
public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { DataSourceHttpSettings } from '@grafana/ui';
import { config } from '@grafana/runtime';
import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
import { OpenTsdbOptions } from '../types';
@ -17,6 +18,9 @@ export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<OpenTsdbO
dataSourceConfig={options}
onChange={onOptionsChange}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<OpenTsdbDetails value={options} onChange={onOptionsChange} />
</>
);

29
public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
View File

@ -1,12 +1,8 @@
import React, { useRef } from 'react';
import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
import {
DataSourcePluginOptionsEditorProps,
DataSourceSettings,
onUpdateDatasourceJsonDataOptionChecked,
} from '@grafana/data';
import { AlertingSettings, DataSourceHttpSettings, Alert, InlineField, InlineSwitch } from '@grafana/ui';
import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
import { AlertingSettings, DataSourceHttpSettings, Alert, SecureSocksProxySettings } from '@grafana/ui';
import { config } from 'app/core/config';
import { PromOptions } from '../types';
@ -29,8 +25,6 @@ export const ConfigEditor = (props: Props) => {
azureSettingsUI: AzureAuthSettings,
};
const socksProxy = config.featureToggles.secureSocksDatasourceProxy;
return (
<>
{options.access === 'direct' && (
@ -49,23 +43,8 @@ export const ConfigEditor = (props: Props) => {
renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
/>
{socksProxy && (
<>
<h3 className="page-heading">Secure Socks Proxy</h3>
<div className="gf-form-group">
<div className="gf-form-inline"></div>
<InlineField
labelWidth={28}
label="Enabled"
tooltip="Connect to this datasource via the secure socks proxy."
>
<InlineSwitch
value={options.jsonData.enableSecureSocksProxy ?? false}
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'enableSecureSocksProxy')}
/>
</InlineField>
</div>
</>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<AlertingSettings<PromOptions> options={options} onOptionsChange={onOptionsChange} />

1
public/app/plugins/datasource/prometheus/types.ts
View File

@ -34,7 +34,6 @@ export interface PromOptions extends DataSourceJsonData {
exemplarTraceIdDestinations?: ExemplarTraceIdDestination[];
prometheusType?: PromApplication;
prometheusVersion?: string;
enableSecureSocksProxy?: boolean;
defaultEditor?: QueryEditorMode;
}

6
public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { config } from '@grafana/runtime';
import { DataSourceHttpSettings } from '@grafana/ui';
import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
import { SpanBarSettings } from '@jaegertracing/jaeger-ui-components';
import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
@ -25,6 +25,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
onChange={onOptionsChange}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<div className="gf-form-group">
<TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
</div>

6
public/app/plugins/datasource/zipkin/ConfigEditor.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { config } from '@grafana/runtime';
import { DataSourceHttpSettings } from '@grafana/ui';
import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
import { SpanBarSettings } from '@jaegertracing/jaeger-ui-components';
import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
@ -20,6 +20,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
onChange={onOptionsChange}
/>
{config.featureToggles.secureSocksDatasourceProxy && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
<div className="gf-form-group">
<TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
</div>