{% 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 text-right" v-cloak v-if="!loading">
      Size: <strong>{{! instance.total_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>
        Databases <span class="text-muted small">({{! databases.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>
  </div>
  <table class="table table-sm" v-cloak v-if="!loading">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th class="text-center border-left">
          Tables
          <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>
        </th>
        <th class="text-center border-left">
          Indexes
          <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>
        </th>
        <th class="text-center border-left">
          Toast
          <div class="d-inline-block">
            <div class="progress border rounded-0" style="height: 7px; width: 10px;">
               <div class="progress-bar bg-secondary" role="progressbar" style="width:100%;"></div>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <template v-for="(database, loop_index) in databasesSorted">
        <tr v-bind:class="{ 'bg-light2': loop_index % 2 == 0}">
          <td class="font-weight-bold">
            <a :href="'/server/{{instance.agent_address}}/{{ instance.agent_port}}/maintenance/' + database.datname">
              {{! database.datname }}
            </a>
          </td>
          <td :class="['text-right', sortCriteria == 'total_bytes' ? 'font-weight-bold' : '']">
            {{! database.total_size }}
          </td>
          <template v-if="database.n_tables > 0">
          <td class="text-right border-left">
            <span class="badge badge-secondary">
              {{! database.n_tables }}
            </span>
            <span class="d-inline-block" style="min-width:80px;">
              <span v-if="database.tables_bytes" :class="[sortCriteria == 'tables_bytes' ? 'font-weight-bold' : '']">
              {{! database.tables_size }}
              </span>
            </span>
            <small style="min-width: 70px;" :class="['d-inline-block', sortCriteria == 'tables_bloat_ratio' ? 'font-weight-bold' : 'text-muted']">
              <template v-if="database.tables_bloat_bytes && database.tables_bytes">
                Bloat: {{! database.tables_bloat_ratio.toFixed(1)}}%
              </template>
            </small>
          </td>
          </template>
          <td class="text-center text-muted border-left small" v-else>
            <em>
              No table
            </em>
          </td>
          <td class="text-right border-left" v-if="database.n_indexes > 0">
            <span class="badge badge-secondary">
              {{! database.n_indexes }}
            </span>
            <span class="d-inline-block" style="min-width:80px;">
              <span v-if="database.indexes_bytes" :class="[sortCriteria == 'indexes_bytes' ? 'font-weight-bold' : '']">
              {{! database.indexes_size }}
              </span>
            </span>
            <small style="min-width: 70px;" :class="['d-inline-block', sortCriteria == 'indexes_bloat_ratio' ? 'font-weight-bold' : 'text-muted']">
              <template v-if="database.indexes_bloat_bytes && database.indexes_bytes">
              Bloat: {{! database.indexes_bloat_ratio.toFixed(1)}}%
              </template>
            </small>
          </td>
          <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="database.toast_bytes" :class="[sortCriteria == 'toast_bytes' ? 'font-weight-bold' : '']">
              {{! database.toast_size }}
            </span>
          </td>
        </tr>
        <tr v-bind:class="{ 'bg-light2': loop_index % 2 == 0}">
          <td colspan="5" class="border-top-0 pt-0">
            <size-distribution-bar
              :height="'7px;'"
              :total="instance.total_bytes"
              :cat1="database.tables_size"
              :cat1raw="database.tables_bytes"
              cat1label="Tables"
              :cat1bis="database.tables_bloat_size"
              :cat1bisraw="database.tables_bloat_bytes"
              cat1bislabel="Tables Bloat"
              :cat2="database.indexes_size"
              :cat2raw="database.indexes_bytes"
              cat2label="Indexes"
              :cat2bis="database.indexes_bloat_size"
              :cat2bisraw="database.indexes_bloat_bytes"
              cat2bislabel="Indexes Bloat"
              :cat3="database.toast_size"
              :cat3raw="database.toast_bytes"
              cat3label="Toast"
              >
            </size-distribution-bar>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</div>

<script src="/js/lodash.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/maintenance/vue.size-distribution-bar.js"></script>
<script src="/js/maintenance/temboard.maintenance.errors.js"></script>
<script src="/js/maintenance/temboard.maintenance.js"></script>
<script>
var apiUrl = '/proxy/{{ instance.agent_address }}/{{ instance.agent_port }}/maintenance';
</script>

{% end %}
