DEV UI Enhancing the Scores Page in RESTEasy Reactive #15384

saumya1singh · 2021-03-01T14:53:23Z

This is draft PR for issue #15322 :)

geoand · 2021-03-01T14:54:56Z

I'll let @phillip-kruger follow up on this since I don't know anything about CSS nor do I have any artistic talent :)

saumya1singh · 2021-03-01T15:02:31Z

So, Interestingly it took only 15 minutes to understand accordion and another 15 to implement it on a separate project - https://github.com/SaumyaSingh1/accordian-demo
But while doing the same on the Scores Page, I took much time 🙈

Right now after adding accordion, my page is like this :

I am liking frontend work :)
I am looking forward to adding the Gauge per score. Then other meta-data in tabular form as @phillip-kruger advised :)

phillip-kruger · 2021-03-01T15:10:39Z

I like it ! Better than what we have at the moment, right ?

saumya1singh · 2021-03-01T15:12:31Z

Yeah, I am now doing my research for the gauge part :)

phillip-kruger

LGTM

gsmet · 2021-03-01T15:52:14Z

I think it's a bit of a shame we lose the color indicator in the main view? It was a good visual hint.

saumya1singh · 2021-03-01T15:54:49Z

I think it's a bit of a shame we lose the color indicator in the main view? It was a good visual hint.

I will add that, it is not final yet. It is on the to-do!
Have to add several changes :)

phillip-kruger · 2021-03-01T15:56:49Z

Yea maybe make the percentage in color ?

saumya1singh · 2021-03-01T15:57:45Z

Yea maybe make the percentage in color ?

of course, this is the plan.
You explained this earlier as well & this is in my mind :)

saumya1singh · 2021-03-01T16:00:32Z

And even if that will not look much cool so we will put that in the badge inside span as was already there :)

geoand · 2021-03-02T16:53:49Z

Also, don't forget to update https://quarkus.io/guides/dev-ui when you are done

saumya1singh · 2021-03-02T17:12:06Z

Also, don't forget to update https://quarkus.io/guides/dev-ui when you are done

sure
Thanks for letting me know, oh then I need to do it for the Endpoints Page as well, that has been changed a lot. Right? @geoand @FroMage

Today was looking at the Prod issue, understood Jenkins flow 🙈 so didn't get time to work on this :) will get back here maybe tomorrow or a day after that.

geoand · 2021-03-02T17:16:47Z

No rush at all.

Yeah, when you do update the docs, include all updates

saumya1singh · 2021-03-04T16:33:29Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

+          gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
+        }
+
+        setGaugeValue(gaugeElement, \{diagnostic.score}/100);


This line @mkouba
Replacing {diagnostic.score} with numeric value is working fine.

Ok, so you can either remove the unparsed character data section, i.e. {| and |} and escape the first bracket for {value / 2} and {Math.round(value * 100)} - we need to ignore these during rendering:

const gaugeElement = document.querySelector(".gauge"); function setGaugeValue(gauge, value) { if (value < 0 || value > 1) { return; } gauge.querySelector(".gauge__fill").style.transform = `rotate($\{value / 2}turn)`; gauge.querySelector(".gauge__cover").textContent = `$\{Math.round(value * 100)}%`; } setGaugeValue(gaugeElement, {diagnostic.score}/100);

Alternatively, you can end the unparsed character data section right before the {diagnostic.score} expr. And of course, you can't escape the {diagnostic.score} expr because you need to output the value (not ignore ;-).

{| <script> const gaugeElement = document.querySelector(".gauge"); function setGaugeValue(gauge, value) { if (value < 0 || value > 1) { return; } gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`; gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`; } |} setGaugeValue(gaugeElement, {diagnostic.score}/100);

BTW I noticed several JS errors in the console:
Uncaught SyntaxError: redeclaration of const gaugeElement <anonymous> http://localhost:8080/q/dev/io.quarkus.quarkus-resteasy-reactive/scores:247

