Tracing: Add links to documentation in config pages (#66442)

Add links to documentation in config pages and clean up styles
2025-02-25 18:55:37 -06:00 · 2023-04-13 14:56:35 +01:00
parent 4796a63554
commit 22fde6a3f2
10 changed files with 101 additions and 70 deletions
--- a/public/app/core/components/DocsLinkButton.tsx
+++ b/public/app/core/components/DocsLinkButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { LinkButton } from '@grafana/ui';
+
+type Props = {
+  hrefSuffix: string;
+};
+
+export function DocsLinkButton(props: Props) {
+  const { hrefSuffix } = props;
+  const tooltip = 'Learn more in the Grafana docs';
+
+  return (
+    <LinkButton
+      aria-label={tooltip}
+      icon="external-link-alt"
+      fill="text"
+      href={`https://grafana.com/docs/grafana/next/datasources/${hrefSuffix}`}
+      variant="secondary"
+      size="md"
+      target="_blank"
+      tooltip={tooltip}
+      tooltipPlacement="top"
+    />
+  );
+}
--- a/public/app/core/components/NodeGraphSettings.tsx
+++ b/public/app/core/components/NodeGraphSettings.tsx
@@ -4,9 +4,12 @@ import React from 'react';
 import {
  DataSourceJsonData,
  DataSourcePluginOptionsEditorProps,
+  GrafanaTheme2,
  updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
+
+import { DocsLinkButton } from './DocsLinkButton';

 export interface NodeGraphOptions {
  enabled?: boolean;
@@ -19,9 +22,17 @@ export interface NodeGraphData extends DataSourceJsonData {
 interface Props extends DataSourcePluginOptionsEditorProps<NodeGraphData> {}

 export function NodeGraphSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
+
  return (
    <div className={styles.container}>
      <h3 className="page-heading">Node graph</h3>
+
+      <div className={styles.infoText}>
+        {`Show or hide the node graph visualization`}
+        <DocsLinkButton hrefSuffix={`${options.type}/#node-graph`} />
+      </div>
+
      <InlineFieldRow className={styles.row}>
        <InlineField
          tooltip="Displays the node graph above the trace view. Default: disabled"
@@ -44,7 +55,12 @@ export function NodeGraphSettings({ options, onOptionsChange }: Props) {
  );
 }

-const styles = {
+const getStyles = (theme: GrafanaTheme2) => ({
+  infoText: css`
+    label: infoText;
+    padding-bottom: ${theme.spacing(2)};
+    color: ${theme.colors.text.secondary};
+  `,
  container: css`
    label: container;
    width: 100%;
@@ -53,4 +69,4 @@ const styles = {
    label: row;
    align-items: baseline;
  `,
-};
+});
--- a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
+++ b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
@@ -10,6 +10,8 @@ import {
 import { DataSourcePicker } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, Input, useStyles2, InlineSwitch } from '@grafana/ui';

+import { DocsLinkButton } from '../DocsLinkButton';
+
 import { TagMappingInput } from './TagMappingInput';

 // @deprecated use getTraceToLogsOptions to get the v2 version of this config from jsonData
@@ -107,7 +109,10 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
    <div className={css({ width: '100%' })}>
      <h3 className="page-heading">Trace to logs</h3>

-      <div className={styles.infoText}>Navigate from a trace span to the selected data source&apos;s logs.</div>
+      <div className={styles.infoText}>
+        Navigate from a trace span to the selected data source&apos;s logs
+        <DocsLinkButton hrefSuffix={`${options.type}/#trace-to-logs`} />
+      </div>

      <InlineFieldRow>
        <InlineField
--- a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
+++ b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
@@ -10,6 +10,7 @@ import {
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui';

+import { DocsLinkButton } from '../DocsLinkButton';
 import { TagMappingInput } from '../TraceToLogs/TagMappingInput';

 export interface TraceToMetricsOptions {
@@ -38,7 +39,10 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
    <div className={css({ width: '100%' })}>
      <h3 className="page-heading">Trace to metrics</h3>

-      <div className={styles.infoText}>Navigate from a trace span to the selected data source&apos;s metrics.</div>
+      <div className={styles.infoText}>
+        Navigate from a trace span to the selected data source&apos;s metrics
+        <DocsLinkButton hrefSuffix={`${options.type}/#trace-to-metrics`} />
+      </div>

      <InlineFieldRow className={styles.row}>
        <InlineField
--- a/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
+++ b/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
@@ -9,6 +9,7 @@ import {
  updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';

 export interface SpanBarOptions {
  type?: string;
@@ -34,7 +35,8 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {
      <h3 className="page-heading">Span bar</h3>

      <div className={styles.infoText}>
-        Add additional info next to the service and operation on a span bar row in the trace view.
+        Add additional info next to the service and operation on a span bar row in the trace view
+        <DocsLinkButton hrefSuffix={`${options.type}/#span-bar`} />
      </div>

      <InlineFieldRow className={styles.row}>
@@ -88,7 +90,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
    padding-bottom: ${theme.spacing(2)};
    color: ${theme.colors.text.secondary};
  `,
-
  row: css`
    label: row;
    align-items: baseline;
--- a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
@@ -1,12 +1,14 @@
-import { css } from '@emotion/css';
 import React from 'react';

-import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';

 import { TempoJsonData } from '../types';

+import { getStyles } from './QuerySettings';
+
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}

 export function LokiSearchSettings({ options, onOptionsChange }: Props) {
@@ -23,11 +25,12 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) {
  }

  return (
-    <div className={css({ width: '100%' })}>
+    <div className={styles.container}>
      <h3 className="page-heading">Loki search</h3>

      <div className={styles.infoText}>
-        Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source.
+        Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source
+        <DocsLinkButton hrefSuffix="tempo/#loki-search" />
      </div>

      <InlineFieldRow className={styles.row}>
@@ -64,15 +67,3 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) {
    </div>
  );
 }
-
-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;
-  `,
-});
--- a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
@@ -3,6 +3,7 @@ import React from 'react';

 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { InlineField, InlineFieldRow, InlineSwitch, Input, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';

 import { TempoJsonData } from '../types';

@@ -16,7 +17,8 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
      <h3 className="page-heading">TraceID query</h3>

      <div className={styles.infoText}>
-        Modify how TraceID queries are run. These settings do not apply to TraceQL queries.
+        Modify how TraceID queries are run
+        <DocsLinkButton hrefSuffix="tempo/#traceid-query" />
      </div>

      <InlineField
@@ -83,18 +85,15 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
  );
 }

-const getStyles = (theme: GrafanaTheme2) => ({
+export 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;
  `,
 });
--- a/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
@@ -1,17 +1,27 @@
-import { css } from '@emotion/css';
 import React from 'react';

 import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
-import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';

 import { TempoJsonData } from '../types';

+import { getStyles } from './QuerySettings';
+
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}

 export function SearchSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
+
  return (
    <div className={styles.container}>
      <h3 className="page-heading">Tempo search</h3>
+
+      <div className={styles.infoText}>
+        Modify how traces are searched
+        <DocsLinkButton hrefSuffix="tempo/#tempo-search" />
+      </div>
+
      <InlineFieldRow className={styles.row}>
        <InlineField tooltip="Removes the search tab from the query editor" label="Hide search" labelWidth={26}>
          <InlineSwitch
@@ -29,14 +39,3 @@ export function SearchSettings({ options, onOptionsChange }: Props) {
    </div>
  );
 }
-
-const styles = {
-  container: css`
-    label: container;
-    width: 100%;
-  `,
-  row: css`
-    label: row;
-    align-items: baseline;
-  `,
-};
--- a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
@@ -1,22 +1,27 @@
-import { css } from '@emotion/css';
 import React from 'react';

-import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';

 import { TempoJsonData } from '../types';

+import { getStyles } from './QuerySettings';
+
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}

 export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
  const styles = useStyles2(getStyles);

  return (
-    <div className={css({ width: '100%' })}>
+    <div className={styles.container}>
      <h3 className="page-heading">Service graph</h3>

-      <div className={styles.infoText}>Select a Prometheus data source that contains the service graph data.</div>
+      <div className={styles.infoText}>
+        Select a Prometheus data source that contains the service graph data
+        <DocsLinkButton hrefSuffix="tempo/#service-graph" />
+      </div>

      <InlineFieldRow className={styles.row}>
        <InlineField
@@ -56,15 +61,3 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
    </div>
  );
 }
-
-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;
-  `,
-});
--- a/public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx
@@ -1,19 +1,21 @@
-import { css } from '@emotion/css';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';

 import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';

 import { TempoDatasource } from '../datasource';
 import { TempoJsonData } from '../types';

+import { getStyles } from './QuerySettings';
 import { TraceQLSearchTags } from './TraceQLSearchTags';

 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}

 export function TraceQLSearchSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
  const dataSourceSrv = getDataSourceSrv();
  const fetchDatasource = async () => {
    return (await dataSourceSrv.get({ type: options.type, uid: options.uid })) as TempoDatasource;
@@ -24,6 +26,12 @@ export function TraceQLSearchSettings({ options, onOptionsChange }: Props) {
  return (
    <div className={styles.container}>
      <h3 className="page-heading">Tempo search</h3>
+
+      <div className={styles.infoText}>
+        Modify how traces are searched
+        <DocsLinkButton hrefSuffix="tempo/#tempo-search" />
+      </div>
+
      <InlineFieldRow className={styles.row}>
        <InlineField tooltip="Removes the search tab from the query editor" label="Hide search" labelWidth={26}>
          <InlineSwitch
@@ -46,14 +54,3 @@ export function TraceQLSearchSettings({ options, onOptionsChange }: Props) {
    </div>
  );
 }
-
-const styles = {
-  container: css`
-    label: container;
-    width: 100%;
-  `,
-  row: css`
-    label: row;
-    align-items: baseline;
-  `,
-};