[fix] make /stats more CSP compliant - bar graph

Browse Source 
Replace bar graph's *styles* (see below) by CSP compliant implementation in
``searx/static/themes/__common__/less/stats.less`` ::

    ./simple/stats.html:49: <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
    ./simple/stats.html:57: <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
    ./simple/stats.html:58: <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
    ./oscar/stats.html:50:  <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
    ./oscar/stats.html:58:  <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
    ./oscar/stats.html:59:  <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}

Reported-by: https://github.com/searxng/searxng/issues/57
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2021-05-16 13:16:44 +02:00
parent 965817f294
commit cdfb4b7ff9
10 changed files with 62 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
searx/static/themes/__common__/less/stats.less Normal file
View File

@ -0,0 +1,38 @@
.bar-chart-value {
width: 3em;
}
.bar-chart-graph {
width: 300px;
}
.bar-chart-bar {
border: 3px solid #5bc0de;
margin: 1px 0;
}
.bar-chart-serie1 {
border: 3px solid #5bc0de;
margin: 1px 0;
float: left;
}
.bar-chart-serie2 {
border: 3px solid #deb15b;
margin: 1px 0;
float: left;
}
.bar0{
width: 0;
border: 0;
}
.generate-bar(100);
.generate-bar(@n, @i: 1) when (@i =< @n) {
.bar@{i} {
width: (@i * 100% / @n);
}
.generate-bar(@n, (@i + 1));
}

1
searx/static/themes/oscar/src/less/logicodev-dark/oscar.less
View File

@ -1,5 +1,6 @@
@import "../logicodev/variables.less"; @import "../logicodev/variables.less";
@import "../../../../__common__/less/new_issue.less"; @import "../../../../__common__/less/new_issue.less";
@import "../../../../__common__/less/stats.less";
@stacked-bar-chart: rgb(213, 216, 215, 1); @stacked-bar-chart: rgb(213, 216, 215, 1);

1
searx/static/themes/oscar/src/less/logicodev/oscar.less
View File

@ -1,5 +1,6 @@
@import "variables.less"; @import "variables.less";
@import "../../../../__common__/less/new_issue.less"; @import "../../../../__common__/less/new_issue.less";
@import "../../../../__common__/less/stats.less";
@import "navbar.less"; @import "navbar.less";
@import "footer.less"; @import "footer.less";

14
searx/static/themes/oscar/src/less/logicodev/preferences.less
View File

@ -89,17 +89,3 @@ td:hover .engine-tooltip, th:hover .engine-tooltip, .engine-tooltip:hover {
padding: 0.4rem 0; padding: 0.4rem 0;
width: 1px; width: 1px;
} }
.stacked-bar-chart-serie1 {
.stacked-bar-chart-base();
background: #5bc0de;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}
.stacked-bar-chart-serie2 {
.stacked-bar-chart-base();
background: #deb15b;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}

1
searx/static/themes/oscar/src/less/pointhi/oscar.less
View File

@ -1,5 +1,6 @@
@import "variables.less"; @import "variables.less";
@import "../../../../__common__/less/new_issue.less"; @import "../../../../__common__/less/new_issue.less";
@import "../../../../__common__/less/stats.less";
@import "footer.less"; @import "footer.less";
@import "checkbox.less"; @import "checkbox.less";

15
searx/static/themes/oscar/src/less/pointhi/preferences.less
View File

@ -77,18 +77,3 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
padding: 0.4rem 0; padding: 0.4rem 0;
width: 1px; width: 1px;
} }
.stacked-bar-chart-serie1 {
.stacked-bar-chart-base();
background: #5bc0de;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}
.stacked-bar-chart-serie2 {
.stacked-bar-chart-base();
background: #deb15b;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}

1
searx/static/themes/simple/less/style.less
View File

@ -7,6 +7,7 @@
@stacked-bar-chart: rgb(0, 0, 0); @stacked-bar-chart: rgb(0, 0, 0);
@import "../../__common__/less/new_issue.less"; @import "../../__common__/less/new_issue.less";
@import "../../__common__/less/stats.less";
@import "normalize.less"; @import "normalize.less";

14
searx/static/themes/simple/less/toolkit.less
View File

@ -551,17 +551,3 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
padding: 0.4rem 0; padding: 0.4rem 0;
width: 1px; width: 1px;
} }
.stacked-bar-chart-serie1 {
.stacked-bar-chart-base();
background: #5bc0de;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}
.stacked-bar-chart-serie2 {
.stacked-bar-chart-base();
background: #deb15b;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}

18
searx/templates/oscar/stats.html
View File

@ -45,19 +45,19 @@
</td> </td>
<td> <td>
{%- if engine_stat.result_count -%} {%- if engine_stat.result_count -%}
<span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}} <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
<span class="stacked-bar-chart" aria-hidden="true">{{- "" -}} <div class="bar-chart-graph" aria-hidden="true">
<span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}} <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
</span> </div>
{%- endif -%} {%- endif -%}
</td> </td>
<td> <td>
{%- if engine_stat.total -%} {%- if engine_stat.total -%}
<span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}} <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
<span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}} <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">
<span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}} <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
<span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}} <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
</span>{{- "" -}} </div>
<div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}} <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
<table class="table table-striped"> <table class="table table-striped">
<tr> <tr>

20
searx/templates/simple/stats.html
View File

@ -44,19 +44,21 @@
</td> </td>
<td> <td>
{%- if engine_stat.result_count -%} {%- if engine_stat.result_count -%}
<span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
<span class="stacked-bar-chart" aria-hidden="true">{{- "" -}} <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
<span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}} <div class="bar-chart-graph" aria-hidden="true">
</span> <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
</div>
{%- endif -%} {%- endif -%}
</td> </td>
<td> <td>
{%- if engine_stat.total -%} {%- if engine_stat.total -%}
<span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
<span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}} <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
<span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}} <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">
<span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}} <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
</span>{{- "" -}} <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
</div>
<div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}} <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
<table> <table>
<tr> <tr>