simple-queue-web 0.1.0

Web UI for inspecting and managing simple-queue persistent job queues backed by PostgreSQL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

{% extends "base.html" %}

{% block title %}Job {{ job.id }} - Queue Manager{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="/queues/browse?queue={{ job.queue }}&source={{ job.source }}" class="text-sm text-blue-400 hover:text-blue-300">&larr; Back</a>
            <span class="text-gray-700">|</span>
            <span class="text-lg font-bold text-white">Job Details</span>
            <span class="text-xs px-2 py-0.5 rounded
                {% if job.source == "dlq" %}bg-red-900/50 text-red-300 border border-red-800
                {% else if job.source == "archive" %}bg-gray-800 text-gray-400 border border-gray-700
                {% else %}bg-blue-900/50 text-blue-300 border border-blue-800{% endif %}">
                {{ job.source }}
            </span>
        </div>
        <div class="flex items-center gap-2">
            {% if job.source == "queue" %}
            <form method="post" action="/jobs/{{ job.id }}/restart?queue={{ job.queue }}&page=1&source=queue">
                <button type="submit"
                        class="px-4 py-2 bg-yellow-600 hover:bg-yellow-500 text-white text-sm font-medium rounded transition-colors"
                        onclick="return confirm('Restart this job?')">
                    Restart
                </button>
            </form>
            <form method="post" action="/jobs/{{ job.id }}/cancel?queue={{ job.queue }}&page=1&source=queue">
                <button type="submit"
                        class="px-4 py-2 bg-red-600 hover:bg-red-500 text-white text-sm font-medium rounded transition-colors"
                        onclick="return confirm('Cancel this job?')">
                    Cancel
                </button>
            </form>
            <form method="post" action="/jobs/{{ job.id }}/reschedule?queue={{ job.queue }}&page=1&source=queue" id="reschedule-form">
                <input type="datetime-local" name="run_at" id="run-at-input"
                       class="bg-gray-800 border border-gray-700 text-white text-sm rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500 mr-1">
                <button type="submit"
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded transition-colors"
                        onclick="return confirm('Reschedule this job?')">
                    Reschedule
                </button>
            </form>
            {% endif %}
            {% if job.source == "dlq" || job.source == "archive" %}
            <form method="post" action="/jobs/{{ job.id }}/requeue?queue={{ job.queue }}&page=1&source={{ job.source }}">
                <button type="submit"
                        class="px-4 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded transition-colors"
                        onclick="return confirm('Move this job back to the queue as pending?')">
                    Move to Queue
                </button>
            </form>
            {% endif %}
        </div>
    </div>

    <div class="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
        <table class="w-full text-sm">
            <tbody>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 w-48 align-top">ID</td>
                    <td class="px-4 py-3 text-white font-mono text-xs">{{ job.id }}</td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Queue</td>
                    <td class="px-4 py-3">
                        <a href="/queues/browse?queue={{ job.queue }}&source={{ job.source }}" class="text-blue-400 hover:text-blue-300">{{ job.queue }}</a>
                    </td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Status</td>
                    <td class="px-4 py-3">
                        <span class="text-xs px-2 py-0.5 rounded
                            {% if job.status == "pending" %}bg-yellow-900/50 text-yellow-300
                            {% else if job.status == "running" %}bg-blue-900/50 text-blue-300
                            {% else if job.status == "completed" %}bg-green-900/50 text-green-300
                            {% else if job.status == "failed" %}bg-red-900/50 text-red-300
                            {% else if job.status == "cancelled" %}bg-gray-800 text-gray-500
                            {% else %}bg-gray-800 text-gray-400{% endif %}">
                            {{ job.status }}
                        </span>
                    </td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Attempts</td>
                    <td class="px-4 py-3 text-white">
                        {{ job.attempt }} / {{ job.max_attempts }}
                        {% if job.attempt >= job.max_attempts %}
                        <span class="text-red-400 text-xs ml-2">(max reached)</span>
                        {% endif %}
                    </td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Reprocess Count</td>
                    <td class="px-4 py-3 text-white">{{ job.reprocess_count }}</td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Fingerprint</td>
                    <td class="px-4 py-3 text-white font-mono text-xs">
                        {% match job.fingerprint %}{% when Some(fp) %}{{ fp }}{% else %}<span class="text-gray-600">null</span>{% endmatch %}
                    </td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Unique Key</td>
                    <td class="px-4 py-3 text-white font-mono text-xs">
                        {% match job.unique_key %}{% when Some(uk) %}{{ uk }}{% else %}<span class="text-gray-600">null</span>{% endmatch %}
                    </td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Created At</td>
                    <td class="px-4 py-3 text-white text-xs">{% match job.created_at_fmt %}{% when Some(t) %}{{ t }}{% else %}-{% endmatch %}</td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Run At</td>
                    <td class="px-4 py-3 text-xs"><div class="leading-none">{{ job.run_at_date }}</div><div class="text-[10px] text-gray-500 leading-none mt-0.5">{{ job.run_at_time }}</div></td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Updated At</td>
                    <td class="px-4 py-3 text-xs"><div class="leading-none">{{ job.updated_at_date }}</div><div class="text-[10px] text-gray-500 leading-none mt-0.5">{{ job.updated_at_time }}</div></td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Completed At</td>
                    <td class="px-4 py-3 text-white text-xs">{% match job.completed_at_fmt %}{% when Some(t) %}{{ t }}{% else %}<span class="text-gray-600">-</span>{% endmatch %}</td>
                </tr>
                <tr class="border-b border-gray-800">
                    <td class="px-4 py-3 text-gray-400 align-top">Runtime</td>
                    <td class="px-4 py-3 text-white font-mono text-xs">{% if !job.runtime.is_empty() %}{{ job.runtime }}{% else %}<span class="text-gray-600">-</span>{% endif %}</td>
                </tr>
                <tr>
                    <td class="px-4 py-3 text-gray-400 align-top">Job Data</td>
                    <td class="px-4 py-3">
                        <pre class="bg-gray-950 rounded p-3 text-xs text-green-300 overflow-x-auto max-h-80"><code>{% match job.job_data %}{% when Some(d) %}{{ job.job_data_pretty }}{% else %}null{% endmatch %}</code></pre>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
(function() {
    var ra = {% match job.run_at %}{% when Some(t) %}{{ t }}{% else %}null{% endmatch %};
    if (ra !== null) {
        var d = ra.substring(0, 16);
        var inp = document.getElementById('run-at-input');
        if (inp) inp.value = d.replace(' ', 'T');
    }
})();
</script>
{% endblock %}