Full container name tooltip is not visible in latest version

[TUNER88]

On the gif from the readme I can see that there was an fancy blue tooltip with full container name.

Unfortunately it seems to not working anymore, it is missing even on the preview on dozzle.dev. Any ideas how to fix it?

[amir20]

@TUNER88 see #9. I removed the tooltip in favor of making it more responsive. The tooltip was only there when the screen was too small and now dozzle collapses the menu instead.

[TUNER88]

@amir20 okay, I understand your concerns. I'm not sure about common container name length, but in our case we have quite long names due to our naming convention ${NAMESPACE}_${PROJECT}_{BRANCH}_${COMMIT_HASH}.

Unfortunately it is quite hard for me right now to select the container, I want to inspect 😄

Tooltips are probably not the best solution for this case, but it definitely would be great if we could somehow see the full names. What do you think about resizable panes?

https://github.com/yansern/vue-multipane

[amir20]

Hmm couple of thoughts:

1) I think I see a bug. What browser are you using? The long docker names should have "..." at the end. Did you change something?

2) I actually am using panes right now. I am using https://github.com/antoniandre/splitpanes instead. But the panes are only for the right side where the logs are present. I don't think panes will make sense here when trying navigate quickly.

I need to think of something more clever. For the time being I'll add html tag title={title} and that will unblock you.

I'll have to think about what is better. I am not a designer so if you think of anything let me know.

[amir20]

Try https://github.com/amir20/dozzle/releases/tag/v1.17.2 as it has a hover now when you move the mouse over the labels.

Let me keep thinking about your problem.

[TUNER88]

@amir20 thanks your latest contribution, it help us a lot 👍

Regarding my screenshot, there is no bug in dozzle, I've actually resized the sidebar/content containers via inspector to visualize our problem with long names. So your CSS based ellipsis was basically working, but the visible part was not meaningful enough for us.

I still think that resizable sidebar pane is a good way to go, in this case users with short names would be able to adjust the size to have more space for logs, on other hand the users with long names would be able to adjust it for better overview.

But I'm not a designer as well, so maybe some other users will have some thoughts on this topic

[amir20]

Great. I was hoping to do something nifty when hovering the link and show the full name. But I don't think that's easily achievable with CSS and set width.

I'll think about it for a while but right now leaning towards using panes. So let's see how it goes.

[amir20]

Update: I think I came to a good compromise. I will change the ellipses from end to the middle. So instead of doing

really_long_docker_name....

I plan to do something like

really_long_docker...ext

In addition to that, I plan to do the pane like you suggested.

This seems to copy the design of what Finder does on the Mac for long filenames.

[amir20]

Note to self. This is a potential way to implement this https://stackoverflow.com/questions/27746218/css-crop-string-in-the-middle.

Maybe sometime next week i can get this out when I have less meetings.

[TUNER88]

Awesome, I've never faced this CSS only approach, looks great 👍

[amir20]

I am thinking it might be less helpful for you since there those long generated ids at the end. I'll see what it looks like after I do it because either way, the pane should help out to expand it. I wanted to spend some extra time to make sure it remembers the width. But that might be too much work right now.

[amir20]

Just an update on this. I was able to get the panes to work but unfortunately it breaks the responsiveness. So I need to keep thinking of what's the best way to do this. Since splitpanes are created programmatically, they don't respect @media screen and (max-width: 768px) so I'll have to see if I should remove and add them myself. :(

[TUNER88]

It's great to hear about your progress, I really appreciate it 👍

I guess I don't completely get your issue, but here are my thoughts.

We can have just 2 list components (fixed width on mobile / pane on desktop) on the page and toggle the visibility via css, but in this case you are getting troubles "Splitpanes", right?

Maybe we can use the matchMedia API handle it properly?

Is your current development branch already available online?

[amir20]

Hi @TUNER88. I have been traveling for work so been AFK. Sorry for the confusion. You are correct with your assumption. Currently, the view looks like:

<splitpane>
  <pane>
    <menu/>
  </pane>
  <pane>
    ... logs ...
  <pane>
</splitpane> 

For it to be responsive, I would have to some how hide left pane AND position the <menu/> on top. I don't think that's possible as hiding the pane will hide all children and I can't position it after.

My next thought would be to do something like you said which is create two list components. This is less ideal as now there is repeated components with same data. But I don't think it's a deal breaker.

I do plan to use matchMedia. You can find the branch at https://github.com/amir20/dozzle/tree/menu-resizable.

I should be back end of week and take a look it again.

tldr; I am trying to accomplish this using only CSS and I don't think that is possible. :O

[amir20]

@TUNER88 I think the branch is at a good place. And https://github.com/amir20/dozzle/pull/206 adds side menu that collapses in mobile.

[amir20]

I have released https://github.com/amir20/dozzle/releases/tag/v1.18.0 @TUNER88. Try it and let me know what you think. It only has the panes and not the ellipses.

[amir20]

I spent a good hour trying to figure out to get the ... to work in the middle. But it doesn't seem to play nice with vue-router. So I am going close this ticket and see how you like the pane and come back to it if it doesnt' solve your problem.

[TUNER88]

@amir20 wow, that’s amazing, I was not even able to checkout your code so far 😁. Just deployed and tested the new version from my iPad, it works really great. I will be able to test it from a desktop machine tomorrow, but I’m quite sure that it will work there as well.

Thanks a lot for this great project 🙏