Extract duplicated code (#80991)

packages/grafana-o11y-ds-frontend/src/NodeGraph/NodeGraphSettings.tsx

@@ -0,0 +1,84 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import {
+  DataSourceJsonData,
+  DataSourcePluginOptionsEditorProps,
+  GrafanaTheme2,
+  updateDatasourcePluginJsonDataOption,
+} from '@grafana/data';
+import { ConfigDescriptionLink, ConfigSubSection } 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',
+    paddingBottom: theme.spacing(2),
+    color: theme.colors.text.secondary,
+  }),
+  container: css({
+    label: 'container',
+    width: '100%',
+  }),
+  row: css({
+    label: 'row',
+    alignItems: 'baseline',
+  }),
+});

packages/grafana-o11y-ds-frontend/src/SpanBar/SpanBarSettings.tsx

@@ -0,0 +1,110 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import {
+  DataSourceJsonData,
+  DataSourcePluginOptionsEditorProps,
+  GrafanaTheme2,
+  toOption,
+  updateDatasourcePluginJsonDataOption,
+} from '@grafana/data';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
+import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
+
+export interface SpanBarOptions {
+  type?: string;
+  tag?: string;
+}
+
+export interface SpanBarOptionsData extends DataSourceJsonData {
+  spanBar?: SpanBarOptions;
+}
+
+export const NONE = 'None';
+export const DURATION = 'Duration';
+export const TAG = 'Tag';
+
+interface Props extends DataSourcePluginOptionsEditorProps<SpanBarOptionsData> {}
+
+export default function SpanBarSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
+  const selectOptions = [NONE, DURATION, TAG].map(toOption);
+
+  return (
+    <div className={css({ width: '100%' })}>
+      <InlineFieldRow className={styles.row}>
+        <InlineField label="Label" labelWidth={26} tooltip="Default: duration" grow>
+          <Select
+            inputId="label"
+            options={selectOptions}
+            value={options.jsonData.spanBar?.type || ''}
+            onChange={(v) => {
+              updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'spanBar', {
+                ...options.jsonData.spanBar,
+                type: v?.value ?? '',
+              });
+            }}
+            placeholder="Duration"
+            isClearable
+            aria-label={'select-label-name'}
+            width={40}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      {options.jsonData.spanBar?.type === TAG && (
+        <InlineFieldRow className={styles.row}>
+          <InlineField
+            label="Tag key"
+            labelWidth={26}
+            tooltip="Tag key which will be used to get the tag value. A span's attributes and resources will be searched for the tag key"
+          >
+            <Input
+              type="text"
+              placeholder="Enter tag key"
+              onChange={(v) =>
+                updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'spanBar', {
+                  ...options.jsonData.spanBar,
+                  tag: v.currentTarget.value,
+                })
+              }
+              value={options.jsonData.spanBar?.tag || ''}
+              width={40}
+            />
+          </InlineField>
+        </InlineFieldRow>
+      )}
+    </div>
+  );
+}
+
+export const SpanBarSection = ({ options, onOptionsChange }: DataSourcePluginOptionsEditorProps) => {
+  let suffix = options.type;
+  suffix += options.type === 'tempo' ? '/configure-tempo-data-source/#span-bar' : '/#span-bar';
+
+  return (
+    <ConfigSubSection
+      title="Span bar"
+      description={
+        <ConfigDescriptionLink
+          description="Add additional info next to the service and operation on a span bar row in the trace view."
+          suffix={suffix}
+          feature="the span bar"
+        />
+      }
+    >
+      <SpanBarSettings options={options} onOptionsChange={onOptionsChange} />
+    </ConfigSubSection>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  infoText: css({
+    label: 'infoText',
+    paddingBottom: theme.spacing(2),
+    color: theme.colors.text.secondary,
+  }),
+  row: css({
+    label: 'row',
+    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';