{% extends "layout.html" %} {% block content %}
<h1>Celery Queue Debug</h1>

<style>
  .debug-section {
    margin-bottom: 40px;
  }
  .debug-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  .debug-table th,
  .debug-table td {
    border: 1px solid #444;
    padding: 6px 10px;
  }
  .debug-table th {
    background: #333;
    color: #fff;
  }
  pre {
    background: #1e1e1e;
    color: #ddd;
    padding: 10px;
    overflow-x: auto;
  }
  code {
    color: #9cf;
  }
</style>

<div class="debug-section">
  <h2>Workers</h2>

  <h3>Active Tasks</h3>
  <pre>{{ workers_active | tojson(indent=2) }}</pre>

  <h3>Reserved</h3>
  <pre>{{ workers_reserved | tojson(indent=2) }}</pre>

  <h3>Scheduled</h3>
  <pre>{{ workers_scheduled | tojson(indent=2) }}</pre>
</div>

<hr />

<div class="debug-section">
  <h2>Queues</h2>

  {% for q in queues %}
  <div class="debug-queue">
    <h3>{{ q.name }} ({{ q.length }} items)</h3>

    <table class="debug-table">
      <tr>
        <th>Redis Key</th>
        <td>{{ q.redis_key }}</td>
      </tr>

      <tr>
        <th>Length</th>
        <td>{{ q.length }}</td>
      </tr>

      <tr>
        <th>Items (first 30)</th>
        <td>
          {% if q["items"] %}
          <ul style="margin: 0; padding-left: 20px">
            {% for item in q["items"] %}
            <li><code>{{ item | e }}</code></li>
            {% endfor %}
          </ul>
          {% else %}
          <i>No items</i>
          {% endif %}
        </td>
      </tr>
    </table>
  </div>
  {% endfor %}
</div>

<script>
  setInterval(() => {
    window.location.reload();
  }, 5000);
</script>

{% endblock %}