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>
mdvictor/panel-exports
Joey 2 years ago committed by GitHub
parent 282d021c53
commit b6eb324139
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 105
      docs/sources/datasources/tempo/_index.md
  2. 8
      public/app/core/components/NodeGraphSettings.tsx
  3. 14
      public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
  4. 14
      public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
  5. 14
      public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
  6. 4
      public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
  7. 5
      public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
  8. 22
      public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
  9. 12
      public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
  10. 7
      public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx

@ -23,7 +23,7 @@ Administrators can also [configure the data source via YAML]({{< relref "#provis
Once you've added the data source, you can [configure it]({{< relref "#configure-the-data-source" >}}) so that your Grafana instance's users can create queries in its [query editor]({{< relref "./query-editor/" >}}) when they [build dashboards]({{< relref "../../dashboards/build-dashboards/" >}}) and use [Explore]({{< relref "../../explore/" >}}).
You can also [use the service graph]({{< relref "#use-the-service-graph" >}}) to view service relationships, [track RED metrics]({{< relref "#open-the-service-graph-view" >}}), [upload a JSON trace file]({{< relref "#upload-a-json-trace-file" >}}), and [link a trace ID from logs]({{< relref "#link-a-trace-id-from-logs" >}}) in Loki or Elasticsearch.
You can also [use the Service Graph]({{< relref "#use-the-service-graph" >}}) to view service relationships, [track RED metrics]({{< relref "#open-the-service-graph-view" >}}), [upload a JSON trace file]({{< relref "#upload-a-json-trace-file" >}}), and [link a trace ID from logs]({{< relref "#link-a-trace-id-from-logs" >}}) from a logs data source.
## Configure the data source
@ -44,9 +44,9 @@ Set the data source's basic configuration options carefully:
| **User** | Sets the user name for basic authentication. |
| **Password** | Sets the password for basic authentication. |
You can also configure settings specific to the Tempo data source:
You can also configure settings specific to the Tempo data source. These options are described in the sections below.
### Configure trace to logs
### Trace to logs
![Trace to logs settings](/media/docs/tempo/tempo-trace-to-logs-9-4.png)
@ -55,53 +55,57 @@ You can also configure settings specific to the Tempo data source:
The **Trace to logs** setting configures the [trace to logs feature]({{< relref "../../explore/trace-integration" >}}) that is available when you integrate Grafana with Tempo.
There are two ways to configure the trace to logs feature. You can use simplified configuration with default query, or you can configure custom query where you can use a [template language]({{< relref "../../dashboards/variables/variable-syntax">}}) to interpolate variables from the trace or span.
There are two ways to configure the trace to logs feature:
**To use simple configuration:**
- Use a simplified configuration with default query, or
- Configure a custom query where you can use a [template language]({{< relref "../../dashboards/variables/variable-syntax">}}) to interpolate variables from the trace or span.
#### Use a simple configuration
1. Select the target data source.
1. Set start and end time shift. As the logs timestamps may not exactly match the timestamps of the spans in trace it may be necessary to search in larger or shifted time range to find the desired logs.
1. Select which tags to use in the logs query. The tags you configure must be present in the spans attributes or resources for a trace to logs span link to appear. You can optionally configure a new name for the tag. This is useful for example if the tag has dots in the name and the target data source does not allow using dots in labels. In that case you can for example remap `http.status` to `http_status`.
1. Optionally switch on Filter by Trace ID and/or Filter by Span ID to further filter the logs if your logs consistently contain trace or span IDs.
1. Optionally switch on the **Filter by trace ID** and/or **Filter by span ID** setting to further filter the logs if your logs consistently contain trace or span IDs.
**To use custom query configuration:**
#### Configure a custom query
1. Select the target data source.
1. Set start and end time shift. As the logs timestamps may not exactly match the timestamps of the spans in the trace it may be necessary to widen or shift the time range to find the desired logs.
1. Optionally select tags to map. These tags can be used in the custom query with `${__tags}` variable. This variable will interpolate the mapped tags as list in an appropriate syntax for the data source and will only include the tags that were present in the span omitting those that weren't present. You can optionally configure a new name for the tag. This is useful in cases where the tag has dots in the name and the target data source does not allow using dots in labels. For example, you can remap `http.status` to `http_status` in such a case. If you don't map any tags here, you can still use any tag in the query like this `method="${__span.tags.method}"`.
1. Skip Filter by Trace ID or Filter by Span ID as these cannot be used with custom query.
1. Switch on Use custom query.
1. Specify custom query to be used to query the logs. You can use various variables to make that query relevant for current span. The link will only be shown only if all the variables are interpolated with non-empty values to prevent creating invalid query.
1. Skip **Filter by trace ID** and **Filter by span ID** settings as these cannot be used with a custom query.
1. Switch on **Use custom query**.
1. Specify a custom query to be used to query the logs. You can use various variables to make that query relevant for current span. The link will only be shown only if all the variables are interpolated with non-empty values to prevent creating an invalid query.
#### Variables that can be used in a custom query
**Variables that can be used in custom query**
To use a variable you need to wrap it in `${}`. For example `${__span.name}`.
| Variable name | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| \_\_tags | This variable is special because it uses the tag mapping in from the UI to create a label matcher string in the specific data source syntax. It uses only tags that are present in the span so the link will still be created even if only one of those tags is present in the span. You can use this if not all the tags are required for the query to be useful. |
| \_\_span.spanId | The ID of the span. |
| \_\_span.traceId | The ID of the trace. |
| \_\_span.duration | The duration of the span. |
| \_\_span.name | Name of the span. |
| \_\_span.tags | Namespace for the tags in the span. To access a specific tag named "version" you would use `${__span.tags.version}`. In case the tag contains dot you have to access it as `${__span.tags["http.status"]}`. |
| \_\_trace.traceId | The ID of the trace. |
| \_\_trace.duration | The duration of the trace. |
| \_\_trace.name | The name of the trace. |
| Variable name | Description |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **\_\_tags** | This variable uses the tag mapping from the UI to create a label matcher string in the specific data source syntax. The variable only uses tags that are present in the span. The link is still created even if only one of those tags is present in the span. You can use this if all tags are not required for the query to be useful. |
| **\_\_span.spanId** | The ID of the span. |
| **\_\_span.traceId** | The ID of the trace. |
| **\_\_span.duration** | The duration of the span. |
| **\_\_span.name** | Name of the span. |
| **\_\_span.tags** | Namespace for the tags in the span. To access a specific tag named `version`, you would use `${__span.tags.version}`. In case the tag contains dot, you have to access it as `${__span.tags["http.status"]}`. |
| **\_\_trace.traceId** | The ID of the trace. |
| **\_\_trace.duration** | The duration of the trace. |
| **\_\_trace.name** | The name of the trace. |
The following table describes the ways in which you can configure your trace to logs settings:
| Setting name | Description |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Data source** | Defines the target data source. You can select only Loki or Splunk \[logs\] data sources. |
| **Span start time shift** | Shifts the start time for the logs query, based on the span's start time. You can use time units, such as `5s`, `1m`, `3h`. To extend the time to the past, use a negative value. Default is 0. |
| **Span end time shift** | Shifts the end time for the logs query, based on the span's end time. You can use time units. Default is 0. |
| **Tags** | Defines the the tags to use in the logs query. Default is `'cluster', 'hostname', 'namespace', 'pod'`. You can change the tag name for example to remove dots from the name if they are not allowed in the target data source. For example map `http.status` to `http_status` |
| **Filter by Trace ID** | Toggles whether to append the trace ID to the logs query. |
| **Filter by Span ID** | Toggles whether to append the span ID to the logs query. |
| **Use custom query** | Toggles use of custom query with interpolation. |
| **Query** | Input to write custom query. Use variable interpolation to customize it with variables from span. |
| Setting name | Description |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Data source** | Defines the target data source. You can select only Loki or Splunk \[logs\] data sources. |
| **Span start time shift** | Shifts the start time for the logs query, based on the span's start time. You can use time units, such as `5s`, `1m`, `3h`. To extend the time to the past, use a negative value. Default: `0`. |
| **Span end time shift** | Shifts the end time for the logs query, based on the span's end time. You can use time units. Default: `0`. |
| **Tags** | Defines the the tags to use in the logs query. Default is `cluster`, `hostname`, `namespace`, `pod`. You can change the tag name for example to remove dots from the name if they are not allowed in the target data source. For example map `http.status` to `http_status`. |
| **Filter by trace ID** | Toggles whether to append the trace ID to the logs query. |
| **Filter by span ID** | Toggles whether to append the span ID to the logs query. |
| **Use custom query** | Toggles use of custom query with interpolation. |
| **Query** | Input to write custom query. Use variable interpolation to customize it with variables from span. |
### Configure trace to metrics
### Trace to metrics
> **Note:** This feature is behind the `traceToMetrics` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}).
> If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature.
@ -125,27 +129,27 @@ Each linked query consists of:
Interpolate tags using the `$__tags` keyword.
For example, when you configure the query `requests_total{$__tags}`with the tags `k8s.pod=pod` and `cluster`, the result looks like `requests_total{pod="nginx-554b9", cluster="us-east-1"}`.
### Configure service graph
### Service Graph
The **Service Graph** section configures the [Service Graph](/docs/tempo/latest/grafana-agent/service-graphs/) feature.
Configure the **Data source** setting to define in which Prometheus instance the Service Graph data is stored.
To use the service graph, refer to the [Service graph section]({{< relref "#use-the-service-graph" >}}).
To use the Service Graph, refer to the [Service Graph documentation]({{< relref "#use-the-service-graph" >}}).
### Configure Tempo search integration
### Node Graph
The **Search** section configures [Tempo search](/docs/tempo/latest/configuration/#search).
The **Node Graph** setting enables the [node graph visualization]({{< relref "../../panels-visualizations/visualizations/node-graph/" >}}), which is disabled by default.
Optionally configure the **Hide search** setting to hide the search query option in Explore if search is not configured in the Tempo instance.
Once enabled, Grafana displays the node graph after loading the trace view.
### Enable Node Graph
### Tempo search
The **Node Graph** setting enables the [Node Graph visualization]({{< relref "../../panels-visualizations/visualizations/node-graph/" >}}), which is disabled by default.
The **Search** section configures [Tempo search](/docs/tempo/latest/configuration/#search).
Once enabled, Grafana displays the Node Graph after loading the trace view.
You can configure the **Hide search** setting to hide the search query option in **Explore** if search is not configured in the Tempo instance.
### Configure Loki search
### Loki search
The **Loki search** section configures the Loki search query type.
@ -218,11 +222,11 @@ For details, refer to the [query editor documentation]({{< relref "./query-edito
You can upload a JSON file that contains a single trace and visualize it.
If the file has multiple traces, Grafana visualizes its first trace.
**To download a trace or service graph through the inspector:**
**To download a trace or Service Graph through the inspector:**
1. Open the inspector.
1. Navigate to the **Data** tab.
1. Click **Download traces** or **Download service graph**.
1. Click **Download traces** or **Download Service Graph**.
### Trace JSON example
@ -268,18 +272,18 @@ If the file has multiple traces, Grafana visualizes its first trace.
}
```
## Use the service graph
## Use the Service Graph
A service graph is a visual representation of the relationships between services.
The Service Graph is a visual representation of the relationships between services.
Each node on the graph represents a service such as an API or database.
You use a service graph to detect performance issues; track increases in error, fault, or throttle rates in services; and investigate root causes by viewing corresponding traces.
You use the Service Graph to detect performance issues; track increases in error, fault, or throttle rates in services; and investigate root causes by viewing corresponding traces.
{{< figure src="/static/img/docs/node-graph/node-graph-8-0.png" class="docs-image--no-shadow" max-width="500px" caption="Screenshot of a Node Graph" >}}
**To display the service graph:**
**To display the Service Graph:**
1. [Configure Grafana Agent](/docs/tempo/latest/grafana-agent/service-graphs/#quickstart) or [Tempo or GET](/docs/tempo/latest/metrics-generator/service_graphs/#tempo) to generate service graph data.
1. [Configure Grafana Agent](/docs/tempo/latest/grafana-agent/service-graphs/#quickstart) or [Tempo or GET](/docs/tempo/latest/metrics-generator/service_graphs/#tempo) to generate Service Graph data.
1. Link a Prometheus data source in the Tempo data source's [Service Graph](#configure-service-graph) settings.
1. Navigate to [Explore]({{< relref "../../explore/" >}}).
1. Select the Tempo data source.
@ -316,7 +320,8 @@ To open the Service Graph view:
1. Link a Prometheus data source in the Tempo data source settings.
1. Navigate to [Explore]({{< relref "../../explore/" >}}).
1. Select the Tempo data source.
1. Select the **Service Graph** query type and run the query.
1. Select the **Service Graph** query type.
1. Run the query.
1. _(Optional)_ Filter your results.
> **Note:** Grafana uses the `traces_spanmetrics_calls_total` metric to display the name, rate, and error rate columns, and `traces_spanmetrics_latency_bucket` to display the duration column.

@ -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}

@ -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

@ -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

@ -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"

@ -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">

@ -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;

@ -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%;

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

@ -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;

Loading…
Cancel
Save