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

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

{% block content %}

{% include breadcrumb.html %}

<div id="app">
  <h3 class="row">
    <div class="col">
      Schema: <strong>{{ schema }}</strong>
    </div>
    <div class="col text-right" v-cloak v-if="!loading && schema.size">
      Size: <strong>{{! schema.size }}</strong>
    </div>
  </h3>
  <div class="text-center" v-if="loading">
    <img src="/images/ring-alt.svg" class="fa-fw fa-2x">
  </div>
  <div v-cloak v-if="!loading">
    <div class="d-flex">
      <h4>
        Tables <span class="text-muted small">({{! schema.tables.length }})</span>
      </h4>
      <div class="ml-auto">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by {{! sortCriterias[sortCriteria][0] }}</button>
        <div class="dropdown-menu">
          <h6 class="dropdown-header">Sort by:</h6>
          <a v-for="(criteria, key) in sortCriterias" class="dropdown-item" href="#" v-on:click="sortBy(key, criteria[1])">
            <i :class="['fa fa-fw', {'fa-check': sortCriteria == key}]"></i>
            {{! criteria[0] }}
          </a>
        </div>
      </div>
    </div>
    <em v-if="!schema.tables.length">No table</em>
    <table class="table table-sm">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th class="text-center border-left">
            <div class="d-inline-block">
              <div class="progress border rounded-0" style="height: 7px; width: 10px;">
                 <div class="progress-bar bg-cat1" role="progressbar" style="width:100%;"></div>
              </div>
            </div>
            Heap
          </th>
          <th class="text-center border-left">
            <div class="d-inline-block">
              <div class="progress border rounded-0" style="height: 7px; width: 10px;">
                 <div class="progress-bar bg-cat2" role="progressbar" style="width:100%;"></div>
              </div>
            </div>
            Indexes
          </th>
          <th class="text-center border-left">
            <div class="d-inline-block">
              <div class="progress border rounded-0" style="height: 7px; width: 10px;">
                 <div class="progress-bar bg-cat3" role="progressbar" style="width:100%;"></div>
              </div>
            </div>
            Toast
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(table, index) in tablesSorted">
          <tr v-bind:class="{ 'bg-light2': index % 2 == 0}">
            <td>
              <a :href="'/server/{{instance.agent_address}}/{{ instance.agent_port}}/maintenance/{{ database }}/schema/{{ schema }}/table/' + table.name">
                <strong>{{! table.name }}</strong>
              </a>
              <span v-if="table.tablespace">
                <em class="text-muted small">in </em>
                {{! table.tablespace }}
              </span>
            </td>
            <td :class="['text-right', sortCriteria == 'total_bytes' ? 'font-weight-bold' : '']">
              {{! table.total_size }}
            </td>
            <td class="text-right border-left">
              <span v-if="table.table_bytes" :class="[sortCriteria == 'table_bytes' ? 'font-weight-bold' : '']">
              {{! table.table_size }}
              </span>
              <template v-else>
              -
              </template>
              <small style="min-width: 70px;" :class="['d-inline-block', sortCriteria == 'bloat_ratio' ? 'font-weight-bold' : 'text-muted']">
                <template v-if="table.bloat_bytes">
                Bloat: {{! table.bloat_ratio.toFixed(1) }}%
                </template>
              </small>
            </td>
            <template v-if="table.n_indexes">
            <td class="text-right border-left">
              <span class="badge badge-secondary">
                {{! table.n_indexes }}
              </span>
              <span class="d-inline-block" style="min-width: 80px;">
                <span v-if="table.index_bytes" :class="[sortCriteria == 'index_bytes' ? 'font-weight-bold' : '']">
                {{! table.index_size }}
                </span>
                <template v-else>
                -
                </template>
              </span>
              <small style="min-width: 70px;" :class="['d-inline-block', sortCriteria == 'index_bloat_ratio' ? 'font-weight-bold' : 'text-muted']">
                <template v-if="table.index_bloat_bytes">
                Bloat: {{! table.index_bloat_ratio.toFixed(1) }}%
                </template>
              </small>
            </td>
            </template>
            <td class="text-center text-muted border-left small" v-else>
              <em>
                No index
              </em>
            </td>
            <td class="text-right border-left">
              <span v-if="table.toast_bytes" :class="[sortCriteria == 'toast_bytes' ? 'font-weight-bold' : '']">
              {{! table.toast_size }}
              </span>
              <template v-else>
              -
              </template>
            </td>
          </tr>
          <tr v-bind:class="{ 'bg-light2': index % 2 == 0}">
            <td colspan="6" class="border-top-0">
              <size-distribution-bar
                :height="'7px;'"
                :total="schema.total_bytes"
                :cat1="table.table_size"
                :cat1raw="table.table_bytes"
                cat1label="Heap"
                :cat1bis="table.bloat_size"
                :cat1bisraw="table.bloat_bytes || 0"
                cat1bislabel="Heap Bloat"
                :cat2="table.index_size"
                :cat2raw="table.index_bytes"
                cat2label="Indexes"
                :cat2bis="table.index_bloat_size"
                :cat2bisraw="table.index_bloat_bytes"
                cat2bislabel="Indexes Bloat"
                :cat3="table.toast_size"
                :cat3raw="table.toast_bytes"
                cat3label="Toast"
                >
              </size-distribution-bar>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div class="d-flex">
      <h4>
        Indexes <span class="text-muted small">({{! schema.indexes.length }})</span>
      </h4>
      <div class="ml-auto">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by {{! indexSortCriterias[indexSortCriteria][0] }}</button>
        <div class="dropdown-menu">
          <h6 class="dropdown-header">Sort by:</h6>
          <a v-for="(criteria, key) in indexSortCriterias" class="dropdown-item" href="#" v-on:click="indexSortBy(key, criteria[1])">
            <i :class="['fa fa-fw', {'fa-check': indexSortCriteria == key}]"></i>
            {{! criteria[0] }}
          </a>
        </div>
      </div>
    </div>
    <em v-if="!schema.tables.length">No index</em>
    {% include includes/reindex_modal.html %}
    <table class="table table-sm table-query table-striped table-bordered">
      <tbody>
        <tr v-for="index in indexesSorted">
          <td>
            <strong>{{! index.name }}</strong>
            <small>
              ({{! index.type }})
            </small>
            <br>
            <em class="text-muted small">on </em>
            <a :href="'/server/{{instance.agent_address}}/{{ instance.agent_port}}/maintenance/{{ database }}/schema/{{ schema }}/table/' + index.tablename">
              {{! index.tablename }}
            </a>
            <span v-if="index.tablespace">
              <em class="text-muted small">in </em>
              {{! index.tablespace }}
            </span>
          </td>
          <td class="text-right align-middle">
            <span :class="[indexSortCriteria == 'total_bytes' ? 'font-weight-bold' : '']">
            {{! index.total_size }}
            </span>
            <small style="min-width: 70px;" :class="['d-inline-block', indexSortCriteria == 'bloat_ratio' ? 'font-weight-bold' : 'text-muted']">
              <template v-if="index.bloat_bytes">
                Bloat: {{! index.bloat_ratio.toFixed(1) }}%
              </template>
            </small>
          </td>
          <td class="align-middle text-right">
            <span class="badge badge-secondary" v-if="index.scans">
              {{! index.scans }} scans
            </span>
          </td>
          <td class="query" width="80%">
            <pre><code class="sql">{{! index.def }}</code></pre>
          </td>
          <td class="align-middle" width="5%">
            <button class="btn btn-outline-secondary btn-sm py-0" data-toggle="modal" data-target="#reindexModal" v-on:click="reindexElementName=index.name; checkSession($event);">Reindex</button>
            <ul class="list list-unstyled mb-0" v-if="scheduledReindexes.length > 0">
              <template v-for="scheduledReindex in scheduledReindexes">
              <li v-if="scheduledReindex.index == index.name">
                <template v-if="scheduledReindex.status == 'todo'">
                  <em v-if="scheduledReindex.status == 'todo'">
                    <span class="text-muted" :title="scheduledReindex.datetime.toString()"><i class="fa fa-clock-o"></i> {{! scheduledReindex.datetime | relative_time(false) }}</span>
                  </em>
                  <button class="btn btn-link py-0" v-on:click="cancelReindex(scheduledReindex.id)" v-if="scheduledReindex.status == 'todo'">Cancel</button>
                </template>
                <template v-else-if="scheduledReindex.status == 'doing'">
                  <em class="text-muted">
                    <img id="loadingIndicator" src="/images/ring-alt.svg" class="fa-fw">
                    in progress
                  </em>
                </template>
                <template v-else-if="scheduledReindex.status == 'canceled'">
                  <em class="text-muted">canceled</em>
                </template>
                <template v-else>
                  <em class="text-muted">{{! scheduledReindex.status }}</em>
                </template>
              </li>
              </template>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script src="/js/lodash.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/highlightjs/highlight.pack.js"></script>
<script src="/js/maintenance/vue.filter.relative-time.js"></script>
<script src="/js/maintenance/vue.size-distribution-bar.js"></script>
<script src="/js/daterangepicker.js"></script>
<script src="/js/maintenance/temboard.maintenance.errors.js"></script>
<script src="/js/maintenance/temboard.maintenance.schema.js"></script>
<script>
var apiUrl = '/proxy/{{ instance.agent_address }}/{{ instance.agent_port }}/maintenance/{{ database }}/schema/{{ schema }}';
var schemaApiUrl = apiUrl;
var maintenanceBaseUrl = '/proxy/{{ instance.agent_address }}/{{ instance.agent_port }}/maintenance';
var agentLoginUrl = '/server/{{ instance.agent_address }}/{{ instance.agent_port }}/login';
var xsession = {{ json_encode(xsession) }};
</script>

{% end %}
