Extract duplicated code (#80991)

.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"]

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`
+  infoText: css({
-    label: infoText;
+    label: 'infoText',
-    padding-bottom: ${theme.spacing(2)};
+    paddingBottom: theme.spacing(2),
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-  `,
+  }),
-  row: css`
+  row: css({
-    label: row;
+    label: 'row',
-    align-items: baseline;
+    alignItems: 'baseline',
-  `,
+  }),
 });

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';

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';

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';

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';

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';
 

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';

public/app/plugins/datasource/tempo/_importedDependencies/components/NodeGraphSettings.tsx

@@ -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<NodeGraphData> {}
-
-export function NodeGraphSettings({ options, onOptionsChange }: Props) {
-  const styles = useStyles2(getStyles);
-
-  return (
-    <div className={styles.container}>
-      <InlineFieldRow className={styles.row}>
-        <InlineField
-          tooltip="Displays the node graph above the trace view. Default: disabled"
-          label="Enable node graph"
-          labelWidth={26}
-        >
-          <InlineSwitch
-            id="enableNodeGraph"
-            value={options.jsonData.nodeGraph?.enabled}
-            onChange={(event: React.SyntheticEvent<HTMLInputElement>) =>
-              updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'nodeGraph', {
-                ...options.jsonData.nodeGraph,
-                enabled: event.currentTarget.checked,
-              })
-            }
-          />
-        </InlineField>
-      </InlineFieldRow>
-    </div>
-  );
-}
-
-export const NodeGraphSection = ({ options, onOptionsChange }: DataSourcePluginOptionsEditorProps) => {
-  let suffix = options.type;
-  suffix += options.type === 'tempo' ? '/configure-tempo-data-source/#node-graph' : '/#node-graph';
-
-  return (
-    <ConfigSubSection
-      title="Node graph"
-      description={
-        <ConfigDescriptionLink
-          description="Show or hide the node graph visualization."
-          suffix={suffix}
-          feature="the node graph"
-        />
-      }
-    >
-      <NodeGraphSettings options={options} onOptionsChange={onOptionsChange} />
-    </ConfigSubSection>
-  );
-};
-
-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;
-  `,
-});

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';

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';

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';
 

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;
 

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';