[Plugin] FolderView

[hernandito]

@scolcipitato or anyone, do you like this view for the Advanced Menu pop up display? I did this quickly and roughly just editing the css. I am sure I violate a ton of things to the Tooltipster root.

 

 

If you like, maybe it can be an additional choice for the Context Menu choices.? If yes, I would add/squeeze the contents of the below to where I have my blue header. And/or perhaps the graph section can show/hide toggle via a right/left arrow.

 

 

My reasoning for this, is that, when I open the current Advanced View, the graph starts populating from zero. By the time the graph shows anything meaningful, I was well done w/ what I needed to do, but I dwell on it wanting to see something.

 

Please let me know.

 

Thanks,

 

H.

 

[ripeart]

When I paste the URL for the Folder Icon for ex: https://github.com/ground7/unraid-animated-svgs/blob/master/Always Animate/nzb.svg

The folder icon does not change, just stays a question mark.

[Mattaton]

1 hour ago, ripeart said:

When I paste the URL for the Folder Icon for ex: https://github.com/ground7/unraid-animated-svgs/blob/master/Always Animate/nzb.svg

The folder icon does not change, just stays a question mark.

You have to use the raw url, not the preview url:

https://raw.githubusercontent.com/ground7/unraid-animated-svgs/998caafba7ebfac26963053deffc6ca586915847/Always Animate/nzb.svg

[scolcipitato]

New version out: 2023.09.30

Changelog:

• Added custom events, go to the edit/ add page to get started.
• Updated EN and IT translation for the new version, @kennymc.c I've already added the new lines to the DE translation you just need to translate if you want.
• Changed the custom CSS import method (here you can find the post I talked about it, if the custom CSS is not working after the update just rename some file according and everything will work as before).
• Added custom scripts event, you can read about it in the dev guide on GH (link in the first post).
• Bringed VM tab to par with docker functionality where possible.
• Updated dev guide and templates.

[Masterwishx]

@scolcipitato

Have strange effect after update its related to CSS or plugin , is advanced context tooltip window size hardcoded now ?

 

[scolcipitato]

3 minutes ago, Masterwishx said:

@scolcipitato

Have strange effect after update its related to CSS or plugin , is advanced context tooltip window size hardcoded now ?

 

Well, this shouldn't happen, I made a found and replace while testing, and it seems I got that too replaced, I'll make an update.

[Mattaton]

The latest version of my CSS files sets a uniform height on those screens so the pop up doesn't end up super tall related to the graph, but also sets overflow so you can scroll for longer port or volume lists. I'll have a look ASAP.

[scolcipitato]

@Masterwishx A while ago you were reporting that if you open another unraid page the updates on the advanced view/advanced context stopped, I think I found the "problem".

Now I must say that I don't know how this would impact unraid, I think that the code is there for a reason, but I saw in other files this missing, so maybe it's fine?

I'll put it here just for you and anyone to know if they are really bothered by it.

 

In the file "/usr/local/emhttp/plugins/dynamix.docker.manager/DockerContainers.page" on line 6 you should see this:

Nchan="docker_load:stop"

change this line to:

Nchan="docker_load"

I tried what said before for a small-time, and I don't see anything particularly wrong, so if this will become a issue it takes time.

Just beware that this will not survive a reboot.

[Masterwishx]

1 hour ago, scolcipitato said:

A while ago you were reporting that if you open another unraid page the updates on the advanced view/advanced context stopped, I think I found the "problem".

Now I must say that I don't know how this would impact unraid, I think that the code is there for a reason, but I saw in other files this missing, so maybe it's fine?

I'll put it here just for you and anyone to know if they are really bothered by it.

 

Thanks and yes , the problem if other page than docker page is opened after or refreshed , but found if then i refresh docker page its again working until ....

i opened issue in https://github.com/unraid/webgui/issues/1430 , maybe you can make a pull request with fix .

 

1 hour ago, scolcipitato said:

I tried what said before for a small-time, and I don't see anything particularly wrong, so if this will become a issue it takes time.

Just beware that this will not survive a reboot.

 

I will check it , and Thanks for fix CSS in plugin .

[Masterwishx]

1 hour ago, scolcipitato said:

