From 62e228293a2a28cae42cb9e24cb0ef5c2300a224 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Mon, 23 Dec 2024 18:01:29 +0800
Subject: [PATCH 1/8] fix(tracing): overall and per-span latency display

---
 packages/core/tracing/sandbox/App.vue         |  5 ++
 .../sandbox/fixtures/trace-batches.json       |  2 +-
 .../trace-viewer/SpanAttributeTable.vue       | 15 +++-
 .../trace-viewer/SpanLatencyTable.vue         | 68 +++++++++++++++++++
 .../components/trace-viewer/TraceLatency.vue  | 45 ++++++++++++
 .../components/trace-viewer/TraceViewer.vue   | 13 ++--
 .../components/waterfall/WaterfallLegend.vue  | 55 ---------------
 .../components/waterfall/WaterfallSpanBar.vue | 27 +-------
 .../core/tracing/src/composables/useI18n.ts   |  2 +
 packages/core/tracing/src/constants/spans.ts  |  9 +++
 .../core/tracing/src/constants/waterfall.ts   | 30 --------
 packages/core/tracing/src/locales/en.json     | 21 +++---
 packages/core/tracing/src/types/spans.ts      |  7 ++
 packages/core/tracing/src/utils/spans.ts      | 29 +++++++-
 packages/core/tracing/src/utils/time.ts       | 15 ++++
 15 files changed, 214 insertions(+), 129 deletions(-)
 create mode 100644 packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
 create mode 100644 packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
 delete mode 100644 packages/core/tracing/src/components/waterfall/WaterfallLegend.vue

diff --git a/packages/core/tracing/sandbox/App.vue b/packages/core/tracing/sandbox/App.vue
index 58dc016d60..f27acf9d27 100644
--- a/packages/core/tracing/sandbox/App.vue
+++ b/packages/core/tracing/sandbox/App.vue
@@ -6,3 +6,8 @@
   </div>
 </template>
 
