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

{% block title %}[{{instance.hostname}}:{{instance.pg_port}}] - Activity{% end %}
{% block title %}[{{instance.hostname}}:{{instance.pg_port}}] - Activity / {% if mode == 'waiting' %}Waiting{% elif mode == 'blocking' %}Blocking{% elif mode == 'running' %}Running{% end %} queries{% 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="ModalInfo">
      </div>
      <div class="modal-body" id="ModalBody">
      </div>
      <div class="modal-footer" id="ModalFooter">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
{% include menu.html %}
<div class="row d-flex justify-content-between">
  <div class="col-auto">
    <span class="d-inline-block" data-toggle="tooltip" title="Terminate the backends selected below">
      <button type="button" class="btn btn-danger disabled" id="killButton">Terminate</button>
    </span>
  </div>
  <div class="col-auto align-self-center">
    <span id="autoRefreshResume" class="d-none text-muted">
      <a class="btn btn-secondary" id="resumeAutoRefresh" role="button" href><i class="fa fa-play"></i> resume auto refresh</a>
    </span>
    <span id="autoRefreshMsg" class="text-muted">
      <img id="loadingIndicator" src="/images/ring-alt.svg" class="fa-fw">
      Auto refresh
      <span id="intervalDuration">2s</span>
      <span id="autoRefreshPaused">paused</span>
    </span>
  </div>
  <div class="col-auto">
    <a class="btn collapse-toggle dropdown-toggle collapsed" data-toggle="collapse" href="#filters" role="button" aria-expanded="false" aria-controls="filters">
      filters
    </a>
  </div>
</div>
<div class="row">
  <div class="col-12 collapse" id="filters">
    <div class="justify-content-end d-flex">
      <div class="form-group mb-1">
        <input id="searchFilter" type="text" placeholder="Search" class="form-control">
      </div>
    </div>
    <form id="state-filter" class="form-inline justify-content-end d-flex">
      <div class="form-group pr-1">
        <label><strong>States:</strong></label>
      </div>
      {% for state in ['active', 'idle', 'idle in transaction', 'idle in transaction (aborted)', 'fastpath function call', 'disabled'] %}
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="state-filter-{{state}}" value="{{ state }}" checked>
        <label class="form-check-label" for="state-filter-{{state}}">{{ state }}</label>
      </div>
      {% end %}
    </form>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <table id="tableActivity" class="table-activity table table-sm table-striped small table-query"></table>
  </div>
</div>

<script src="/js/highlightjs/highlight.pack.js"></script>
<script src="/js/datatables/datatables.min.js"></script>
<script src="/js/activity/temboard.activity.js"></script>
<script>
var xsession = {{ json_encode(xsession) }};
var agent_address = "{{instance.agent_address}}";
var agent_port = "{{instance.agent_port}}";
var activityMode = "{{mode}}";
var agentLoginUrl = '/server/{{ instance.agent_address }}/{{ instance.agent_port }}/login';
</script>

{% end %}