Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: resizing window causes the trace graph to display incorrectly #367

Merged
merged 5 commits into from
Jan 22, 2024
Merged

fix: resizing window causes the trace graph to display incorrectly #367

merged 5 commits into from
Jan 22, 2024

Conversation

Fine0830
Copy link
Member

Fixes apache/skywalking#11809

Video

1.mov

Signed-off-by: Qiuxia Fan qiuxiafan@apache.org

@Fine0830 Fine0830 added the bug Something isn't working label Jan 22, 2024
@Fine0830 Fine0830 added this to the 10.0.0 milestone Jan 22, 2024
@Fine0830 Fine0830 self-assigned this Jan 22, 2024
@wu-sheng
Copy link
Member

@CzyerChen Could you check this?

@CzyerChen
Copy link
Contributor

@CzyerChen Could you check this?

ok, I'll validate this version.

@CzyerChen
Copy link
Contributor

@CzyerChen Could you check this?

In my case ,
data:

{
  "data": {
    "trace": {
      "spans": [
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
          "spanId": 0,
          "parentSpanId": -1,
          "refs": [],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915519033,
          "endTime": 1705915526049,
          "endpointName": "GET:/case/rocketmq-5-grpc-scenario",
          "type": "Entry",
          "peer": "",
          "component": "SpringMVC",
          "isError": false,
          "layer": "Http",
          "tags": [
            {
              "key": "url",
              "value": "http://127.0.0.1:8080/rocketmq-5-grpc-scenario/case/rocketmq-5-grpc-scenario"
            },
            {
              "key": "http.method",
              "value": "GET"
            },
            {
              "key": "http.status_code",
              "value": "200"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
          "spanId": 1,
          "parentSpanId": 0,
          "refs": [],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915522222,
          "endTime": 1705915522578,
          "endpointName": "RocketMQ/NormalTopicTest/Producer",
          "type": "Exit",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-producer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "mq.topic",
              "value": "NormalTopicTest"
            },
            {
              "key": "mq.message.keys",
              "value": "07a98de5-3dbf-413f-8c7b-8a947325b804"
            },
            {
              "key": "mq.message.tags",
              "value": "Tag:normal"
            },
            {
              "key": "mq.message.id",
              "value": "01ACDE48001122E6A105BFCE8200000000"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.147.17059155258090000",
          "spanId": 0,
          "parentSpanId": -1,
          "refs": [
            {
              "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
              "parentSegmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
              "parentSpanId": 1,
              "type": "CROSS_PROCESS"
            }
          ],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915525809,
          "endTime": 1705915525810,
          "endpointName": "RocketMQ/NormalTopicTest/Consumer",
          "type": "Entry",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-consumer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "transmission.latency",
              "value": "3584"
            },
            {
              "key": "mq.topic",
              "value": "NormalTopicTest"
            },
            {
              "key": "mq.message.id",
              "value": "01ACDE48001122E6A105BFCE8200000000"
            },
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
          "spanId": 2,
          "parentSpanId": 0,
          "refs": [],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915524598,
          "endTime": 1705915524699,
          "endpointName": "RocketMQ/ProducerAsyncTopicTest/Producer",
          "type": "Exit",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-producer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "mq.topic",
              "value": "ProducerAsyncTopicTest"
            },
            {
              "key": "mq.message.keys",
              "value": "26064110-9e89-4951-af2b-d902b40b9dcf"
            },
            {
              "key": "mq.message.tags",
              "value": "Tag:async:producer"
            },
            {
              "key": "mq.message.id",
              "value": "01ACDE48001122E6A105BFCE8400000001"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
          "spanId": 3,
          "parentSpanId": 0,
          "refs": [],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915524701,
          "endTime": 1705915524737,
          "endpointName": "RocketMQ/ProducerAsyncTopicTest/Producer",
          "type": "Exit",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-producer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "mq.topic",
              "value": "ProducerAsyncTopicTest"
            },
            {
              "key": "mq.message.keys",
              "value": "45e403db-70e2-4bb1-a937-2d569386edde"
            },
            {
              "key": "mq.message.tags",
              "value": "Tag:async:producer"
            },
            {
              "key": "mq.message.id",
              "value": "01ACDE48001122E6A105BFCE8500000002"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.114.17059155251910000",
          "spanId": 0,
          "parentSpanId": -1,
          "refs": [
            {
              "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
              "parentSegmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
              "parentSpanId": 2,
              "type": "CROSS_PROCESS"
            },
            {
              "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
              "parentSegmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
              "parentSpanId": 3,
              "type": "CROSS_PROCESS"
            }
          ],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915525191,
          "endTime": 1705915525193,
          "endpointName": "RocketMQ/ProducerAsyncTopicTest/Consumer",
          "type": "Entry",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-consumer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.topic",
              "value": "ProducerAsyncTopicTest"
            },
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "transmission.latency",
              "value": "595"
            },
            {
              "key": "transmission.latency",
              "value": "492"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
          "spanId": 4,
          "parentSpanId": 0,
          "refs": [],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915525411,
          "endTime": 1705915525492,
          "endpointName": "RocketMQ/ConsumerAsyncTopicTest/Producer",
          "type": "Exit",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-producer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "mq.topic",
              "value": "ConsumerAsyncTopicTest"
            },
            {
              "key": "mq.message.keys",
              "value": "beac4ae3-6659-4911-b5a2-4289afd5991c"
            },
            {
              "key": "mq.message.tags",
              "value": "Tag:async:consumer"
            },
            {
              "key": "mq.message.id",
              "value": "01ACDE48001122E6A105BFCE8500000003"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
          "spanId": 5,
          "parentSpanId": 0,
          "refs": [],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915525493,
          "endTime": 1705915525565,
          "endpointName": "RocketMQ/ConsumerAsyncTopicTest/Producer",
          "type": "Exit",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-producer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "mq.topic",
              "value": "ConsumerAsyncTopicTest"
            },
            {
              "key": "mq.message.keys",
              "value": "003eeba1-ed8c-4843-8161-77244d3a8c21"
            },
            {
              "key": "mq.message.tags",
              "value": "Tag:async:consumer"
            },
            {
              "key": "mq.message.id",
              "value": "01ACDE48001122E6A105BFCE8500000004"
            }
          ],
          "logs": [],
          "attachedEvents": []
        },
        {
          "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
          "segmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.112.17059155260980000",
          "spanId": 0,
          "parentSpanId": -1,
          "refs": [
            {
              "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
              "parentSegmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
              "parentSpanId": 4,
              "type": "CROSS_PROCESS"
            },
            {
              "traceId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190300001",
              "parentSegmentId": "dd4b956f1d5641a7972bf0a9ff0f9992.50.17059155190290000",
              "parentSpanId": 5,
              "type": "CROSS_PROCESS"
            }
          ],
          "serviceCode": "rmq5-grpc-A-scenario",
          "serviceInstanceName": "6fd8d0d2f5d3425584b9ccc0671c2f54@198.18.0.1",
          "startTime": 1705915526099,
          "endTime": 1705915526099,
          "endpointName": "RocketMQ/ConsumerAsyncTopicTest/Consumer",
          "type": "Entry",
          "peer": "123.56.194.74:8081",
          "component": "rocketMQ-consumer",
          "isError": false,
          "layer": "MQ",
          "tags": [
            {
              "key": "mq.broker",
              "value": "123.56.194.74:8081"
            },
            {
              "key": "mq.topic",
              "value": "ConsumerAsyncTopicTest"
            },
            {
              "key": "transmission.latency",
              "value": "688"
            },
            {
              "key": "transmission.latency",
              "value": "606"
            }
          ],
          "logs": [],
          "attachedEvents": []
        }
      ]
    }
  }
}

