Question
I have a Django site using Celery + RabbitMQ as a task queue for long running tasks. I'm storing the results in Redis. I've been able to show the progress of one task in a bootstrap progress bar using Celery's update_state and doing an ajax post to the Redis DB via a button to retrieve the current state.
Ideally, I would like to show each task currently running or recently complete that is in Redis with it's own progress bar. Currently, I am only able to show the progress of the current task kicked off by my little Click Here button.
I have tried to make multiple classes for the progress bars, but honestly I am lost as to how to do this and can't seem to find anything on how to do something like this. I've tried to upload as much of my code as possible. Any help would be greatly appreciated!
Code
urls.py
urlpatterns = [
url(r'^poll_state$', poll_state, name="poll_state"),
url(r'^do_task$', do_task, name="do_task"),
]
views.py
from django.shortcuts import render
import json
from celery.result import AsyncResult
from django.shortcuts import render_to_response
from django.http import HttpResponse
from django.views.generic.base import View
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def do_task(request):
data = 'Fail'
if request.is_ajax():
job = add.delay()
request.session['task_id'] = job.id
data = job.id
else:
data = 'This is not an ajax request!'
json_data = json.dumps(data)
return HttpResponse(json_data, content_type='application/json')
@csrf_exempt
def poll_state(request):
""" A view to report the progress to the user """
data = 'Fail'
if request.is_ajax():
if 'task_id' in request.POST.keys() and request.POST['task_id']:
task_id = request.POST['task_id']
task = AsyncResult(task_id)
data = task.info
else:
data = 'No task_id in the request'
else:
data = 'This is not an ajax request'
json_data = json.dumps(data)
return HttpResponse(json_data, content_type='application/json')
tasks.py
from __future__ import absolute_import, unicode_literals
from celery import shared_task
from celery.decorators import task
from celery import current_task
from celery.result import AsyncResult
import celery
from .celery import app
import time
#Task loops every half second to update the current state
@task(bind=True, ignore_result=True)
def add(self):
for i in range(101):
time.sleep(0.5)
self.update_state(state="PROGRESS", meta={'current': i, 'total': 100})
celery.py
from __future__ import absolute_import, unicode_literals
import os
from celery import Celery
from django.conf import settings
# set the default Django settings module for the 'celery' program.
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'yodaclaw.settings')
app = Celery('myAppName')
# Using a string here means the worker doesn't have to serialize
# the configuration object to child processes.
# - namespace='CELERY' means all celery-related configuration keys
# should have a `CELERY_` prefix.
app.config_from_object('django.conf:settings', namespace='CELERY')
# Load task modules from all registered Django app configs.
# This allows you in shell to not have to import yodaclaw.tasks
app.autodiscover_tasks(lambda: settings.INSTALLED_APPS)
@app.task
def debug_task(self):
print('Request: {0!r}'.format(self.request))
settings.py
# Celery Settings
CELERY_BROKER_URL = 'amqp://localhost'
CELERY_RESULT_BACKEND = 'redis://localhost:6379/0'
CELERY_ACCEPT_CONTENT = ['application/json']
CELERY_ACCEPT_CONTENT = ['json']
CELERY_TASK_SERIALIZER = 'json'
CELERY_TRACK_STARTED = True
base.py
{% load static %}
<!DOCTYPE html>
<html>
<head>
{% block title_outer %}
{% endblock %}
{% block meta %}
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block javascript %}
{% endblock %}
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block body %}
<div class="wrapper">
{% block nav_header %}
{% endblock %}
{% block nav_sidebar %}
{% endblock %}
{% block content_wrapper %}
<div class="content-wrapper">
{% block content_header %}
<section class="content-header">
</section>
{% endblock %}
{% block content_outer %}
<section class="content">
{% block messages %}
{% endblock %}
{% block content_block_wrap %}
{% block content %}{% endblock %}
{% endblock %}
</section>
{% endblock %}
{% endblock content_wrapper %}
{% block nav_footer %}
{% endblock %}
</div>
<!-- The Right Sidebar -->
<aside class="control-sidebar control-sidebar-light">
<!-- Content of the sidebar goes here -->
{% if task_id %}
<h6>Task ID: {{ task_id }}</h6>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
{% if task_id %} {{ task_id }} {% endif %}
</div>
</div>
{% endif %}
<div id="container">
<div id="action">
<button id="do-task">Click here!</button>
</div>
</div>
<!-- Ajax Post to poll_state -->
{% if task_id %}
<script type="text/javascript">
jQuery(document).ready(function() {
var PollState = function(task_id) {
jQuery.ajax({
url: "poll_state",
type: "POST",
data: "task_id=" + task_id,
}).done(function(task) {
if (task.current) {
jQuery('.progress-bar').css({'width': task.current + '%'});
jQuery('.progress-bar').html(task.current + '%');
}
else {
jQuery('.status').html(task);
};
PollState(task_id);
});
}
PollState('{{ task_id }}');
})
</script>
{% endif %}
<!-- Clickable button for do_task -->
<script type="text/javascript">
jQuery('#do-task').click( function() {
jQuery.ajax({
url: "do_task",
data: {},
success: function(){
jQuery.ajax({
url: "",
context: document.body,
success: function(s, x) {
jQuery(this).html(s);
}
});
}
})
});
</script>
</aside>
<!-- The sidebar's background -->
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>
{% endblock body %}
</body>
{% block extra_foot %}{% endblock %}
</html>
