You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by "CodePrometheus (via GitHub)" <gi...@apache.org> on 2024/03/28 00:37:12 UTC
[PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
CodePrometheus opened a new pull request, #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377
### Summary
Good morning everyone, the main modification this time is to introduce the drag function in the trace panel, and reference to https://github.com/apache/skywalking/issues/12004
Video
https://github.com/apache/skywalking-booster-ui/assets/66550292/066d8ee5-e548-4168-9ad8-68c2cd74139d
<img width="800" alt="image" src="https://github.com/apache/skywalking-booster-ui/assets/66550292/439186d7-9388-4ec4-af53-2b6e8ac13253">
<img width="800" alt="image" src="https://github.com/apache/skywalking-booster-ui/assets/66550292/f473f8db-13d3-4571-ac80-2858000b70ea">
Signed-off-by: Zixin Zhou [codeprince2020@163.com](mailto:codeprince2020@163.com)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2029892022
@Fine0830 Could you verify this?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2029920324
> Can you remove the div event listener when clicking search and add it back after the trace rendering?
Please change the codes base on this and remove the `mitt`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2029974111
> Can you remove the div event listener when clicking search and add it back after the trace rendering?
You can use [disconnect](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect) to stops the MutationObserver instance from receiving further notifications until and unless [observe()](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe) is called again.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2029860359
Could we proceed to the next step, do I need to provide video for double check?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on code in PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#discussion_r1543251156
##########
src/views/dashboard/related/trace/components/D3Graph/Index.vue:
##########
@@ -60,6 +61,9 @@ limitations under the License. -->
}
draw();
loading.value = false;
+ emitter.on("trace_resize", () => {
Review Comment:
Thank you so much, this is a very convenient way to do dom monitoring, learned.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2028629132
> > Can you remove the div event listener when clicking search and add it back after the trace rendering?
>
> I checked and found that the current implementation and what you said will cause the trace-list to be unable to readjust the width after the segment-list rebounds. Is it possible to trigger `draw` in the `watch`?
We already have it [here](https://github.com/apache/skywalking-booster-ui/blob/main/src/views/dashboard/related/trace/components/D3Graph/Index.vue#L299)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2026352991
I think when you apply a new query, the segment list sidebar should be pop up automatically. Otherwise, it is confusing, especially when query without trace ID, it would be a long segment list with various traces. If you don't pop up the segment list, but update a specific trace view, the user may thought there is only one trace, which is most likely not the case.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2027997045
Logically, this is good for me. Wait for @Fine0830 to check code details.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2028040128
> What do you mean? Why does this feature affect search?
When click search, the trace will be rendered once, and when the segment list reaches the default position, because the width change will also trigger a trace rendering, I think it is only rendered once, so I use the event name to judge.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2041051915
@CodePrometheus Pleaae sync submodule to make this works.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2028544369
> Can you remove the div event listener when clicking search and add it back after the trace rendering?
I checked and found that the current implementation and what you said will cause the trace-list to be unable to readjust the width after the segment-list rebounds. Is it possible to trigger `draw` in the `watch`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2024232892
<img width="779" alt="image" src="https://github.com/apache/skywalking-booster-ui/assets/5441976/0fb16de2-a0bd-4648-b875-d34be62125a4">
The tips are not destroyed.
And, could you verify how this works when the segment list is collapsed and click the new query?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2033474975
@CodePrometheus Is the new way working?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng merged PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2024213622
@wu-sheng Hello Teacher Wu, regarding the discussion on the automatic expansion of the left panel when searching, I have been thinking about it in the past few weeks. Since expansion and hiding are manually triggered by the user and are strongly related to the direction pointed by the arrow, my idea is that the system does not actively expand and is completely controlled by the user. WDYT? Could I know more about your views, happy to discuss with you.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2028063321
> > What do you mean? Why does this feature affect search?
>
> When click search, the trace will be rendered once, and when the segment list reaches the default position, because the width change will also trigger a trace rendering, I think it is only rendered once, so I use the event name to judge.
Can you remove the div event listener when clicking search and add it back after the trace rendering?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2036486023
The idea of implementation is:
Maintain a Map to represent the relationship between the event name and the corresponding MutationObserver. When entering the page, create the object, disconnect and delete the Key when leaving.
Monitor when the dividing line is dragged and the arrow is clicked, and disconnect when the mouseup occurs.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2027995830
> I think when you apply a new query, the segment list sidebar should be pop up automatically. Otherwise, it is confusing, especially when query without trace ID, it would be a long segment list with various traces. If you don't pop up the segment list, but update a specific trace view, the user may thought there is only one trace, which is most likely not the case.
Got your point, relevant logic has been adjusted.
cc @Fine0830 In order to avoid repeated rendering of the trace with the search event, I used `mitt` to identify the event name, WDYT? have any other suggestions, please let me know, thx.
https://github.com/apache/skywalking-booster-ui/assets/66550292/55952143-0f36-4e13-aa74-81fe74445fd9
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on code in PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#discussion_r1542223513
##########
src/views/dashboard/related/trace/components/D3Graph/Index.vue:
##########
@@ -60,6 +61,9 @@ limitations under the License. -->
}
draw();
loading.value = false;
+ emitter.on("trace_resize", () => {
Review Comment:
You should use the [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver) to observe `div` change, and use `debounceFunc` to draw trace graph.
##########
src/views/dashboard/related/trace/TraceList.vue:
##########
@@ -187,7 +188,7 @@ limitations under the License. -->
}
.list {
- width: 280px;
+ width: 100%;
Review Comment:
Please set the `min-width` here.
##########
src/views/dashboard/related/trace/components/D3Graph/Index.vue:
##########
@@ -60,6 +61,9 @@ limitations under the License. -->
}
draw();
loading.value = false;
+ emitter.on("trace_resize", () => {
Review Comment:
Please remove the `emitter`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2028037114
> cc @Fine0830 In order to avoid repeated rendering of the trace with the search event, I used `mitt` to identify the event name, WDYT? have any other suggestions, please let me know, thx.
>
What do you mean? Why does this feature affect search?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on code in PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#discussion_r1543252686
##########
src/views/dashboard/related/trace/TraceList.vue:
##########
@@ -187,7 +188,7 @@ limitations under the License. -->
}
.list {
- width: 280px;
+ width: 100%;
Review Comment:
Added, and I modified the default width to 280.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2025640139
> The tips are not destroyed.
The reason is that when re-rendering, I neglected to remove `.d3-tip`, has been corrected.
> And, could you verify how this works when the segment list is collapsed and click the new query?
In the following video, please ignore the circle around the mouse, it's my mac's setting.
https://github.com/apache/skywalking-booster-ui/assets/66550292/8bea8728-e60e-48f0-9da1-4a5d554e7cf0
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on code in PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#discussion_r1543252686
##########
src/views/dashboard/related/trace/TraceList.vue:
##########
@@ -187,7 +188,7 @@ limitations under the License. -->
}
.list {
- width: 280px;
+ width: 100%;
Review Comment:
Added, and I modified the segment list default width to 280.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "Fine0830 (via GitHub)" <gi...@apache.org>.
Fine0830 commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2029032674
> > We already have it [here](https://github.com/apache/skywalking-booster-ui/blob/main/src/views/dashboard/related/trace/components/D3Graph/Index.vue#L299)
>
> Yes, but what I mean is that the original implementation will not adjust the width of the trace-list after segment pop back, so I modified it to trigger function `draw()` directly, [diff](https://github.com/apache/skywalking-booster-ui/pull/377/commits/3c60a7845a31dc446207ca6c7087bebb3b4350e7).
This is okay for me.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2028746474
> We already have it [here](https://github.com/apache/skywalking-booster-ui/blob/main/src/views/dashboard/related/trace/components/D3Graph/Index.vue#L299)
Yes, but what I mean is that the original implementation will not adjust the width of the trace-list after segment pop back, so I modified it to trigger function `draw()` directly.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "CodePrometheus (via GitHub)" <gi...@apache.org>.
CodePrometheus commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2033543431
> @CodePrometheus Is the new way working?
I've been a little busy at work recently, don't have enough time to look carefully. This way should be achievable, please give me some more time.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] feat: add Support for dragging in the trace panel [skywalking-booster-ui]
Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng commented on PR #377:
URL: https://github.com/apache/skywalking-booster-ui/pull/377#issuecomment-2036821567
@Fine0830 Please take a look.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@skywalking.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org