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

Add links to documentation in config pages and clean up styles

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;
   `,
-};
+});