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

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

{% block content %}

<div id="check-container" v-cloak>
  <div class="row form-group mb-2">
    <div class="col-12 d-flex justify-content-between">
      <ol class="breadcrumb py-1 mb-0 align-items-center">
        <li class="breadcrumb-item"><a href="../alerting">Status</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{check['description']}}</li>
      </ol>
      <daterangepicker :from.sync="from" :to.sync="to" ref="daterangepicker"></daterangepicker>
    </div>
  </div>

  <div>
    <ul class="list-inline small text-muted mb-0">
      <li class="list-inline-item" {{'style="text-decoration:line-through;"'}}>
      Enabled: <i class="fa {{'fa-check' if check['enabled'] else 'fa-times' }}"></i>
      </li>
      <li class="list-inline-item">
        <span class="text-warning">
          &horbar;
        </span>
        Warning: {{ '{0:g}'.format(float(check['warning'])) }}{% if value_type == 'percent' %}%{% end %}
      </li>
      <li class="list-inline-item">
        <span class="text-critical">
          &horbar;
        </span>
        Critical: {{ '{0:g}'.format(float(check['critical'])) }}{% if value_type == 'percent' %}%{% end %}
      </li>
      <li class="list-inline-item">
        <a data-toggle="modal" data-target="#updateModal" href>
        Edit
        </a>
      </li>
    </ul>

    <!-- Modal -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="updateModalLabel">Edit alert</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div id="modalInfo"></div>
            <form id="updateForm">
              <div class="form-group">
                <label for="descriptionInput">Name</label>
                <input type="text" class="form-control" id="descriptionInput" value="{{ check['description'] }}">
              </div>
              <hr>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="enabledInput" {% if check['enabled'] %}checked{% end %}>
                <label class="form-check-label" for="enabledInput">Enabled</label>
                <small class="form-text text-muted">
                  If disabled, no check will be made. Thus no alert will be raised.
                </small>
              </div>
              <div class="form-group">
                <label for="warningThresholdInput">Warning threshold</label>
                <input type="text" class="form-control" id="warningThresholdInput" value="{{ '{0:g}'.format(float(check['warning'])) }}">
              </div>
              <div class="form-group">
                <label for="criticalThresholdInput">Critical threshold</label>
                <input type="text" class="form-control" id="criticalThresholdInput" value="{{ '{0:g}'.format(float(check['critical'])) }}">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <i class="fa fa-spinner fa-spin loader d-none"></i>
            <button type="submit" id="submitFormUpdateCheck" class="btn btn-success ml-auto">Save</button>
            <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card w-100 mb-2" v-for="key in sortedKeys">
    <div class="p-2">
      <div class="text-center">
        <i v-bind:class="'fa fa-heart text-' + key.state.toLowerCase()" data-toggle="tooltip" v-bind:title="'Current status: ' + key.state.toLowerCase()"></i>
        <span v-if="key.key != ''">{{!key.key}}</span>
        <span v-if="key.key == ''">{{check['name']}}</span>
      </div>
    </div>
    <div class="card-body pt-0">
      <div :id="'legend' + key.key" class="legend-chart"><div class="row"><div class="col-md-4 col-md-offset-4"><div class="progress"><div class="progress-bar progress-bar-striped" style="width: 100%;">Loading, please wait ...</div></div></div></div></div>
      <monitoring-chart check="{{check['name']}}" :key_="key.key" :value-type="key.value_type" :id="'chart' + key.key" :from="from" :to="to"></monitoring-chart>
    </div>
  </div>
</div>
<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
<script src="/js/dygraph.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/daterangepicker.js"></script>
<script src="/js/lodash.min.js"></script>
<script src="/js/monitoring/datemath.js"></script>
<script src="/js/monitoring/rangeutils.js"></script>
<script src="/js/monitoring/daterangepicker.vue.js"></script>
<script src="/js/monitoring/temboard.check.js"></script>
<script>
var apiUrl = "/server/{{instance.agent_address}}/{{instance.agent_port}}/alerting"
var checkName = "{{check['name']}}";
</script>

{% end %}
