[mod] /stats: simple theme implementation

searx/static/themes/simple/css/searx-rtl.css

@@ -1,4 +1,4 @@
-/*! searx | 21-04-2021 |  */
+/*! searx | 23-04-2021 |  */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
@@ -1153,6 +1153,25 @@ select:focus {
     transform: rotate(360deg);
   }
 }
+/* -- engine-tooltip -- */
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+  text-align: left;
+}
+th:hover .engine-tooltip,
+td:hover .engine-tooltip,
+.engine-tooltip:hover {
+  display: inline-block;
+}
 /* -- stacked bar chart -- */
 .stacked-bar-chart {
   margin: 0;
@@ -1216,6 +1235,24 @@ select:focus {
   padding: 0.4rem 0;
   width: 1px;
 }
+.stacked-bar-chart-serie1 {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: unset;
+  background: #5bc0de;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  padding: 0.4rem 0;
+}
+.stacked-bar-chart-serie2 {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: unset;
+  background: #deb15b;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  padding: 0.4rem 0;
+}
 /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
 .autocomplete {
   position: absolute;
@@ -1494,23 +1531,6 @@ select:focus {
 #main_preferences div.selectable_url pre {
   width: 100%;
 }
-#main_preferences .engine-tooltip {
-  display: none;
-  position: absolute;
-  padding: 0.5rem 1rem;
-  margin: 0rem 0 0 2rem;
-  border: 1px solid #ddd;
-  background: white;
-  font-size: 14px;
-  font-weight: normal;
-  z-index: 1000000;
-  text-align: left;
-}
-#main_preferences th:hover .engine-tooltip,
-#main_preferences td:hover .engine-tooltip,
-#main_preferences .engine-tooltip:hover {
-  display: inline-block;
-}
 @media screen and (max-width: 75em) {
   .preferences_back {
     clear: both;

searx/static/themes/simple/css/searx.css

@@ -1,4 +1,4 @@
-/*! searx | 21-04-2021 |  */
+/*! searx | 23-04-2021 |  */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
@@ -1153,6 +1153,25 @@ select:focus {
     transform: rotate(360deg);
   }
 }
+/* -- engine-tooltip -- */
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+  text-align: left;
+}
+th:hover .engine-tooltip,
+td:hover .engine-tooltip,
+.engine-tooltip:hover {
+  display: inline-block;
+}
 /* -- stacked bar chart -- */
 .stacked-bar-chart {
   margin: 0;
@@ -1216,6 +1235,24 @@ select:focus {
   padding: 0.4rem 0;
   width: 1px;
 }
+.stacked-bar-chart-serie1 {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: unset;
+  background: #5bc0de;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  padding: 0.4rem 0;
+}
+.stacked-bar-chart-serie2 {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: unset;
+  background: #deb15b;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  padding: 0.4rem 0;
+}
 /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
 .autocomplete {
   position: absolute;
@@ -1494,23 +1531,6 @@ select:focus {
 #main_preferences div.selectable_url pre {
   width: 100%;
 }
-#main_preferences .engine-tooltip {
-  display: none;
-  position: absolute;
-  padding: 0.5rem 1rem;
-  margin: 0rem 0 0 2rem;
-  border: 1px solid #ddd;
-  background: white;
-  font-size: 14px;
-  font-weight: normal;
-  z-index: 1000000;
-  text-align: left;
-}
-#main_preferences th:hover .engine-tooltip,
-#main_preferences td:hover .engine-tooltip,
-#main_preferences .engine-tooltip:hover {
-  display: inline-block;
-}
 @media screen and (max-width: 75em) {
   .preferences_back {
     clear: both;

searx/static/themes/simple/js/searx.head.min.js

@@ -1,4 +1,4 @@
-/*! simple/searx.min.js | 21-04-2021 |  */
+/*! simple/searx.min.js | 23-04-2021 |  */
 
 (function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searx={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations"))};e.getElementsByTagName("html")[0].className=t.searx.touch?"js touch":"js"})(window,document);
 //# sourceMappingURL=searx.head.min.js.map

searx/static/themes/simple/less/preferences.less

@@ -93,24 +93,6 @@
       width: 100%;
     }
   }
-
-
-  .engine-tooltip {
-    display: none;
-    position: absolute;
-    padding: 0.5rem 1rem;
-    margin: 0rem 0 0 2rem;
-    border: 1px solid #ddd;
-    background: white;
-    font-size: 14px;
-    font-weight: normal;
-    z-index: 1000000; 
-    text-align: left;
-  }
-
-  th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
-    display: inline-block;
-  }
   
 }
 

searx/static/themes/simple/less/toolkit.less

@@ -475,6 +475,25 @@ select {
     }
 }
 
+/* -- engine-tooltip -- */
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000; 
+  text-align: left;
+}
+
+th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
+  display: inline-block;
+}
+
 /* -- stacked bar chart -- */
 .stacked-bar-chart {
   margin: 0;
@@ -532,3 +551,17 @@ select {
   padding: 0.4rem 0;
   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;
+}

searx/templates/oscar/stats.html

@@ -1,15 +1,5 @@
 {% extends "oscar/base.html" %}
-{% block styles %}
-    <style>
-        #engine-times {
-          --labels-size: 20rem;
-        }
 
