Azure / azure-iot-explorer

Cross-platform UI for interacting with devices attached to Azure IoT Hub. This tool is meant for learning and testing, not for production environment.
MIT License
223 stars 72 forks source link

[Feature request] Easy way to copy payload from Direct Method call #514

Closed olavt closed 2 years ago

olavt commented 2 years ago

I very often use IoT Explorer to perform a Direct Method call and then analyze the JSON payload returned. The payload returned can be quite big. In earlier versions of IoT Explorer I was able to get to the Notification area and select the payload (even if it was a bit cumbersome). With the new Notification Hub, I'm not able to see the whole returned payload and it seems impossible to select more than just the top part of it.

IoT Hub Explorer should display the whole payload as a result of a Direct Method call and it should be easy to select the payload returned in order to be able to look at the returned JSON. Typically, I use JSON Lint to look at the returned JSON.

YingXue commented 2 years ago

We are looking into this issue.

Elsie4ever commented 2 years ago

Hi @olavt, we are currently investigating this issue and trying to repro. Therefore we need some clarification from you if possible. Are you seeing this issue in the pop up notification on top left corner like this? cdb5ef7d-8b45-479f-a958-ef1ca55c801f Or do you mean you are not able to copy the full content once you click into the "notification center"? I tried to generate a random long string and copy seems like there is no issue. 917de653-3055-42a1-bee4-b2dbe498d072 Thanks for taking your time!

YingXue commented 2 years ago

Hi @olavt I am trying to understand, if you find 'Go to notificaiton center' too cumbersom. The Notification center is designed to store long term messages whenever users wanted to look at the full history. There is one thing we can do which is to relax the limitation of showing truncated message, the '...' you see in the notification toast basically. We can make the toast show the longer messages (potentially full) until it is too lengthy and cannot fit in the screen nicely. We will do so in the next release, and hopefully make things easier for the users.

rtheil commented 2 years ago

@YingXue In this issue and #495, we've both pointed out how cumbersome it is to copy the contents of a message from a device.

A big part of this issue is that the notifications popout menu is always empty. Why not put the notifications list in here so that there's no need to navigate to home to get to notifications? image

Relaxing the limitation of truncated messages doesn't solve the issue of being unable to copy the contents of a message from a device. It only makes the entire message available in notification center. Going to notification center is very time consuming, as I explained in #495.

If the Notifications menu at the top-right were the notifications center and contained all the notifications, it'd be absolutely awesome, but having a link to notification center in the menu that's called Notifications is just... weird. Navigating away from the current device task degrades the UX.

A VERY simple solution would be to put a "copy" link on the notification popup as it comes in, which copies the payload to the clipboard. Such a minor change that there's no real need to improve the entire UI/UX of the Notification Center and Notifications menu.

YingXue commented 2 years ago

@rtheil As unfortunately as it is, the empty Notifications Panel was the place where the notifications use to be. Considering the consistency between this tool and others and also due to some usibility concerns (we want to perserve more messages and allow our users to scroll to older history), we made a design choice to move the Panel to what it is today. The link left out in the Panel was for earlier adopters of this tool to be able to locate where the notifications are now, and the panel was planned to be removed eventually. Now, as two issues has been reported and we do recognize the pain our users are going through, our team is looking into the implicatations to move the notifications back to the panel while we speak. And I love the 'copy' proposal. We can surely make it happen in the next release. Thanks a lot for your input, we really appreciate it.

olavt commented 2 years ago

I see the popup notification like this. No problem.

Screenshot 2022-07-27 095230

The main problem is:

1) Copying the payload from the Notification Center is cumbersome, since you have to select the payload part of the message manually.

2) The payload seems to be truncated as shown below:

Screenshot 2022-07-27 095430

My payload is a lot bigger than what's contained in the window. There is a horizontal scrollbar, but as you may see at the bottom there is no proper closing of the JSON content as it's truncated. If I do a "Select All" and copy the content into Notepad, these are the last lines copied:

... 01T00:00:00","version":1,"sendDataFailures":0,"messagesSent":0,"messagesReceived":0,"unsolicitedMessagesReceived":0},{"name":"Basic","isInitialized":true,"lastMessageReceivedUtc":"0001-01-01T00:00:00","version":1,"sendDataFailures":0,"messagesSent":0,"messagesReceived":0,"unsolicitedMessagesReceived":0}],"controlsCommandClasses":["DEVICE_RESET_LOCALLY","0x82"]}]}}. 9:48:44 AM

