Add link to span

[Couper4]

Adds a direct link to the span in the results table:

Currently it's possible to only navigate to the start of a trace, but that's inconvenient if you want to go directly to the span. Sometimes this is become a huge pain if the trace contains many spans.

---

I tried to add the link to the SpanId column, since it makes more sense IMO, but I wasn't able to make it work.

(In this example TraceId=d7a3ce97bcf9758befb3013e3540a568, SpanId=ad9771c2c5a05563)

The issue is that the resulting link URL has "traceId":"<SpanId>", while the correct link URL has it right:(below just the most important differences):

broken:  http://localhost:3000/..."meta":{"traceId":"ad9771c2c5a05563"}}],                "panelsState":{"trace":{"spanId":"ad9771c2c5a05563"}}}}
correct: http://localhost:3000/..."meta":{"traceId":"d7a3ce97bcf9758befb3013e3540a568"}}],"panelsState":{"trace":{"spanId":"ad9771c2c5a05563"}}}}

Full link URLs

broken:  http://localhost:3000/explore?schemaVersion=1&panes={"1e3":{"datasource":"derb9582e1gjkf","queries":[{"datasource":{"type":"grafana-clickhouse-datasource","uid":"derb9582e1gjkf"},"editorType":"builder","rawSql":"WITH+'666'+as+trace_id,+(SELECT+min(Start)+FROM+\"default\".\"otel_traces_trace_id_ts\"+WHERE+TraceId+=+trace_id)+as+trace_start,+(SELECT+max(End)+++1+FROM+\"default\".\"otel_traces_trace_id_ts\"+WHERE+TraceId+=+trace_id)+as+trace_end+SELECT+\"TraceId\"+as+traceID,+\"SpanId\"+as+spanID,+\"ParentSpanId\"+as+parentSpanID,+\"ServiceName\"+as+serviceName,+\"SpanName\"+as+operationName,+multiply(toUnixTimestamp64Nano(\"Timestamp\"),+0.000001)+as+startTime,+multiply(\"Duration\",+0.000001)+as+duration,+arrayMap(key+->+map('key',+key,+'value',\"SpanAttributes\"[key]),+mapKeys(\"SpanAttributes\"))+as+tags,+arrayMap(key+->+map('key',+key,+'value',\"ResourceAttributes\"[key]),+mapKeys(\"ResourceAttributes\"))+as+serviceTags,+if(\"StatusCode\"+IN+('Error',+'STATUS_CODE_ERROR'),+2,+0)+as+statusCode,+\"SpanKind\"+as+kind,+\"StatusMessage\"+as+statusMessage,+\"TraceState\"+as+traceState+FROM+\"default\".\"otel_traces\"+WHERE+traceID+=+trace_id+AND+\"Timestamp\"+>=+trace_start+AND+\"Timestamp\"+<=+trace_end+LIMIT+1000","builderOptions":{"database":"default","table":"otel_traces","queryType":"traces","mode":"list","columns":[{"name":"Timestamp","hint":"time"},{"name":"TraceId","hint":"trace_id"},{"name":"SpanId","hint":"trace_span_id"},{"name":"ParentSpanId","hint":"trace_parent_span_id"},{"name":"ServiceName","hint":"trace_service_name"},{"name":"SpanName","hint":"trace_operation_name"},{"name":"Duration","hint":"trace_duration_time"},{"name":"SpanAttributes","hint":"trace_tags"},{"name":"ResourceAttributes","hint":"trace_service_tags"},{"name":"StatusCode","hint":"trace_status_code"},{"name":"SpanKind","hint":"trace_kind"},{"name":"StatusMessage","hint":"trace_status_message"},{"name":"TraceState","hint":"trace_state"}],"meta":{"minimized":true,"isTraceIdMode":true,"traceId":"ad9771c2c5a05563","traceDurationUnit":"nanoseconds","otelEnabled":true,"otelVersion":"latest"},"limit":1000,"filters":[],"orderBy":[]},"pluginVersion":"4.10.1","refId":"Trace+ID","format":3}],"panelsState":{"trace":{"spanId":"ad9771c2c5a05563"}}}}&orgId=1
correct: http://localhost:3000/explore?schemaVersion=1&panes={"1e3":{"datasource":"derb9582e1gjkf","queries":[{"datasource":{"type":"grafana-clickhouse-datasource","uid":"derb9582e1gjkf"},"editorType":"builder","rawSql":"WITH+'666'+as+trace_id,+(SELECT+min(Start)+FROM+\"default\".\"otel_traces_trace_id_ts\"+WHERE+TraceId+=+trace_id)+as+trace_start,+(SELECT+max(End)+++1+FROM+\"default\".\"otel_traces_trace_id_ts\"+WHERE+TraceId+=+trace_id)+as+trace_end+SELECT+\"TraceId\"+as+traceID,+\"SpanId\"+as+spanID,+\"ParentSpanId\"+as+parentSpanID,+\"ServiceName\"+as+serviceName,+\"SpanName\"+as+operationName,+multiply(toUnixTimestamp64Nano(\"Timestamp\"),+0.000001)+as+startTime,+multiply(\"Duration\",+0.000001)+as+duration,+arrayMap(key+->+map('key',+key,+'value',\"SpanAttributes\"[key]),+mapKeys(\"SpanAttributes\"))+as+tags,+arrayMap(key+->+map('key',+key,+'value',\"ResourceAttributes\"[key]),+mapKeys(\"ResourceAttributes\"))+as+serviceTags,+if(\"StatusCode\"+IN+('Error',+'STATUS_CODE_ERROR'),+2,+0)+as+statusCode,+\"SpanKind\"+as+kind,+\"StatusMessage\"+as+statusMessage,+\"TraceState\"+as+traceState+FROM+\"default\".\"otel_traces\"+WHERE+traceID+=+trace_id+AND+\"Timestamp\"+>=+trace_start+AND+\"Timestamp\"+<=+trace_end+LIMIT+1000","builderOptions":{"database":"default","table":"otel_traces","queryType":"traces","mode":"list","columns":[{"name":"Timestamp","hint":"time"},{"name":"TraceId","hint":"trace_id"},{"name":"SpanId","hint":"trace_span_id"},{"name":"ParentSpanId","hint":"trace_parent_span_id"},{"name":"ServiceName","hint":"trace_service_name"},{"name":"SpanName","hint":"trace_operation_name"},{"name":"Duration","hint":"trace_duration_time"},{"name":"SpanAttributes","hint":"trace_tags"},{"name":"ResourceAttributes","hint":"trace_service_tags"},{"name":"StatusCode","hint":"trace_status_code"},{"name":"SpanKind","hint":"trace_kind"},{"name":"StatusMessage","hint":"trace_status_message"},{"name":"TraceState","hint":"trace_state"}],"meta":{"minimized":true,"isTraceIdMode":true,"traceId":"d7a3ce97bcf9758befb3013e3540a568","traceDurationUnit":"nanoseconds","otelEnabled":true,"otelVersion":"latest"},"limit":1000,"filters":[],"orderBy":[]},"pluginVersion":"4.10.1","refId":"Trace+ID","format":3}],"panelsState":{"trace":{"spanId":"ad9771c2c5a05563"}}}}&orgId=1

You can find a TODO in the code for the broken SpanId column.

---

I would really appreciate some guidance on how to make the link on SpanId work, because I believe it would be the best user experience 😉.

If it's not possible, the link on the TraceId column would still be a good solution and certainly an improved UX in case of large traces.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}