Jaeger: Search traces (grafana#32805)

* WIP: Search jaeger traces

* Add more customizable query params

* Fix failing test

* Fix e2e test

* Add tags input field

* Minor changes

* Fix tests

* Add docs

* Make sure linking is working

* Add tests to datasource.ts

* Apply suggestions from code review

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

* Update Jaeger doc

* UI updates

* Address review comments

* Add new screenshots to docs

* Update placeholder text for tags

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

docs/sources/datasources/jaeger.md

@@ -33,31 +33,34 @@ This is a configuration for the [trace to logs feature]({{< relref "../explore/t
 - **Data source -** Target data source.
 - **Tags -** The tags that will be used in the Loki query. Default is `'cluster', 'hostname', 'namespace', 'pod'`.
 
-![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png "Screenshot of the trace to logs settings")
+![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png 'Screenshot of the trace to logs settings')
 
 ## Query traces
 
 You can query and display traces from Jaeger via [Explore]({{< relref "../explore/_index.md" >}}).
 
-{{< docs-imagebox img="/img/docs/v70/jaeger-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}}
+{{< docs-imagebox img="/img/docs/explore/jaeger-search-form.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}}
 
-The Jaeger query editor allows you to query by trace ID directly or selecting a trace from trace selector. To query by trace ID, insert the ID into the text input.
+You can query by trace ID or use the search form to find traces. To query by trace ID, select the TraceID from the Query type selector and insert the ID into the text input.
 
-{{< docs-imagebox img="/img/docs/v70/jaeger-query-editor-open.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace selector expanded" >}}
+{{< docs-imagebox img="/img/docs/explore/jaeger-trace-id.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace ID selected" >}}
 
-Use the trace selector to pick particular trace from all traces logged in the time range you have selected in Explore. The trace selector has three levels of nesting:
+To perform a search, set the query type selector to Search, then use the following fields to find traces:
 
-1. The service you are interested in.
-1. Particular operation is part of the selected service.
-1. Specific trace in which the selected operation occurred, represented by the root operation name and trace duration.
+- Service - Returns a list of services.
+- Operation - Field gets populated once you select a service. It then lists the operations related to the selected service. Select `All` option to query all operations.
+- Tags - Use values in the [logfmt](https://brandur.org/logfmt) format. For example `error=true db.statement="select * from User"`.
+- Min Duration - Filter all traces with a duration higher than the set value. Possible values are `1.2s, 100ms, 500us`.
+- Max Duration - Filter all traces with a duration lower than the set value. Possible values are `1.2s, 100ms, 500us`.
+- Limit - Limits the number of traces returned.
 
 ## Linking Trace ID from logs
 
 You can link to Jaeger trace from logs in Loki by configuring a derived field with internal link. See the [Derived fields]({{< relref "loki.md#derived-fields" >}}) section in the [Loki data source]({{< relref "loki.md" >}}) documentation for details.
 
 ## Configure the data source with provisioning
 
-You can set up the data source via configuration files with Grafana’s provisioning system. Refer to [provisioning docs page]({{< relref "../administration/provisioning/#datasources" >}}) for information on various settings and how it works.
+You can set up the data source via configuration files with Grafana's provisioning system. Refer to [provisioning docs page]({{< relref "../administration/provisioning/#datasources" >}}) for more information on configuring various settings.
 
 Here is an example with basic auth and trace-to-logs field.
 
@@ -75,14 +78,15 @@ datasources:
     editable: true
     isDefault: false
     jsonData:
-        tracesToLogs:
-            # Field with internal link pointing to a Loki data source in Grafana.
-            # datasourceUid value must match the `datasourceUid` value of the Loki data source.
-            datasourceUid: loki
-            tags:
-              - cluster
-              - hostname
-              - namespace
-              - pod
+      tracesToLogs:
+        # Field with internal link pointing to a Loki data source in Grafana.
+        # datasourceUid value must match the `datasourceUid` value of the Loki data source.
+        datasourceUid: loki
+        tags:
+          - cluster
+          - hostname
+          - namespace
+          - pod
     secureJsonData:
-        basicAuthPassword: my_password
+      basicAuthPassword: my_password
+```

e2e/suite1/specs/trace-view-scrolling.spec.ts

@@ -19,7 +19,7 @@ describe('Trace view', () => {
         e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
       });
 
-    e2e.components.QueryField.container().should('be.visible').type('long-trace');
+    e2e.components.DataSource.Jaeger.traceIDInput().should('be.visible').type('long-trace');
 
     e2e.components.RefreshPicker.runButton().should('be.visible').click();
 

package.json

@@ -102,6 +102,7 @@
     "@types/jest": "26.0.15",
     "@types/jquery": "3.3.38",
     "@types/lodash": "4.14.149",
+    "@types/logfmt": "^1.2.1",
     "@types/lru-cache": "^5.1.0",
     "@types/moment-timezone": "0.5.13",
     "@types/mousetrap": "1.6.3",
@@ -259,6 +260,7 @@
     "json-source-map": "0.6.1",
     "jsurl": "^0.1.5",
     "lodash": "4.17.21",
+    "logfmt": "^1.3.2",
     "lru-cache": "^5.1.1",
     "md5": "^2.2.1",
     "memoize-one": "5.1.1",

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -15,6 +15,9 @@ export const Components = {
         startValue: 'TestData start value',
       },
     },
+    Jaeger: {
+      traceIDInput: 'Trace ID',
+    },
   },
   Menu: {
     MenuComponent: (title: string) => `${title} menu`,