Skip to content

Commit 4b9cf9c

Browse files
phi-gophi-go
authored
Update project-profile to be more consistent (#2211)
- Per Fuzzer table now has same width as other elements. - Added total lines ande covered lines for historical progression. - Added total functions for function code coverage. - Make plot y titles less likely to collide with y tick labels. Signed-off-by: phi-go <[email protected]>
1 parent 3c5f3c7 commit 4b9cf9c

File tree

1 file changed

+174
-65
lines changed

1 file changed

+174
-65
lines changed

‎tools/web-fuzzing-introspection/app/webapp/templates/project-profile.html‎

Lines changed: 174 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -132,51 +132,53 @@ <h2>Project: <a href="{{project_url}}"> {{ project.name }}</a></h2>
132132
</table>
133133

134134
{% if project.has_recent_results() %}
135-
<div style="max-height: 30rem; overflow: auto; margin-top: 1.5rem">
136-
<table class="profile__table" style="max-width: 80%;">
137-
<thead>
138-
<th style="padding: 0 0.5rem;">Fuzzer</th>
139-
<th style="padding: 0 0.5rem;">Code coverage (lines)</th>
140-
<th style="padding: 0 0.5rem;">Latest Report</th>
141-
<th style="padding: 0 0.5rem;">Comments</th>
142-
</thead>
143-
<tbody>
144-
{% for fuzzer, fuzzer_data in project.recent_results.items()
145-
|sort(attribute='0')
146-
|sort(reverse=true, attribute='1.got_lost,1.has_degraded')
147-
%}
148-
<tr
149-
{% if fuzzer_data['got_lost'] or fuzzer_data['max_has_degraded'] %}
150-
class="alert alert-danger" role="alert"
151-
{% endif %}
152-
>
153-
<td style="padding: 0 0.5rem;">
154-
{{fuzzer}} (<a href="#perFuzzerCoverageLinesOverTimePlot{{ fuzzer_data['hashed_name'] }}">plot</a>)
155-
</td>
156-
<td style="padding: 0 0.5rem;">
157-
<code style="color: unset; white-space: nowrap;">
158-
{{ fuzzer_data['current'] }}% (avg: {{ fuzzer_data['avg'] }}%, max: {{ fuzzer_data['max'] }}%)
159-
</code>
160-
</td>
161-
<td style="padding: 0 0.5rem;">
162-
<a href="{{fuzzer_data['report_url']}}">{{ fuzzer_data['report_date'] }}</a>
163-
</td>
164-
<td style="padding: 0 0.5rem;">
165-
{% if fuzzer_data['got_lost'] %}
166-
Fuzzer no longer available!<br>
135+
<div class="container">
136+
<div style="max-height: 30rem; overflow: auto; margin-top: 1.5rem">
137+
<table style="width: 100%;">
138+
<thead>
139+
<th style="padding: 0 0.5rem;">Fuzzer</th>
140+
<th style="padding: 0 0.5rem;">Code coverage (lines)</th>
141+
<th style="padding: 0 0.5rem;">Latest Report</th>
142+
<th style="padding: 0 0.5rem;">Comments</th>
143+
</thead>
144+
<tbody>
145+
{% for fuzzer, fuzzer_data in project.recent_results.items()
146+
|sort(attribute='0')
147+
|sort(reverse=true, attribute='1.got_lost,1.has_degraded')
148+
%}
149+
<tr
150+
{% if fuzzer_data['got_lost'] or fuzzer_data['max_has_degraded'] %}
151+
class="alert alert-danger" role="alert"
167152
{% endif %}
168-
{% if fuzzer_data['max_has_degraded'] %}
169-
Coverage has degraded!<br>
170-
{% endif %}
171-
{% for day_degraded in fuzzer_data['days_degraded'] %}
172-
Degraded from <a href="{{ day_degraded['before_url'] }}">{{day_degraded['before_date']}} ({{day_degraded['before_perc']}}%)</a>
173-
to <a href="{{ day_degraded['current_url'] }}">{{day_degraded['current_date']}} ({{day_degraded['current_perc']}}%)</a>!<br>
174-
{% endfor %}
175-
</td>
176-
</tr>
177-
{% endfor %}
178-
</tbody>
179-
</table>
153+
>
154+
<td style="padding: 0 0.5rem;">
155+
{{fuzzer}} (<a href="#perFuzzerCoverageLinesOverTimePlot{{ fuzzer_data['hashed_name'] }}">plot</a>)
156+
</td>
157+
<td style="padding: 0 0.5rem;">
158+
<code style="color: unset; white-space: nowrap;">
159+
{{ fuzzer_data['current'] }}% (avg: {{ fuzzer_data['avg'] }}%, max: {{ fuzzer_data['max'] }}%)
160+
</code>
161+
</td>
162+
<td style="padding: 0 0.5rem;">
163+
<a href="{{fuzzer_data['report_url']}}">{{ fuzzer_data['report_date'] }}</a>
164+
</td>
165+
<td style="padding: 0 0.5rem;">
166+
{% if fuzzer_data['got_lost'] %}
167+
Fuzzer no longer available!<br>
168+
{% endif %}
169+
{% if fuzzer_data['max_has_degraded'] %}
170+
Coverage has degraded!<br>
171+
{% endif %}
172+
{% for day_degraded in fuzzer_data['days_degraded'] %}
173+
Degraded from <a href="{{ day_degraded['before_url'] }}">{{day_degraded['before_date']}} ({{day_degraded['before_perc']}}%)</a>
174+
to <a href="{{ day_degraded['current_url'] }}">{{day_degraded['current_date']}} ({{day_degraded['current_perc']}}%)</a>!<br>
175+
{% endfor %}
176+
</td>
177+
</tr>
178+
{% endfor %}
179+
</tbody>
180+
</table>
181+
</div>
180182
</div>
181183
{% endif %}
182184

@@ -322,7 +324,10 @@ <h1 class="section__title">
322324
// Plot for code coverage in terms of lines over time
323325
const code_coverage_lines_x = [];
324326
const code_coverage_lines_y = [];
327+
const code_coverage_lines_covered = [];
328+
const code_coverage_lines_total = [];
325329
const code_coverage_functions_y = [];
330+
const code_coverage_functions_total = [];
326331
const code_reachability_y = [];
327332
const fuzzer_count_y = [];
328333
max_fuzzer_count = 0;
@@ -332,28 +337,87 @@ <h1 class="section__title">
332337
{% if project_timestamp.coverage_data != None %}
333338
code_coverage_lines_x.push('{{project_timestamp.date}}');
334339
code_coverage_lines_y.push({{project_timestamp.coverage_data.line_coverage.percent}});
340+
code_coverage_lines_covered.push({{project_timestamp.coverage_data.line_coverage.covered}});
341+
code_coverage_lines_total.push({{project_timestamp.coverage_data.line_coverage.count}});
335342
fuzzer_count_y.push({{project_timestamp.fuzzer_count}});
336343
max_fuzzer_count = Math.max(max_fuzzer_count, {{project_timestamp.fuzzer_count}});
337344

338345
// Stats dependending on fuzz introspector
339346
{% if project.has_introspector() %}
340347
code_coverage_functions_y.push({{project_timestamp.introspector_data.functions_covered_estimate}});
348+
code_coverage_functions_total.push({{project_timestamp.introspector_data.function_count}});
341349
code_reachability_y.push({{project_timestamp.introspector_data.static_reachability}});
342350
{% endif %}
343351
{% endif %}
344352
{%endfor%}
345353

346354
// Plot for code coverage in terms of lines over time
347-
const code_coverage_lines_data = [{
348-
x: code_coverage_lines_x,
349-
y: code_coverage_lines_y,
350-
mode:'lines'
351-
}];
355+
const code_coverage_lines_data = [
356+
{
357+
x: code_coverage_lines_x,
358+
y: code_coverage_lines_y,
359+
mode:'lines',
360+
name: 'Percentage',
361+
line: {
362+
dash: 'solid',
363+
width: 2,
364+
},
365+
},
366+
{
367+
x: code_coverage_lines_x,
368+
y: code_coverage_lines_covered,
369+
mode:'lines',
370+
yaxis: 'y2',
371+
name: 'Covered Lines',
372+
line: {
373+
dash: 'dash',
374+
width: 2,
375+
},
376+
},
377+
{
378+
x: code_coverage_lines_x,
379+
y: code_coverage_lines_total,
380+
mode:'lines',
381+
yaxis: 'y2',
382+
name: 'Total Lines',
383+
line: {
384+
dash: 'dash',
385+
width: 2,
386+
},
387+
},
388+
];
352389
const code_coverage_lines_layout = {
353-
xaxis: {title: 'Date'},
354-
yaxis: {title: 'Coverage', range: [0.0, 100.0]},
355-
title: 'Code Coverage (lines) %',
356-
type: 'scatter'
390+
xaxis: { title: 'Date' },
391+
yaxis: {
392+
title: {
393+
text: 'Coverage %',
394+
standoff: 40,
395+
},
396+
range: [0.0, 100.0],
397+
side: 'left',
398+
ticklabelposition: 'inside',
399+
},
400+
yaxis2: {
401+
title: {
402+
text: 'Coverage Totals',
403+
standoff: 35,
404+
},
405+
anchor: 'x',
406+
overlaying: 'y',
407+
side: 'left',
408+
ticklabelposition: 'outside',
409+
rangemode: 'tozero',
410+
autorange: true,
411+
},
412+
title: 'Code Coverage (lines)',
413+
legend: {
414+
orientation: 'h',
415+
x: 0.5,
416+
xanchor: 'center',
417+
y: -0.25,
418+
yanchor: 'top',
419+
traceorder: 'normal',
420+
},
357421
};
358422
Plotly.newPlot('codeCoverageLinesOverTimePlot', code_coverage_lines_data, code_coverage_lines_layout);
359423

@@ -454,7 +518,7 @@ <h1 class="section__title">
454518
yaxis: {
455519
title: {
456520
text: 'Coverage %',
457-
standoff: 20,
521+
standoff: 40,
458522
},
459523
range: [0.0, 100.0],
460524
side: 'left',
@@ -463,7 +527,7 @@ <h1 class="section__title">
463527
yaxis2: {
464528
title: {
465529
text: 'Coverage Totals',
466-
standoff: 15,
530+
standoff: 35,
467531
},
468532
anchor: 'x',
469533
overlaying: 'y',
@@ -489,7 +553,7 @@ <h1 class="section__title">
489553
orientation: 'h',
490554
x: 0.5,
491555
xanchor: 'center',
492-
y: -0.22,
556+
y: -0.25,
493557
yanchor: 'top',
494558
traceorder: 'normal',
495559
},
@@ -501,16 +565,61 @@ <h1 class="section__title">
501565
{% if project.has_introspector() %}
502566
// Plots dependend on Fuzz Introspector
503567
// Plot for code coverage in terms of functions over time
504-
const code_coverage_functions_data = [{
505-
x: code_coverage_lines_x,
506-
y: code_coverage_functions_y,
507-
mode:'lines'
508-
}];
568+
const code_coverage_functions_data = [
569+
{
570+
x: code_coverage_lines_x,
571+
y: code_coverage_functions_y,
572+
mode:'lines',
573+
name: 'Percentage',
574+
line: {
575+
dash: 'solid',
576+
width: 2,
577+
},
578+
},
579+
{
580+
x: code_coverage_lines_x,
581+
y: code_coverage_functions_total,
582+
mode:'lines',
583+
yaxis: 'y2',
584+
name: 'Total Functions',
585+
line: {
586+
dash: 'dash',
587+
width: 2,
588+
},
589+
},
590+
];
509591
const code_coverage_functions_layout = {
510-
xaxis: {title: 'Date'},
511-
yaxis: {title: 'Coverage', range: [0.0, 100.0]},
512-
title: 'Code Coverage (functions) %',
513-
type: 'scatter'
592+
xaxis: { title: 'Date' },
593+
yaxis: {
594+
title: {
595+
text: 'Coverage %',
596+
standoff: 40,
597+
},
598+
range: [0.0, 100.0],
599+
side: 'left',
600+
ticklabelposition: 'inside',
601+
},
602+
yaxis2: {
603+
title: {
604+
text: 'Function Totals',
605+
standoff: 35,
606+
},
607+
anchor: 'x',
608+
overlaying: 'y',
609+
side: 'left',
610+
ticklabelposition: 'outside',
611+
rangemode: 'tozero',
612+
autorange: true,
613+
},
614+
title: 'Code Coverage (functions)',
615+
legend: {
616+
orientation: 'h',
617+
x: 0.5,
618+
xanchor: 'center',
619+
y: -0.25,
620+
yanchor: 'top',
621+
traceorder: 'normal',
622+
},
514623
};
515624
Plotly.newPlot('codeCoverageFunctionsOverTimePlot', code_coverage_functions_data, code_coverage_functions_layout);
516625

0 commit comments

Comments
 (0)