the fix here still not work:
image

the initial height of the svg may have to recalculate.

image

@CzyerChen
Copy link
Contributor

I tried by changing the initial height of svg, then the full image can displayed.
image

@Fine0830
Copy link
Member Author

Please check if it is the latest code, it works on my side.

@wu-sheng
Copy link
Member

@CzyerChen This fix is about resizing. What is the cause at your side?

@wu-sheng
Copy link
Member

Such as, whether the list at the left side(segment list), or some other things limit the height? Or make the vertical scrolling bar doesn't work as expected?

@Fine0830
Copy link
Member Author

The bug is easy to reproduce in the demo env. Actually, this is not related to the data.

wu-sheng
wu-sheng approved these changes Jan 22, 2024
View reviewed changes
Copy link
Member

@wu-sheng wu-sheng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge first, as it is reproducible.

@wu-sheng wu-sheng merged commit 7aef327 into apache:main Jan 22, 2024
5 checks passed
@Fine0830 Fine0830 deleted the bugfix/trace branch January 22, 2024 14:08
@CzyerChen
Copy link
Contributor

@CzyerChen This fix is about resizing. What is the cause at your side?

At my side, I see the trace-list-download svg initial height depends on the span count and VNode count without refs count
this.svg.attr("height", (this.row.length + fixSpansSize + 1) * this.barHeight);
When several refs shown in the graph, the initial height is not enough, and the graph will be incomplete.

I have checked again(the code is latest), may be the fix not matched my issue.

@Fine0830
Copy link
Member Author

This PR fixes the following bug

1.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wu-sheng wu-sheng wu-sheng approved these changes

Assignees

@Fine0830 Fine0830

Labels
bug Something isn't working
Projects
None yet
Milestone
10.0.0
3 participants
@Fine0830 @wu-sheng @CzyerChen