Skip to content

Commit

Permalink
Merge pull request #15384 from SaumyaSingh1/issue-15322
Browse files Browse the repository at this point in the history 
DEV UI Enhancing the Scores Page in RESTEasy Reactive
  • Loading branch information
@FroMage
FroMage authored Mar 12, 2021
2 parents b4cea41 + ff29e38 commit 9612f82
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 79 deletions.
299 changes: 220 additions & 79 deletions ...eactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-templates/scores.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,231 @@
{#include main}
{#title}Quarkus REST Score Console{/title}

{#style}
collapse-list{
cursor: pointer;
}
p{
text-align: right;
font-size:20px;
}

.scoregauge{
justify-content: center;
}
.gauge {
width: 100%;
max-width: 250px;
font-family: "Roboto", sans-serif;
font-size: 32px;
color: #004033;
}

.gauge__body {
width: 100%;
height: 0;
padding-bottom: 50%;
background: #b4c0be;
position: relative;
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
overflow: hidden;
}

.gauge__fill {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: 100%;
transform-origin: center top;
transition: transform 0.2s ease-out;
}

.gauge__cover {
width: 75%;
height: 150%;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
padding-bottom: 25%;
box-sizing: border-box;
}

.scorekey{
font-weight: bold;
font-size: 165%;
font-family: "Roboto", sans-serif;
}

.scoremessage{
font-size: 90%;
font-family: "Roboto", sans-serif;
display: block;
text-align: center;
padding: 15px;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
position: relative;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
code{
float: left;
font-size: 80%;
}
.styleBadge{
float: right;
}

.btn{
min-width: 100%;
}
.accordion{
align: center;
width: 99%;
margin-top: 2%;

}

.showfilters {
cursor: pointer;
}

.filterbox{
font-size: 0.9em;
background: #343a40;
color: white;
}

{/style}
{#script}
function setGaugeValue(gauge, value) {
if (value < 0 || value > 100) {
return;
}

var r;
if(value < 50){
r = "transform:rotate( " + value*2 + "grad);background: #DE4E46;";
}else if(value < 100){
r = "transform:rotate( " + value*2 + "grad);background: #F7C00F;";
}else{
r = "transform:rotate( " + value*2 + "grad);background: lightgreen;";
}

gauge.find(".gauge__fill").attr("style",r);
gauge.find(".gauge__cover").text(value + "%");
}

$(document).ready(function(){
$(".gauge").each(function(){
setGaugeValue($(this), $(this).attr("data-score"));
});
});

{/script}

{#body}
{#for endpoint in info:endpointScores.endpoints}
<div class="row">
<div class="col">
<code>{endpoint.httpMethod} {endpoint.fullPath}</code>
</div>
<div class="col-1">
<span class="badge badge-{#if endpoint.score < 50}danger{#else if endpoint.score < 100}warning{#else}success{/if}">{endpoint.score}/100</span>
</div>
</div>
{#if !endpoint.produces.isEmpty()}
<div class="row">
<div class="col-1"></div>
<div class="col-1">
Produces
</div>
<div class="col">
{endpoint.produces}
</div>
</div>
{/if}
{#if !endpoint.consumes.isEmpty()}
<div class="row">
<div class="col-1"></div>
<div class="col-1">
Consumes
</div>
<div class="col">
{endpoint.consumes}
</div>
</div>
{/if}
{#for diagnosticEntry in endpoint.diagnostics.entrySet()}
<div class="row">
<div class="col-1"></div>
<div class="col-1">
{diagnosticEntry.key}
</div>
</div>
{#for diagnostic in diagnosticEntry.value}
<div class="row">
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col">
{diagnostic.message}
</div>
<div class="col-1">
<span class="badge badge-{#if diagnostic.score < 50}danger{#else if diagnostic.score < 100}warning{#else}success{/if}">{diagnostic.score}/100</span>
</div>
</div>
{/for}
{/for}
<div class="row">
<div class="col-1"></div>
<div class="col-1">
Filters
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col">
<span class="badge badge-light" id="collapse-list" data-toggle="collapse" data-target="#filter">
<i class="fas fa-greater-than"></i>
</span>
</div>
<div class="accordion" id="endpointsAccordion">
{#for endpoint in info:endpointScores.endpoints}

<div class="card">

<div class="card-header" id="Heading{count}">
<button class="btn btn-block btn-lg collapsed" type="button" data-toggle="collapse"
data-target="#Line{count}" aria-expanded="false"
aria-controls="Line{count}">
<code>{endpoint.httpMethod} {endpoint.fullPath}</code>
<span class="styleBadge badge badge-{#if endpoint.score < 50}danger{#else if endpoint.score < 100}warning{#else}success{/if}">{endpoint.score}/100</span>
</button>
</div>

<div id="Line{count}" class="collapse" aria-labelledby="Heading{count}" data-parent="#endpointsAccordion">
<div class="card-body">

<div class="row">
{#for diagnosticEntry in endpoint.diagnostics.entrySet()}
{#for diagnostic in diagnosticEntry.value}
<div class="col-4">
<div class="row scoregauge">
<div class="gauge" data-score="{diagnostic.score}">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__cover"></div>
</div>
</div>
</div>

<div class="row scoregauge scorekey">
{diagnosticEntry.key}
</div>

<div class="row scoremessage">
{diagnostic.message}
</div>
</div>
{/for}
{/for}
</div>

<hr/>

<div class="row">
{#if !endpoint.produces.isEmpty()}
<div class="col-2" style="text-align: right;">
Produces:
</div>
<div class="col-10">
<span class="badge badge-primary">{endpoint.produces}</span>
</div>
{/if}
{#if !endpoint.consumes.isEmpty()}

<div class="col-2" style="text-align: right;">
Consumes:
</div>
<div class="col-10">
<span class="badge badge-primary">{endpoint.consumes}</span>
</div>
{/if}
{#if !endpoint.requestFilterEntries.isEmpty()}
<div class="col-2 showfilters" style="text-align: right;" data-toggle="collapse" data-target="#filter{count}">
Filters:
</div>
<div class="col-10 showfilters" data-toggle="collapse" data-target="#filter{count}">
<span class="badge badge-pill badge-secondary">{endpoint.requestFilterEntries.size}</span>
</div>

<div id="filter{count}" class="col-10 offset-2 filterbox collapse">
<samp class="text-wrap">
{#for requestFilters in endpoint.requestFilterEntries}
{requestFilters.getName}<br/>
{/for}
</samp>

</div>
{/if}
</div>
</div>
</div>
</div>
{#for requestFilters in endpoint.requestFilterEntries}
<div class="row">
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col">
<div id="filter" class="collapse">
<ul>
<li>{requestFilters.name}</li>
</ul>
</div>
</div>
</div>
{/for}
{/for}
{/for}
</div>
{/body}
{/include}
6 changes: 6 additions & 0 deletions ...ive/server/runtime/src/main/java/org/jboss/resteasy/reactive/server/util/ScoreSystem.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@ public static class RequestFilterEntry {
public final String name;
public final boolean preMatch;

public String getName() {
String removeSubClass = name.replace("_Subclass", "");
String finalFilterName = removeSubClass.replaceAll("\\$.*?\\$", "::");
return finalFilterName;
}

public RequestFilterEntry(String name, boolean preMatch) {
this.name = name;
this.preMatch = preMatch;
Expand Down

0 comments on commit 9612f82

Please sign in to comment.