And FYI we now throw an exception if a property is not found in an expression, just rebase this PR on master ;-).

perfect this is working
I did the alternative way you suggested :)

Uncaught SyntaxError: redeclaration of const gaugeElement http://localhost:8080/q/dev/io.quarkus.quarkus-resteasy-reactive/scores:247

Where you caught this, it's not showing on running mvn quarkus:dev nor in logs.

But yes I got the point, the JS snippet is in for loop and for each endpoint it is getting declared and do you know the JS snippet is working only for 1st time. after that I think it stops due to redeclaration of const gaugeElement

I think I need to declare const gaugeElement = document.querySelector(".gauge"); globally somewhere

Where you caught this, it's not showing on running mvn quarkus:dev nor in logs.

In the browser console, it's a JS error ;-)

Instead of const, made gaugeElement a variable and no issues in Console now :)

saumya1singh · 2021-03-05T13:13:00Z

Yesterday I tried several gauge designs, and finally decided to use this https://github.com/SaumyaSingh1/Responsive-Gauge-Pure-CSS. It has little bit of JS involved else pure CSS.

I guess I need to give more finishing in terms of margins, colors and styling but here is how the page is rn :

As you will observe, the Gauge is showing Full Green for 100% in only the 1st category which is correct. But for other gauges perhaps the JS Snippet is not working. well, it is working in the side project I made for gauge yesterday. Maybe I will need some help with the JS part :)

Filters is same : collapsible

saumya1singh · 2021-03-05T13:17:29Z

I am feeling like I have got too much Web Dev knowledge now. we learn more when we do things practically 🙈

geoand · 2021-03-05T13:20:51Z

Looking nice!

This may be a dump question: Why are the second and third gauges at 100% but not "fully loaded"?

saumya1singh · 2021-03-05T13:25:30Z

Looking nice!

This may be a dump question: Why are the second and third gauges at 100% but not "fully loaded"?

No this is the right question, this is what I explained above that screenshot

Writing here again :)

As you will observe, the Gauge is showing fully loaded for 100% in only the 1st category which is correct. But for other gauges perhaps the JS Snippet is not working. well, it is working in the side project I made for gauge yesterday.
I am checking this issue. Perhaps will need some help with the JS part :)

saumya1singh · 2021-03-05T13:37:55Z

And perhaps this conflict is due to #15406 that we merged in master. Tried manually resolving conflicts but ig I did something wrong

geoand · 2021-03-05T13:39:43Z

Fixing git conflicts is definitely an adventure the first few times :). After you've done it, it becomes easier :)

saumya1singh · 2021-03-08T10:07:12Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

