{% extends ../../../templates/base.html %}

{% block title %}[{{instance.hostname}}:{{instance.pg_port}}] - Statements{% end %}

{% block content %}

<div id="app">
  <div class="row mb-1">
    <div class="col-12 d-flex justify-content-between" v-cloak>
      <nav aria-label="breadcrumb" class="d-inline-block">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href v-on:click.prevent="dbid = null; queryid = null; userid = null;" v-if="dbid">
              All Databases
            </a>
            <span v-else>All Databases</span>
          </li>
          <li class="breadcrumb-item" v-if="dbid">
            <em class="text-muted small">Database:</em>
            <a href v-on:click.prevent="queryid = null; userid = null;" v-if="queryid && userid">
              {{! datname }}
            </a>
            <strong v-else>{{! datname }}</strong>
          </li>
          <li class="breadcrumb-item" v-if="queryid && userid">
            <em class="text-muted small">Query:</em>
            <strong>{{! queryid }}</strong>
          </li>
        </ol>
      </nav>
      <daterangepicker :from.sync="from" :to.sync="to" ref="daterangepicker"></daterangepicker>
    </div>
  </div>
  <div class="row mb-1">
    <div class="col d-flex" v-cloak v-if="metas && metas.error">
      <p class="alert alert-danger">
        {{! metas.error }}
      </p>
    </div>
  </div>
  <div class="row mb-1">
    <div class="col-sm-4">
      <div class="text-center">
        <strong>Calls</strong>
      </div>
      <div id="legend-chart1" class="legend-chart"></div>
      <div id="chart1" style="width: 100%; height: 150px;"></div>
    </div>
    <div class="col-sm-4">
      <div class="text-center">
        <strong>Time</strong>
      </div>
      <div id="legend-chart2" class="legend-chart"></div>
      <div id="chart2" style="width: 100%; height: 150px;"></div>
    </div>
    <div class="col-sm-4">
      <div class="text-center">
        <strong>Blocks</strong>
      </div>
      <div id="legend-chart3" class="legend-chart"></div>
      <div id="chart3" style="width: 100%; height: 150px;"></div>
    </div>
  </div>
  <div class="row mb-1" v-cloak>
    <div class="col-6 offset-6">
      <b-form-group
        label="Filter"
        label-cols-sm="3"
        label-align-sm="right"
        label-for="filterInput"
        class="mb-0"
        >
        <b-input-group>
          <b-form-input
            v-model="filter"
            type="search"
            id="filterInput"
            placeholder="Type to Search"
            ></b-form-input>
          <b-input-group-append>
            <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
          </b-input-group-append>
        </b-input-group>
      </b-form-group>
    </div>
  </div>
  <b-table
    striped
    small
    :items="statements"
    :fields="fields"
    :sort-by="sortBy"
    :busy="isLoading"
    :current-page="currentPage"
    :per-page="perPage"
    sort-desc="Descending"
    sort-direction="desc"
    show-empty
    v-cloak
    :filter="filter"
    @filtered="onFiltered"
    class="table-query"
    >
    <template v-slot:table-busy>
      <div class="text-center text-danger my-2">
        <b-spinner class="align-middle"></b-spinner>
        <strong>Loading...</strong>
      </div>
    </template>
    <template v-slot:thead-top="data">
      <b-tr>
        <b-th :colspan="dbid ? 3 : 2"></b-th>
        <b-th class="text-center border-left" colspan="2">Time</b-th>
        <b-th class="text-center border-left" colspan="4">Shared Blocks</b-th>
        <b-th class="text-center border-left" colspan="2">Temp Blocks</b-th>
      </b-tr>
    </template>
    <template v-slot:cell(query)="row">
      <pre class="sql hljs" v-html="highlight(row.value)" v-on:click.prevent="queryid=row.item.queryid; userid=row.item.userid"></pre>
    </template>
    <template v-slot:cell(datname)="row">
      <a href v-on:click.prevent="dbid=row.item.dbid">
        {{! row.item.datname }}
      </a>
    </template>
    <template v-slot:row-details="row">
      <b-card class="detail">
        <b-row class="mb-2">
          <b-col>
            <pre class="sql hljs" v-html="highlight(row.item.query)"></pre>
          </b-col>
        </b-row>
      </b-card>
    </template>
    <template v-slot:cell()="data">
      <span v-html="data.value"></span>
    </template>
    <template v-slot:empty="scope">
      <div class="text-center">
        There are no records to show.
        <br>
        <span class="text-muted" v-if="!metas || metas.coalesce_seq < 2">No snapshot has been done yet, please wait.</span>
        <span class="text-muted" v-else-if="metas.error">There are errors</span>
      </div>
    </template>
  </b-table>
  <div class="row" v-if="!queryid && !userid">
    <div class="col-6">
      <b-pagination
        v-model="currentPage"
        :total-rows="totalRows"
        :per-page="perPage"
        align="fill"
        size="sm"
        class="my-0"
        ></b-pagination>
    </div>
  </div>
</div>
<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
<script src="/js/dygraph.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/moment.preciseDiff.js"></script>
<script src="/js/highlightjs/highlight.pack.js"></script>
<script src="/js/statements/temboard.statements.js"></script>
<script src="/js/lodash.min.js"></script>
<script src="/js/daterangepicker.js"></script>
<script src="/js/monitoring/datemath.js"></script>
<script src="/js/monitoring/rangeutils.js"></script>
<script src="/js/monitoring/daterangepicker.vue.js"></script>

<link type="text/css" rel="stylesheet" href="/css/bootstrap-vue.min.css" />

<script src="/js/bootstrap-vue.min.js"></script>
<script>
var apiUrl = "/server/{{instance.agent_address}}/{{instance.agent_port}}/statements/data";
var chartApiUrl = "/server/{{instance.agent_address}}/{{instance.agent_port}}/statements/chart";
</script>
{% end %}