Tracing: Release trace to logs feature (#29443)

* Remove feature flag

* Add data source setting for Jaeger

* Refactor trace to logs settings

* Fix tests

* Get ds settings in two steps

* Add info to settings

* Update docs for trace to logs

* Update yarn.lock

* Apply suggestions from code review

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update TraceToLogsSettings after merge with master

* Add config for tags

* Add tags to check for keys

* Apply suggestions from code review

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

public/app/core/components/TraceToLogsSettings.tsx

@@ -0,0 +1,72 @@
+import {
+  DataSourceJsonData,
+  DataSourcePluginOptionsEditorProps,
+  GrafanaTheme,
+  updateDatasourcePluginJsonDataOption,
+} from '@grafana/data';
+import { InlineFormLabel, TagsInput, useStyles } from '@grafana/ui';
+import { css } from 'emotion';
+import React from 'react';
+import { DataSourcePicker } from './Select/DataSourcePicker';
+
+export interface TraceToLogsOptions {
+  datasourceUid?: string;
+  tags?: string[];
+}
+
+export interface TraceToLogsData extends DataSourceJsonData {
+  tracesToLogs?: TraceToLogsOptions;
+}
+
+interface Props extends DataSourcePluginOptionsEditorProps<TraceToLogsData> {}
+
+export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles(getStyles);
+
+  return (
+    <>
+      <h3 className="page-heading">Trace to logs</h3>
+
+      <div className={styles.infoText}>
+        Trace to logs let&apos;s you navigate from a trace span to the selected data source&apos;s log.
+      </div>
+
+      <div className="gf-form">
+        <InlineFormLabel tooltip="The data source the trace is going to navigate to">Data source</InlineFormLabel>
+        <DataSourcePicker
+          pluginId="loki"
+          current={options.jsonData.tracesToLogs?.datasourceUid}
+          noDefault={true}
+          onChange={ds =>
+            updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
+              datasourceUid: ds.uid,
+              tags: options.jsonData.tracesToLogs?.tags,
+            })
+          }
+        />
+      </div>
+
+      <div className="gf-form">
+        <InlineFormLabel tooltip="Tags that will be used in the Loki query. Default tags: 'cluster', 'hostname', 'namespace', 'pod'">
+          Tags
+        </InlineFormLabel>
+        <TagsInput
+          tags={options.jsonData.tracesToLogs?.tags}
+          onChange={tags =>
+            updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
+              datasourceUid: options.jsonData.tracesToLogs?.datasourceUid,
+              tags: tags,
+            })
+          }
+        />
+      </div>
+    </>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme) => ({
+  infoText: css`
+    padding-bottom: ${theme.spacing.md};
+    color: ${theme.colors.textSemiWeak};
+  `,
+});