diff --git a/.betterer.results b/.betterer.results index fc71a114ad2..31793abd9ab 100644 --- a/.betterer.results +++ b/.betterer.results @@ -5703,15 +5703,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/tempo/_importedDependencies/components/AdHocFilter/AdHocFilterRenderer.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/plugins/datasource/tempo/_importedDependencies/components/NodeGraphSettings.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] - ], - "public/app/plugins/datasource/tempo/_importedDependencies/components/TraceView/SpanBarSettings.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/plugins/datasource/tempo/_importedDependencies/datasources/loki/LanguageProvider.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] diff --git a/public/app/core/components/NodeGraphSettings.tsx b/packages/grafana-o11y-ds-frontend/src/NodeGraph/NodeGraphSettings.tsx similarity index 100% rename from public/app/core/components/NodeGraphSettings.tsx rename to packages/grafana-o11y-ds-frontend/src/NodeGraph/NodeGraphSettings.tsx diff --git a/public/app/plugins/datasource/tempo/_importedDependencies/components/TraceView/SpanBarSettings.tsx b/packages/grafana-o11y-ds-frontend/src/SpanBar/SpanBarSettings.tsx similarity index 92% rename from public/app/plugins/datasource/tempo/_importedDependencies/components/TraceView/SpanBarSettings.tsx rename to packages/grafana-o11y-ds-frontend/src/SpanBar/SpanBarSettings.tsx index 0d759f4d312..81780446edd 100644 --- a/public/app/plugins/datasource/tempo/_importedDependencies/components/TraceView/SpanBarSettings.tsx +++ b/packages/grafana-o11y-ds-frontend/src/SpanBar/SpanBarSettings.tsx @@ -8,7 +8,7 @@ import { toOption, updateDatasourcePluginJsonDataOption, } from '@grafana/data'; -import { ConfigSubSection, ConfigDescriptionLink } from '@grafana/experimental'; +import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental'; import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui'; export interface SpanBarOptions { @@ -98,13 +98,13 @@ export const SpanBarSection = ({ options, onOptionsChange }: DataSourcePluginOpt }; const getStyles = (theme: GrafanaTheme2) => ({ - infoText: css` - label: infoText; - padding-bottom: ${theme.spacing(2)}; - color: ${theme.colors.text.secondary}; - `, - row: css` - label: row; - align-items: baseline; - `, + infoText: css({ + label: 'infoText', + paddingBottom: theme.spacing(2), + color: theme.colors.text.secondary, + }), + row: css({ + label: 'row', + alignItems: 'baseline', + }), }); diff --git a/packages/grafana-o11y-ds-frontend/src/index.ts b/packages/grafana-o11y-ds-frontend/src/index.ts index b964178b255..591a0cc5b5c 100644 --- a/packages/grafana-o11y-ds-frontend/src/index.ts +++ b/packages/grafana-o11y-ds-frontend/src/index.ts @@ -5,6 +5,8 @@ */ export * from './IntervalInput/IntervalInput'; +export * from './NodeGraph/NodeGraphSettings'; +export * from './SpanBar/SpanBarSettings'; export * from './TraceToLogs/TagMappingInput'; export * from './TraceToLogs/TraceToLogsSettings'; export * from './TraceToMetrics/TraceToMetricsSettings'; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.test.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.test.tsx index 6d43873cadf..d4a76ca054b 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.test.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.test.tsx @@ -16,7 +16,8 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; -import { NONE, DURATION, TAG } from '../settings/SpanBarSettings'; +import { DURATION, NONE, TAG } from '@grafana/o11y-ds-frontend'; + import { SpanLinkDef, TraceSpan } from '../types'; import SpanBarRow, { SpanBarRowProps } from './SpanBarRow'; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx index cd4e3cea429..cc864bd6ac8 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx @@ -17,10 +17,10 @@ import cx from 'classnames'; import * as React from 'react'; import { GrafanaTheme2, TraceKeyValuePair } from '@grafana/data'; +import { DURATION, NONE, TAG } from '@grafana/o11y-ds-frontend'; import { Icon, stylesFactory, withTheme2 } from '@grafana/ui'; import { autoColor } from '../Theme'; -import { DURATION, NONE, TAG } from '../settings/SpanBarSettings'; import { SpanBarOptions, SpanLinkFunc, TraceSpan, TNil, CriticalPathSection } from '../types'; import SpanBar from './SpanBar'; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx index b2fccd6a996..495fec6f4c4 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx @@ -16,14 +16,13 @@ import { css } from '@emotion/css'; import React, { RefObject } from 'react'; import { GrafanaTheme2, LinkModel } from '@grafana/data'; -import { TraceToProfilesOptions } from '@grafana/o11y-ds-frontend'; +import { SpanBarOptions, TraceToProfilesOptions } from '@grafana/o11y-ds-frontend'; import { config, reportInteraction } from '@grafana/runtime'; import { TimeZone } from '@grafana/schema'; import { stylesFactory, withTheme2 } from '@grafana/ui'; import { autoColor } from '../Theme'; import { merge as mergeShortcuts } from '../keyboard-shortcuts'; -import { SpanBarOptions } from '../settings/SpanBarSettings'; import { CriticalPathSection, SpanLinkFunc, TNil } from '../types'; import TTraceTimeline from '../types/TTraceTimeline'; import { TraceSpan, Trace, TraceLog, TraceKeyValuePair, TraceLink, TraceSpanReference } from '../types/trace'; diff --git a/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx index cb5b54a0712..f97f2ddd6f1 100644 --- a/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx @@ -3,11 +3,9 @@ import React from 'react'; import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data'; import { ConfigSection, DataSourceDescription } from '@grafana/experimental'; -import { TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend'; +import { NodeGraphSection, SpanBarSection, TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend'; import { config } from '@grafana/runtime'; import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui'; -import { NodeGraphSection } from 'app/core/components/NodeGraphSettings'; -import { SpanBarSection } from 'app/features/explore/TraceView/components/settings/SpanBarSettings'; import { TraceIdTimeParams } from './TraceIdTimeParams'; diff --git a/public/app/plugins/datasource/jaeger/datasource.ts b/public/app/plugins/datasource/jaeger/datasource.ts index 2ccee1ad1f1..bbdea5ea4e3 100644 --- a/public/app/plugins/datasource/jaeger/datasource.ts +++ b/public/app/plugins/datasource/jaeger/datasource.ts @@ -15,10 +15,9 @@ import { ScopedVars, urlUtil, } from '@grafana/data'; +import { NodeGraphOptions, SpanBarOptions } from '@grafana/o11y-ds-frontend'; import { BackendSrvRequest, getBackendSrv, getTemplateSrv, TemplateSrv } from '@grafana/runtime'; -import { NodeGraphOptions } from 'app/core/components/NodeGraphSettings'; import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; -import { SpanBarOptions } from 'app/features/explore/TraceView/components'; import { ALL_OPERATIONS_KEY } from './components/SearchForm'; import { TraceIdTimeParamsOptions } from './configuration/TraceIdTimeParams'; diff --git a/public/app/plugins/datasource/tempo/_importedDependencies/components/NodeGraphSettings.tsx b/public/app/plugins/datasource/tempo/_importedDependencies/components/NodeGraphSettings.tsx deleted file mode 100644 index c6852da877e..00000000000 --- a/public/app/plugins/datasource/tempo/_importedDependencies/components/NodeGraphSettings.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -import { - DataSourceJsonData, - DataSourcePluginOptionsEditorProps, - GrafanaTheme2, - updateDatasourcePluginJsonDataOption, -} from '@grafana/data'; -import { ConfigSubSection, ConfigDescriptionLink } from '@grafana/experimental'; -import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui'; - -export interface NodeGraphOptions { - enabled?: boolean; -} - -export interface NodeGraphData extends DataSourceJsonData { - nodeGraph?: NodeGraphOptions; -} - -interface Props extends DataSourcePluginOptionsEditorProps {} - -export function NodeGraphSettings({ options, onOptionsChange }: Props) { - const styles = useStyles2(getStyles); - - return ( -
- - - ) => - updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'nodeGraph', { - ...options.jsonData.nodeGraph, - enabled: event.currentTarget.checked, - }) - } - /> - - -
- ); -} - -export const NodeGraphSection = ({ options, onOptionsChange }: DataSourcePluginOptionsEditorProps) => { - let suffix = options.type; - suffix += options.type === 'tempo' ? '/configure-tempo-data-source/#node-graph' : '/#node-graph'; - - return ( - - } - > - - - ); -}; - -const getStyles = (theme: GrafanaTheme2) => ({ - infoText: css` - label: infoText; - padding-bottom: ${theme.spacing(2)}; - color: ${theme.colors.text.secondary}; - `, - container: css` - label: container; - width: 100%; - `, - row: css` - label: row; - align-items: baseline; - `, -}); diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx index aa8f342e861..d11be997235 100644 --- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx @@ -12,13 +12,16 @@ import { convertLegacyAuthProps, DataSourceDescription, } from '@grafana/experimental'; -import { TraceToLogsSection, TraceToMetricsSection, TraceToProfilesSection } from '@grafana/o11y-ds-frontend'; +import { + NodeGraphSection, + SpanBarSection, + TraceToLogsSection, + TraceToMetricsSection, + TraceToProfilesSection, +} from '@grafana/o11y-ds-frontend'; import { config } from '@grafana/runtime'; import { SecureSocksProxySettings, useStyles2, Divider, Stack } from '@grafana/ui'; -import { NodeGraphSection } from '../_importedDependencies/components/NodeGraphSettings'; -import { SpanBarSection } from '../_importedDependencies/components/TraceView/SpanBarSettings'; - import { LokiSearchSettings } from './LokiSearchSettings'; import { QuerySettings } from './QuerySettings'; import { ServiceGraphSettings } from './ServiceGraphSettings'; diff --git a/public/app/plugins/datasource/tempo/datasource.ts b/public/app/plugins/datasource/tempo/datasource.ts index 1af07bd9453..bca272b2438 100644 --- a/public/app/plugins/datasource/tempo/datasource.ts +++ b/public/app/plugins/datasource/tempo/datasource.ts @@ -21,7 +21,7 @@ import { TestDataSourceResponse, urlUtil, } from '@grafana/data'; -import { TraceToLogsOptions } from '@grafana/o11y-ds-frontend'; +import { NodeGraphOptions, SpanBarOptions, TraceToLogsOptions } from '@grafana/o11y-ds-frontend'; import { BackendSrvRequest, config, @@ -36,8 +36,6 @@ import { BarGaugeDisplayMode, TableCellDisplayMode, VariableFormatID } from '@gr import { generateQueryFromFilters } from './SearchTraceQLEditor/utils'; import { TempoVariableQuery, TempoVariableQueryType } from './VariableQueryEditor'; -import { NodeGraphOptions } from './_importedDependencies/components/NodeGraphSettings'; -import { SpanBarOptions } from './_importedDependencies/components/TraceView/SpanBarSettings'; import { LokiOptions } from './_importedDependencies/datasources/loki/types'; import { PromQuery, PrometheusDatasource } from './_importedDependencies/datasources/prometheus/types'; import { TraceqlFilter, TraceqlSearchScope } from './dataquery.gen'; diff --git a/public/app/plugins/datasource/tempo/types.ts b/public/app/plugins/datasource/tempo/types.ts index b6693078dfb..1f58ccb9eed 100644 --- a/public/app/plugins/datasource/tempo/types.ts +++ b/public/app/plugins/datasource/tempo/types.ts @@ -1,7 +1,6 @@ import { DataSourceJsonData } from '@grafana/data/src'; -import { TraceToLogsOptions } from '@grafana/o11y-ds-frontend'; +import { NodeGraphOptions, TraceToLogsOptions } from '@grafana/o11y-ds-frontend'; -import { NodeGraphOptions } from './_importedDependencies/components/NodeGraphSettings'; import { LokiQuery } from './_importedDependencies/datasources/loki/types'; import { TempoQuery as TempoBase, TempoQueryType, TraceqlFilter } from './dataquery.gen'; diff --git a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx index d461870bffb..8916303e9ad 100644 --- a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx +++ b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx @@ -3,11 +3,9 @@ import React from 'react'; import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data'; import { ConfigSection, DataSourceDescription } from '@grafana/experimental'; -import { TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend'; +import { NodeGraphSection, SpanBarSection, TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend'; import { config } from '@grafana/runtime'; import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui'; -import { NodeGraphSection } from 'app/core/components/NodeGraphSettings'; -import { SpanBarSection } from 'app/features/explore/TraceView/components/settings/SpanBarSettings'; export type Props = DataSourcePluginOptionsEditorProps; diff --git a/public/app/plugins/datasource/zipkin/datasource.ts b/public/app/plugins/datasource/zipkin/datasource.ts index 4a7657335d4..0a20d631cc1 100644 --- a/public/app/plugins/datasource/zipkin/datasource.ts +++ b/public/app/plugins/datasource/zipkin/datasource.ts @@ -12,9 +12,8 @@ import { ScopedVars, urlUtil, } from '@grafana/data'; +import { NodeGraphOptions, SpanBarOptions } from '@grafana/o11y-ds-frontend'; import { BackendSrvRequest, FetchResponse, getBackendSrv, getTemplateSrv, TemplateSrv } from '@grafana/runtime'; -import { NodeGraphOptions } from 'app/core/components/NodeGraphSettings'; -import { SpanBarOptions } from 'app/features/explore/TraceView/components'; import { apiPrefix } from './constants'; import { ZipkinQuery, ZipkinSpan } from './types';