Change profiling section to use Bootstrap's card

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth 2023-06-03 11:34:12 -03:00
parent 827d8de28f
commit caf13bd4b7
No known key found for this signature in database
GPG Key ID: 6A16FD38AFC89CC8

View File

@ -1,95 +1,74 @@
<fieldset class="pma-fieldset">
<legend>{% trans 'Profiling' %}</legend>
<div class="float-start mx-2">
<h3>{% trans 'Detailed profile' %}</h3>
<table class="table table-sm table-striped" id="profiletable">
<thead>
<tr>
<th>
{% trans 'Order' %}
<div class="sorticon"></div>
</th>
<th>
{% trans 'State' %}
<div class="sorticon"></div>
</th>
<th>
{% trans 'Time' %}
<div class="sorticon"></div>
</th>
</tr>
</thead>
<tbody>
{% for state in profiling.profile %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ state.status }}</td>
<td class="text-end">
{{ state.duration }}s
<span class="rawvalue hide">{{ state.duration_raw }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="container">
<div class="card mb-3">
<div class="card-header">{% trans 'Profiling' %}</div>
<div class="card-body">
<div class="row">
<div class="col">
<h3>{% trans 'Detailed profile' %}</h3>
<table class="table table-sm table-striped" id="profiletable">
<thead>
<tr>
<th>{% trans 'Order' %} <div class="sorticon"></div></th>
<th>{% trans 'State' %} <div class="sorticon"></div></th>
<th>{% trans 'Time' %} <div class="sorticon"></div></th>
</tr>
</thead>
<tbody>
{% for state in profiling.profile %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ state.status }}</td>
<td class="text-end">
{{ state.duration }}s
<span class="rawvalue hide">{{ state.duration_raw }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="float-start mx-2">
<h3>{% trans 'Summary by state' %}{{ show_mysql_docu('general-thread-states') }}</h3>
<table class="table table-sm table-striped" id="profilesummarytable">
<thead>
<tr>
<th>
{% trans 'State' %}
<div class="sorticon"></div>
</th>
<th>
{% trans 'Total Time' %}
<div class="sorticon"></div>
</th>
<th>
{% trans '% Time' %}
<div class="sorticon"></div>
</th>
<th>
{% trans 'Calls' %}
<div class="sorticon"></div>
</th>
<th>
{% trans 'ø Time' %}
<div class="sorticon"></div>
</th>
</tr>
</thead>
<tbody>
{% for name, stats in profiling.states %}
<tr>
<td>{{ name }}</td>
<td class="text-end">
{{ format_number(stats.total_time, 3, 1) }}s
<span class="rawvalue hide">{{ stats.total_time }}</span>
</td>
<td class="text-end">
{{ format_number(100 * (stats.total_time / profiling.total_time), 0, 2) }}%
</td>
<td class="text-end">{{ stats.calls }}</td>
<td class="text-end">
{{ format_number(stats.total_time / stats.calls, 3, 1) }}s
<span class="rawvalue hide">
{{ (stats.total_time / stats.calls)|number_format(8, '.', '') }}
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class='clearfloat'></div>
<div class="col">
<h3>{% trans 'Summary by state' %}{{ show_mysql_docu('general-thread-states') }}</h3>
<table class="table table-sm table-striped" id="profilesummarytable">
<thead>
<tr>
<th>{% trans 'State' %} <div class="sorticon"></div></th>
<th>{% trans 'Total Time' %} <div class="sorticon"></div></th>
<th>{% trans '% Time' %} <div class="sorticon"></div></th>
<th>{% trans 'Calls' %} <div class="sorticon"></div></th>
<th>{% trans 'ø Time' %} <div class="sorticon"></div></th>
</tr>
</thead>
<tbody>
{% for name, stats in profiling.states %}
<tr>
<td>{{ name }}</td>
<td class="text-end">
{{ format_number(stats.total_time, 3, 1) }}s
<span class="rawvalue hide">{{ stats.total_time }}</span>
</td>
<td class="text-end">
{{ format_number(100 * (stats.total_time / profiling.total_time), 0, 2) }}%
</td>
<td class="text-end">{{ stats.calls }}</td>
<td class="text-end">
{{ format_number(stats.total_time / stats.calls, 3, 1) }}s
<span class="rawvalue hide">{{ (stats.total_time / stats.calls)|number_format(8, '.', '') }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div id="profilingChartData" class="hide">
{{- profiling.chart|json_encode() -}}
<div class="col">
<div id="profilingChartData" class="hide">{{ profiling.chart|json_encode() }}</div>
<div id="profilingchart" class="hide"></div>
</div>
</div>
</div>
</div>
<div id="profilingchart" class="hide"></div>
<script type="text/javascript">
window.AJAX.registerOnload('sql.js', function () {
@ -97,4 +76,4 @@
Sql.initProfilingTables();
});
</script>
</fieldset>
</div>