Resolve #3455062 "Modernise sensor summary"

Closes #3455062

templates/monitoring-overview-summary.html.twig

@@ -8,19 +8,32 @@
 #}
 
 <div class="monitoring-overview-summary">
-  {% trans %}<span class="monitoring-summary-time">Request execution time: <strong>{{ time_non_cached }}ms</strong> (including cached <strong>{{ time_total }}ms</strong>)</span>, <span class="monitoring-summary-ok">&nbsp;</span> {{ ok }} OK, <span class="monitoring-summary-info">&nbsp;</span> {{ info }} Info, <span class="monitoring-summary-warning">&nbsp;</span> {{ warning }} Warning, <span class="monitoring-summary-critical">&nbsp;</span> {{ critical }} Critical, <span class="monitoring-summary-unknown">&nbsp;</span> {{ unknown }} Unknown{% endtrans %}
-</div>
+  <div class="monitoring-overview-summary__timing">
+    {{ 'Request execution time: @time_non_cachedms (including cached @time_totalms)'|t({'@time_total': time_total, '@time_non_cached': time_non_cached }) }}
+  </div>
+  <div class="monitoring-overview-summary__statuses">
+    <div class="monitoring-summary-statuses">
+      <span class="monitoring-summary-status monitoring-summary-status__ok">{{ '@count OK'|t({'@count': ok }) }}</span>
+      <span class="monitoring-summary-status monitoring-summary-status__info">{{ '@count Info'|t({'@count': info }) }}</span>
+      <span class="monitoring-summary-status monitoring-summary-status__warning">{{ '@count Warning'|t({'@count': warning }) }}</span>
+      <span class="monitoring-summary-status monitoring-summary-status__critical">{{ '@count Critical'|t({'@count': critical }) }}</span>
+      <span class="monitoring-summary-status monitoring-summary-status__unknown">{{ '@count Unknown'|t({'@count': unknown }) }}</span>
+    </div>
+  </div>
 
-{% if has_force_run_permission %}
-<div class="monitoring-overview-summary-actions-right">
- <a href="{{ path('monitoring.force_run_all') }}" class="button button-action button--primary button--small">{{ 'Force execute all'|t }}</a>
-</div>
-{% endif %}
+  {% if has_force_run_permission %}
+  <div class="monitoring-overview-summary__refresh">
+    <a href="{{ path('monitoring.force_run_all') }}" class="button button-action button--primary button--small">
+      {{ 'Force execute all'|t }}
+    </a>
+  </div>
+  {% endif %}
 
-<div class="monitoring-overview-summary-actions-right">
-{% if oldest_sensor_label %}
-  {% trans %}Sensor {{ oldest_sensor_label|placeholder }} ({{ oldest_sensor_category|placeholder }}) cached before {{ oldest_sensor_called_before }}{% endtrans %}
-{% else %}
-  {{ 'No sensor cached.'|t }}
-{% endif %}
+  <div class="monitoring-overview-summary__caching">
+  {% if oldest_sensor_label %}
+    {{ 'Sensor %oldest_sensor_label (%oldest_sensor_category) cached before %oldest_sensor_called_before'|t({'%oldest_sensor_label': oldest_sensor_label, '%oldest_sensor_category': oldest_sensor_category, '%oldest_sensor_called_before': oldest_sensor_called_before }) }}
+  {% else %}
+    {{ 'No sensor cached.'|t }}
+  {% endif %}
+  </div>
 </div>