{% extends "django_pev/base.html" %}
{% block content %}
{% load humanize %}
<div class="row">
    <div class="card mb-4 mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">Slow Queries</h4>
                    This page shows queries that consumed the most time in the database.
                    <p>
                    {% if not is_pg_stat_statements %}
                    <span class="bg-warning"> <b>PG Stat Statements extension is not enabled.</b></span>
                    {% endif %}
                </div>
            </div>
            <nav>
                <div class="nav nav-tabs mt-4" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-total-tab" data-coreui-toggle="tab" data-coreui-target="#nav-total" type="button" role="tab" aria-controls="nav-total" aria-selected="true">Total Time Taken</button>
                    <button class="nav-link" id="nav-io-tab" data-coreui-toggle="tab" data-coreui-target="#nav-io" type="button" role="tab" aria-controls="nav-io" aria-selected="false">Most IO</button>
                    <button class="nav-link" id="nav-slowest-tab" data-coreui-toggle="tab" data-coreui-target="#nav-slowest" type="button" role="tab" aria-controls="nav-slowest" aria-selected="false">Slowest Queries</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-total" role="tabpanel" aria-labelledby="nav-total-tab" tabindex="0">
                    <table  class="table">
                        <thead>
                            <tr>
                            <th scope="col">Total Time</th>
                            <th scope="col">Average Time</th>
                            <th scope="col">Calls</th>
                            <th scope="col">Calls/s</th>
                            <th scope="col">Rows/call</th>
                            <th scope="col">BLKS/s</th>
                            <th scope="col">BLKS/call</th>
                            <th scope="col">% of total BLKS</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in queries %}
                                <tr>
                                    <td>{{ row.total_time_formatted }} <small>({{row.total_percent_time |floatformat:2 }}%)</small></td>

                                    <td>{{ row.mean_time_formatted }} σ={{ row.stddev_time_formatted }} </td>
                                    <td>
                                        {{ row.calls |intcomma}}
                                    </td>
                                    <td>
                                        {{ row.calls_per_second |floatformat:1 |intcomma}}
                                    </td>
                                    <td>
                                        {{ row.rows_per_call|floatformat:1 |intcomma}}
                                    </td>
                                    <td>{{ row.shared_blks_per_second | floatformat:1 |intcomma}} </td>
                                    <td>{{ row.shared_blks_per_call|floatformat:1 |intcomma}} </td>
                                    <td>{{ row.total_percent_shared_blks|floatformat:2}} %</td>

                                </tr>
                                <tr>
                                    <td colspan="100%">
                                        <code>
                                            {{ row.query }}
                                        </code>
                                    </td>
                                </tr>
                            {% endfor%}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade " id="nav-io" role="tabpanel" aria-labelledby="nav-io-tab" tabindex="0">
                    <table  class="table">
                        <thead>
                            <tr>
                            <th scope="col">Total Time</th>
                            <th scope="col">Average Time</th>
                            <th scope="col">Calls</th>
                            <th scope="col">Calls/s</th>
                            <th scope="col">Rows/call</th>
                            <th scope="col">BLKS/s</th>
                            <th scope="col">BLKS/call</th>
                            <th scope="col">% of total BLKS</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in queries_by_io %}
                                <tr>
                                    <td>{{ row.total_time_formatted }} <small>({{row.total_percent_time |floatformat:2 }}%)</small></td>

                                    <td>{{ row.mean_time_formatted }} σ={{ row.stddev_time_formatted }} </td>
                                    <td>
                                        {{ row.calls |intcomma}}
                                    </td>
                                    <td>
                                        {{ row.calls_per_second |floatformat:1 |intcomma}}
                                    </td>
                                    <td>
                                        {{ row.rows_per_call|floatformat:1 |intcomma}}
                                    </td>
                                    <td>{{ row.shared_blks_per_second | floatformat:1 |intcomma}} </td>
                                    <td>{{ row.shared_blks_per_call|floatformat:1 |intcomma}} </td>
                                    <td>{{ row.total_percent_shared_blks|floatformat:2}} %</td>

                                </tr>
                                <tr>
                                    <td colspan="100%">
                                        <code>
                                            {{ row.query }}
                                        </code>
                                    </td>
                                </tr>
                            {% endfor%}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade " id="nav-slowest" role="tabpanel" aria-labelledby="nav-slowest-tab" tabindex="0">
                    <table  class="table">
                        <thead>
                            <tr>
                            <th scope="col">Total Time</th>
                            <th scope="col">Average Time</th>
                            <th scope="col">Calls</th>
                            <th scope="col">Calls/s</th>
                            <th scope="col">Rows/call</th>
                            <th scope="col">BLKS/s</th>
                            <th scope="col">BLKS/call</th>
                            <th scope="col">% of total BLKS</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in queries_by_slowest %}
                                <tr>
                                    <td>{{ row.total_time_formatted }} <small>({{row.total_percent_time |floatformat:2 }}%)</small></td>

                                    <td>{{ row.mean_time_formatted }} σ={{ row.stddev_time_formatted }} </td>
                                    <td>
                                        {{ row.calls |intcomma}}
                                    </td>
                                    <td>
                                        {{ row.calls_per_second |floatformat:1 |intcomma}}
                                    </td>
                                    <td>
                                        {{ row.rows_per_call|floatformat:1 |intcomma}}
                                    </td>
                                    <td>{{ row.shared_blks_per_second | floatformat:1 |intcomma}} </td>
                                    <td>{{ row.shared_blks_per_call|floatformat:1 |intcomma}} </td>
                                    <td>{{ row.total_percent_shared_blks|floatformat:2}} %</td>

                                </tr>
                                <tr>
                                    <td colspan="100%">
                                        <code>
                                            {{ row.query }}
                                        </code>
                                    </td>
                                </tr>
                            {% endfor%}
                        </tbody>
                    </table>
                </div>

            </div>

        </div>
        <div class="card-footer">
        </div>
    </div>
</div>
{% endblock %}