{% extends 'base' %}
{% block main %}
<div class="container">
  <div class="row table-responsive ">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>Queue</th>
        <th>Concurrency</th>
        <th>Retry Count</th>
        <th>Visibility Timeout</th>
        <th>Dead Letter queues</th>
        <th>Created On</th>
        <th>Updated On</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        {% if config == null %}
        {{ queueName }}
        {% else %}
        <td>{{config.name}}</td>
        <td>{{config.concurrency.min}},{{config.concurrency.max}}</td>
        <td>{{config.numRetry}}</td>
        <td>{{config.visibilityTimeout}}</td>
        <td>
          {{ dlq(config.deadLetterQueues) }}
        </td>
        <td>{{ time(config.createdOn) }}</td>
        <td>{{ time(config.updatedOn) }}</td>
        {% endif %}
      </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>Job Type</th>
        <th>Data Type</th>
        <th>Name</th>
        <th>Size</th>
      </tr>
      </thead>
      <tbody>
      {% for queueData in queueRedisDataDetails %}
      <tr>
        <td>
          <a href="#" class="data-explorer" data-toggle="modal" data-target="#explore-queue"
             data-name="{{queueData.value.name}}" data-type="{{queueData.value.type}}">
            {{queueData.key.name}}
          </a>
        </td>
        <td>{{queueData.value.type}}</td>
        <td>{{queueData.value.name}}</td>
        <td>{{queueData.value.size}}</td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<hr/>
{% include 'stats_chart' %}
<hr/>
{% include 'latency_chart' %}

{% include 'data_explorer_modal' %}
{% endblock %}

{% block additional_script %}
<script type="application/javascript">
  queueName = "{{queueName}}"
  dataPageUrl = "rqueue/api/v1/queue-data";
  var chartParams = {"queue": queueName, "type": "STATS", 'aggregationType': 'DAILY'};
  var latencyChartParams = {"queue": queueName, "type": "LATENCY", 'aggregationType': 'DAILY'};
  $(document).ready(function () {
    drawChart(chartParams, "stats_chart");
    drawChart(latencyChartParams, "latency_chart");
    $('#refresh-chart').click(function () {
      refreshStatsChart(chartParams, "stats_chart");
    });

    $('#refresh-latency-chart').click(function () {
      refreshLatencyChart(latencyChartParams, "latency_chart");
    });

    $('#explore-queue').on('shown.bs.modal', function () {
      $('#explorer-title').empty().append("Queue:").append("<b>&nbsp;" + queueName + "</b>").append(
          "&nbsp;[" + dataType + "]").append("<b>&nbsp;" + dataName + "</b>");
      refreshPage();
    });
  });

</script>
{% endblock %}