Search, click, and navigate to context

[sscarduzio]

Thanks for creating Dozzle!

My log workflow, is the following:

1. Search in logs
2. See the error line I'm interested
3. Click on it
4. Be teleported to that moment in time, to see what happened right before and right after it

See the video:
https://www.loom.com/share/dd9baba14cbe405698b8c2133a9a2ba7?sid=c526d3f4-13e4-4711-bfa3-800978cf1e88

Dozzle is 1 click away from achieving this very, very valuable capability.

As a product manager I would also suggest to add first class citizen bottom search box, permanently visible, and add filter toggles in buttons and drop downs at its margins.

Papertrail App does this, give it a try. I think a lot of concepts can be imported from this app to great benefit.

[ton77v]

Oh yeah that would be really useful 👍

[amir20]

Hi @sscarduzio,

I wish I had a PM for this project 😅

As a product manager I would also suggest to add first class citizen bottom search box, permanently visible, and add filter toggles in buttons and drop downs at its margins.

I believe these are all good ideas, but they require time to implement. I personally use Dozzle to view logs in real time for debugging and investigating issues. Based on my research, search functionality is not a common need, so I am cautious about adding a feature that occupies space that may not be utilized by everyone.

Papertrail App does this, give it a try. I think a lot of concepts can be imported from this app to great benefit.

It's funny you bring up papertrail. Much of Dozzle is based off papertrail! haha. I was an early user of Papertrail, but then my logs started being so much that I didn't want to pay money. That's when I created Dozzle. I do like papertrail and use it often to think about ideas.

Alright now to the good stuff...

Be teleported to that moment in time, to see what happened right before and right after it

This topic has been discussed frequently. I believe it should be implemented because I would find it valuable. There is some history to consider. This functionality used to exist, and filtering and searching were done in the browser. This worked well until I realized that not everyone's browser is powerful, leading to performance issues. I decided to move this to the backend, which improved the situation and made the UI much leaner. However, this change made it difficult to jump into context since the browser no longer retains it.

I proposed the idea at #3830 (comment) to fix this with markers.

I think a neat implementation could be using the URL parameters to load specific logs in history. Something like this:

1. Searching for foo should load all the logs that have "foo". (already impelemented)
2. There can a button or link to load this log in context
3. Dozzle would generated a unique URL like /container/<123>/#<date>-<log-id>.
4. The page would refresh, load logs before and after the specific <log-id>.
5. That specific log could be turned to yellow or something.

The nice part of this solution is that users can also send links around.

The hard part of this implementation is that the log item might be very old. How should Dozzle keep streaming the latest but still show something from a while ago? And more complicated should it load more when scrolling down? I think that's pretty complicated. 😐

Perhaps, when loading logs that are old, streaming of live logs just pause. Only if a PM could think about this. 😝

[sscarduzio]

Hello @amir20 thanks for the quick reply!

It makes two of us being huge fans of Papertrailapp then! I converted to dozzle recently from using Papertrail for years. I did it because:

• Logs are sensitive and confidential part of my company infrastructure (primarily)
• Not so interested in retention
• One less thing to pay (although it's really cheap)

Feature idea: permalink mode

Now for the the juicy part. I like your proposal, allow me to expand on it:

• let's split the ui in two behaviours: tail and permalink mode.
• the "tail mode" is and should remain the default as it is today

Permalink mode

• the address bar has the URL you specified
• No live updates
• only a surrounding of the selected lines are visible
• Buttons above and below to "load more" logs, when more context is needed for the investigation.
• Button at the bottom right that follows my scroll saying "Back to tail mode" or something

How to get to permalink mode

Either of these situations:

• If I click on a timestamp from the search
• Hover and click "share" on any line from the "tail mode", send an email and someone clicks on it : the address bar updates to the permalink URL you mentioned, ready to copy and share.

WDYT?

[amir20]

This is very similar to what I was thinking too. Basically, you are either in tail mode or "back in time " mode. And the two can't be done together.

If I click on a timestamp from the search

I plan for this to be a drop down or something because there are multiple options. It could me be copy url, copy log, and when searching "show in context"

send an email and someone clicks on it

No emails for Dozzle. Probably just copy to clipboard.

Button at the bottom right that follows my scroll saying "Back to tail mode" or something

I think there needs to be some visual notification that currently it is not in live mode.

[sscarduzio]

yes yes the email sending was not meant to be part of dozzle, I meant I send an email with a link pasted into it.

[amir20]

Overall, I am aligned with this directionally. It's just a lot of work so no promises on anything being done soon. I'll probably spend 30 mins each day.

[amir20]

Alright folks, need you all to start testing and provide feedback 🎉

I have implemented this functionality in amir20/dozzle:pr-3958. It can still have bugs, but I think it's in a pretty good spot.

[amir20]

I do like the idea of double clicking 🤔. The only bad part is that it won't really be discoverable since it's really a common pattern to have things in web double clicked.

I really need to figure out a way to make things more discoverable.

[sscarduzio]

As I said, this is sufficient for me. But what i would have done would be slightly different in order to skip the kebab (or any extra per-row UI element) at all costs.

Imagine this:

✨ Click on timestamp ⤵️ :

• Single click = copy permalink
• Double click = open in-context view

For the copy line, I'd add a copy to clipboard icon all the way to the right (only on hover)

Extra:

• Add a 1 second delayed tooltip on row hover explaining available behaviours
• After either action is performed, a confirmation toast appears

[amir20]

As I said, this is sufficient for me. But what i would have done would be slightly different in order to skip the kebab (or any extra per-row UI element) at all costs.

Yea, I am very careful about adding extra space too. If you enable "compact mode" in settings, the drop down doesn't take any space. However, I haven't found a good way in regular mode.

Click on timestamp

I like this idea, but I don't think it should replace the context menu. I think it should be in addition to the context menu. I think Github does a pretty good job. No context menu are shown until you click on a line. Then the option drop down is shown which requires additional clicking. Most of the menus in Dozzle are hoverable and don't need an explicit click. So I kept it consistent.

For the copy line, I'd add a copy to clipboard icon all the way to the right (only on hover)

This is the way it used to be. But I noticed that with different UIs, json logs, etc... it didn't feel natural to me. I personally navigate to the left first for actions.

After either action is performed, a confirmation toast appears

This currently works for copy. But perhaps, I can also make it so that it can say "next time you can double click on the time" or something like that.

I have a few more bugs to fix before I can merge. I'll probably merge once its working well, wait a few days for feedback and then think about extending the functionality.

Thanks for the feedback so far! It's great to have someone bounce ideas off.

[sscarduzio]

Makes sense! Thanks for getting sorted in record time. Once again, great job on the product, and it's my pleasure if I've been of any help. Let me know if you need more in the future.

[amir20]

Alright, changes have been merged to master!

@sscarduzio I made a slight improvement that I think you would appreciate. When searching the drop down changes to "see in context" by default so you could just click it without clicking on the drop down item.

I also noticed that Github does put it on the right and it is hovered similar to compact mode. I'll come back to this more later. For now, I want to test it and release it.