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

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

{% block content %}
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="ModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="ModalBody">
        <img id="imageModal" width="100%"/>
      </div>
      <div class="modal-footer" id="ModalFooter">
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div id="charts-container">
  <div class="row form-group mb-2">
    <div class="col-12 d-flex justify-content-between">
      <a class="btn btn-outline-secondary collapse-toggle dropdown-toggle collapsed" data-toggle="collapse" href="#metrics" role="button" aria-expanded="false" aria-controls="metrics">
        <i class="fa fa-area-chart"></i>
        Metrics
      </a>
      <daterangepicker :from.sync="from" :to.sync="to" ref="daterangepicker"></daterangepicker>
    </div>
  </div>


  <div class="collapse" id="metrics">
    <div class="card card-body bg-light mb-2">
      <div class="row mb-2">
        <div class="col-4">
          <span class="text-muted text-uppercase">System</span>
          <ul class="list-unstyled mb-0">
            <li v-for="(metric, key) in metrics" v-if="metric.category == 'system'">
              <div class="form-check">
                <input type="checkbox" :id="'checkbox' + key" class="form-check-input" :checked="isVisible(key)" v-on:change="setVisible(key, $event)">
                <label class="form-check-label" :for="'checkbox' + key">
                  {{! metric.title }}
                </label>
              </div>
            </li>
          </ul>
        </div>
        <div class="col-8">
          <span class="text-muted text-uppercase">Postgres</span>
          <div class="columns-2">
            <ul class="list-unstyled mb-0">
              <li v-for="(metric, key) in metrics" v-if="metric.category == 'postgres'">
                <div class="form-check">
                  <input type="checkbox" :id="'checkbox' + key" class="form-check-input" :checked="isVisible(key)" v-on:change="setVisible(key, $event)">
                  <label class="form-check-label" :for="'checkbox' + key">
                    {{! metric.title }}
                  </label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-8">
          <ul class="list-unstyled list-inline mb-0">
            <li class="list-inline-item">
              <a href="#" v-on:click.prevent="selectAll">Select all</a>
            </li>
            <li class="list-inline-item">
              <a href="#" v-on:click.prevent="unselectAll">Unselect all</a>
            </li>
          </ul>
          <ul class="list-unstyled list-inline mb-0">
            Predefined themes:
            <li class="list-inline-item" v-for="theme in themes">
              <a href="#" v-on:click.prevent="loadGraphs(theme.graphs)">{{!theme.title}}</a>
            </li>
          </ul>
        </div>
        <div class="col-4 d-flex align-items-end justify-content-end">
          <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#metrics">Close</button>
        </div>
      </div>
    </div>
  </div>
  <draggable v-model="graphs" :options="{handle:'.card-header'}" v-cloak>
    <div class="card w-100 mb-2" v-for="graph in graphs">
      <div class="card-header">
        {{! metrics[graph.id].title }}
        <a :href='"#/?graphs=[\"" +  graph.id + "\"]&start=" + from + "&end=" + to' class="small ml-2" target="_blank" title="Link to this graph."><i class="fa fa-external-link"></i></a>
        <span class="copy"></span>
        <button type="button" class="close" aria-label="Close" v-on:click="removeGraph(graph.id)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="card-body">
        <div :id="'nodata' + graph.id" class="nodata-chart text-center d-none alert alert-secondary p-1">No data available</div>
        <div :id="'legend' + graph.id" 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 :graph="graph" :id="'chart' + graph.id" :from="from" :to="to"></monitoring-chart>
        <div :id="'visibility' + graph.id" class="visibility-chart"></div>
      </div>
    </div>
  </draggable>
  <div class="text-center w-100">
    <a href="#" v-on:click="$('#metrics').collapse('show');window.scrollTo({top: 0});" class="btn btn-outline-secondary">
      + More metrics
    </a>
  </div>
</div>

<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
<script src="/js/Sortable.min.js"></script>
<script src="/js/vuedraggable.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.monitoring.js"></script>
<script>
var apiUrl = "/server/{{instance.agent_address}}/{{instance.agent_port}}/monitoring/data";
var unavailabilityUrl = "/server/{{instance.agent_address}}/{{instance.agent_port}}/monitoring/unavailability";
</script>

{% end %}
