Complete rewite of the browser part (js, css) of the UI

powa-team / powa-web

PoWA user interface

http://powa.readthedocs.io/

73 stars 31 forks source link

Complete rewite of the browser part (js, css) of the UI #165

Closed pgiraud closed 7 months ago

pgiraud commented 1 year ago

With this PR the previous frameworks:

backbone,
foundation,
rickshaw,
bower.

Are replaced by:

VueJS,
Vuetify,
d3,
vitejs.

To test this, you have two options (yet to be documented):

In production mode : execute npm run build. Built assets will be generated and put in powa/static/dist [1]. Then run powa as you would normally do.
In debug mode : execute npm run dev in a terminal. This should launch a VITE service on http://localhost:5173/. Then run powa in dev mode in an other terminal.

I'm looking forward for your feedback.

[1] the built assets are meant to be committed along with releases.

rjuju commented 7 months ago

I just added a commit to warn users when trying to show metrics from different sources in the same chart. This is not supported yet. Let's implement this when we need it.

Thanks! I just manually simulated the problem and confirm that I get a nice error message rather than an abstract error, so it's fine by me.

It's likely that we will need this at some point, but there's no need to make that happen right now.

rjuju commented 7 months ago

After some testing I see some big display bugs that I don't remember seeing with previous version of this patchset. Here's one example with metrics going wild, both above and below the expected range. You can reproduce that easily using the "broken tpc" workload at https://github.com/powa-team/powa_demo/tree/main/tpc

Screenshot 2023-11-10 at 12 02 34 PM

rjuju commented 7 months ago

It also looks like there was some mixup on the action button during one of the rebase. The "Refresh catalogs" button isn't present anymore, and the if/then logic on those button in App.vue seems suspicious.

pgiraud commented 7 months ago

So the weird behavior on chart is fixed. FYI, this was due to null values that were breaking the computation of the extent for Y axis.

Also the issue with actions buttons is fixed. There were 2 different problems.

pgiraud commented 7 months ago

I've seen something a bit annoying with the settings change popover. I'll try to see if a quick fix is possible. Screenshot from 2023-11-10 09-07-09

rjuju commented 7 months ago

Thanks a lot for the blazing fast fixes. I confirm that all is now fixed!

pgiraud commented 7 months ago

I just force pushed a fix for the popover.

rjuju commented 7 months ago

Great!

I'm pretty happy with the state of the PR, I think we're ready to merge it when you want!

rjuju commented 7 months ago

And it's now merged! Thanks a lot for this awesome contribution @pgiraud, @MarionGiusti and @pirlgon (and my apologies if I missed anyone).

rjuju commented 7 months ago

@pgiraud some minor complain, I noticed that if multiple configuration changes are detected in the same snapshot, the timeline will show 2 events with the same timestamp (making it hard to spot and see) rather than merging them in the same hover tooltip. Is that something you can fix?