CoreUI 3

[walterdeboer]

Description

Upgrade CoreUI from 2 to 3, nodejs to 18, and several other dependencies

Addressed Issue

Closes: #445, fixes #470

Additional Details

Had some trouble with the original UI layout, so the UI changed a little unfortunately

Checklist

• I have read and understand the contributing guidelines
• This PR introduces new or alters existing behavior, and I have updated the documentation accordingly

[valentijnscholten]

Thanks @walterdeboer . I am no front-end dev, but I like updates to newer/latest versions. Any chance you tested it or could test it with a newer NodeJS? Would be nice to fix #470 in one go :-)

[walterdeboer]

@valentijnscholten I remember I had some trouble bringing it back to node 14. I guess it will work, but I'll have another look to see what it does with 18 or 20...

[walterdeboer]

@nscuro I followd the coreui admin templates more closely so a bigger difference in the styling. I've adjusted the spacing and cleaned up some scss. Also found and fixed #539 Please shoot again! :-)

[nscuro]

Thanks so much @walterdeboer, I'll go through all your remaining open PRs this weekend!

[nscuro]

@walterdeboer, I can confirm that the login page, the footer positioning, and the broken vulnerability analysis view are fixed. Thanks!

While testing more, I found the following issues.

Policy violation analysis is broken

This one seems to be similar to the vulnerability analysis problem (which I can confirm you have fixed).

Switching tabs is causing UI glitches

Not entirely sure why this may be happening, but it looks like the whole UI is refreshed on each tab switch. Tables appear to be loaded twice, but I am not seeing duplicate network requests being made.

For comparison, this is how it behaves on master:

I observed a similar behavior when navigating through the administration panel.

Metrics tooltips are barely visible

Tooltips on metrics widgets are missing their background, and the increased front size is causing ugly line breaks.

This is how it behaves on master:

Some metrics bars are missing color

In the project overview, the bars below the severity chart are not colored.

This is how it looks on master:

"Sticky" breadcrumbs

After visiting a project's page, the breadcrumb stays around when visiting different pages.

Logo on top bar is hidden when toggling sidebar

Just a very minor thing, but the DT logo appears to be located on the sidebar instead of the "top" bar. Thus, when toggling the sidebar, the logo disappears.

This is how it behaves on master:

Breadcrumb bar is fixed

Again, just a minor thing I noticed but is not necessarily a bug, just wanted to take note of it. The breadcrumb bar position is now fixed, it does not disappear when scrolling down.

This is currently happening on master:

General size difference

I mentioned this earlier, but the sizing still feels a bit off. It looks better when zooming out to 90%. Also note how the table content triggers a horizontal scroll bar to appear at 100%. This is not happening with current master.

[walterdeboer]

@nscuro

• Policy violation analysis -> I'm guessing it's fixed by my last commit, but I'll check
• Switching tabs is causing UI glitches -> no clue yet, I'll dive into it
• Metrics tooltips are barely visible & Some metrics bars are missing color -> I'll check the CSS
• Breadcrumb bar is fixed -> This is due to the new admin templates, they're in the Header now. I'think I'll move them
• "Sticky" breadcrumbs -> now they're in the header the refresh didn't look good, but the fix broke it. Will be fixed when I move them I guess
• Logo on top bar is hidden when toggling sidebar -> This is due to the new admin templates. It should now show the logo with text in the center when the small logo hides (not always I notice..). I'd like to leave it like this, following the admin templates as close as possible. I'll make sure the logo is always visible somewhere
• General size difference -> I thought I found it, but I'll give it another go

It will take some more time.. Maybe move this to 4.10?

[nscuro]

It will take some more time.. Maybe move this to 4.10?

Yes, good idea.

Please let me know if you need help with anything, I do realize this is a big undertaking.

[walterdeboer]

I've moved the fix for #539 to #540

[walterdeboer]

And I moved the fix for #470 to #541

[rkg-mm]

Whats the status on this, is this still being worked on? does it need more work, if yes what is missing?

[msymons]

@walterdeboer, are you able to complete the work that you have done here? Is there any help that you need?

Having CoreUI (and Vue) up to date will make it easier to onboard new contributors.

[walterdeboer]

@walterdeboer, are you able to complete the work that you have done here? Is there any help that you need?

Having CoreUI (and Vue) up to date will make it easier to onboard new contributors.

I’m sorry but I’ve abandoned this undertaking. It’s quite a big job and I don’t find the time anymore. I do confirm the importance of this