-        #engine-times th {
-            text-align: right;
-        }
-    </style>
-{% endblock %}
 {% block title %}{{ _('stats') }} - {% endblock %}
 
 {%- macro th_sort(column_order, column_name) -%}
@@ -45,7 +35,7 @@
                             <td style="text-align: right;">
                                 {% if engine_stat.score %}
                                 <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
-                                <div class="engine-tooltip text-left" role="tooltip" id="{{engine_name}}_score">{{- "" -}}
+                                <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
                                     <p>{{ _('Scores per result') }}: {{ engine_stat.score_per_result | round(3) }}</p>
                                 </div>
                                 {% endif %}
@@ -53,7 +43,7 @@
                             <td>
                                 {%- if engine_stat.result_count -%}
                                 <span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
-                                <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_chart_result_count" aria-hidden="true">{{- "" -}}
+                                <span class="stacked-bar-chart" 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>{{- "" -}}
                                 </span>
                                 {%- endif -%}
@@ -61,11 +51,11 @@
                             <td>
                                 {%- 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}}_chart" aria-hidden="true">{{- "" -}}
+                                <span class="stacked-bar-chart" 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>{{- "" -}}
                                     <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
                                 </span>{{- "" -}}
-                                <div class="engine-tooltip text-left" role="tooltip" id="{{engine_name}}_chart">{{- "" -}}
+                                <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                                     <table class="table table-striped">
                                         <tr>
                                             <th scope="col"></th>

searx/templates/simple/stats.html

@@ -1,4 +1,15 @@
+{% from 'simple/macros.html' import icon %}
+
 {% extends "simple/base.html" %}
+
+{%- macro th_sort(column_order, column_name) -%}
+    {% if column_order==sort_order %}
+        {{ column_name }} {{ icon('arrow-dropdown') }}
+    {% else %}
+        <a href="{{ url_for('stats', sort=column_order) }}">{{ column_name }}
+    {% endif %}
+{%- endmacro -%}
+
 {% block head %} {% endblock %}
 {% block content %}
 
@@ -6,20 +17,77 @@
 
 <h2>{{ _('Engine stats') }}</h2>
 
-{% for stat_name,stat_category in stats %}
-<div class="left">
-    <table>
-        <tr colspan="3">
-            <th>{{ stat_name }}</th>
-        </tr>
-        {% for engine in stat_category %}
-        <tr>
-            <td>{{ engine.name }}</td>
-            <td>{{ '%.02f'|format(engine.avg) }}</td>
-            <td class="percentage"><div style="width: {{ engine.percentage }}%">&nbsp;</div></td>
-        </tr>
-        {% endfor %}
-    </table>
-</div>
-{% endfor %}
+{% if not engine_stats.get('time') %}
+{{ _('There is currently no data available. ') }}
+{% else %}
+<table style="max-width: 1280px; margin: 0 auto;">
+    <tr>
+        <th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
+        <th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
+        <th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
+        <th scope="col">{{ th_sort('time', _('Response time')) }}</th>
+        <th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
+    </tr>
+    {% for engine_stat in engine_stats.get('time', []) %}
+    <tr>
+        <td>{{ engine_stat.name }}</td>
+        <td style="text-align: right;">
+            {% if engine_stat.score %}
+            <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
+            <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
+                <p>{{ _('Scores per result') }}: {{ engine_stat.score_per_result | round(3) }}</p>
+            </div>
+            {% endif %}
+        </td>
+        <td>
+            {%- 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">{{- "" -}}
+                <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
+            </span>
+            {%- endif -%}
+        </td>
+        <td>
+            {%- 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">{{- "" -}}
+                <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
+                <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
+            </span>{{- "" -}}
+            <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
+                <table>
+                    <tr>
+                        <th scope="col"></th>
+                        <th scope="col">{{ _('Total') }}</th>
+                        <th scope="col">{{ _('HTTP') }}</th>
+                        <th scope="col">{{ _('Processing') }}</th>
+                    </tr>
+                    <tr>
+                        <th scope="col">{{ _('Median') }}</th>
+                        <td>{{ engine_stat.total }}</td>
+                        <td>{{ engine_stat.http }}</td>
+                        <td>{{ engine_stat.processing }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="col">{{ _('P80') }}</th>
+                        <td>{{ engine_stat.total_p80 }}</td>
+                        <td>{{ engine_stat.http_p80 }}</td>
+                        <td>{{ engine_stat.processing_p80 }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="col">{{ _('P95') }}</th>
+                        <td>{{ engine_stat.total_p95 }}</td>
+                        <td>{{ engine_stat.http_p95 }}</td>
+                        <td>{{ engine_stat.processing_p95 }}</td>
+                    </tr>
+                </table>
+            </div>
+            {%- endif -%}
+        </td>
+        <td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
+    </tr>
+    {% endfor %}
+</table>
+{% endif %}
+
 {% endblock %}