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

Tracing: Upgrade tracing data source configuration editors (#68764)

Browse Source 
* Add tracing config sub sections

* Export common sections and update divider in additional settings section

* Max width and margin bottom

* Add feature name to config link

* Update SpanBarSettings

* remove import
This commit is contained in:
Joey
2023-06-01 15:52:40 +01:00
committed by GitHub
parent e5ec8535ec
commit 0e90dfcc9c
17 changed files with 352 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,23 @@
import { css } from '@emotion/css';
import React from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
import { ConfigSection } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { DataSourceHttpSettings } from '@grafana/ui';
import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
import { SpanBarSettings } from 'app/features/explore/TraceView/components';
import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui';
import { Divider } from 'app/core/components/Divider';
import { NodeGraphSection } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
import { SpanBarSection } from 'app/features/explore/TraceView/components/settings/SpanBarSettings';
export type Props = DataSourcePluginOptionsEditorProps;
export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
const styles = useStyles2(getStyles);
return (
<>
<div className={styles.container}>
<DataSourceHttpSettings
defaultUrl="http://localhost:9411"
dataSourceConfig={options}
@@ -21,23 +26,35 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
/>
<div className="gf-form-group">
<TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
</div>
<TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
<Divider />
{config.featureToggles.traceToMetrics ? (
<div className="gf-form-group">
<TraceToMetricsSettings options={options} onOptionsChange={onOptionsChange} />
</div>
<>
<TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
<Divider />
</>
) : null}
<div className="gf-form-group">
<NodeGraphSettings options={options} onOptionsChange={onOptionsChange} />
</div>
<div className="gf-form-group">
<SpanBarSettings options={options} onOptionsChange={onOptionsChange} />
</div>
</>
<ConfigSection
title="Additional settings"
description="Additional settings are optional settings that can be configured for more control over your data source."
isCollapsible={true}
isInitiallyOpen={false}
>
<NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
<Divider hideLine={true} />
<SpanBarSection options={options} onOptionsChange={onOptionsChange} />
</ConfigSection>
</div>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
label: container;
margin-bottom: ${theme.spacing(2)};
max-width: '578px';
`,
});