{% extends base.html %}

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

{% block content %}
{% import json %}
{% from temboardui import json_encoder %}
<script src="/js/lodash.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/dygraph.min.js"></script>
<script>
var instances = {% raw json.dumps([i for i in instance_list], cls=json_encoder.new_alchemy_encoder(), check_circular=False) %};
</script>
<script src="/js/home.js"></script>
<div id="instances" class="row">
  <div class="col-md-12 mb-2">
    <form class="form-inline">
      <input type="text" class="form-control mr-sm-2" placeholder="Search instances" v-model="search">
      <div class="dropdown">
        <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="sort = 'hostname'">
            <i v-bind:class="['fa fa-fw', {'fa-check': sort == 'hostname'}]"></i>
            Hostname
          </a>
          <a class="dropdown-item" href="#" v-on:click="sort = 'status'">
            <i v-bind:class="['fa fa-fw', {'fa-check': sort == 'status'}]"></i>
            Status
          </a>
        </div>
      </div>
    </form>
  </div>
  <div class="col-md-12">
    <ul class="list-group instance-list">
      <li class="list-group-item" v-for="instance in filteredInstances" v-cloak>
        <div class="row">
          <div class="col-md-12">
            <div class="pull-right">
              <a :href="['/server', instance.agent_address, instance.agent_port, 'dashboard'].join('/')"
                 class="btn btn-outline-secondary btn-sm">
                View
              </a>
            </div>
            <strong>
              <a :href="['/server', instance.agent_address, instance.agent_port, 'dashboard'].join('/')">
              {{!instance.hostname}}
              </a>
            </strong>
            <checks :instance="instance" :update="update"></checks>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5 small">
            <dl class="row mb-0">
              <dt class="col-sm-3">Host: </dt>
              <dd class="col-sm-9 mb-0">{{!instance.agent_address}}</dd>
              <dt class="col-sm-3">Data: </dt>
              <dd class="col-sm-9 mb-0">{{!instance.pg_data}}</dd>
              <dt class="col-sm-3">Port: </dt>
              <dd class="col-sm-9 mb-0">{{!instance.pg_port}}</dd>
              <dt class="col-sm-3">Version: </dt>
              <dd class="col-sm-9 mb-0">{{!instance.pg_version}}</dd>
            </dl>
          </div>
          <div class="col-md-3">
            <template v-for="(group, index) in instance.groups">
              <span class="badge badge-secondary">
                {{!group.group_name}}
              </span>
              {{!index === (instance.groups.length - 1) ? '' : ' '}}
            </template>
            <br>
          </div>
          <div class="col-md-4">
            <br>
            <div class="row" v-if="hasMonitoring(instance)">
              <div class="col-md-12">
                <sparkline class="sparkline-container"
                     :instance="instance"
                     :metric="'tps'"
                     :update="update"
                     data-toggle="tooltip"
                     data-title="Transations / sec (last hour)"
                     data-placement="bottom">
                </sparkline>
                <sparkline
                     class="sparkline-container"
                     :instance="instance"
                     :metric="'load1'"
                     :update="update"
                     data-toggle="tooltip"
                     data-title="Load average (last hour)"
                     data-placement="bottom">
                </sparkline>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    {% if len(instance_list.all()) == 0 %}
    <p>
    {% 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>
    {% end %}
  </div>
</div>
{% end %}