+<style lang="scss" scoped>
+body {
+  overscroll-behavior-y: none;
+}
+</style>
diff --git a/packages/core/tracing/sandbox/fixtures/trace-batches.json b/packages/core/tracing/sandbox/fixtures/trace-batches.json
index 369770bd43..30f943e2d7 100644
--- a/packages/core/tracing/sandbox/fixtures/trace-batches.json
+++ b/packages/core/tracing/sandbox/fixtures/trace-batches.json
@@ -1 +1 @@
-{"batches":[{"resource":{"attributes":[{"key":"session.id","value":{"stringValue":"0193cf2f-943d-793a-819b-04ccf30948f3"}},{"key":"service.instance.id","value":{"stringValue":"4eb9bfce-d4fb-429d-b5d4-f37be1dfd680"}},{"key":"service.version","value":{"stringValue":"3.10.0.0"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jaw9O51b7eQ=","name":"kong","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832732999936","endTimeUnixNano":"1734347833661143808","attributes":[{"key":"url.full","value":{"stringValue":"http://localhost/foo/anything"}},{"key":"http.response.status_code","value":{"doubleValue":200}},{"key":"network.peer.address","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.latency.upstream.ttfb","value":{"doubleValue":568}},{"key":"proxy.kong.latency.upstream.read_response_duration","value":{"doubleValue":1}},{"key":"proxy.kong.latency.total","value":{"doubleValue":927}},{"key":"proxy.kong.latency.redis.total_io","value":{"doubleValue":0}},{"key":"proxy.kong.latency.tcpsock.total_io","value":{"doubleValue":0}},{"key":"http.request.size","value":{"stringValue":"280"}},{"key":"proxy.kong.request.id","value":{"stringValue":"0f9fc8071dbf62141d8f136bbb4cdd39"}},{"key":"client.address","value":{"stringValue":"127.0.0.1"}},{"key":"network.protocol.name","value":{"stringValue":"http"}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"network.protocol.version","value":{"stringValue":"1.1"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"client.port","value":{"stringValue":"51632"}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"060cc439-1fa0-4711-a87b-7721d71c4eb4"}},{"key":"http.request.method","value":{"stringValue":"POST"}},{"key":"proxy.kong.upstream.addr","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.upstream.host","value":{"stringValue":"34.226.108.155:443"}},{"key":"http.request.header.host","value":{"stringValue":"localhost"}},{"key":"proxy.kong.target.id","value":{"stringValue":"4fa11aba-7e12-48ff-9bc8-827db4939301"}},{"key":"http.route","value":{"stringValue":"/foo"}},{"key":"url.scheme","value":{"stringValue":"http"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"eU4w1buq/ME=","parentSpanId":"jaw9O51b7eQ=","name":"kong.read_client_http_headers","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832732999936","endTimeUnixNano":"1734347832733523456","attributes":[{"key":"proxy.kong.http.request.headers.count","value":{"doubleValue":8}},{"key":"proxy.kong.http.request.headers.size","value":{"doubleValue":195}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"Pq8AHC6l7/k=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.rewrite","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832733757440","endTimeUnixNano":"1734347832734179072","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jB8u1zr5ziA=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","endTimeUnixNano":"1734347832734516480","status":{},"events":[{"timeUnixNano":"1730397283960413400","attributes":[{"key":"message","value":{"stringValue":"exception"}},{"key":"exception.message","value":{"stringValue":"./kong/plugins/request-transformer/handler.lua:20: attempt to index global 'some_nil_variable' (a nil value)"}}],"droppedAttributesCount":0,"name":""}]},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jB8u1zr5zig=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832734516480","status":{},"events":[{"timeUnixNano":"1730397283960413400","attributes":[{"key":"message","value":{"stringValue":"exception"}},{"key":"exception.message","value":{"stringValue":"./kong/plugins/request-transformer/handler.lua:20: attempt to index global 'some_nil_variable' (a nil value)"}}],"droppedAttributesCount":0,"name":""}]},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"kvqrSQxXvCg=","parentSpanId":"jB8u1zr5zig=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832734629632","endTimeUnixNano":"1734347832734826752","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"Cur1GqHIG/8=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735258880","endTimeUnixNano":"1734347832736532224","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"TltE6SKF1Gw=","parentSpanId":"Cur1GqHIG/8=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735565312","endTimeUnixNano":"1734347832735602944","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"VWA3UYCXUxs=","parentSpanId":"Cur1GqHIG/8=","name":"kong.access.plugin.acme","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735847168","endTimeUnixNano":"1734347832735917568","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"a34e6c20-3f98-4841-9858-3ca8a09095b7"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"CfAKAQA8cJI=","parentSpanId":"Cur1GqHIG/8=","name":"kong.access.plugin.request-transformer","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832736018176","endTimeUnixNano":"1734347832736438528","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"bdcb19c8-3dca-4ea9-8a0e-679fb50a3138"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"9CpiF5ZqCak=","parentSpanId":"CfAKAQA8cJI=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736348160","endTimeUnixNano":"1734347832736356096","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"YSaVrPJeALo=","parentSpanId":"CfAKAQA8cJI=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736419840","endTimeUnixNano":"1734347832736424960","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"cjHPVXNFEgI=","parentSpanId":"jB8u1zr5zig=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736904448","endTimeUnixNano":"1734347832736909312","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"mziYy3y5MYI=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.header_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347833659182848","endTimeUnixNano":"1734347833659495168","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"JAhrk1KDjxo=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.body_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347833659626752","endTimeUnixNano":"1734347833660816128","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"izyzMU3IxCE=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.selection","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347832737147392","endTimeUnixNano":"1734347833091174400","attributes":[{"key":"proxy.kong.upstream.lb_algorithm","value":{"stringValue":"round-robin"}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"060cc439-1fa0-4711-a87b-7721d71c4eb4"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"1pq1U0wCeVY=","parentSpanId":"izyzMU3IxCE=","name":"kong.upstream.try_select","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347832737147392","endTimeUnixNano":"1734347833091174400","attributes":[{"key":"try_count","value":{"doubleValue":1}},{"key":"keepalive","value":{"boolValue":true}},{"key":"network.peer.name","value":{"stringValue":"httpbin.org"}},{"key":"network.peer.address","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.target.id","value":{"stringValue":"4fa11aba-7e12-48ff-9bc8-827db4939301"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"proxy.kong.latency.upstream.connect_duration","value":{"doubleValue":354}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"pNj/Jg8tINw=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.ttfb","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347833091174400","endTimeUnixNano":"1734347833659174400","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"7peBX+7x154=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.read_response","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347833659174400","endTimeUnixNano":"1734347833660174336","status":{}}]}]}]}
+{"batches":[{"resource":{"attributes":[{"key":"service.instance.id","value":{"stringValue":"5445b0c8-417b-47a0-b747-c7565e925795"}},{"key":"service.version","value":{"stringValue":"3.10.0.0"}},{"key":"session.id","value":{"stringValue":"0193f2d3-3c27-72c1-8c98-968e21c0aee1"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"XGRJrQWeLiY=","name":"kong","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945777892000000","endTimeUnixNano":"1734945778545911040","attributes":[{"key":"proxy.kong.route.id","value":{"stringValue":"d4783d0e-f7bd-41e5-b676-4bea060a4482"}},{"key":"proxy.kong.consumer.id","value":{"stringValue":"26c55ffc-ff1e-44ee-8c1d-a57d0efed5bb"}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"unknown"}},{"key":"proxy.kong.latency.3p.redis.total_io","value":{"doubleValue":0}},{"key":"proxy.kong.upstream.addr","value":{"stringValue":"98.85.100.80"}},{"key":"proxy.kong.upstream.host","value":{"stringValue":"98.85.100.80:80"}},{"key":"proxy.kong.latency.client","value":{"doubleValue":1.230848}},{"key":"proxy.kong.target.id","value":{"stringValue":"unknown"}},{"key":"http.request.header.host","value":{"stringValue":"localhost"}},{"key":"proxy.kong.latency.upstream","value":{"doubleValue":553.02685546875}},{"key":"proxy.kong.request.id","value":{"stringValue":"15016151c88a7d6efdd9f70211390e00"}},{"key":"http.request.method","value":{"stringValue":"GET"}},{"key":"proxy.kong.latency.3p.total_io","value":{"doubleValue":97.96864}},{"key":"url.scheme","value":{"stringValue":"http"}},{"key":"http.request.size","value":{"stringValue":"177"}},{"key":"proxy.kong.latency.upstream.ttfb","value":{"doubleValue":273}},{"key":"network.protocol.version","value":{"stringValue":"1.1"}},{"key":"network.protocol.name","value":{"stringValue":"http"}},{"key":"proxy.kong.latency.3p.http_client.total_io","value":{"doubleValue":0}},{"key":"network.peer.address","value":{"stringValue":"98.85.100.80"}},{"key":"http.response.status_code","value":{"doubleValue":200}},{"key":"proxy.kong.latency.internal","value":{"doubleValue":0.7736565312499124}},{"key":"proxy.kong.latency.total","value":{"doubleValue":653}},{"key":"url.full","value":{"stringValue":"http://localhost/headers"}},{"key":"proxy.kong.latency.3p.tcpsock.total_io","value":{"doubleValue":0}},{"key":"http.route","value":{"stringValue":"/"}},{"key":"proxy.kong.latency.3p.dns.total_io","value":{"doubleValue":97.96864}},{"key":"client.port","value":{"stringValue":"54336"}},{"key":"proxy.kong.latency.upstream.read_response_duration","value":{"doubleValue":42}},{"key":"client.address","value":{"stringValue":"10.88.0.3"}},{"key":"network.peer.port","value":{"doubleValue":80}},{"key":"proxy.kong.service.id","value":{"stringValue":"1e4a129d-fc17-454f-91ae-e9e337d91ef7"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"aacSUwadpqE=","parentSpanId":"XGRJrQWeLiY=","name":"kong.read_client_http_headers","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945777892000000","endTimeUnixNano":"1734945777892954368","attributes":[{"key":"proxy.kong.http.request.headers.count","value":{"doubleValue":7}},{"key":"proxy.kong.http.request.headers.size","value":{"doubleValue":154}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"PEs/Bv4uaTI=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.rewrite","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777892962048","endTimeUnixNano":"1734945777893030656","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"7pDGDX3R5Oo=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893038080","endTimeUnixNano":"1734945777992456960","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"SjF7n5NjpnM=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893170176","endTimeUnixNano":"1734945777893306368","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}},{"key":"proxy.kong.route.id","value":{"stringValue":"d4783d0e-f7bd-41e5-b676-4bea060a4482"}},{"key":"proxy.kong.service.id","value":{"stringValue":"1e4a129d-fc17-454f-91ae-e9e337d91ef7"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"IassFhpADd4=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.access.plugin.basic-auth","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893407232","endTimeUnixNano":"1734945777893959680","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"9159d5cf-a5c2-4b52-9b7b-ef8364738bd5"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"+SHWMqgXcNI=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.access.plugin.rate-limiting","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893981696","endTimeUnixNano":"1734945777894172928","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"6def3c80-02b6-4c06-9cc8-aa4b6054083d"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"QS939BibQew=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.access.plugin.request-transformer","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777894209280","endTimeUnixNano":"1734945777894420992","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"a20e552b-a9ec-442e-8112-519fd4cba2cd"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"ouLjxrSPI+U=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.dns","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945777894442496","endTimeUnixNano":"1734945777992443648","attributes":[{"key":"proxy.kong.dns.record.ip","value":{"stringValue":"98.85.100.80"}},{"key":"proxy.kong.dns.record.port","value":{"doubleValue":80}},{"key":"proxy.kong.dns.tries","value":{"arrayValue":{"values":[{"kvlistValue":{"values":[{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-miss"}]}}},{"key":"qname","value":{"stringValue":"(short)httpbin.org"}}]}},{"kvlistValue":{"values":[{"key":"qtype","value":{"doubleValue":33}},{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-miss"},{"stringValue":"querying"},{"stringValue":"dns server error: 3 name error"}]}}},{"key":"qname","value":{"stringValue":"httpbin.org"}}]}},{"kvlistValue":{"values":[{"key":"qtype","value":{"doubleValue":1}},{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-miss"},{"stringValue":"querying"}]}}},{"key":"qname","value":{"stringValue":"httpbin.org"}}]}}]}}},{"key":"proxy.kong.dns.record.domain","value":{"stringValue":"httpbin.org"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"VhrEVU4LHpU=","parentSpanId":"XGRJrQWeLiY=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945777992481536","endTimeUnixNano":"1734945777992624128","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"9lvYW/eP63k=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.header_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945778503905792","endTimeUnixNano":"1734945778504432640","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"QqQCNGmyUrQ=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.body_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945778545603072","endTimeUnixNano":"1734945778545764864","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"UO4zpoqc014=","parentSpanId":"XGRJrQWeLiY=","name":"kong.upstream.selection","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945777992626432","endTimeUnixNano":"1734945778230653440","attributes":[{"key":"proxy.kong.upstream.id","value":{"stringValue":"unknown"}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.upstream.lb_algorithm","value":{"stringValue":"unknown"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"5r+nlh8z2Os=","parentSpanId":"UO4zpoqc014=","name":"kong.upstream.try_select","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945777992626432","endTimeUnixNano":"1734945778230653440","attributes":[{"key":"network.peer.port","value":{"doubleValue":80}},{"key":"try_count","value":{"doubleValue":1}},{"key":"network.peer.address","value":{"stringValue":"98.85.100.80"}},{"key":"proxy.kong.latency.upstream.connect_duration","value":{"doubleValue":238}},{"key":"keepalive","value":{"boolValue":true}},{"key":"network.peer.name","value":{"stringValue":"httpbin.org"}},{"key":"proxy.kong.target.id","value":{"stringValue":"unknown"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"NkBDHdQ8Prk=","parentSpanId":"XGRJrQWeLiY=","name":"kong.upstream.ttfb","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945778230653440","endTimeUnixNano":"1734945778503653376","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"Tx2fk5OVCb4=","parentSpanId":"XGRJrQWeLiY=","name":"kong.upstream.read_response","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945778503653376","endTimeUnixNano":"1734945778545653248","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"bcQ4HvPhEGo=","parentSpanId":"XGRJrQWeLiY=","name":"kong.wait_for_client_read","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945778545764864","endTimeUnixNano":"1734945778545898752","status":{}}]}]}]}
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
index e605ebf032..b63d9edf05 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
@@ -13,9 +13,9 @@
         :span="span"
       />
 
-      <template v-if="span.attributes">
+      <template v-if="filteredAttributes.length > 0">
         <SpanAttribute
-          v-for="keyValue in span.attributes"
+          v-for="keyValue in filteredAttributes"
           :key="keyValue.key"
           :key-value="keyValue"
           :span="span"
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import composables from '../../composables'
-import { SpanAttributeKeys, WATERFALL_ROW_PADDING_X } from '../../constants'
+import { SPAN_LATENCY_ATTRIBUTES, SpanAttributeKeys, WATERFALL_ROW_PADDING_X } from '../../constants'
 import type { IKeyValue, SpanNode } from '../../types'
 import { formatNanoDateTimeString } from '../../utils'
 import SpanAttribute from './SpanAttribute.vue'
@@ -55,6 +55,15 @@ const internalAttributes = computed<(IKeyValue & { label?: string })[]>(() => {
     },
   ]
 })
+
+const filteredAttributes = computed(() => {
+  if (!props.span.attributes) {
+    return []
+  }
+
+  return props.span.attributes
+    .filter((attr) => !SPAN_LATENCY_ATTRIBUTES[attr.key])
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
new file mode 100644
index 0000000000..3a9a5957fd
--- /dev/null
+++ b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    v-if="latencies.length > 0"
+    class="span-latency-table"
+  >
+    <div class="title">
+      {{ t('trace_viewer.latency.section_title') }}
+    </div>
+
+    <div class="latencies">
+      <ConfigCardItem
+        v-for="latency in latencies"
+        :key="latency.key"
+        :item="{
+          type: ConfigurationSchemaType.Text,
+          key: latency.key,
+          label: t(latency.labelKey),
+          value: formatLatency(latency.milliseconds),
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ConfigCardItem, ConfigurationSchemaType } from '@kong-ui-public/entities-shared'
+import { computed } from 'vue'
+import composables from '../../composables'
+import { WATERFALL_ROW_PADDING_X } from '../../constants'
+import type { SpanNode } from '../../types'
+import { formatLatency, toSpanLatencies } from '../../utils'
+
+const { i18n: { t } } = composables.useI18n()
+
+const props = defineProps<{ span: SpanNode['span'] }>()
+
+const latencies = computed(() => toSpanLatencies(props.span.attributes))
+</script>
+
+<style lang="scss" scoped>
+.span-latency-table {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    background-color: $kui-color-background-neutral-weakest;
+    border-bottom: 1px solid $kui-color-border-neutral-weaker;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-semibold;
+    padding: $kui-space-60 v-bind(WATERFALL_ROW_PADDING_X);
+    width: 100%;
+  }
+
+  .latencies {
+    width: 100%;
+
+    :deep(.config-card-details-value) {
+      font-family: $kui-font-family-code;
+      font-size: $kui-font-size-30;
+
+      .copy-text {
+        font-size: $kui-font-size-30;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
new file mode 100644
index 0000000000..452dee19ab
--- /dev/null
+++ b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="trace-latency">
+    <div class="title">
+      {{ t('trace_viewer.latency.label') }}
+    </div>
+
+    <div
+      v-for="latency in latencies"
+      :key="latency.key"
+      class="latency"
+    >
+      {{ t(latency.labelKey) }}: {{ formatLatency(latency.milliseconds) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import composables from '../../composables'
+import type { SpanNode } from '../../types'
+import { formatLatency, toSpanLatencies } from '../../utils'
+
+const { i18n: { t } } = composables.useI18n()
+
+const props = defineProps<{ span: SpanNode['span'] }>()
+
+const latencies = computed(() => toSpanLatencies(props.span.attributes))
+</script>
+
+<style lang="scss" scoped>
+.trace-latency {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: $kui-font-size-30;
+  gap: $kui-space-40;
+  justify-content: flex-start;
+
+  .title {
+    font-weight: $kui-font-weight-semibold;
+  }
+}
+</style>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
index 47a013c826..01f8715d1f 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -18,8 +18,8 @@
             width="25"
           />
         </template>
-        <template v-else>
-          <WaterfallLegend />
+        <template v-else-if="rootSpan">
+          <TraceLatency :span="rootSpan.span" />
 
           <div
             v-if="url"
@@ -84,6 +84,10 @@
           :span="selectedSpan.span"
         />
 
+        <SpanLatencyTable
+          :span="selectedSpan.span"
+        />
+
         <SpanAttributeTable
           :span="selectedSpan.span"
         />
@@ -111,11 +115,12 @@ import composables from '../../composables'
 import { TRACE_VIEWER_CONFIG, WATERFALL_ROW_COLUMN_GAP, WATERFALL_ROW_LABEL_WIDTH, WATERFALL_ROW_PADDING_X, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import type { SpanNode, TraceViewerConfig } from '../../types'
 import { spanMaybeIncomplete } from '../../utils'
-import WaterfallLegend from '../waterfall/WaterfallLegend.vue'
 import WaterfallView from '../waterfall/WaterfallView.vue'
 import SpanAttributeTable from './SpanAttributeTable.vue'
 import SpanDescription from './SpanDescription.vue'
 import SpanEventList from './SpanEventList.vue'
+import SpanLatencyTable from './SpanLatencyTable.vue'
+import TraceLatency from './TraceLatency.vue'
 
 import '@kong/splitpanes/dist/splitpanes.css'
 
@@ -224,7 +229,7 @@ const handleUpdateSelectedSpan = (span?: SpanNode) => {
         flex-direction: row;
         gap: $kui-space-40;
         justify-content: flex-end;
-        min-width: 30%;
+        max-width: 30%;
 
         .label {
           font-size: $kui-font-size-30;
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallLegend.vue b/packages/core/tracing/src/components/waterfall/WaterfallLegend.vue
deleted file mode 100644
index 913848567c..0000000000
--- a/packages/core/tracing/src/components/waterfall/WaterfallLegend.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="waterfall-legend">
-    <div class="title">
-      {{ t('waterfall.legend.latency') }}
-    </div>
-    <div
-      v-for="(legendItem, legendItemKind) in WATERFALL_LEGENDS"
-      :key="legendItemKind"
-      class="legend-item"
-    >
-      <div
-        class="color"
-        :style="{ backgroundColor: legendItem.color }"
-      />
-      <div>{{ t(`waterfall.legend.labels.${legendItemKind}`) }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import composables from '../../composables'
-import { WATERFALL_LEGENDS } from '../../constants'
-
-const { i18n: { t } } = composables.useI18n()
-</script>
-
-<style lang="scss" scoped>
-.waterfall-legend {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  flex-shrink: 0;
-  font-size: $kui-font-size-30;
-  gap: $kui-space-40;
-  justify-content: flex-start;
-
-  .title {
-    font-weight: $kui-font-weight-semibold;
-  }
-
-  .legend-item {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: $kui-space-20;
-    justify-content: flex-start;
-
-    .color {
-      height: 10px;
-      width: 10px;
-    }
-  }
-}
-</style>
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
index 3dcd4b5e01..477aaac625 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
+import { KUI_BORDER_RADIUS_20 } from '@kong/design-tokens'
 import { computed, inject } from 'vue'
-import { WATERFALL_CONFIG, WATERFALL_LEGENDS, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallLegendItemKind } from '../../constants'
+import { WATERFALL_CONFIG, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import type { SpanNode, WaterfallConfig } from '../../types'
-import { KUI_BORDER_RADIUS_20 } from '@kong/design-tokens'
 
 const config = inject<WaterfallConfig>(WATERFALL_CONFIG)
 if (!config) {
@@ -17,27 +17,6 @@ const props = defineProps<{
   spanNode: SpanNode
 }>()
 
-// TODO: This is not final
-const barColor = computed(() => {
-  if (props.spanNode.root) {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.TOTAL].color
-  }
-
-  if (props.spanNode.span.name.includes('client')) {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.CLIENT].color
-  }
-
-  if (props.spanNode.span.name.includes('upstream')) {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.UPSTREAM].color
-  }
-
-  if (props.spanNode.span.name === 'kong.dns') {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.THIRD_PARTY].color
-  }
-
-  return WATERFALL_LEGENDS[WaterfallLegendItemKind.KONG].color
-})
-
 const barEdges = computed(() => {
   const spanStart = props.spanNode.span.startTimeUnixNano
   const spanEnd = props.spanNode.span.endTimeUnixNano
@@ -74,7 +53,7 @@ const barRight = computed(() =>{
   z-index: 1;
 
   &::after {
-    background-color: v-bind(barColor);
+    background-color: $kui-color-background-primary;
     border-radius: $kui-border-radius-20;
     content: '';
     height: 100%;
diff --git a/packages/core/tracing/src/composables/useI18n.ts b/packages/core/tracing/src/composables/useI18n.ts
index 950be42ab7..bc627452bb 100644
--- a/packages/core/tracing/src/composables/useI18n.ts
+++ b/packages/core/tracing/src/composables/useI18n.ts
@@ -14,3 +14,5 @@ export default function useI18n(): UseI18nReturn {
     i18nT: i18nTComponent<typeof english>(i18n), // Translation component <i18n-t>
   }
 }
+
+export type TranslationKey = Parameters<UseI18nReturn['i18n']['t']>[0]
diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index d1fb46497c..f6ff55be09 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -1,4 +1,5 @@
 
+import type { TranslationKey } from '../composables/useI18n'
 import { type SpanAttributeSchema, type SpanEventAttributeSchema } from '../types'
 
 export const SPAN_ZERO_ID = '0000000000000000'
@@ -246,3 +247,11 @@ export const SPAN_EVENT_ATTRIBUTES = {
     type: 'String',
   },
 } satisfies Record<string, SpanEventAttributeSchema>
+
+export const SPAN_LATENCY_ATTRIBUTES: Record<string, TranslationKey> = {
+  'proxy.kong.latency.total': 'trace_viewer.latency.labels.total',
+  'proxy.kong.latency.internal': 'trace_viewer.latency.labels.internal',
+  'proxy.kong.latency.upstream': 'trace_viewer.latency.labels.upstream',
+  'proxy.kong.latency.3p.total_io': 'trace_viewer.latency.labels.3p',
+  'proxy.kong.latency.client': 'trace_viewer.latency.labels.client',
+}
diff --git a/packages/core/tracing/src/constants/waterfall.ts b/packages/core/tracing/src/constants/waterfall.ts
index a4546e2857..144bf5f8a9 100644
--- a/packages/core/tracing/src/constants/waterfall.ts
+++ b/packages/core/tracing/src/constants/waterfall.ts
@@ -29,33 +29,3 @@ export enum WaterfallRowsState {
   /** User has manually collapsed/expanded some rows */
   OVERRIDDEN = 'overridden',
 }
-
-// TODO: This is INDETERMINATE now
-export enum WaterfallLegendItemKind {
-  TOTAL = 'total',
-  KONG = 'kong',
-  UPSTREAM = 'upstream',
-  THIRD_PARTY = 'third_party',
-  CLIENT = 'client',
-}
-
-// TODO: Reserved for span color-coding.
-// They are subject to change in the future.
-export const WATERFALL_LEGENDS = {
-  [WaterfallLegendItemKind.TOTAL]: {
-    color: KUI_COLOR_BACKGROUND_PRIMARY, // blur.60
-  },
-  [WaterfallLegendItemKind.KONG]: {
-    color: KUI_METHOD_COLOR_TEXT_TRACE, // pink.60
-  },
-  [WaterfallLegendItemKind.UPSTREAM]: {
-    color: KUI_COLOR_TEXT_DECORATIVE_AQUA, // aqua.50
-  },
-  [WaterfallLegendItemKind.THIRD_PARTY]: {
-    color: KUI_METHOD_COLOR_TEXT_PATCH, // aqua.60
-  },
-  [WaterfallLegendItemKind.CLIENT]:  {
-    color: KUI_COLOR_TEXT_DECORATIVE_PURPLE, // purple.60
-  },
-} satisfies Record<WaterfallLegendItemKind, WaterfallLegendItem>
-
diff --git a/packages/core/tracing/src/locales/en.json b/packages/core/tracing/src/locales/en.json
index 8bad6d75bd..a09f45e811 100644
--- a/packages/core/tracing/src/locales/en.json
+++ b/packages/core/tracing/src/locales/en.json
@@ -18,6 +18,17 @@
       "message": "This span is incomplete, this could be because of a sampling issue. Please exercise caution when interpreting this span.",
       "title": "Incomplete span"
     },
+    "latency": {
+      "label": "Latency",
+      "labels": {
+        "3p": "3rd-party",
+        "client": "Client",
+        "internal": "Kong (internal)",
+        "total": "Total",
+        "upstream": "Upstream"
+      },
+      "section_title": "Span latencies"
+    },
     "no_span_description": "No description available for this span",
     "span_attributes": {
       "not_applicable": "Not applicable",
@@ -79,16 +90,6 @@
     "action": {
       "collapse_all": "Collapse all",
       "expand_all": "Expand all"
-    },
-    "legend": {
-      "labels": {
-        "client": "Client",
-        "kong": "Kong (internal)",
-        "third_party": "Third party",
-        "total": "Total",
-        "upstream": "Upstream"
-      },
-      "latency": "Latency"
     }
   }
 }
diff --git a/packages/core/tracing/src/types/spans.ts b/packages/core/tracing/src/types/spans.ts
index bd1f70a9b0..1387384d39 100644
--- a/packages/core/tracing/src/types/spans.ts
+++ b/packages/core/tracing/src/types/spans.ts
@@ -1,3 +1,4 @@
+import type { TranslationKey } from '../composables/useI18n'
 import type { IKeyValue } from './otlp'
 
 /**
@@ -87,3 +88,9 @@ export interface SpanAttributeSchema extends AttributeSchema {
 }
 
 export type SpanEventAttributeSchema = AttributeSchema
+
+export interface SpanLatency {
+  key: string
+  labelKey: TranslationKey
+  milliseconds: number
+}
diff --git a/packages/core/tracing/src/utils/spans.ts b/packages/core/tracing/src/utils/spans.ts
index 25f4474064..edd50ed9ad 100644
--- a/packages/core/tracing/src/utils/spans.ts
+++ b/packages/core/tracing/src/utils/spans.ts
@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash-es'
-import { SPAN_ZERO_ID } from '../constants'
-import { type IAnyValue, type Span, type SpanNode } from '../types'
+import { SPAN_LATENCY_ATTRIBUTES, SPAN_ZERO_ID } from '../constants'
+import { type IAnyValue, type IKeyValue, type Span, type SpanLatency, type SpanNode } from '../types'
 
 /**
  * These are spans whose names are changed.
@@ -182,3 +182,28 @@ export const unwrapAnyValue = <T = any> (value: IAnyValue): T | null => {
 
   return null
 }
+
+const latencyOrdering = Object.keys(SPAN_LATENCY_ATTRIBUTES)
+
+export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
+  if (!attributes) {
+    return []
+  }
+
+  return attributes
+    .reduce((attrs, attr) => {
+      const labelKey = SPAN_LATENCY_ATTRIBUTES[attr.key]
+      if (!labelKey) {
+        return attrs
+      }
+
+      attrs.push({
+        key: attr.key,
+        labelKey,
+        milliseconds: unwrapAnyValue(attr.value) as number,
+      })
+
+      return attrs
+    }, [] as SpanLatency[])
+    .sort((a, b) => latencyOrdering.indexOf(a.key) - latencyOrdering.indexOf(b.key))
+}
diff --git a/packages/core/tracing/src/utils/time.ts b/packages/core/tracing/src/utils/time.ts
index 8fc537f81e..7803629d83 100644
--- a/packages/core/tracing/src/utils/time.ts
+++ b/packages/core/tracing/src/utils/time.ts
@@ -11,6 +11,10 @@ export const getDurationFormatter = (locales: Intl.LocalesArgument = 'en') => {
 
     let t = nanoseconds
 
+    if (t === 0) {
+      return '0'
+    }
+
     if (t < 1000) {
       return `${fmt.format(t)}ns`
     }
@@ -35,6 +39,17 @@ export const getDurationFormatter = (locales: Intl.LocalesArgument = 'en') => {
   }
 }
 
+/**
+ * Latencies are rounded up and formatted in milliseconds with one decimal place.
+ */
+export const formatLatency = (milliseconds?: number) => {
+  if (milliseconds === undefined || Number.isNaN(milliseconds)) {
+    return 'N/A'
+  }
+
+  return `${Math.round(milliseconds * 10 + Number.EPSILON) / 10}ms`
+}
+
 /**
  * This function formats a nanosecond duration into a human-readable string.
  * The output string will use the local time zone.

From 90514cec17a38105995d73871214589d51c7d146 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 24 Dec 2024 15:03:25 +0800
Subject: [PATCH 2/8] fix(tracing): update and reorganize sampler attributes

---
 .../components/trace-viewer/SpanAttribute.vue |  20 +-
 .../trace-viewer/SpanAttributeTable.vue       |   8 +-
 .../src/components/trace-viewer/SpanEvent.vue |   4 +-
 .../components/trace-viewer/TraceViewer.vue   |   5 +-
 .../components/waterfall/WaterfallSpanRow.vue |   8 +-
 .../src/constants/sampler-attributes.json     |   1 +
 packages/core/tracing/src/constants/spans.ts  | 269 ++----------------
 packages/core/tracing/src/types/spans.ts      |  42 +--
 8 files changed, 67 insertions(+), 290 deletions(-)
 create mode 100644 packages/core/tracing/src/constants/sampler-attributes.json

diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
index a20470df3f..fb6318bcc0 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
@@ -30,7 +30,7 @@
 import { ConfigCardItem, ConfigurationSchemaType, EntityLink, type EntityLinkData } from '@kong-ui-public/entities-shared'
 import { computed, inject, onWatcherCleanup, shallowRef, watch } from 'vue'
 import composables from '../../composables'
-import { SPAN_ATTRIBUTE_VALUE_UNKNOWN, SpanAttributeKeys, TRACE_VIEWER_CONFIG } from '../../constants'
+import { SPAN_ATTRIBUTE_KEYS, SPAN_ATTRIBUTE_VALUE_UNKNOWN, TRACE_VIEWER_CONFIG } from '../../constants'
 import type { EntityRequest, IKeyValue, SpanNode, TraceViewerConfig } from '../../types'
 import { getPhaseAndPlugin, unwrapAnyValue } from '../../utils'
 
@@ -75,12 +75,12 @@ const formattedValue = computed(() => {
 // A map of keys of attributes whose values are IDs of entities (services, routes, consumers, etc.)
 // to their corresponding entities
 const ATTRIBUTE_KEY_TO_ENTITY: Record<string, string> = {
-  [SpanAttributeKeys.KONG_SERVICE_ID]: 'services',
-  [SpanAttributeKeys.KONG_ROUTE_ID]: 'routes',
-  [SpanAttributeKeys.KONG_CONSUMER_ID]: 'consumers',
-  [SpanAttributeKeys.KONG_PLUGIN_ID]: 'plugins',
-  [SpanAttributeKeys.KONG_TARGET_ID]: 'targets',
-  [SpanAttributeKeys.KONG_UPSTREAM_ID]: 'upstreams',
+  [SPAN_ATTRIBUTE_KEYS.KONG_SERVICE_ID]: 'services',
+  [SPAN_ATTRIBUTE_KEYS.KONG_ROUTE_ID]: 'routes',
+  [SPAN_ATTRIBUTE_KEYS.KONG_CONSUMER_ID]: 'consumers',
+  [SPAN_ATTRIBUTE_KEYS.KONG_PLUGIN_ID]: 'plugins',
+  [SPAN_ATTRIBUTE_KEYS.KONG_TARGET_ID]: 'targets',
+  [SPAN_ATTRIBUTE_KEYS.KONG_UPSTREAM_ID]: 'upstreams',
 }
 
 // Let's only make the attributes listed above copyable, for now.
@@ -110,7 +110,7 @@ const entityRequest = computed(() => {
   }
 
   switch (props.keyValue.key) {
-    case SpanAttributeKeys.KONG_PLUGIN_ID: {
+    case SPAN_ATTRIBUTE_KEYS.KONG_PLUGIN_ID: {
       // We will need to parse the plugin name from the span name
       request.plugin = getPhaseAndPlugin(props.span.name)?.plugin
       if (!request.plugin) {
@@ -120,8 +120,8 @@ const entityRequest = computed(() => {
       }
       break
     }
-    case SpanAttributeKeys.KONG_TARGET_ID: {
-      const upstreamIdAttrValue = props.span.attributes?.find((attr) => attr.key === SpanAttributeKeys.KONG_UPSTREAM_ID)?.value
+    case SPAN_ATTRIBUTE_KEYS.KONG_TARGET_ID: {
+      const upstreamIdAttrValue = props.span.attributes?.find((attr) => attr.key === SPAN_ATTRIBUTE_KEYS.KONG_UPSTREAM_ID)?.value
       const upstreamId = upstreamIdAttrValue && unwrapAnyValue<string>(upstreamIdAttrValue)
       if (!upstreamId) {
         console.warn(`Failed to look up the upstream ID for the upstream target in the span "${props.span.name}"`)
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
index b63d9edf05..368d8720f8 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import composables from '../../composables'
-import { SPAN_LATENCY_ATTRIBUTES, SpanAttributeKeys, WATERFALL_ROW_PADDING_X } from '../../constants'
+import { SPAN_LATENCY_ATTRIBUTES, WATERFALL_ROW_PADDING_X } from '../../constants'
 import type { IKeyValue, SpanNode } from '../../types'
 import { formatNanoDateTimeString } from '../../utils'
 import SpanAttribute from './SpanAttribute.vue'
@@ -40,14 +40,16 @@ const props = defineProps<{ span: SpanNode['span'] }>()
 const internalAttributes = computed<(IKeyValue & { label?: string })[]>(() => {
   return [
     {
-      key: SpanAttributeKeys._INTERNAL_START_TIME,
+      // Hardcoding the key here as it's not used elsewhere
+      key: '_internal.start_time',
       value: {
         stringValue: formatNanoDateTimeString(props.span.startTimeUnixNano),
       },
       label: t('span_attributes.labels.start_time'),
     },
     {
-      key: SpanAttributeKeys._INTERNAL_END_TIME,
+      // Hardcoding the key here as it's not used elsewhere
+      key: '_internal.end_time',
       value: {
         stringValue: formatNanoDateTimeString(props.span.endTimeUnixNano),
       },
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue b/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue
index 1db558b9f1..5872f09446 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import composables from '../../composables'
-import { SPAN_EVENT_ATTRIBUTES } from '../../constants'
+import { SPAN_EVENT_ATTRIBUTE_KEYS } from '../../constants'
 import type { Event } from '../../types'
 
 const { i18n: { t } } = composables.useI18n()
@@ -22,7 +22,7 @@ const props = defineProps<{ event: Event }>()
 // We only have exception-typed events for now
 const exceptionMessage = computed(() =>
   props.event.attributes?.find(
-    (keyValue) => keyValue.key === SPAN_EVENT_ATTRIBUTES.EXCEPTION_MESSAGE.name,
+    (keyValue) => keyValue.key === SPAN_EVENT_ATTRIBUTE_KEYS.EXCEPTION_MESSAGE,
   )?.value.stringValue,
 )
 </script>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
index 01f8715d1f..18ec96e1df 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -75,7 +75,8 @@
           :title="t('trace_viewer.incomplete_span_warning.title')"
         >
           <template #icon>
-            <DangerCircleIcon />
+            <!-- TODO: Waiting for https://github.com/Kong/kongponents/pull/2550 to be adopted -->
+            <DangerIcon />
           </template>
         </KAlert>
 
@@ -108,7 +109,7 @@
 </template>
 
 <script setup lang="ts">
-import { DangerCircleIcon } from '@kong/icons'
+import { DangerIcon } from '@kong/icons'
 import { Pane, Splitpanes } from '@kong/splitpanes'
 import { provide, reactive, shallowRef } from 'vue'
 import composables from '../../composables'
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
index 3332ceb6df..be81cfdae3 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
@@ -33,7 +33,7 @@
             :size="KUI_FONT_SIZE_30"
           />
 
-          <DangerCircleIcon
+          <DangerIcon
             v-if="maybeIncomplete"
             :color="KUI_COLOR_TEXT_DANGER"
             :size="KUI_FONT_SIZE_30"
@@ -71,9 +71,9 @@
 
 <script lang="ts" setup>
 import { KUI_COLOR_TEXT_DANGER, KUI_COLOR_TEXT_WARNING, KUI_FONT_SIZE_30 } from '@kong/design-tokens'
-import { WarningIcon, DangerCircleIcon } from '@kong/icons'
+import { DangerIcon, WarningIcon } from '@kong/icons'
 import { computed, inject, ref, watch, type PropType, type Ref } from 'vue'
-import { SPAN_EVENT_ATTRIBUTES, WATERFALL_CONFIG, WATERFALL_ROWS_STATE, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallRowsState } from '../../constants'
+import { SPAN_EVENT_ATTRIBUTE_KEYS, WATERFALL_CONFIG, WATERFALL_ROWS_STATE, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallRowsState } from '../../constants'
 import { type SpanNode, type WaterfallConfig } from '../../types'
 import { getDurationFormatter, spanMaybeIncomplete } from '../../utils'
 import WaterfallSpanBar from './WaterfallSpanBar.vue'
@@ -152,7 +152,7 @@ const hasException = computed(() => {
       continue
     }
     for (const keyValue of event.attributes) {
-      if (keyValue.key === SPAN_EVENT_ATTRIBUTES.EXCEPTION_MESSAGE.name) {
+      if (keyValue.key === SPAN_EVENT_ATTRIBUTE_KEYS.EXCEPTION_MESSAGE) {
         return true
       }
     }
diff --git a/packages/core/tracing/src/constants/sampler-attributes.json b/packages/core/tracing/src/constants/sampler-attributes.json
new file mode 100644
index 0000000000..99e9c6121c
--- /dev/null
+++ b/packages/core/tracing/src/constants/sampler-attributes.json
@@ -0,0 +1 @@
+{"proxy.kong.latency.3p.redis.total_io":{"name":"proxy.kong.latency.3p.redis.total_io","type":"Int"},"proxy.kong.upstream.id":{"name":"proxy.kong.upstream.id","type":"String"},"network.protocol.name":{"type":"String","name":"network.protocol.name","aliases":[{"name":"net.protocol"}]},"network.peer.address":{"name":"network.peer.address","type":"IpAddr"},"http.response.status_code":{"name":"http.response.status_code","type":"Int"},"proxy.kong.upstream.status_code":{"name":"proxy.kong.upstream.status_code","type":"Int"},"network.peer.name":{"name":"network.peer.name","type":"String"},"proxy.kong.target.id":{"name":"proxy.kong.target.id","type":"String"},"network.peer.port":{"name":"network.peer.port","type":"Int"},"proxy.kong.latency.upstream.read_response_duration":{"name":"proxy.kong.latency.upstream.read_response_duration","type":"Int"},"proxy.kong.upstream.host":{"name":"proxy.kong.upstream.host","type":"String"},"proxy.kong.latency.total":{"name":"proxy.kong.latency.total","type":"Int"},"proxy.kong.latency.upstream":{"name":"proxy.kong.latency.upstream","type":"Int"},"client.port":{"type":"Int","name":"client.port","aliases":[{"name":"net.src.port"}]},"http.route":{"type":"String","name":"http.route","aliases":[{"name":"http.path"}]},"http.request.method":{"type":"String","name":"http.request.method","aliases":[{"name":"http.method"}]},"network.protocol.version":{"name":"network.protocol.version","type":"String"},"proxy.kong.latency.3p.total_io":{"name":"proxy.kong.latency.3p.total_io","type":"Int"},"proxy.kong.upstream.addr":{"name":"proxy.kong.upstream.addr","type":"IpAddr"},"server.port":{"type":"Int","name":"server.port","aliases":[{"name":"net.dst.port"}]},"proxy.kong.latency.3p.tcpsock.total_io":{"name":"proxy.kong.latency.3p.tcpsock.total_io","type":"Int"},"network.transport":{"name":"network.transport","type":"String"},"proxy.kong.latency.client":{"name":"proxy.kong.latency.client","type":"Int"},"proxy.kong.latency.3p.dns.total_io":{"name":"proxy.kong.latency.3p.dns.total_io","type":"Int"},"url.scheme":{"type":"String","name":"url.scheme","aliases":[{"name":"net.protocol"}]},"server.address":{"type":"String","name":"server.address","aliases":[{"name":"tls.sni"},{"name":"net.dst.ip","type":"IpAddr"}]},"proxy.kong.route.id":{"name":"proxy.kong.route.id","type":"String"},"proxy.kong.latency.3p.http_client.total_io":{"name":"proxy.kong.latency.3p.http_client.total_io","type":"Int"},"http.request.size":{"name":"http.request.size","type":"Int"},"http.request.header.host":{"type":"String","name":"http.request.header.host","aliases":[{"name":"http.host"}]},"proxy.kong.latency.upstream.ttfb":{"name":"proxy.kong.latency.upstream.ttfb","type":"Int"},"client.address":{"type":"IpAddr","name":"client.address","aliases":[{"name":"net.src.ip"}]},"proxy.kong.consumer.id":{"name":"proxy.kong.consumer.id","type":"String"},"destination.address":{"name":"destination.address","type":"IpAddr"},"proxy.kong.service.id":{"name":"proxy.kong.service.id","type":"String"},"proxy.kong.latency.internal":{"name":"proxy.kong.latency.internal","type":"Int"},"url.full":{"name":"url.full","type":"String"}}
diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index f6ff55be09..8c223bd299 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -1,252 +1,13 @@
 
 import type { TranslationKey } from '../composables/useI18n'
-import { type SpanAttributeSchema, type SpanEventAttributeSchema } from '../types'
+import { type SpanSamplerAttribute } from '../types'
+import samplerAttributes from './sampler-attributes.json'
 
 export const SPAN_ZERO_ID = '0000000000000000'
 export const SPAN_ATTRIBUTE_VALUE_UNKNOWN = 'unknown'
 
-// Internally used here only
-const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong'
-
-export enum SpanAttributeKeys {
-  _INTERNAL_END_TIME = '$$ui_internal.end_time',
-  _INTERNAL_START_TIME = '$$ui_internal.start_time',
-  CLIENT_ADDRESS = 'client.address',
-  CLIENT_PORT = 'client.port',
-  DB_STATEMENT = 'db.statement',
-  DB_SYSTEM = 'db.system',
-  DESTINATION_ADDRESS = 'destination.address',
-  HTTP_REQUEST_METHOD = 'http.request.method',
-  HTTP_RESPONSE_STATUS_CODE = 'http.response.status_code',
-  HTTP_ROUTE = 'http.route',
-  KONG_CONSUMER_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.consumer.id`,
-  KONG_LATENCY_TOTAL_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.latency_total_ms`,
-  KONG_PLUGIN_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.plugin.id`,
-  KONG_REDIS_TOTAL_IO_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.redis.total_io_ms`,
-  KONG_REQUEST_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.request.id`,
-  KONG_ROUTE_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.route.id`,
-  KONG_SAMPLING_RULE = `${SPAN_ATTR_KEY_KONG_PREFIX}.sampling_rule`,
-  KONG_SERVICE_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.service.id`,
-  KONG_TARGET_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.target.id`,
-  KONG_TCPSOCK_TOTAL_IO_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.tcpsock.total_io_ms`,
-  KONG_UPSTREAM_ADDR = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.addr`,
-  KONG_UPSTREAM_CONNECT_DURATION_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.connect_duration_ms`,
-  KONG_UPSTREAM_HOST = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.host`,
-  KONG_UPSTREAM_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.id`,
-  KONG_UPSTREAM_LB_ALGORITHM = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.lb_algorithm`,
-  KONG_UPSTREAM_READ_RESPONSE_DURATION_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.read_response_duration_ms`,
-  KONG_UPSTREAM_RESPONSE_DURATION_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.response_duration_ms`,
-  KONG_UPSTREAM_STATUS_CODE = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.status_code`,
-  KONG_UPSTREAM_TTFB_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.ttfb_ms`,
-  NETWORK_PEER_ADDRESS = 'network.peer.address',
-  NETWORK_PEER_NAME = 'network.peer.name',
-  NETWORK_PEER_PORT = 'network.peer.port',
-  NETWORK_PROTOCOL_NAME = 'network.protocol.name',
-  NETWORK_PROTOCOL_VERSION = 'network.protocol.version',
-  NETWORK_TRANSPORT = 'network.transport',
-  SERVER_ADDRESS = 'server.address',
-  SERVER_PORT = 'server.port',
-  URL_FULL = 'url.full',
-  URL_QUERY = 'url.query',
-  URL_SCHEME = 'url.scheme',
-}
-
-/**
- * These definitions are exported from Gateway's codebase.
- * They are subject to change in the future.
- */
-const unnamedSpanAttributes: Record<SpanAttributeKeys, Omit<SpanAttributeSchema, 'name'>> = {
-  [SpanAttributeKeys.CLIENT_ADDRESS]: {
-    type: 'IpAddr',
-    sampling: {
-      aliases: ['net.src.ip'],
-    },
-  },
-  [SpanAttributeKeys.CLIENT_PORT]: {
-    type: 'Int',
-    sampling: {
-      aliases: ['net.src.port'],
-    },
-  },
-  [SpanAttributeKeys.DESTINATION_ADDRESS]: {
-    type: 'IpAddr',
-    sampling: true,
-  },
-  [SpanAttributeKeys.SERVER_ADDRESS]: {
-    type: 'String',
-    sampling: {
-      aliases: [
-        'tls.sni',
-        { name: 'net.dst.ip', type: 'IpAddr' },
-      ],
-    },
-  },
-  [SpanAttributeKeys.SERVER_PORT]: {
-    type: 'Int',
-    sampling: {
-      aliases: ['net.dst.port'],
-    },
-  },
-  [SpanAttributeKeys.NETWORK_PROTOCOL_NAME]: {
-    type: 'String',
-    sampling: {
-      aliases: ['net.protocol'],
-    },
-  },
-  [SpanAttributeKeys.NETWORK_PROTOCOL_VERSION]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.NETWORK_TRANSPORT]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.URL_SCHEME]: {
-    type: 'String',
-    sampling: {
-      aliases: ['net.protocol'],
-    },
-  },
-  [SpanAttributeKeys.HTTP_REQUEST_METHOD]: {
-    type: 'String',
-    sampling: {
-      aliases: ['http.method'],
-    },
-  },
-  [SpanAttributeKeys.HTTP_ROUTE]: {
-    type: 'String',
-    sampling: {
-      aliases: ['http.path'],
-    },
-  },
-  [SpanAttributeKeys.URL_FULL]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.URL_QUERY]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.HTTP_RESPONSE_STATUS_CODE]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.NETWORK_PEER_ADDRESS]: {
-    type: 'IpAddr',
-    sampling: true,
-  },
-  /**
-   * This is non-standard but it's available to us via the balancer
-   */
-  [SpanAttributeKeys.NETWORK_PEER_NAME]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.NETWORK_PEER_PORT]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_SERVICE_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_ROUTE_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_CONSUMER_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_STATUS_CODE]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_ADDR]: {
-    type: 'IpAddr',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_HOST]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_LB_ALGORITHM]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_TARGET_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_PLUGIN_ID]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_SAMPLING_RULE]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_REQUEST_ID]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_TTFB_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_READ_RESPONSE_DURATION_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_CONNECT_DURATION_MS]: {
-    type: 'Int',
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_RESPONSE_DURATION_MS]: {
-    type: 'Int',
-  },
-  [SpanAttributeKeys.KONG_LATENCY_TOTAL_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_REDIS_TOTAL_IO_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_TCPSOCK_TOTAL_IO_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.DB_SYSTEM]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.DB_STATEMENT]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys._INTERNAL_START_TIME]: {
-    type: 'String',
-    internal: true,
-  },
-  [SpanAttributeKeys._INTERNAL_END_TIME]: {
-    type: 'String',
-    internal: true,
-  },
-} satisfies Record<SpanAttributeKeys, Omit<SpanAttributeSchema, 'name'>>
-//^^^^^^^^^ `satisfies` helps us to identify missing enums
 
-export const SPAN_ATTRIBUTES =
-  Object.fromEntries(Object.entries(unnamedSpanAttributes)
-    .map(([key, value]) => ([key, { name: key, ...value } as SpanAttributeSchema]))) as Record<SpanAttributeKeys, SpanAttributeSchema>
-
-export const SPAN_EVENT_ATTRIBUTES = {
-  MESSAGE: {
-    name: 'message',
-    type: 'String',
-  },
-  EXCEPTION_MESSAGE: {
-    name: 'exception.message',
-    type: 'String',
-  },
-} satisfies Record<string, SpanEventAttributeSchema>
+export const SPAN_SAMPLER_ATTRIBUTES = samplerAttributes satisfies Record<string, SpanSamplerAttribute>
 
 export const SPAN_LATENCY_ATTRIBUTES: Record<string, TranslationKey> = {
   'proxy.kong.latency.total': 'trace_viewer.latency.labels.total',
@@ -255,3 +16,27 @@ export const SPAN_LATENCY_ATTRIBUTES: Record<string, TranslationKey> = {
   'proxy.kong.latency.3p.total_io': 'trace_viewer.latency.labels.3p',
   'proxy.kong.latency.client': 'trace_viewer.latency.labels.client',
 }
+
+const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong'
+
+/**
+ * These are known attributes that will appear in the spans for ease of access.
+ * Why not using enums? --Because we don't want to make the list here exhaustive.
+ */
+export const SPAN_ATTRIBUTE_KEYS = {
+  KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.service.id`,
+  KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.route.id`,
+  KONG_CONSUMER_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.consumer.id`,
+  KONG_PLUGIN_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.plugin.id`,
+  KONG_TARGET_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.target.id`,
+  KONG_UPSTREAM_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.id`,
+} satisfies Record<string, string>
+
+/**
+ * These are known attributes that will appear in the span events for ease of access.
+ * Why not using enums? --Because we don't want to make the list here exhaustive.
+ */
+export const SPAN_EVENT_ATTRIBUTE_KEYS = {
+  MESSAGE: 'message',
+  EXCEPTION_MESSAGE: 'exception.message',
+} satisfies Record<string, string>
diff --git a/packages/core/tracing/src/types/spans.ts b/packages/core/tracing/src/types/spans.ts
index 1387384d39..c631296360 100644
--- a/packages/core/tracing/src/types/spans.ts
+++ b/packages/core/tracing/src/types/spans.ts
@@ -51,44 +51,32 @@ export interface SpanNode {
   }
 }
 
-interface AttributeSchema {
-  name: string
-  type: string
-}
-
-export interface SpanAttributeExprAlias {
-  name: string
-  type: string
-}
-
 /**
- * Definition of the sampling rule configuration for a span attribute.
- * This is mainly used under the context of the Expressions (ATC) language.
+ * Presenting the definition of a field in the Expressions (ATC) language.
  */
-export interface SpanAttributeSampling {
+export interface ExpressionsField {
+  name: string
   /**
-   * Type of the value in Expressions (ATC). This field is currently preserved.
-   * When omitted, the type is inferred from the span attribute.
+   * When this field is omitted, we will use the `type` of its residing attribute.
    */
   type?: string
-  /**
-   * Aliases for the usage in Expressions (ATC). This field is currently preserved.
-   * If a string is used as an alias, the type is inferred from the sampling rules configuration.
-   */
-  aliases: (SpanAttributeExprAlias | string)[]
 }
 
-export interface SpanAttributeSchema extends AttributeSchema {
+/**
+ * The span attribute that will be used for sampling.
+ */
+export interface SpanSamplerAttribute {
+  name: string
   /**
-   * Configuration for sampling rules associated with this attribute.
-   * When omitted, the attribute is not used for sampling.
+   * Type under the context of the Expressions (ATC) language.
    */
-  sampling?: boolean | SpanAttributeSampling
-  internal?: boolean
+  type: string
+  /**
+   * Aliases for the usage in Expressions (ATC).
+   */
+  aliases?: ExpressionsField[]
 }
 
-export type SpanEventAttributeSchema = AttributeSchema
-
 export interface SpanLatency {
   key: string
   labelKey: TranslationKey

From 85c5d36e6a78a3ed7c38a576ec0bfd3c8399b518 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 24 Dec 2024 15:42:45 +0800
Subject: [PATCH 3/8] fix(tracing): remove unused color constants

---
 packages/core/tracing/src/constants/waterfall.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/core/tracing/src/constants/waterfall.ts b/packages/core/tracing/src/constants/waterfall.ts
index 144bf5f8a9..53a6d87505 100644
--- a/packages/core/tracing/src/constants/waterfall.ts
+++ b/packages/core/tracing/src/constants/waterfall.ts
@@ -1,13 +1,7 @@
 import {
-  KUI_COLOR_BACKGROUND_PRIMARY,
-  KUI_METHOD_COLOR_TEXT_TRACE,
-  KUI_COLOR_TEXT_DECORATIVE_AQUA,
-  KUI_COLOR_TEXT_DECORATIVE_PURPLE,
-  KUI_METHOD_COLOR_TEXT_PATCH,
   KUI_SPACE_40,
   KUI_SPACE_50,
 } from '@kong/design-tokens'
-import type { WaterfallLegendItem } from '../types'
 
 // Vue provide/inject keys
 export const WATERFALL_CONFIG = Symbol('WaterfallConfig')

From 714cdc91fcdd7085dbfa6d2b297b552003087eca Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 24 Dec 2024 16:41:44 +0800
Subject: [PATCH 4/8] fix(tracing): output type

---
 packages/core/tracing/src/constants/spans.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index 8c223bd299..8c61a3da46 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -6,8 +6,8 @@ import samplerAttributes from './sampler-attributes.json'
 export const SPAN_ZERO_ID = '0000000000000000'
 export const SPAN_ATTRIBUTE_VALUE_UNKNOWN = 'unknown'
 
-
-export const SPAN_SAMPLER_ATTRIBUTES = samplerAttributes satisfies Record<string, SpanSamplerAttribute>
+export const SPAN_SAMPLER_ATTRIBUTES: Record<keyof typeof samplerAttributes, SpanSamplerAttribute> =
+  samplerAttributes satisfies Record<string, SpanSamplerAttribute>
 
 export const SPAN_LATENCY_ATTRIBUTES: Record<string, TranslationKey> = {
   'proxy.kong.latency.total': 'trace_viewer.latency.labels.total',

From e8eb8dd2c7883c73605534dc98786727262364fe Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 24 Dec 2024 16:50:12 +0800
Subject: [PATCH 5/8] fix(tracing): add more span attribute keys

---
 packages/core/tracing/src/constants/spans.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index 8c61a3da46..9fa7fd3c60 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -24,12 +24,16 @@ const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong'
  * Why not using enums? --Because we don't want to make the list here exhaustive.
  */
 export const SPAN_ATTRIBUTE_KEYS = {
-  KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.service.id`,
-  KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.route.id`,
+  HTTP_REQUEST_METHOD: 'http.request.method',
+  HTTP_RESPONSE_STATUS_CODE: 'http.response.status_code',
+  HTTP_ROUTE: 'http.route',
   KONG_CONSUMER_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.consumer.id`,
   KONG_PLUGIN_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.plugin.id`,
+  KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.route.id`,
+  KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.service.id`,
   KONG_TARGET_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.target.id`,
   KONG_UPSTREAM_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.id`,
+  URL_FULL: 'url.full',
 } satisfies Record<string, string>
 
 /**

From ed3fc4b96dfee0604439d888c3b90e6036e293ec Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 24 Dec 2024 17:15:55 +0800
Subject: [PATCH 6/8] fix(tracing): move all latency attributes to the
 dedicated section

---
 .../trace-viewer/SpanAttributeTable.vue           |  4 ++--
 .../components/trace-viewer/SpanLatencyTable.vue  |  2 +-
 .../src/components/trace-viewer/TraceLatency.vue  |  2 +-
 packages/core/tracing/src/constants/spans.ts      | 15 ++++++++-------
 packages/core/tracing/src/types/spans.ts          |  5 ++++-
 packages/core/tracing/src/utils/spans.ts          | 15 ++++++++++-----
 6 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
index 368d8720f8..a3e121333b 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import composables from '../../composables'
-import { SPAN_LATENCY_ATTRIBUTES, WATERFALL_ROW_PADDING_X } from '../../constants'
+import { SPAN_ATTR_KEY_KONG_LATENCY_PREFIX, WATERFALL_ROW_PADDING_X } from '../../constants'
 import type { IKeyValue, SpanNode } from '../../types'
 import { formatNanoDateTimeString } from '../../utils'
 import SpanAttribute from './SpanAttribute.vue'
@@ -64,7 +64,7 @@ const filteredAttributes = computed(() => {
   }
 
   return props.span.attributes
-    .filter((attr) => !SPAN_LATENCY_ATTRIBUTES[attr.key])
+    .filter((attr) => !attr.key.startsWith(SPAN_ATTR_KEY_KONG_LATENCY_PREFIX))
 })
 </script>
 
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
index 3a9a5957fd..660e3f2cde 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
@@ -14,7 +14,7 @@
         :item="{
           type: ConfigurationSchemaType.Text,
           key: latency.key,
-          label: t(latency.labelKey),
+          label: latency.labelKey ? t(latency.labelKey) : latency.key,
           value: formatLatency(latency.milliseconds),
         }"
       />
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
index 452dee19ab..b1e6f1c2af 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
@@ -9,7 +9,7 @@
       :key="latency.key"
       class="latency"
     >
-      {{ t(latency.labelKey) }}: {{ formatLatency(latency.milliseconds) }}
+      {{ latency.labelKey ? t(latency.labelKey) : latency.key }}: {{ formatLatency(latency.milliseconds) }}
     </div>
   </div>
 </template>
diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index 9fa7fd3c60..e26a133068 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -17,7 +17,8 @@ export const SPAN_LATENCY_ATTRIBUTES: Record<string, TranslationKey> = {
   'proxy.kong.latency.client': 'trace_viewer.latency.labels.client',
 }
 
-const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong'
+export const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong.'
+export const SPAN_ATTR_KEY_KONG_LATENCY_PREFIX = 'proxy.kong.latency.'
 
 /**
  * These are known attributes that will appear in the spans for ease of access.
@@ -27,12 +28,12 @@ export const SPAN_ATTRIBUTE_KEYS = {
   HTTP_REQUEST_METHOD: 'http.request.method',
   HTTP_RESPONSE_STATUS_CODE: 'http.response.status_code',
   HTTP_ROUTE: 'http.route',
-  KONG_CONSUMER_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.consumer.id`,
-  KONG_PLUGIN_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.plugin.id`,
-  KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.route.id`,
-  KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.service.id`,
-  KONG_TARGET_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.target.id`,
-  KONG_UPSTREAM_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.id`,
+  KONG_CONSUMER_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}consumer.id`,
+  KONG_PLUGIN_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}plugin.id`,
+  KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}route.id`,
+  KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}service.id`,
+  KONG_TARGET_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}target.id`,
+  KONG_UPSTREAM_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}upstream.id`,
   URL_FULL: 'url.full',
 } satisfies Record<string, string>
 
diff --git a/packages/core/tracing/src/types/spans.ts b/packages/core/tracing/src/types/spans.ts
index c631296360..3de712f718 100644
--- a/packages/core/tracing/src/types/spans.ts
+++ b/packages/core/tracing/src/types/spans.ts
@@ -79,6 +79,9 @@ export interface SpanSamplerAttribute {
 
 export interface SpanLatency {
   key: string
-  labelKey: TranslationKey
+  /**
+   * When omitted, we will use the `key` as the label.
+   */
+  labelKey?: TranslationKey
   milliseconds: number
 }
diff --git a/packages/core/tracing/src/utils/spans.ts b/packages/core/tracing/src/utils/spans.ts
index edd50ed9ad..61b4a90161 100644
--- a/packages/core/tracing/src/utils/spans.ts
+++ b/packages/core/tracing/src/utils/spans.ts
@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash-es'
-import { SPAN_LATENCY_ATTRIBUTES, SPAN_ZERO_ID } from '../constants'
+import type { TranslationKey } from '../composables/useI18n'
+import { SPAN_ATTR_KEY_KONG_LATENCY_PREFIX, SPAN_LATENCY_ATTRIBUTES, SPAN_ZERO_ID } from '../constants'
 import { type IAnyValue, type IKeyValue, type Span, type SpanLatency, type SpanNode } from '../types'
 
 /**
@@ -183,7 +184,7 @@ export const unwrapAnyValue = <T = any> (value: IAnyValue): T | null => {
   return null
 }
 
-const latencyOrdering = Object.keys(SPAN_LATENCY_ATTRIBUTES)
+const LATENCY_ORDERING = Object.keys(SPAN_LATENCY_ATTRIBUTES)
 
 export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
   if (!attributes) {
@@ -192,10 +193,10 @@ export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
 
   return attributes
     .reduce((attrs, attr) => {
-      const labelKey = SPAN_LATENCY_ATTRIBUTES[attr.key]
-      if (!labelKey) {
+      if (!attr.key.startsWith(SPAN_ATTR_KEY_KONG_LATENCY_PREFIX)) {
         return attrs
       }
+      const labelKey: TranslationKey | undefined = SPAN_LATENCY_ATTRIBUTES[attr.key]
 
       attrs.push({
         key: attr.key,
@@ -205,5 +206,9 @@ export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
 
       return attrs
     }, [] as SpanLatency[])
-    .sort((a, b) => latencyOrdering.indexOf(a.key) - latencyOrdering.indexOf(b.key))
+    .sort((a, b) => {
+      const ia = LATENCY_ORDERING.indexOf(a.key)
+      const ib = LATENCY_ORDERING.indexOf(b.key)
+      return (ia >= 0 ? ia : LATENCY_ORDERING.length) - (ib >= 0 ? ib : LATENCY_ORDERING.length)
+    })
 }

From 9c9e4126863169f473b45e5dbd48c06d4f4fdce6 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 24 Dec 2024 17:27:13 +0800
Subject: [PATCH 7/8] fix(tracing): revert

---
 packages/core/tracing/src/utils/time.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/core/tracing/src/utils/time.ts b/packages/core/tracing/src/utils/time.ts
index 7803629d83..b902bd2448 100644
--- a/packages/core/tracing/src/utils/time.ts
+++ b/packages/core/tracing/src/utils/time.ts
@@ -11,10 +11,6 @@ export const getDurationFormatter = (locales: Intl.LocalesArgument = 'en') => {
 
     let t = nanoseconds
 
-    if (t === 0) {
-      return '0'
-    }
-
     if (t < 1000) {
       return `${fmt.format(t)}ns`
     }

From 99138e437fc56492b838e4acc2e936b8f46a3b46 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Wed, 25 Dec 2024 13:59:17 +0800
Subject: [PATCH 8/8] fix(tracing): address feedback on latency display

---
 ...{SpanDescription.vue => SpanBasicInfo.vue} |  50 ++++---
 .../trace-viewer/SpanLatencyTable.vue         |  39 ++++-
 .../components/trace-viewer/TraceLatency.vue  |   4 +-
 .../components/trace-viewer/TraceViewer.vue   |   4 +-
 .../components/waterfall/WaterfallSpanRow.vue |   5 +-
 packages/core/tracing/src/constants/spans.ts  |  32 ++--
 packages/core/tracing/src/locales/en.json     | 141 ++++++++++++------
 packages/core/tracing/src/types/spans.ts      |   3 +-
 packages/core/tracing/src/utils/spans.ts      |  69 +++++++--
 9 files changed, 248 insertions(+), 99 deletions(-)
 rename packages/core/tracing/src/components/trace-viewer/{SpanDescription.vue => SpanBasicInfo.vue} (55%)

diff --git a/packages/core/tracing/src/components/trace-viewer/SpanDescription.vue b/packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
similarity index 55%
rename from packages/core/tracing/src/components/trace-viewer/SpanDescription.vue
rename to packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
index 96675a3c85..25dacad457 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanDescription.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
@@ -1,13 +1,22 @@
 <template>
-  <KCard class="span-description-card">
-    <p class="span-description">
-      <span class="name">
-        {{ span.name }}:
-      </span>
-      <span :class="['description', { 'not-available': !description }]">
-        {{ description || t('trace_viewer.no_span_description') }}
-      </span>
-    </p>
+  <KCard class="span-basic-info">
+    <div class="rows">
+      <div class="label">
+        {{ t('trace_viewer.span_basic_info.labels.name') }}
+      </div>
+      <div class="value">
+        {{ span.name }}
+      </div>
+
+      <template v-if="description">
+        <div class="label">
+          {{ t('trace_viewer.span_basic_info.labels.description') }}
+        </div>
+        <div class="value">
+          {{ description }}
+        </div>
+      </template>
+    </div>
 
     <KExternalLink
       v-if="description"
@@ -34,29 +43,28 @@ const description = computed(() => {
   const pluginSpan = getPhaseAndPlugin(props.span.name)
   // We will use general description for plugin spans that exactly match `kong.(phase).plugin.(plugin)`.
   const subI18nKey = pluginSpan && !pluginSpan.suffix ? `kong.${pluginSpan.phase}.plugin` : props.span.name
-  const i18nKey = `trace_viewer.span_descriptions.${subI18nKey}`
+  const i18nKey = `trace_viewer.span_basic_info.descriptions.${subI18nKey}.$`
   return te(i18nKey as any) ? t(i18nKey as any) : undefined
 })
 </script>
 
 <style lang="scss" scoped>
-.span-description-card {
-  padding: $kui-space-50;
-}
+.span-basic-info {
+  padding: $kui-space-60;
 
-.span-description {
-  margin: 0;
-
-  .name {
-    font-weight: $kui-font-weight-semibold;
-  }
+  .rows {
+    display: grid;
+    gap: $kui-space-20 $kui-space-40;
+    grid-template-columns: min-content auto;
 
-  .description.not-available {
-    font-style: italic;
+    .label {
+      font-weight: $kui-font-weight-semibold;
+    }
   }
 }
 
 .docs-link {
   align-self: flex-end;
+  margin-top: $kui-space-40;
 }
 </style>
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
index 660e3f2cde..f53da1d0f9 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
@@ -8,16 +8,33 @@
     </div>
 
     <div class="latencies">
-      <ConfigCardItem
+      <template
         v-for="latency in latencies"
         :key="latency.key"
-        :item="{
-          type: ConfigurationSchemaType.Text,
-          key: latency.key,
-          label: latency.labelKey ? t(latency.labelKey) : latency.key,
-          value: formatLatency(latency.milliseconds),
-        }"
-      />
+      >
+        <ConfigCardItem
+          :item="{
+            type: ConfigurationSchemaType.Text,
+            key: latency.key,
+            label: latency.labelKey ? t(latency.labelKey) : latency.key,
+            value: formatLatency(latency.milliseconds),
+          }"
+        />
+
+        <template v-if="Array.isArray(latency.children) && latency.children.length > 0">
+          <ConfigCardItem
+            v-for="child in latency.children"
+            :key="child.key"
+            class="latency-nested"
+            :item="{
+              type: ConfigurationSchemaType.Text,
+              key: child.key,
+              label: child.labelKey ? t(child.labelKey) : child.key,
+              value: formatLatency(child.milliseconds),
+            }"
+          />
+        </template>
+      </template>
     </div>
   </div>
 </template>
@@ -63,6 +80,12 @@ const latencies = computed(() => toSpanLatencies(props.span.attributes))
         font-size: $kui-font-size-30;
       }
     }
+
+    .latency-nested {
+      :deep(.config-card-details-label) {
+        padding-left: $kui-space-40;
+      }
+    }
   }
 }
 </style>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
index b1e6f1c2af..06b457d295 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
@@ -18,13 +18,13 @@
 import { computed } from 'vue'
 import composables from '../../composables'
 import type { SpanNode } from '../../types'
-import { formatLatency, toSpanLatencies } from '../../utils'
+import { formatLatency, toOverviewLatencies } from '../../utils'
 
 const { i18n: { t } } = composables.useI18n()
 
 const props = defineProps<{ span: SpanNode['span'] }>()
 
-const latencies = computed(() => toSpanLatencies(props.span.attributes))
+const latencies = computed(() => toOverviewLatencies(props.span.attributes))
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
index 18ec96e1df..d6e9269cfd 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -64,7 +64,7 @@
         v-else-if="selectedSpan"
         class="span-details"
       >
-        <SpanDescription :span="selectedSpan.span" />
+        <SpanBasicInfo :span="selectedSpan.span" />
 
         <KAlert
           v-if="spanMaybeIncomplete(selectedSpan)"
@@ -118,7 +118,7 @@ import type { SpanNode, TraceViewerConfig } from '../../types'
 import { spanMaybeIncomplete } from '../../utils'
 import WaterfallView from '../waterfall/WaterfallView.vue'
 import SpanAttributeTable from './SpanAttributeTable.vue'
-import SpanDescription from './SpanDescription.vue'
+import SpanBasicInfo from './SpanBasicInfo.vue'
 import SpanEventList from './SpanEventList.vue'
 import SpanLatencyTable from './SpanLatencyTable.vue'
 import TraceLatency from './TraceLatency.vue'
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
index be81cfdae3..8d71c8ffdc 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
@@ -22,7 +22,10 @@
       />
 
       <div class="label-content">
-        <div class="name">
+        <div
+          class="name"
+          :title="spanNode.span.name"
+        >
           {{ spanNode.span.name }}
         </div>
 
diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index e26a133068..29e5748d5a 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -9,16 +9,9 @@ export const SPAN_ATTRIBUTE_VALUE_UNKNOWN = 'unknown'
 export const SPAN_SAMPLER_ATTRIBUTES: Record<keyof typeof samplerAttributes, SpanSamplerAttribute> =
   samplerAttributes satisfies Record<string, SpanSamplerAttribute>
 
-export const SPAN_LATENCY_ATTRIBUTES: Record<string, TranslationKey> = {
-  'proxy.kong.latency.total': 'trace_viewer.latency.labels.total',
-  'proxy.kong.latency.internal': 'trace_viewer.latency.labels.internal',
-  'proxy.kong.latency.upstream': 'trace_viewer.latency.labels.upstream',
-  'proxy.kong.latency.3p.total_io': 'trace_viewer.latency.labels.3p',
-  'proxy.kong.latency.client': 'trace_viewer.latency.labels.client',
-}
-
 export const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong.'
-export const SPAN_ATTR_KEY_KONG_LATENCY_PREFIX = 'proxy.kong.latency.'
+export const SPAN_ATTR_KEY_KONG_LATENCY_PREFIX = `${SPAN_ATTR_KEY_KONG_PREFIX}latency.`
+export const SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX = `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}3p.`
 
 /**
  * These are known attributes that will appear in the spans for ease of access.
@@ -29,6 +22,15 @@ export const SPAN_ATTRIBUTE_KEYS = {
   HTTP_RESPONSE_STATUS_CODE: 'http.response.status_code',
   HTTP_ROUTE: 'http.route',
   KONG_CONSUMER_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}consumer.id`,
+  KONG_LATENCY_3P_DNS_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}dns.total_io`,
+  KONG_LATENCY_3P_HTTP_CLIENT_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}http_client.total_io`,
+  KONG_LATENCY_3P_REDIS_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}redis.total_io`,
+  KONG_LATENCY_3P_TCPSOCK_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}tcpsock.total_io`,
+  KONG_LATENCY_3P_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}total_io`,
+  KONG_LATENCY_CLIENT: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}client`,
+  KONG_LATENCY_INTERNAL: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}internal`,
+  KONG_LATENCY_TOTAL: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}total`,
+  KONG_LATENCY_UPSTREAM: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}upstream`,
   KONG_PLUGIN_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}plugin.id`,
   KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}route.id`,
   KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}service.id`,
@@ -37,6 +39,18 @@ export const SPAN_ATTRIBUTE_KEYS = {
   URL_FULL: 'url.full',
 } satisfies Record<string, string>
 
+export const SPAN_LATENCY_ATTR_LABEL_KEYS: Record<string, TranslationKey> = {
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_DNS_TOTAL_IO]: 'trace_viewer.latency.labels.3p_dns',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_HTTP_CLIENT_TOTAL_IO]: 'trace_viewer.latency.labels.3p_http_client',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_REDIS_TOTAL_IO]: 'trace_viewer.latency.labels.3p_redis',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TCPSOCK_TOTAL_IO]: 'trace_viewer.latency.labels.3p_tcpsock',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TOTAL_IO]: 'trace_viewer.latency.labels.3p',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_CLIENT]: 'trace_viewer.latency.labels.client',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_INTERNAL]: 'trace_viewer.latency.labels.internal',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_TOTAL]: 'trace_viewer.latency.labels.total',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_UPSTREAM]: 'trace_viewer.latency.labels.upstream',
+}
+
 /**
  * These are known attributes that will appear in the span events for ease of access.
  * Why not using enums? --Because we don't want to make the list here exhaustive.
diff --git a/packages/core/tracing/src/locales/en.json b/packages/core/tracing/src/locales/en.json
index a09f45e811..ce11421362 100644
--- a/packages/core/tracing/src/locales/en.json
+++ b/packages/core/tracing/src/locales/en.json
@@ -22,60 +22,115 @@
       "label": "Latency",
       "labels": {
         "3p": "3rd-party",
+        "3p_dns": "DNS",
+        "3p_http_client": "HTTP client",
+        "3p_redis": "Redis",
+        "3p_tcpsock": "TCP socket",
         "client": "Client",
         "internal": "Kong (internal)",
         "total": "Total",
         "upstream": "Upstream"
       },
-      "section_title": "Span latencies"
+      "section_title": "Latency breakdown"
     },
     "no_span_description": "No description available for this span",
     "span_attributes": {
       "not_applicable": "Not applicable",
       "title": "Span attributes"
     },
-    "span_descriptions": {
-      "kong": {
-        "access": {
-          "plugin": "This span captures the execution time of the plugin that runs in the access phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "body_filter": {
-          "plugin": "This span captures the execution time of the plugin that runs in the body_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "certificate": {
-          "plugin": "This span captures the execution time of the plugin that runs in the certificate phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "dns": "Kong does most of it's DNS lookup asynchronously, but depending on configuration or custom_plugin code Kong may have to do synchronous DNS lookups. This span captures the time taken to resolve DNS queries.",
-        "find_upstream": "For each upstream target marked as healthy, Kong will attempt to open a TCP connection, optionally do a TLS handshake and send over the request headers. If all of this succeeds, Kong will finish sending the full request and wait for a response. If any of the step fails, Kong will switch to the next upstream and try again. This span captures the time taken to validate a specific upstream.",
-        "flush_to_downstream": "This span measures the time taken for the client to read the response once it sent from Kong. This span can identify clients that are slow at reading responses, or are trying to read responses over slow connections.",
-        "header_filter": {
-          "plugin": "This span captures the execution time of the plugin that runs in the header_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "io": {
-          "func": "Depending on configuration or custom plugin behaviour, Kong may have to reach out to 3rd parties (like redis, IdP, http-api etc) as part of normal request processing. This span captures the amount of time Kong spent waiting for the 3rd party to respond. Multiple instances of this span can occur, one per 3rd party i/o. This span does not capture the time spent waiting on the actual upstream, that is captured in it's own dedicated span."
-        },
-        "phase": {
-          "access": "This span captures the cumulative execution time of all the plugins that may run in the access phase of the request lifecycle.",
-          "body_filter": "This span captures the cumulative execution time of all the plugins that may run in the body filter phase of the request lifecycle.",
-          "certificate": "This span captures the cumulative execution time of all the plugins that may run in the certificate phase of the request lifecycle.",
-          "header_filter": "This span captures the cumulative execution time of all the plugins that may run in the header filter phase of the request lifecycle.",
-          "response": "This span captures the cumulative execution time of all the plugins that may run in the response phase of the request lifecycle.",
-          "rewrite": "This span captures the cumulative execution time of all the plugins that may run in the rewrite phase of the request lifecycle."
-        },
-        "read_client_http_body": "This span captures the time taken to read the full body of the request from the client. This span can be very useful to determine if a client is on a slow network, sending a large body or simply taking too long to send a POST/PUT/PATCH body.",
-        "read_client_http_headers": "This span captures the time taken to read the full set of http headers from the client. This span can be very useful to determine if a client is slow or may be coming over a slow or problematic network.",
-        "read_response_from_upstream": "Span capturing the time taken for the upstream to generate a full response. This effectively measures the time Kong sees between the first byte of the response header and the last byte of the response body coming from the upstream. This span can be used to identify slowness in response generation from upstream.",
-        "response": {
-          "plugin": "This span captures the execution time of the plugin that runs in the response phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "rewrite": {
-          "plugin": "This span captures the execution time of the plugin that runs in the rewrite phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "router": "This span captures the time taken by the router to search for a match. The span attributes return interesting information about the match.",
-        "upstream": {
-          "selection": "Depending on configuration, Kong will try to find a healthy upstream by trying various targets in order determined by the configured load balancing algorithm. This span captures the total time spent in finding a healthy upstream. Child spans of this span capture the individual attempts."
-        },
-        "waiting_for_upstream": "Span capturing the \"time to first byte\" from the upstream. This includes the time taken to finish writing the http request to upstream, and the time taken by the upstream to start generating a response. This span can be used to identify network delays between Kong and an upstream as well as identifying upstreams that take long to start generating a response."
+    "span_basic_info": {
+      "descriptions": {
+        "kong": {
+          "$": "This span captures the entire request-response duration.",
+          "access": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the access phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "body_filter": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the body_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "certificate": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the certificate phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "dns": {
+            "$": "Kong does most of it's DNS lookup asynchronously, but depending on configuration or custom_plugin code Kong may have to do synchronous DNS lookups. This span captures the time taken to resolve DNS queries."
+          },
+          "find_upstream": {
+            "$": "For each upstream target marked as healthy, Kong will attempt to open a TCP connection, optionally do a TLS handshake and send over the request headers. If all of this succeeds, Kong will finish sending the full request and wait for a response. If any of the step fails, Kong will switch to the next upstream and try again. This span captures the time taken to validate a specific upstream."
+          },
+          "flush_to_downstream": {
+            "$": "This span measures the time taken for the client to read the response once it sent from Kong. This span can identify clients that are slow at reading responses, or are trying to read responses over slow connections."
+          },
+          "header_filter": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the header_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "io": {
+            "func": {
+              "$": "Depending on configuration or custom plugin behaviour, Kong may have to reach out to 3rd parties (like redis, IdP, http-api etc) as part of normal request processing. This span captures the amount of time Kong spent waiting for the 3rd party to respond. Multiple instances of this span can occur, one per 3rd party i/o. This span does not capture the time spent waiting on the actual upstream, that is captured in it's own dedicated span."
+            }
+          },
+          "phase": {
+            "access": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the access phase of the request lifecycle."
+            },
+            "body_filter": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the body filter phase of the request lifecycle."
+            },
+            "certificate": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the certificate phase of the request lifecycle."
+            },
+            "header_filter": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the header filter phase of the request lifecycle."
+            },
+            "response": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the response phase of the request lifecycle."
+            },
+            "rewrite": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the rewrite phase of the request lifecycle."
+            }
+          },
+          "read_client_http_body": {
+            "$": "This span captures the time taken to read the full body of the request from the client. This span can be very useful to determine if a client is on a slow network, sending a large body or simply taking too long to send a POST/PUT/PATCH body."
+          },
+          "read_client_http_headers": {
+            "$": "This span captures the time taken to read the full set of http headers from the client. This span can be very useful to determine if a client is slow or may be coming over a slow or problematic network."
+          },
+          "read_response_from_upstream": {
+            "$": "Span capturing the time taken for the upstream to generate a full response. This effectively measures the time Kong sees between the first byte of the response header and the last byte of the response body coming from the upstream. This span can be used to identify slowness in response generation from upstream."
+          },
+          "response": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the response phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "rewrite": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the rewrite phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "router": {
+            "$": "This span captures the time taken by the router to search for a match. The span attributes return interesting information about the match."
+          },
+          "upstream": {
+            "selection": {
+              "$": "Depending on configuration, Kong will try to find a healthy upstream by trying various targets in order determined by the configured load balancing algorithm. This span captures the total time spent in finding a healthy upstream. Child spans of this span capture the individual attempts."
+            }
+          },
+          "waiting_for_upstream": {
+            "$": "Span capturing the \"time to first byte\" from the upstream. This includes the time taken to finish writing the http request to upstream, and the time taken by the upstream to start generating a response. This span can be used to identify network delays between Kong and an upstream as well as identifying upstreams that take long to start generating a response."
+          }
+        }
+      },
+      "labels": {
+        "description": "Description",
+        "name": "Name"
       }
     },
     "span_events": {
diff --git a/packages/core/tracing/src/types/spans.ts b/packages/core/tracing/src/types/spans.ts
index 3de712f718..8314525c50 100644
--- a/packages/core/tracing/src/types/spans.ts
+++ b/packages/core/tracing/src/types/spans.ts
@@ -77,11 +77,12 @@ export interface SpanSamplerAttribute {
   aliases?: ExpressionsField[]
 }
 
-export interface SpanLatency {
+export interface SpanLatency<Children = never> {
   key: string
   /**
    * When omitted, we will use the `key` as the label.
    */
   labelKey?: TranslationKey
   milliseconds: number
+  children?: Children
 }
diff --git a/packages/core/tracing/src/utils/spans.ts b/packages/core/tracing/src/utils/spans.ts
index 61b4a90161..b855c3703f 100644
--- a/packages/core/tracing/src/utils/spans.ts
+++ b/packages/core/tracing/src/utils/spans.ts
@@ -1,6 +1,5 @@
 import { cloneDeep } from 'lodash-es'
-import type { TranslationKey } from '../composables/useI18n'
-import { SPAN_ATTR_KEY_KONG_LATENCY_PREFIX, SPAN_LATENCY_ATTRIBUTES, SPAN_ZERO_ID } from '../constants'
+import { SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX, SPAN_ATTRIBUTE_KEYS, SPAN_LATENCY_ATTR_LABEL_KEYS, SPAN_ZERO_ID } from '../constants'
 import { type IAnyValue, type IKeyValue, type Span, type SpanLatency, type SpanNode } from '../types'
 
 /**
@@ -184,31 +183,77 @@ export const unwrapAnyValue = <T = any> (value: IAnyValue): T | null => {
   return null
 }
 
-const LATENCY_ORDERING = Object.keys(SPAN_LATENCY_ATTRIBUTES)
+const LATENCY_ORDERING = [
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_TOTAL,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_INTERNAL,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_UPSTREAM,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TOTAL_IO,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_CLIENT,
+].reduce((map, key, index) => {
+  map[key] = index
+  return map
+}, {} as Record<string, number>)
 
-export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
+/**
+ * IMPORTANT: Please pass the attributes of a root span.
+ */
+export const toOverviewLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
   if (!attributes) {
     return []
   }
 
   return attributes
     .reduce((attrs, attr) => {
-      if (!attr.key.startsWith(SPAN_ATTR_KEY_KONG_LATENCY_PREFIX)) {
+      if (!Object.prototype.hasOwnProperty.call(LATENCY_ORDERING, attr.key)) {
         return attrs
       }
-      const labelKey: TranslationKey | undefined = SPAN_LATENCY_ATTRIBUTES[attr.key]
 
       attrs.push({
         key: attr.key,
-        labelKey,
+        labelKey: SPAN_LATENCY_ATTR_LABEL_KEYS[attr.key],
         milliseconds: unwrapAnyValue(attr.value) as number,
       })
 
       return attrs
     }, [] as SpanLatency[])
-    .sort((a, b) => {
-      const ia = LATENCY_ORDERING.indexOf(a.key)
-      const ib = LATENCY_ORDERING.indexOf(b.key)
-      return (ia >= 0 ? ia : LATENCY_ORDERING.length) - (ib >= 0 ? ib : LATENCY_ORDERING.length)
-    })
+    .sort((a, b) => LATENCY_ORDERING[a.key] - LATENCY_ORDERING[b.key])
+}
+
+export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency<SpanLatency[]>[] => {
+  if (!attributes) {
+    return []
+  }
+
+  const latencies: SpanLatency<SpanLatency[]>[] = []
+  let latency3rdParty: SpanLatency<SpanLatency[]> | undefined
+  const latencies3rdParty: SpanLatency[] = []
+
+  for (const attr of attributes) {
+    if (Object.prototype.hasOwnProperty.call(LATENCY_ORDERING, attr.key)) {
+      // Handle the major latencies
+      const latency: SpanLatency<SpanLatency[]> = {
+        key: attr.key,
+        labelKey: SPAN_LATENCY_ATTR_LABEL_KEYS[attr.key],
+        milliseconds: unwrapAnyValue(attr.value) as number,
+        children: [],
+      }
+      if (attr.key === SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TOTAL_IO) {
+        latency3rdParty = latency
+      }
+      latencies.push(latency)
+    } else if (attr.key.startsWith(SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX)) {
+      // Handle the NESTED 3rd-party latencies; we will later add them to the major 3rd-party latency
+      latencies3rdParty.push({
+        key: attr.key,
+        labelKey:  SPAN_LATENCY_ATTR_LABEL_KEYS[attr.key],
+        milliseconds: unwrapAnyValue(attr.value) as number,
+      })
+    }
+  }
+
+  if (latency3rdParty) {
+    latency3rdParty.children = latencies3rdParty
+  }
+
+  return latencies.sort((a, b) => LATENCY_ORDERING[a.key] - LATENCY_ORDERING[b.key])
 }