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

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

{% block content %}

<div class="text-right text-muted small">Auto refresh every 1 min</div>
<div id="checks-container" class="row" v-cloak>
  <div class="col-3" v-for="check in checks">
    <div class="card mb-3 w-100 border" v-bind:class="['border-' + getBorderColor(check.state), {'striped bg-light': !check.enabled}]">
      <div class="card-body p-2">
        <div>
          <a v-bind:href="'alerting/' + check.name"
             v-bind:class="{'text-muted': !check.enabled}">
            <span v-bind:class="'badge badge-' + check.state.toLowerCase()">
              {{! check.state }}
            </span>
            {{! check.description }}
          </a>
        </div>
        <hr class="mt-1 mb-1">
        <ul class="list-unstyled small ml-2 mb-0" style="max-height: 100px; overflow-y: auto;">
          <li v-for="key in sorted(check.state_by_key, 'key')">
            <span v-bind:class="'badge badge-' + key.state.toLowerCase()">
              {{! key.state }}
            </span>
            {{!key.key}}
          </li>
        </ul>
        <hr class="mt-1 mb-1">
        <div>
          <ul class="list-inline small text-muted mb-0">
            <li class="list-inline-item">Warning: {{! check.warning }}{{! check.value_type == 'percent' ? '%' : ''}}</li>
            <li class="list-inline-item">Critical: {{! check.critical }}{{! check.value_type == 'percent' ? '%' : ''}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/js/lodash.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/monitoring/temboard.checks.js"></script>
<script>
var apiUrl = "/server/{{instance.agent_address}}/{{instance.agent_port}}/alerting"
</script>

{% end %}