+        </div>
+
+        {| <script>
+          var gaugeElement = document.querySelector(".gauge");


JS snippet is working fine, but only the 1st Gauge is loaded correctly, as we can see in this picture as well.
If there is a simple mistake I am making here, but not able to figure it out? @FroMage @phillip-kruger
I am sure this is not Qute issue.

Even in the personal demo project for Gauges, when I am adding for loop around the gauge part, other gauges(except 1st) are not getting correctly loaded.

Sorry I had replied yesterday but forgot to click send :(

ohh, no problem at all :)

phillip-kruger · 2021-03-08T10:08:12Z

I'll have a look a.s.a.p

FroMage · 2021-03-08T09:32:04Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

+            return;
+          }
+
+          gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`;


So I can tell you here that the issue is that this JS script is in a loop, so it will end up multiple times in the generated HTML. So you have multiple global variables called gaugeElement and setGaugeValue, which should not be a problem in JS, but the query selector you're doing gets called multiple times, and every time you call it, it applies to every element, not just this one.

So there are several ways to do this. My favourite is to set the diagnostic.score in a data attribute somewhere, and then use it in JS in a global single query call.

Something like:

<div class="gauge" data-score="{diagnostic.score}">

And then a single selector script pass at the end of the page:

for(var gauge in document.querySelectorAll(".gauge")){ setGaugeValue(gauge, gauge.getAttribute("data-score")); }

then a single selector script pass at the end of the page

End of the page meaning after all the for loops and just above the body tag 🤔

Yes, end of the body.

The best way to include a custom script for the DevUI is to do something akin to : https://github.com/quarkusio/quarkus/blob/master/extensions/vertx-http/deployment/src/main/resources/dev-templates/io.quarkus.quarkus-vertx-http/config.html#L27

FroMage · 2021-03-08T09:33:24Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

+          <tr>
+            <td style="width:30%;">Filters</td>
+            <td style="width:70%;">
+              <span class="badge badge-light" id="collapse-list" data-toggle="collapse" data-target="#filter">


Can we make the entire row clickable for expand/collapse? I hate tiny > buttons :)

saumya1singh · 2021-03-09T11:06:39Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

+          {#for diagnostic in diagnosticEntry.value}
+        <div class="col-4">
+        <div class="row">
+        <div class="gauge">


@FroMage
Here I already have a gauge class so is it a good idea to put the data-score here like :

<div class="gauge" data-score="{diagnostic.score}">

saumya1singh · 2021-03-09T11:36:23Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

-            <td style="width:70%;">
-              <span class="badge badge-light" id="collapse-list" data-toggle="collapse" data-target="#filter">
+            <td style="width:70%;" id="collapse-list" data-toggle="collapse" data-target="#filter">
+              <span class="badge badge-light">


Now with this new commit, the complete row is clickable :) But I didn't remove the icon >, should I @FroMage? I was not sure if a blank row will look nice :)

saumya1singh · 2021-03-09T11:38:42Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

 {/for}
+<script>


@FroMage I used the method of data attribute to fix that Gauge Loading issue but it's not giving desired results 🤔

FroMage · 2021-03-09T11:42:36Z

...y-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html

+            return;
+          }
+
+          gauge.querySelector(".gauge__fill").style.transform = `rotate(${value / 2}turn)`;


Well you need to get rid of this, as it will conflict with your end-of-body script

phillip-kruger · 2021-03-09T13:17:52Z

Hi @SaumyaSingh1 - can you share your example app (the one that you took the screenshots from)
Then I can have a quick look.
Thanks

saumya1singh · 2021-03-09T13:36:45Z

can you share your example app (the one that you took the screenshots from)

Hi @phillip-kruger, sure here is the separate repo that I used for Gauge Part - https://github.com/SaumyaSingh1/Responsive-Gauge-Pure-CSS

The screenshots of the score page are from this piece of code only that I am committing to branch issue-15322 :)

phillip-kruger · 2021-03-09T13:48:08Z

But you are using some Quarkus app to test against that branch ? That is what I am after :)

saumya1singh · 2021-03-09T13:55:16Z

But you are using some Quarkus app to test against that branch ? That is what I am after :)

oh, I see you are asking for the quarkus app the one I named as demoapp. Just a min, pushing it on Github :)

saumya1singh · 2021-03-09T14:00:18Z

@phillip-kruger Here is the Quarkus App - https://github.com/SaumyaSingh1/QuarkusDemoApp

phillip-kruger · 2021-03-09T14:02:02Z

Thanks. Looking at it now.

phillip-kruger · 2021-03-10T21:11:37Z

saumya1singh · 2021-03-11T04:32:01Z

This commit gave a beautiful finishing touch to the Scores Page 🎉
Thanks a lot, @phillip-kruger :)

The changes helped me understand what better I could have done, id part of the accordion was a must update :P

saumya1singh · 2021-03-11T12:45:21Z

Hi,

With these commits I did the following :

Removed "not needed details" from the Filter Name
Example: previously if the Filter Name was: Filters$GeneratedServerRequestFilter$sampleFilter_SubClass so now it is clearer Filters::sampleFilter
In firefox, the color change on Gauge was visible but not in chrome, that also fixed - thanks Phillip for the hints :)
Added different colors for Gauge Loading to have a stronger indication of the level (Red, Orange, Green) - Tested also with different score values

Can we have a final review for the Scores Page :)?
@FroMage @phillip-kruger

Filters Screenshot:

FroMage

Looks much better, thanks both of you!

phillip-kruger · 2021-03-11T13:32:33Z

Looks good !!

DEV UI: added accordion DEV UI: added gauge in scores screen, not final added gauge for scores part added gauge code DEV UI: added accordion, gauge filter complete row clickable, fixing gauge loading part Suggested changes to score page. Signed-off-by:Phillip Kruger <phillip.kruger@gmail.com> Fix chrome issue: use Transform Filter Name: Removed unnecessary data Added Different Colors to Gauge based on score value, Tested

gsmet · 2021-03-12T08:38:18Z

I force pushed to relaunch CI.

quarkus-bot bot added the area/resteasy-reactive label Mar 1, 2021

phillip-kruger approved these changes Mar 1, 2021

View reviewed changes

saumya1singh commented Mar 4, 2021

View reviewed changes

saumya1singh commented Mar 8, 2021

View reviewed changes

FroMage reviewed Mar 9, 2021

View reviewed changes

saumya1singh commented Mar 9, 2021

View reviewed changes

FroMage reviewed Mar 9, 2021

View reviewed changes

FroMage approved these changes Mar 11, 2021

View reviewed changes

saumya1singh force-pushed the issue-15322 branch from 7e4f429 to b36ad35 Compare March 11, 2021 14:21

saumya1singh marked this pull request as ready for review March 11, 2021 14:23

saumya1singh changed the title ~~WIP : DEV UI Enhancing the Scores Page in RESTEasy Reactive~~ DEV UI Enhancing the Scores Page in RESTEasy Reactive Mar 12, 2021

gsmet force-pushed the issue-15322 branch from b36ad35 to ff29e38 Compare March 12, 2021 08:38

FroMage merged commit 9612f82 into quarkusio:master Mar 12, 2021

quarkus-bot bot added this to the 1.13 - master milestone Mar 12, 2021

DEV UI Enhancing the Scores Page in RESTEasy Reactive #15384

DEV UI Enhancing the Scores Page in RESTEasy Reactive #15384

Conversation

saumya1singh commented Mar 1, 2021

geoand commented Mar 1, 2021

saumya1singh commented Mar 1, 2021

phillip-kruger commented Mar 1, 2021

saumya1singh commented Mar 1, 2021

phillip-kruger left a comment

Choose a reason for hiding this comment

gsmet commented Mar 1, 2021

saumya1singh commented Mar 1, 2021 • edited

phillip-kruger commented Mar 1, 2021

saumya1singh commented Mar 1, 2021

saumya1singh commented Mar 1, 2021

geoand commented Mar 2, 2021

saumya1singh commented Mar 2, 2021

geoand commented Mar 2, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saumya1singh commented Mar 5, 2021

saumya1singh commented Mar 5, 2021

geoand commented Mar 5, 2021

saumya1singh commented Mar 5, 2021

saumya1singh commented Mar 5, 2021

geoand commented Mar 5, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

phillip-kruger commented Mar 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saumya1singh Mar 9, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

phillip-kruger commented Mar 9, 2021

saumya1singh commented Mar 9, 2021 • edited

phillip-kruger commented Mar 9, 2021

saumya1singh commented Mar 9, 2021

saumya1singh commented Mar 9, 2021

phillip-kruger commented Mar 9, 2021

phillip-kruger commented Mar 10, 2021

saumya1singh commented Mar 11, 2021

saumya1singh commented Mar 11, 2021 • edited

FroMage left a comment

Choose a reason for hiding this comment

phillip-kruger commented Mar 11, 2021

gsmet commented Mar 12, 2021

saumya1singh commented Mar 1, 2021 •

edited

saumya1singh Mar 9, 2021 •

edited

saumya1singh commented Mar 9, 2021 •

edited

saumya1singh commented Mar 11, 2021 •

edited