In the file "/usr/local/emhttp/plugins/dynamix.docker.manager/DockerContainers.page" on line 6 you should see this:

Nchan="docker_load:stop"

change this line to:

Nchan="docker_load"

I tried what said before for a small-time, and I don't see anything particularly wrong, so if this will become a issue it takes time.

Just beware that this will not survive a reboot.

 

Im not sure but maybe @bonienl can help with it as he developing dynamix plugins and some unraid stuff if im not mistaking

[Squid]

3 hours ago, Masterwishx said:

 

Im not sure but maybe @bonienl can help with it as he developing dynamix plugins and some unraid stuff if im not mistaking

It's not a bug, and is by design.  Reason being is that if you don't include some means of stopping the scripts which gather the information is that they never stop running.  This behaviour was how things worked on previous versions of the OS and caused some users a fair amount of issues.

 

To be honest, if you're looking to keep tabs on what memory, CPU etc containers are using when you're not on the docker tab (and technically you're not since the last loaded GUI page isn't docker) you're best off using Netdata or even cAdvisor

[Masterwishx]

6 hours ago, Squid said:

It's not a bug, and is by design.  Reason being is that if you don't include some means of stopping the scripts which gather the information is that they never stop running.  This behaviour was how things worked on previous versions of the OS and caused some users a fair amount of issues.

 

OK, Thanks for explaining

[dboris]

I tried this pluggin on 6.12.3 and at three occasions the folders I had created disapeared... Lol, frustrating. Back to step 0. But looks better than the older version when it works.
I hope it later improves on the unraid limited ordering / delaying.

Edited October 1, 2023 by dboris

[scolcipitato]

4 minutes ago, dboris said:

I tried this pluggin on 6.12.3 and at three occasions the folders I had created disapeared... Lol, frustrating. Back to step 0. But looks better than the older version when it works.
I hope it later improves on the unraid limited ordering / delaying.

I need the debug file (first post for instructions)

[dboris]

43 minutes ago, scolcipitato said:

I need the debug file (first post for instructions)

Ah ah I need a bit more instructions. 😆 Where should I type debug exactly ?

[scolcipitato]

40 minutes ago, dboris said:

Ah ah I need a bit more instructions. 😆 Where should I type debug exactly ?

On the page

[Mattaton]

https://github.com/Tyree/folder.view.custom.css

Latest version of custom CSS is uploaded to work with FolderView 2023.09.30.2

