{% extends "base.html" %}

{% block title %}{{ gettext('Query Dashboard (query id: %s)' % (query_id,)) }}{% endblock %}

{% macro loading_element_html(unique_class, is_text_required, is_hidden) %}
<div class="pg-sp-container {{ unique_class }} {% if is_hidden %}d-none{% endif %}">
  <div class="pg-sp-content">
    <div class="row">
      <div class="col-12 pg-sp-icon"></div>
    </div>
    {% if is_text_required %}
    <div class="row">
      <div class="col-12 pg-sp-text pem-loading-text">
          {{ gettext('Loading...') }}
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endmacro %}


{% block body %}
<!-- Override the CSS for body defined in override.css -->
<style>
body {
    padding-top: 0px !important;
}
</style>

<div class="container-fluid perf-dashboard-container perf-dashboard-query-details">

    <div class="pd-dashboard-header">
        <div class="card">
            <div class="card-header d-flex p-0">
                <div class="pd-home" title="Performance Diagnostic">
                    <div class="fa fa-chart-line" role="img"></div>
                </div>
                <div class="pd-breadcrumb d-flex">
                    <div class="pd-header pt-1 pl-1">Performance Diagnostic</div>
                    <div class="right-arrow"></div>
                </div>
                <div class="pd-breadcrumb d-flex">
                    <div class="pd-server pt-1 pl-1">{{ serverName }}</div>
                    <div class="right-arrow"></div>
                </div>
            </div>
            <div class="card-body pt-2 pb-2">
                <div class="status-element d-flex">
                    <div class="d-flex my-auto mr-4">
                        <div class="text-gray-darker d-flex my-auto pl-2 pr-2">
                            <span class="my-auto pr-2">
                                <i class="fa fa-calendar-alt" role="img"></i>
                            </span> <span class="my-auto">Generated On</span>
                        </div>
                        <div class="d-flex my-auto">
                            <span>{{ report_time }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="perf-graph-container">
        {{ loading_element_html("waits-info-loading", False, False) }}
        <div class="row container-popup">
            <div class="col-12">
                <div class="obj_properties">
                    <legend class="badge">{{ gettext("Query information") }}</legend>
                </div>
            </div>
            <div class="col-12 container-popup">
                <div class="pd-container">
                    <div class="waits-info">
                        <div class="alert-container d-none">
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <strong>{{ gettext("Failed to render query waits details due to an error") }}</strong>
                                <br>
                                <strong>{{ gettext("Details: ") }}</strong>
                                <span class="alert-message"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="obj_properties">
                    <legend class="badge">{{ gettext("Wait event types") }}</legend>
                </div>
            </div>
            <div class="col-12">
                <div class="secondary-container wait_event_types" tabindex="0" role="object-document" aria-label="Performance diagnostics - wait event type chart">
                    <div class="perf-query-alert-container d-none">
                        <div class="alert alert-danger alert-dismissible fade show pg-panel-message" role="alert"></div>
                    </div>
                    <div class="row">
                        <div class="col-2 mt-3 wait_event_types_pie">
                        </div>
                        <div class="col-10 wait_event_types_bar">
                        </div>
                    </div>
                </div>
                <div class="legends-div w-100"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="obj_properties">
                    <legend class="badge">{{ gettext("Wait events") }}</legend>
                </div>
            </div>
            <div class="col-12">
                <div class="secondary-container wait_event_summary mb-2 mt-1" tabindex="0"
                    role="object-document"
                    aria-label="{{ gettext('Wait event Summary') }}">
                    <table class="table table-striped table-bordered table-hover w-100 wait_event_summary_table">
                        <caption class="caption-top">{{ gettext('Summary of the wait events') }} <a href="https://www.postgresql.org/docs/current/monitoring-stats.html#WAIT-EVENT-TABLE" target="_new">Read more</a></caption>
                        <thead>
                            <tr>
                                <th scope="col">{{ gettext('Wait event') }}</th>
                                <th scope="col">%</th>
                                <th scope="col" style="width: 75%;">#</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="text-center">{{ gettext('No wait event samples available!') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="secondary-container wait_event_samples mb-1 mt-1" tabindex="0"
                    role="object-document"
                    aria-label="{{ gettext('Performance diagnostics - wait event samples table') }}">
                    <table class="table table-striped table-bordered table-hover w-100 wait_event_samples_table">
                        <caption class="caption-top">{{ gettext('Wait event samples') }}</caption>
                        <thead>
                            <tr>
                                <th scope="col" style="width: 50%;">{{ gettext('Wait event') }}</th>
                                <th scope="col" style="width: 50%;">{{ gettext('Sample time') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="2" class="text-center">{{ gettext('No wait event samples available!') }}</td>
                                   
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block init_script %}
window.onload =  function() {
  try {
    require(['sources/generated/performance_diagnostic','sources/generated/codemirror'], function() {
      var perfDiag = pgAdmin.Browser.performanceDiagnostic;
      perfDiag.queryDashboard = perfDiag.intializeQueryDetails(
        {{ sid }}, {{ trans_id }}, '{{ query_id }}', '{{ sample_time }}',
        {{ open_window_preference }}
      );
    }, function() {
      console.warn(arguments);
    });
  } catch (err) {
    /* Show proper error dialog */
    if (err.stack ) { console.warn(err.stack); }
    else { console.warn(err); }
  }
};
{% endblock %}