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

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

{% block content %}
{% set mode = 'running' %}
<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">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel"></h4>
      </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-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
{% include menu.html %}
<div class="row">
  <div class="col-md-12">
    <button type="button" class="btn btn-default btn-sm" id="pauseButton">
      <i class="fa fa-pause"></i> Pause
    </button>
    <img id="loadingIndicator" src="/images/ring-alt.svg" class="fa-fw">
    <button type="button" class="btn btn-default btn-sm hide" id="resumeButton"><i class="fa fa-play"></i> Resume</button>
    <button type="button" class="btn btn-danger btn-sm hide" id="killButton"><i class="fa fa-stop"></i> Terminate</button>
  </div>
</div>
<div class="row" id="configuration-row">
  <div class="col-md-12"></div>
</div>
<div class="row">
  <div class="col-md-12">
    <form role="form" method="post">
      <table id="tableActivity" class="table table-condensed table-striped table-activity">
        <tr>
          <th class="xs"></th>
          <th class="sm">PID</th>
          <th class="med">Database</th>
          <th class="med">User</th>
          <th class="sm">%CPU</th>
          <th class="sm">%mem</th>
          <th class="med">Read/s</th>
          <th class="med">Write/s</th>
          <th class="xs">IOW</th>
          <th class="xs">W</th>
          <th class="lg">State</th>
          <th class="med">Duration (s)</th>
          <th class="query">Query</th>
        </tr>
        {% for row in activities['rows'] %}
        <tr class="{%if float(row['duration'])>5%}danger{%else%}{%if float(row['duration'])>1%}warning{%else%}none{%end%}{%end%}">
          <td><input type="checkbox" class="invisible input-xs" data-pid="{{row['pid']}}"/></td>
          <td>{{row['pid']}}</td>
          <td class="text-center">{{row['database']}}</td>
          <td class="text-center">{{row['user']}}</td>
          <td class="text-right">{{row['cpu']}}</td>
          <td class="text-right">{{row['memory']}}</td>
          <td class="text-right">{{row['read_s']}}</td>
          <td class="text-right">{{row['write_s']}}</td>
          <td><span class="label {% if row['iow'] == 'Y'%}label-danger{%else%}label-success{%end%}">{{row['iow']}}</span></td>
          <td><span class="label {% if row['wait'] == 'Y'%}label-danger{%else%}label-success{%end%}">{{row['wait']}}</td>
          <td class="text-center"><span class="label {%if row['state'] == 'active'%}label-success{%elif row['state'] == 'idle in transaction'%}label-danger{%elif row['state'] == 'idle in transaction (aborted)'%}label-danger{%else%}label-default{%end%}">{{row['state']}}</span></td>
          <td class="text-right">{{row['duration']}}</td>
          <td class="query">{{row['query']}}</td>
        </tr>
        {% end %}
      </table>
    </form>
  </div>
</div>

<script src="/js/activity/temboard.activity.js"></script>
<script>
$('#pauseButton').click(
  function() {
    pause_activity();
  }
);
$('#resumeButton').click(
  function() {
    resume_activity();
  }
);
var xsession = "{{xsession}}";
var agent_address = "{{instance.agent_address}}";
var agent_port = "{{instance.agent_port}}";
$('#killButton').click(
  function() {
    show_modal_kill(agent_address, agent_port, xsession);
  }
);
window.setInterval(function () {refresh_activity(agent_address, agent_port, xsession)}, 2000);
</script>

{% end %}