fix(tracing): lifecycle view and tab partials

[sumimakito]

Summary

• <LifecycleView /> to show request lifecycles in flowcharts
• <PayloadDisplay /> to show payload info like request/response headers/body
• <SummaryViewTab /> to build up the tab for request lifecycle, info, and captured payload

KM-773

[Leopoldthecoder]

The code block always shows a horizontal scrollbar. Can this be removed?

[Leopoldthecoder]

Sometimes the request latency is out of view when I open the summary view. Reproduction link: https://pr-5577--gateway-manager.cloud-preview.konghq.tech/us/gateway-manager/03a13dd9-cf6c-4f8c-b2f8-1c3fc34a4f29/active-tracing/sessions/01949224-c46e-7dcd-a2c6-9de98afcd7a8/traces/9513ffd6b98ea780b538ebd7fd292890

[sumimakito]

Sometimes the request latency is out of view when I open the summary view…

@Leopoldthecoder Good catch. It seems that the fitView function provided by VueFlow would zoom in on the chart too much when we only have a few nodes. After adding maxZoom: 1 to fitView, it looks like this:

Before	After

What do you think?

[Leopoldthecoder]

Sometimes the request latency is out of view when I open the summary view…

@Leopoldthecoder Good catch. It seems that the fitView function provided by VueFlow would zoom in on the chart too much when we only have a few nodes. After adding maxZoom: 1 to fitView, it looks like this:

Before After

What do you think?

I think now it's better: it gives users the whole picture. 👍

[kongponents-bot]

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/tracing@pr-1908