I would suggest this fix:

Split the content of the Notification into different parts:

1) The message: "Successfully invoked method 'GetZWaveInfo' on device 'NesoyaController'"

2) The status: 200

3) The payload:

{"nodeId":6,"isInitialized":true,"createdTimeUtc":"2022-07-14T20:13:34.5827596Z","nifReceivedTime":"2022-07-14T20:13:38.9153842Z","nifReceiveErrors":0,"lastMessageReceivedUtc":"2022-07-27T07:51:54.6744364Z","sendDataFailures":947,"messagesSent":21696,"messagesReceived":30204,"routingStatistics":[{"route":"[0,0,0,0]","routeSpeed":"40k","usageCount":5985,"lastUsedTime":"2022-07-27 07:50:16.494"},{"route":"[25,0,0,0]","routeSpeed":"40k","usageCount":61,"lastUsedTime":"2022-07-27 07:30:21.024"},{"route":"[28,26,25,0]","routeSpeed":"40k","usageCount":2,"lastUsedTime":"2022-07-27 07:24:26.125"},{"route":"[16,26,25,0]","routeSpeed":"40k","usageCount":4,"lastUsedTime":"2022-07-27 07:21:37.481"},{"route":"[2,0,0,0]","routeSpeed":"9600","usageCount":6520,"lastUsedTime":"2022-07-27 07:18:11.672"},{"route":"[0,0,0,0]","routeSpeed":"100k","usageCount":6827,"lastUsedTime":"2022-07-27 07:18:10.305"},{"route":"[23,0,0,0]","routeSpeed":"40k","usageCount":1,"lastUsedTime":"2022-07-27 06:13:16.398"},{"route":"[10,24,14,26]","routeSpeed":"40k","usageCount":1,"lastUsedTime":"2022-07-27 04:13:00.704"},{"route":"[23,8,0,0]","routeSpeed":"40k","usageCount":1,"lastUsedTime":"2022-07-27 02:18:42.109"},{"route":"[26,0,0,0]","routeSpeed":"100k","usageCount":1,"lastUsedTime":"2022-07-27 01:24:27.495"},{"route":"[22,0,0,0]","routeSpeed":"40k","usageCount":5,"lastUsedTime":"2022-07-26 19:29:54.993"},{"route":"[10,24,26,0]","routeSpeed":"40k","usageCount":100,"lastUsedTime":"2022-07-26 19:17:36.633"},{"route":"[13,0,0,0]","routeSpeed":"100k","usageCount":206,"lastUsedTime":"2022-07-26 18:04:12.835"},{"route":"[0,0,0,0]","routeSpeed":"9600","usageCount":41,"lastUsedTime":"2022-07-26 17:46:12.864"},{"route":"[26,0,0,0]","routeSpeed":"40k","usageCount":8,"lastUsedTime":"2022-07-26 17:23:35.696"},{"route":"[24,0,0,0]","routeSpeed":"40k","usageCount":1,"lastUsedTime":"2022-07-26 16:29:11.650"},{"route":"[2,0,0,0]","routeSpeed":"40k","usageCount":1,"lastUsedTime":"2022-07-25 13:54:15.054"},{"route":"[25,0,0,0]","routeSpeed ... }

Alternatively have links in the Notification Center message to copy the entire content payload to the clipboard.

YingXue commented 2 years ago

Releasing https://github.com/Azure/azure-iot-explorer/releases/tag/v0.14.11 which adds copy button and fix scroll bar to the notificaiton center. @olavt What you've mentioned as the next step to format is a valid request, and I believe it's been on the backlog for our service team for a long time. They will have to return us a consist response for us to present it nicely, especially in error case.

olavt commented 2 years ago

@YingXue Thanks. It's a little better. I can now easily copy the entire message to the clipboard, but in order to get to the pure JSON returned, I still need to manually remove the text at the top of the message. It would be nice to have a way to copy only the JSON from the message, or maybe also just the JSON payload. What I really want is to be able to examine the payload JSON in a tool like JSON Lint or VS Code, where it's nicely formatted.

This shows what I need to manually remove after pasting the message from the clipboard:

Screenshot 2022-08-03 104342
rtheil-growlink commented 2 years ago

This is a great addition, guys. Thanks for adding it. It will make a big difference in testing. I agree with @olavt though, it should be the response itself. I don't think it should be the payload only though.