elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.72k stars 8.14k forks source link

[APM][Trace Waterfall] Adjust bar size discounting the size of the padding left added #179525

Open cauemarcondes opened 5 months ago

cauemarcondes commented 5 months ago

image (2)

In the example above we see that the GET bar is not properly aligned to its parent. It's pushed a bit to the right due to the left padding.

Screenshot 2024-03-25 at 15 18 48

Solution: We need to adjust the bar size to discount the size of the padding added.

This is the payload for tests ``` { "name": "GET", "context": { "trace_id": "0x5c7e945a22d62bd868f193a93557a139", "span_id": "0xc10f49189c4ad5dc", "trace_state": "[]" }, "kind": "SpanKind.CLIENT", "parent_id": "0x84f05cf2f3048d52", "start_time": "2024-03-25T14:22:44.199622Z", "end_time": "2024-03-25T14:22:44.354087Z", "status": { "status_code": "UNSET" }, "attributes": { "http.method": "GET", "http.url": "https://otel-python.es.europe-west9.gcp.elastic-cloud.com/", "http.status_code": 200 }, "events": [], "links": [], "resource": { "attributes": { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.23.0", "service.name": "otel-test", "service.version": "0.1", "deployment.environment": "production", "telemetry.auto.version": "0.44b0" }, "schema_url": "" } } { "name": "info", "context": { "trace_id": "0x5c7e945a22d62bd868f193a93557a139", "span_id": "0x84f05cf2f3048d52", "trace_state": "[]" }, "kind": "SpanKind.INTERNAL", "parent_id": "0x51972000aec0e19d", "start_time": "2024-03-25T14:22:44.199510Z", "end_time": "2024-03-25T14:22:44.354181Z", "status": { "status_code": "UNSET" }, "attributes": { "http.request.method": "GET", "db.system": "elasticsearch", "db.operation": "info", "url.full": "[https://otel-python.es.europe-west9.gcp.elastic-cloud.com:443/](https://otel-python.es.europe-west9.gcp.elastic-cloud.com/)", "server.address": "otel-python.es.europe-west9.gcp.elastic-cloud.com", "server.port": 443, "db.elasticsearch.cluster.name": "5f121400ac014744bfffece4da1aeaf6", "db.elasticsearch.node.name": "instance-0000000000" }, "events": [], "links": [], "resource": { "attributes": { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.23.0", "service.name": "otel-test", "service.version": "0.1", "deployment.environment": "production", "telemetry.auto.version": "0.44b0" }, "schema_url": "" } } { "name": "POST", "context": { "trace_id": "0x5c7e945a22d62bd868f193a93557a139", "span_id": "0xb7679f01c469f3ca", "trace_state": "[]" }, "kind": "SpanKind.CLIENT", "parent_id": "0x02968f87ac28d08f", "start_time": "2024-03-25T14:22:44.354386Z", "end_time": "2024-03-25T14:22:44.902202Z", "status": { "status_code": "UNSET" }, "attributes": { "http.method": "POST", "http.url": "https://otel-python.es.europe-west9.gcp.elastic-cloud.com/logs-*/_search", "http.status_code": 200 }, "events": [], "links": [], "resource": { "attributes": { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.23.0", "service.name": "otel-test", "service.version": "0.1", "deployment.environment": "production", "telemetry.auto.version": "0.44b0" }, "schema_url": "" } } { "name": "search", "context": { "trace_id": "0x5c7e945a22d62bd868f193a93557a139", "span_id": "0x02968f87ac28d08f", "trace_state": "[]" }, "kind": "SpanKind.INTERNAL", "parent_id": "0x51972000aec0e19d", "start_time": "2024-03-25T14:22:44.354254Z", "end_time": "2024-03-25T14:22:44.902647Z", "status": { "status_code": "UNSET" }, "attributes": { "http.request.method": "POST", "db.system": "elasticsearch", "db.operation": "search", "db.elasticsearch.path_parts.index": "logs-*", "db.statement": "{\"query\":{\"match_all\":{}}}", "url.full": "[https://otel-python.es.europe-west9.gcp.elastic-cloud.com:443/logs-*/_search](https://otel-python.es.europe-west9.gcp.elastic-cloud.com/logs-*/_search)", "server.address": "otel-python.es.europe-west9.gcp.elastic-cloud.com", "server.port": 443, "db.elasticsearch.cluster.name": "5f121400ac014744bfffece4da1aeaf6", "db.elasticsearch.node.name": "instance-0000000000" }, "events": [], "links": [], "resource": { "attributes": { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.23.0", "service.name": "otel-test", "service.version": "0.1", "deployment.environment": "production", "telemetry.auto.version": "0.44b0" }, "schema_url": "" } } { "name": "/", "context": { "trace_id": "0x5c7e945a22d62bd868f193a93557a139", "span_id": "0x51972000aec0e19d", "trace_state": "[]" }, "kind": "SpanKind.SERVER", "parent_id": null, "start_time": "2024-03-25T14:22:44.199093Z", "end_time": "2024-03-25T14:22:44.902787Z", "status": { "status_code": "UNSET" }, "attributes": { "http.method": "GET", "http.server_name": "127.0.0.1", "http.scheme": "http", "net.host.port": 8000, "http.host": "127.0.0.1:8000", "http.target": "/", "net.peer.ip": "127.0.0.1", "http.user_agent": "Mozilla/5.0 (X11; Linux x86_64; rv:124.0) Gecko/20100101 Firefox/124.0", "net.peer.port": 47726, "http.flavor": "1.1", "http.route": "/", "http.status_code": 200 }, "events": [], "links": [], "resource": { "attributes": { "telemetry.sdk.language": "python", "telemetry.sdk.name": "opentelemetry", "telemetry.sdk.version": "1.23.0", "service.name": "otel-test", "service.version": "0.1", "deployment.environment": "production", "telemetry.auto.version": "0.44b0" }, "schema_url": "" } } ```
elasticmachine commented 5 months ago

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)