import { css } from '@emotion/css'; import React from 'react'; import { DataSourceJsonData, DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption, } from '@grafana/data'; import { ConfigSection } from '@grafana/experimental'; import { DataSourcePicker } from '@grafana/runtime'; import { Button, InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui'; import { ConfigDescriptionLink } from '../ConfigDescriptionLink'; import { TagMappingInput } from '../TraceToLogs/TagMappingInput'; export interface TraceToMetricsOptions { datasourceUid?: string; tags?: Array<{ key: string; value: string }>; queries: TraceToMetricQuery[]; spanStartTimeShift?: string; spanEndTimeShift?: string; } export interface TraceToMetricQuery { name?: string; query?: string; } export interface TraceToMetricsData extends DataSourceJsonData { tracesToMetrics?: TraceToMetricsOptions; } interface Props extends DataSourcePluginOptionsEditorProps {} export function TraceToMetricsSettings({ options, onOptionsChange }: Props) { const styles = useStyles2(getStyles); return (
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, datasourceUid: ds.uid, }) } /> {options.jsonData.tracesToMetrics?.datasourceUid ? ( ) : null} updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, spanStartTimeShift: v.currentTarget.value, }) } value={options.jsonData.tracesToMetrics?.spanStartTimeShift || ''} /> updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, spanEndTimeShift: v.currentTarget.value, }) } value={options.jsonData.tracesToMetrics?.spanEndTimeShift || ''} /> updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, tags: v, }) } /> {options.jsonData.tracesToMetrics?.queries?.map((query, i) => (
{ let newQueries = options.jsonData.tracesToMetrics?.queries.slice() ?? []; newQueries[i].name = e.currentTarget.value; updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, queries: newQueries, }); }} /> { let newQueries = options.jsonData.tracesToMetrics?.queries.slice() ?? []; newQueries[i].query = e.currentTarget.value; updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, queries: newQueries, }); }} />
))}
); } export const TraceToMetricsSection = ({ options, onOptionsChange }: DataSourcePluginOptionsEditorProps) => { return ( } isCollapsible={true} isInitiallyOpen={true} > ); }; const getStyles = (theme: GrafanaTheme2) => ({ infoText: css` padding-bottom: ${theme.spacing(2)}; color: ${theme.colors.text.secondary}; `, row: css` label: row; align-items: baseline; `, queryRow: css` label: queryRow; display: flex; flex-flow: wrap; `, });