diff --git a/lib/hawat/blueprints/design_bs3/templates/_macros_chart.html b/lib/hawat/blueprints/design_bs3/templates/_macros_chart.html
index 93b0bbf4b9a72b976c6f0f09c558ca8be812b023..7d44a915ace2e38b6c28db6aee003a0c42fa441d 100644
--- a/lib/hawat/blueprints/design_bs3/templates/_macros_chart.html
+++ b/lib/hawat/blueprints/design_bs3/templates/_macros_chart.html
@@ -1035,6 +1035,7 @@
{%- if not _stats_var_name and permission_can('power') %}
{{ macros_site.render_sql_queries([], key=chsection[0]) }}
+ {{ macros_site.render_timemarks([], key=chsection[0], show_to_render_time=False) }}
{%- endif %}
<!-- Tab panel - BEGIN ---------------------------------------->
diff --git a/lib/hawat/blueprints/design_bs3/templates/_macros_site.html b/lib/hawat/blueprints/design_bs3/templates/_macros_site.html
index c9fabfb66bf96ecbce9254ed1a38021ce1505696..b4570eadfa5fa85eec826242d00778babcfb9e22 100644
--- a/lib/hawat/blueprints/design_bs3/templates/_macros_site.html
+++ b/lib/hawat/blueprints/design_bs3/templates/_macros_site.html
@@ -339,58 +339,69 @@
----------------------------------------------------------------------------- #}
-{%- macro render_timemarks(timemark_list) %}
+{%- macro render_timemarks(timemark_list, key = '', show_to_render_time=True) %}
{%- set dur_ns = {} %}
-{%- set total_duration = timemark_list[-1][0] - timemark_list[0][0] %}
+{%- if timemark_list %}
+ {%- set total_duration = timemark_list[-1][0] - timemark_list[0][0] %}
+{%- endif %}
<div class="alert alert-info">
<h3 class="panel-title">
- <a role="button" data-toggle="collapse" href="#timemark_list" aria-expanded="false" aria-controls="timemark_list">
+ <a role="button" data-toggle="collapse" href="#timemark_list{%- if key %}_{{ key }}{%- endif %}" aria-expanded="false" aria-controls="timemark_list{%- if key %}_{{ key }}{%- endif %}">
{{ get_icon('role-admin') }} {{ _('Time marks') }} {{ get_icon('expand') }}
</a>
</h3>
- <div id="timemark_list" class="collapse">
+ <div id="timemark_list{%- if key %}_{{ key }}{%- endif %}" class="collapse">
<hr>
- <table class="table table-condensed" style="background-color: white">
+ <table class="table table-condensed" data-title-mark-timestamp="{{ _('Mark timestamp: ') }}" data-title-time-difference="{{ _('Time difference from: ') }}" style="background-color: white">
+ <tbody>
{% for time_mark in timemark_list %}
- <tr{% if time_mark[2] == 'end' %} class="bg-danger"{% endif %}>
- <td>
- <strong>{{ time_mark[3] }}:{{ time_mark[2] }}:{{ time_mark[1] }}</strong>
- </td>
- <td>
- <span data-toggle="tooltip" title="{{ _('Mark timestamp: ') }}{{ time_mark[0].isoformat() }}">
- {{ get_icon('clock') }}
- </span>
+ <tr{% if time_mark[2] == 'end' %} class="bg-danger"{% endif %}>
+ <td>
+ <strong>{{ time_mark[3] }}:{{ time_mark[2] }}:{{ time_mark[1] }}</strong>
+ </td>
+ <td>
+ <span data-toggle="tooltip" title="{{ _('Mark timestamp: ') }}{{ time_mark[0].isoformat() }}">
+ {{ get_icon('clock') }}
+ </span>
{%- if loop.index0 != 0 %}
- {%- set time_mark_prev = timemark_list[loop.index0 - 1] %}
- <span data-toggle="tooltip" title="{{ _('Time difference from: ') }}{{ time_mark_prev[3] }}:{{ time_mark_prev[2] }}:{{ time_mark_prev[1] }}">
- {{ time_mark[0] - timemark_list[loop.index0 - 1][0] }} s
- {{ babel_format_percent((time_mark[0] - time_mark_prev[0])/total_duration) }}
- </span>
+ {%- set time_mark_prev = timemark_list[loop.index0 - 1] %}
+ <span data-toggle="tooltip" title="{{ _('Time difference from: ') }}{{ time_mark_prev[3] }}:{{ time_mark_prev[2] }}:{{ time_mark_prev[1] }}">
+ {{ time_mark[0] - timemark_list[loop.index0 - 1][0] }} s
+ {{ babel_format_percent((time_mark[0] - time_mark_prev[0])/total_duration) }}
+ </span>
{% endif %}
- </td>
- <td>
+ </td>
+ <td>
{% if time_mark[2] == 'end' %}
{%- set dur_key = '{}:begin:{}'.format(time_mark[3], time_mark[1]) %}
{%- if dur_key in dur_ns and dur_ns[dur_key] != timemark_list[loop.index0 - 1][0] %}
- <span data-toggle="tooltip" title="{{ _('Time difference from: ') }}{{ dur_key }}">
- {{ time_mark[0] - dur_ns[dur_key] }} s
- {{ babel_format_percent((time_mark[0] - dur_ns[dur_key])/total_duration) }}
- </span>
+ <span data-toggle="tooltip" title="{{ _('Time difference from: ') }}{{ dur_key }}">
+ {{ time_mark[0] - dur_ns[dur_key] }} s
+ {{ babel_format_percent((time_mark[0] - dur_ns[dur_key])/total_duration) }}
+ </span>
{%- endif %}
{%- elif time_mark[2] == 'begin' %}
{%- set dur_key = '{}:{}:{}'.format(time_mark[3], time_mark[2], time_mark[1]) %}
{%- set _dummy = dur_ns.update({dur_key: time_mark[0]}) %}
{%- endif %}
- </td>
- <td class="hidden-xs hidden-sm hidden-md">
- {{ time_mark[4] }}
- </td>
- </tr>
+ </td>
+ <td class="hidden-xs hidden-sm hidden-md">
+ {{ time_mark[4] }}
+ </td>
+ </tr>
{% endfor %}
+ </tbody>
</table>
<p>
- <strong>{{ _('Total duration') }}:</strong> {{ total_duration }}<br>
- <strong>{{ _('Duration to rendering time') }}:</strong> {{ get_datetime_utc() - timemark_list[0][0] }}<br>
+ <span>
+ <strong>{{ _('Total duration') }}:</strong>
+ <span id="total_duration{%- if key %}_{{ key }}{%- endif %}">{%- if timemark_list %}{{ total_duration }}{%- endif %}</span>
+ <br>
+ {%- if show_to_render_time %}
+ <strong>{{ _('Duration to rendering time') }}:</strong>
+ <span id="to_rendering_time{%- if key %}_{{ key }}{%- endif %}">{%- if timemark_list %}{{ get_datetime_utc() - timemark_list[0][0] }}{%- endif %}</span>
+ <br>
+ {%- endif %}
</p>
</div>
</div> <!-- /.well -->
diff --git a/lib/hawat/static/js/hawat-jquery.js b/lib/hawat/static/js/hawat-jquery.js
index ad8f5c899c89e3cb010b6da5e3708e4906890103..a377bdc14ca13918f3550bdd6502bd068d0bf215 100644
--- a/lib/hawat/static/js/hawat-jquery.js
+++ b/lib/hawat/static/js/hawat-jquery.js
@@ -244,6 +244,7 @@ $(function() {
let dict_key = event.target.getAttribute('data-dict-key');
render_sql_queries(data, dict_key);
+ render_time_marks(data, dict_key);
let stats = data['statistics'];
rendering_functions[dict_key].forEach(rendering_func => rendering_func(stats));
@@ -270,3 +271,76 @@ function render_sql_queries(data, dict_key ) {
$(`#query_list_${dict_key}`).parent().addClass('hidden');
}
}
+
+function ms_to_time_format(ms) {
+ return new Date(ms).toISOString().slice(11, 23);
+}
+
+function render_time_marks(data, dict_key) {
+ if (data.time_marks != undefined && $(`#timemark_list_${dict_key}`).length) {
+ let timemark_table = $(`#timemark_list_${dict_key} > table > tbody`).first();
+ timemark_table.html('');
+
+ // can be NaN
+ total_duration = new Date(data.time_marks[data.time_marks.length - 1][0]) - new Date(data.time_marks[0][0]);
+
+ let time_mark_prev = undefined;
+ let dur_ns = {};
+
+ for (const time_mark of data.time_marks) {
+ let time_difference = '';
+ if (time_mark_prev != undefined) {
+ time_difference = `
+ <span data-toggle="tooltip" title="${timemark_table.attr('data-title-time-difference')}${time_mark_prev[3]}:${time_mark_prev[2]}:${time_mark_prev[1]}">
+ ${ms_to_time_format(new Date(time_mark[0]) - new Date(time_mark_prev[0]))} s
+ ${((new Date(time_mark[0]) - new Date(time_mark_prev[0])) / total_duration).toLocaleString(undefined, {style: "percent"})}
+ </span>
+ `;
+ }
+
+ let dur_key = ''
+ let time_taken = ''
+ if (time_mark[2] == 'end') {
+ dur_key = `${time_mark[3]}:begin:${time_mark[1]}`;
+ if (dur_key in dur_ns && dur_ns[dur_key] != new Date(time_mark_prev[0])) {
+ time_taken = `
+ <span data-toggle="tooltip" title="${timemark_table.attr('data-title-time-difference')}${dur_key}">
+ ${ms_to_time_format(new Date(time_mark[0]) - dur_ns[dur_key])} s
+ ${((new Date(time_mark[0]) - dur_ns[dur_key]) / total_duration).toLocaleString(undefined, {style: "percent"})}
+ </span>
+ `;
+ }
+ } else {
+ dur_key = `${time_mark[3]}:${time_mark[2]}:${time_mark[1]}`
+ dur_ns[dur_key] = new Date(time_mark[0]);
+ }
+
+ timemark_table.append(`
+ <tr${time_mark[2] == 'end' ? ' class="bg-danger"' : ''}>
+ <td>
+ <strong>${time_mark[3]}:${time_mark[2]}:${time_mark[1]}</strong>
+ </td>
+ <td>
+ <span data-toggle="tooltip" title="${timemark_table.attr('data-title-mark-timestamp')}${time_mark[0]}">
+ <i class="fas fa-fw fa-clock"></i>
+ </span>
+ ${time_difference}
+ </td>
+ <td>
+ ${time_taken}
+ </td>
+ <td class="hidden-xs hidden-sm hidden-md">
+ ${time_mark[4]}
+ </td>
+ </tr>
+ `);
+
+ time_mark_prev = time_mark;
+ }
+
+ $(`#total_duration_${dict_key}`).html(ms_to_time_format(total_duration));
+ } else if ($(`#timemark_list_${dict_key}`).length){
+ console.log("'time_marks' not present, skipping");
+ $(`#timemark_list_${dict_key}`).parent().addClass('hidden')
+ }
+}