For now there's just the unRAID black theme, but I'll be expanding that soon. But anyone can take these files and tweak the color scheme file ( https://github.com/Tyree/folder.view.custom.css/blob/main/urblack-theme/01-colors.dashboard-docker.css ) and var files to make it their own.

@Masterwishx please let me know if you see any issues.

 

Thanks!

[Daniel15]

Is it possible to add support for LXC as well?

 

[Masterwishx]

After last update of  @Mattaton CSS has fixed long list of ports:

 

 

and made custom height of graph , not sure its CSS or plugin issue: 1 - (no orange line in bottom)

 

 

 

after again press on same container the orange line or work OK or like this:

 

 

Using height 260px  :

 

 

 

 

[Mattaton]

2 hours ago, Masterwishx said:

After last update of  @Mattaton CSS has fixed long list of ports:

 

 

and made custom height of graph , not sure its CSS or plugin issue: 1 - (no orange line in bottom)

 

 

 

after again press on same container the orange line or work OK or like this:

 

 

Using height 260px  :

 

I was attempting to control the height of the context menu so that the graph, ports, and volume boxes all stayed the same height (and add scrollbar when the list of ports or volumes is long), but this appears to have had some unnoticed side effects. I will look at it ASAP.

 

Thanks!

[Mattaton]

Here are the issues with styling the advanced context menu...

The height of the tooltipster-base element, the graph, the ports box, and the volumes box are all dynamically given heights by javascript. I assume this is derived from a combination of content and browser viewport size.

 

What's causing the issue that @Masterwishx points out is that even though I can "fix" the crazy tall heights that the ports box can get up to by setting a height on that box in CSS (and adding overflow: auto for scrollbars when needed), the tooltipster-base has that dynamic height that is either smaller or larger than the hard height I set, so the orange border gets sucked up behind the content if the height I set is smaller than the tooltipster dynamic height. That's why the orange arrow is inside the box, since its z-index is higher than the tooltipster itself.

 

With no way of dynamically setting height based on the height of other elements set by javascript, there's nothing I can do with CSS alone to fix this.

 

I can go back to the drawing board and try to combat heights and widths of everything from the tooltipster base and everything in it, but that can get nasty real quick.

 

@scolcipitato, @hernandito, do you have any thoughts on this?

 

Below is what it looks like when I remove all heights that I set in the CSS. I'm only affecting colors and paddings here.

 

You can see the very tall dynamic heights potentially added to the elements here:

 

And the very tall box that comes with it:

 

 

[hernandito]

12 minutes ago, Mattaton said:

Here are the issues with styling the advanced context menu...

The height of the tooltipster-base element, the graph, the ports box, and the volumes box are all dynamically given heights by javascript. I assume this is derived from a combination of content and browser viewport size.

 

What's causing the issue that @Masterwishx points out is that even though I can "fix" the crazy tall heights that the ports box can get up to by setting a height on that box in CSS (and adding overflow: auto for scrollbars when needed), the tooltipster-base has that dynamic height that is either smaller or larger than the hard height I set, so the orange border gets sucked up behind the content if the height I set is smaller than the tooltipster dynamic height. That's why the orange arrow is inside the box, since its z-index is higher than the tooltipster itself.

 

With no way of dynamically setting height based on the height of other elements set by javascript, there's nothing I can do with CSS alone to fix this.

 

I can go back to the drawing board and try to combat heights and widths of everything from the tooltipster base and everything in it, but that can get nasty real quick.

 

@scolcipitato, @hernandito, do you have any thoughts on this?

 

Below is what it looks like when I remove all heights that I set in the CSS. I'm only affecting colors and paddings here.

 

You can see the very tall dynamic heights potentially added to the elements here:

 

And the very tall box that comes with it:

 

 

‘sorry to start w the obvious. How many or which containers have such long lists they flow off the page? Are we going crazy trying to solve for the exception of the rule? Sorry for lazy way out, but this would be even worse without our beloved FolderView.

[scolcipitato]

9 minutes ago, Mattaton said:

With no way of dynamically setting height based on the height of other elements set by javascript, there's nothing I can do with CSS alone to fix this.

 

I can go back to the drawing board and try to combat heights and widths of everything from the tooltipster base and everything in it, but that can get nasty real quick.

 

@scolcipitato, @hernandito, do you have any thoughts on this?

I have no idea on what to do, I can give you the reference of what the JS is doing

https://api.jqueryui.com/tabs/#option-heightStyle, this set the height of the tabs, now the value is auto, you can try to set it to "content", if it helps I will change it to it, but from my tests it won't help much.

You can try with "fill", this might help if you set a height on the ".info-section".

But idk, you can play around with my code, especially with style related code.

[scolcipitato]

1 minute ago, hernandito said:

‘sorry to start w the obvious. How many or which containers have such long lists they flow off the page? Are we going crazy trying to solve for the exception of the rule? Sorry for lazy way out, but this would be even worse without our beloved FolderView.

In the post you see crafty, I know it can get this long if you put containers behind a VPN, to have access to containers webui.

[hernandito]

2 minutes ago, hernandito said:

‘sorry to start w the obvious. How many or which containers have such long lists they flow off the page? Are we going crazy trying to solve for the exception of the rule? Sorry for lazy way out, but this would be even worse without our beloved FolderView.

 

1 minute ago, scolcipitato said:

I have no idea on what to do, I can give you the reference of what the JS is doing

https://api.jqueryui.com/tabs/#option-heightStyle, this set the height of the tabs, now the value is auto, you can try to set it to "content", if it helps I will change it to it, but from my tests it won't help much.

You can try with "fill", this might help if you set a height on the ".info-section".

But idk, you can play around with my code, especially with style related code.

 

Also…. How useful is seeing that long list of items? I assume when you expand the folder, you will get all that info. What if there is code that parses out just the first 10 items in the list and puts a “more” tag at the end.