{% extends base.html %}

{% block title %}temBoard - Home{% end %}

{% block content %}
{% import json %}
<script src="/js/fscreen.js"></script>
<script src="/js/lodash.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/dygraph.min.js"></script>
<script>
var instancesUrl = '/home/instances';
var groups = {% raw json.dumps([i[0] for i in groups]) %};
</script>
<script src="/js/home.js"></script>
<div class="position-absolute" style="z-index: 2; right: 0;">
  <a class="btn btn-link fullscreen" href data-toggle="popover" data-trigger="hover" data-content="Full screen" data-placement="bottom">
    <i class="fa fa-expand"></i>
  </a>
</div>
<div id="instances">
  <div class="row">
    <div class="col mb-2">
      <form class="form-inline" onsubmit="event.preventDefault();">
        <input type="text" class="form-control mr-sm-2" placeholder="Search instances" v-model="search">
        <div class="dropdown mr-sm-2">
          <button type="button" class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown">
            Sort by: <strong v-cloak>{{!sort}}</strong>
            <span class="caret"></span>
          </button>
          <div class="dropdown-menu" role="menu">
            <a class="dropdown-item" href v-on:click="changeSort('hostname', $event)">
              <i v-bind:class="['fa fa-fw', {'fa-check': sort == 'hostname'}]"></i>
              Hostname
            </a>
            <a class="dropdown-item" href v-on:click="changeSort('status', $event)">
              <i v-bind:class="['fa fa-fw', {'fa-check': sort == 'status'}]"></i>
              Status
            </a>
          </div>
        </div>
        <div class="dropdown">
          <button type="button" class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown">
            Groups ({{! groupsFilter.length || 'all' }})
            <span class="caret"></span>
          </button>
          <div class="dropdown-menu" role="menu">
            <a class="dropdown-item" href="#" v-for="group in groups" v-on:click="toggleGroupFilter(group, $event)">
              <i v-bind:class="['fa fa-fw', {'fa-check': groupsFilter.indexOf(group) != -1 }]"></i>
              {{! group }}
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 d-flex flex-wrap instance-list">
      <div
        :class="['card mb-2 mr-2', {'border-danger bg-danger-light': getStatusValue(instance) >= 1000000, 'border-warning bg-warning-light': getStatusValue(instance) >= 1000}]"
        style="width: 220px;"
        v-for="instance, instanceIndex in filteredInstances"
        :key="instance.hostname + instance.pg_port"
        v-cloak>
        <div class="card-body p-2">
          <div class="row">
            <div class="col-md-12">
              <strong>
                <a :href="['/server', instance.agent_address, instance.agent_port, 'dashboard'].join('/')" class="overflow-ellipsis d-block">{{!instance.hostname}}
                </a>
              </strong>
              <div v-if="instance.available === false">
                <span class="badge badge-warning"><i class="fa fa-exclamation-triangle"></i> Unable to connect to postgres</span>
              </div>
              <checks :instance="instance"></checks>
            </div>
            <div class="col-md-12 small">
              <ul class="list-unstyled mb-0">
                <li class="overflow-ellipsis">{{!instance.agent_address}}</li>
                <li>{{!instance.pg_port}}</li>
                <li>{{!instance.pg_data}}</li>
                <li class="overflow-ellipsis">{{!instance.pg_version_summary}}</li>
              </ul>
            </div>
            <div class="col-md-12 small">
              <template v-for="(group, index) in instance.groups">
                <span class="badge border text-muted">
                  {{!group}}
                </span>
                {{!index === (instance.groups.length - 1) ? '' : ' '}}
              </template>
            </div>
          </div>
          <div class="row" v-if="hasMonitoring(instance) && instanceIndex < 10">
            <div class="col-md-6 mt-2 small text-center">
              <span class="text-muted">
                TPS:
              </span>
              <span class="badge badge-secondary">
                {{! instance.currentTps }}
              </span>
              <sparkline class="sparkline-container"
                   :instance="instance"
                   :metric="'tps'"
                   data-toggle="tooltip"
                   data-title="Transations / sec (last hour)"
                   data-container="body"
                   data-placement="bottom">
              </sparkline>
            </div>
            <div class="col-md-6 mt-2 small text-center">
              <span class="text-muted">
                Loadavg:
              </span>
              <span class="badge badge-secondary">
              {{! instance.currentLoad1 }}
              </span>
              <sparkline
                   class="sparkline-container"
                   :instance="instance"
                   :metric="'load1'"
                   data-toggle="tooltip"
                   data-title="Load average (last hour)"
                   data-placement="bottom">
              </sparkline>
            </div>
          </div>
        </div>
      </div>
      <p v-if="!loading && instances.length == 0" v-cloak>
      {% try %}
      {% if role.is_admin %}
      No instance is available yet.<br>
      Go to <strong>Settings</strong> to add or configure instances.
      {% else %}
      You don't have access to any instance.<br>
      Please contact an administrator.
      {% end %}
      {% except %}
      {% end %}
      </p>
    </div>
  </div>
</div>
{% end %}
