Tempo: Config and doc updates (#64017)

* Config and doc upgrades * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update tags text * Use service graph as a proper noun * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Update docs/sources/datasources/tempo/_index.md Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com> * Yarn prettier --------- Co-authored-by: Kim Nylander <104772500+knylander-grafana@users.noreply.github.com>
2025-02-25 18:55:37 -06:00 · 2023-03-06 16:03:29 +00:00
parent 282d021c53
commit b6eb324139
10 changed files with 112 additions and 97 deletions
--- a/public/app/core/components/NodeGraphSettings.tsx
+++ b/public/app/core/components/NodeGraphSettings.tsx
@@ -21,13 +21,9 @@ interface Props extends DataSourcePluginOptionsEditorProps<NodeGraphData> {}
 export function NodeGraphSettings({ options, onOptionsChange }: Props) {
  return (
    <div className={styles.container}>
-      <h3 className="page-heading">Node Graph</h3>
+      <h3 className="page-heading">Node graph</h3>
      <InlineFieldRow className={styles.row}>
-        <InlineField
-          tooltip="Enables the Node Graph visualization in the trace viewer."
-          label="Enable Node Graph"
-          labelWidth={26}
-        >
+        <InlineField tooltip="Displays the node graph above the trace view" label="Enable node graph" labelWidth={26}>
          <InlineSwitch
            id="enableNodeGraph"
            value={options.jsonData.nodeGraph?.enabled}
--- a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
+++ b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
@@ -106,12 +106,14 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
    <div className={css({ width: '100%' })}>
      <h3 className="page-heading">Trace to logs</h3>

-      <div className={styles.infoText}>
-        Trace to logs lets you 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.</div>

      <InlineFieldRow>
-        <InlineField tooltip="The data source the trace is going to navigate to" label="Data source" labelWidth={26}>
+        <InlineField
+          tooltip="The logs data source the trace is going to navigate to"
+          label="Data source"
+          labelWidth={26}
+        >
          <DataSourcePicker
            inputId="trace-to-logs-data-source-picker"
            filter={(ds) => supportedDataSourceTypes.includes(ds.type)}
@@ -165,7 +167,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {

      <InlineFieldRow>
        <InlineField
-          tooltip="Use custom query with possibility to interpolate variables from the trace or span."
+          tooltip="Use a custom query with possibility to interpolate variables from the trace or span"
          label="Use custom query"
          labelWidth={26}
        >
@@ -183,7 +185,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
        <InlineField
          label="Query"
          labelWidth={26}
-          tooltip="The query that will run when navigating from a trace to logs data source. Interpolate tags using the `$__tags` keyword."
+          tooltip="The query that will run when navigating from a trace to logs data source. Interpolate tags using the `$__tags` keyword"
          grow
        >
          <Input
--- a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
+++ b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
@@ -38,12 +38,14 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
    <div className={css({ width: '100%' })}>
      <h3 className="page-heading">Trace to metrics</h3>

-      <div className={styles.infoText}>
-        Trace to metrics lets you navigate from a trace span to the selected data source.
-      </div>
+      <div className={styles.infoText}>Navigate from a trace span to the selected data source&apos;s metrics.</div>

      <InlineFieldRow className={styles.row}>
-        <InlineField tooltip="The data source the trace is going to navigate to" label="Data source" labelWidth={26}>
+        <InlineField
+          tooltip="The Prometheus data source the trace is going to navigate to"
+          label="Data source"
+          labelWidth={26}
+        >
          <DataSourcePicker
            inputId="trace-to-metrics-data-source-picker"
            pluginId="prometheus"
@@ -77,7 +79,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
      </InlineFieldRow>

      <InlineFieldRow>
-        <InlineField tooltip="Tags that will be used in the metrics query." label="Tags" labelWidth={26}>
+        <InlineField tooltip="Tags that will be used in the metrics query" label="Tags" labelWidth={26}>
          <TagMappingInput
            values={options.jsonData.tracesToMetrics?.tags ?? []}
            onChange={(v) =>
@@ -155,7 +157,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
          <InlineField
            label="Query"
            labelWidth={10}
-            tooltip="The Prometheus query that will run when navigating from a trace to metrics. Interpolate tags using the `$__tags` keyword."
+            tooltip="The Prometheus query that will run when navigating from a trace to metrics. Interpolate tags using the `$__tags` keyword"
            grow
          >
            <Input
--- a/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
+++ b/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
@@ -31,12 +31,14 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {

  return (
    <div className={css({ width: '100%' })}>
-      <h3 className="page-heading">Span bar label</h3>
+      <h3 className="page-heading">Span bar</h3>

-      <div className={styles.infoText}>Span bar label lets you add additional info to the span bar row.</div>
+      <div className={styles.infoText}>
+        Add additional info next to the service and operation on a span bar row in the trace view.
+      </div>

      <InlineFieldRow className={styles.row}>
-        <InlineField label="Label" labelWidth={26} grow>
+        <InlineField label="Label" labelWidth={26} tooltip="Default: duration" grow>
          <Select
            inputId="label"
            options={selectOptions}
@@ -56,7 +58,11 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {
      </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">
+          <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"
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
@@ -44,11 +44,11 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
      </div>

      <div className="gf-form-group">
-        <SearchSettings options={options} onOptionsChange={onOptionsChange} />
+        <NodeGraphSettings options={options} onOptionsChange={onOptionsChange} />
      </div>

      <div className="gf-form-group">
-        <NodeGraphSettings options={options} onOptionsChange={onOptionsChange} />
+        <SearchSettings options={options} onOptionsChange={onOptionsChange} />
      </div>

      <div className="gf-form-group">
--- a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
@@ -24,10 +24,10 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) {

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

      <div className={styles.infoText}>
-        Select a Loki datasource 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.
      </div>

      <InlineFieldRow className={styles.row}>
@@ -71,7 +71,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/QuerySettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React from 'react';

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

 import { TempoJsonData } from '../types';
@@ -13,10 +13,15 @@ export function QuerySettings({ options, onOptionsChange }: Props) {

  return (
    <div className={styles.container}>
-      <h3 className="page-heading">TraceID Query</h3>
+      <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.
+      </div>
+
      <InlineField
        label="Use time range in query"
-        tooltip="The time range is ignored by default when querying by TraceID but can be used when there are performance issues or timeouts since it will narrow down the search to the defined range. Default is disabled."
+        tooltip="The time range can be used when there are performance issues or timeouts since it will narrow down the search to the defined range. Default: disabled"
        labelWidth={26}
      >
        <InlineSwitch
@@ -36,7 +41,7 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
          labelWidth={26}
          disabled={!options.jsonData.traceQuery?.timeShiftEnabled}
          grow
-          tooltip="Shifts the start of the time range when searching by TraceID. This is needed as searching for traces can return traces that do not fully fall into the search time range, so we recommend using higher time shifts for longer traces. Default 30m (Time units can be used here, for example: 5s, 1m, 3h)"
+          tooltip="Shifts the start of the time range when searching by TraceID. Searching can return traces that do not fully fall into the search time range, so we recommend using higher time shifts for longer traces. Default: 30m (Time units can be used here, for example: 5s, 1m, 3h)"
        >
          <Input
            type="text"
@@ -58,7 +63,7 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
          labelWidth={26}
          disabled={!options.jsonData.traceQuery?.timeShiftEnabled}
          grow
-          tooltip="Shifts the end of the time range when searching by TraceID. This is needed as searching for traces can return traces that do not fully fall into the search time range, so we recommend using higher time shifts for longer traces. Default 30m (Time units can be used here, for example: 5s, 1m, 3h)"
+          tooltip="Shifts the end of the time range when searching by TraceID. Searching can return traces that do not fully fall into the search time range, so we recommend using higher time shifts for longer traces. Default: 30m (Time units can be used here, for example: 5s, 1m, 3h)"
        >
          <Input
            type="text"
@@ -78,7 +83,12 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
  );
 }

-const getStyles = () => ({
+const getStyles = (theme: GrafanaTheme2) => ({
+  infoText: css`
+    label: infoText;
+    padding-bottom: ${theme.spacing(2)};
+    color: ${theme.colors.text.secondary};
+  `,
  container: css`
    label: container;
    width: 100%;
--- a/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
@@ -2,20 +2,18 @@ import { css } from '@emotion/css';
 import React from 'react';

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

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

 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}

 export function SearchSettings({ options, onOptionsChange }: Props) {
-  const styles = useStyles2(getStyles);
-
  return (
    <div className={styles.container}>
-      <h3 className="page-heading">Search</h3>
+      <h3 className="page-heading">Tempo search</h3>
      <InlineFieldRow className={styles.row}>
-        <InlineField tooltip="Removes the Search tab from the Tempo query editor." label="Hide search" labelWidth={26}>
+        <InlineField tooltip="Removes the search tab from the query editor" label="Hide search" labelWidth={26}>
          <InlineSwitch
            id="hideSearch"
            value={options.jsonData.search?.hide}
@@ -32,7 +30,7 @@ export function SearchSettings({ options, onOptionsChange }: Props) {
  );
 }

-const getStyles = () => ({
+const styles = {
  container: css`
    label: container;
    width: 100%;
@@ -41,4 +39,4 @@ const getStyles = () => ({
    label: row;
    align-items: baseline;
  `,
-});
+};
--- a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
@@ -14,11 +14,9 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {

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

-      <div className={styles.infoText}>
-        To allow querying service graph data you have to select a Prometheus instance where the data is stored.
-      </div>
+      <div className={styles.infoText}>Select a Prometheus data source that contains the service graph data.</div>

      <InlineFieldRow className={styles.row}>
        <InlineField
@@ -65,7 +63,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
    padding-bottom: ${theme.spacing(2)};
    color: ${theme.colors.text.secondary};
  `,
-
  row: css`
    label: row;
    align-items: baseline;