# Celery Progress Bars for Django
Drop in, dependency-free progress bars for your Django/Celery applications.
Super simple setup. Lots of customization available.
## Demo
[Celery Progress Bar demo on Build With Django](https://buildwithdjango.com/projects/celery-progress/)
### Github demo application: build a download progress bar for Django
Starting with Celery can be challenging, [eeintech](https://github.com/eeintech) built a complete [Django demo application](https://github.com/eeintech/django-celery-progress-demo) along with a [step-by-step guide](https://eeinte.ch/stream/progress-bar-django-using-celery/) to get you started on building your own progress bar!
## Installation
If you haven't already, make sure you have properly [set up celery in your project](https://docs.celeryproject.org/en/stable/getting-started/first-steps-with-celery.html#first-steps).
Then install this library:
```bash
pip install celery-progress
```
## Usage
### Prerequisites
First add `celery_progress` to your `INSTALLED_APPS` in `settings.py`.
Then add the following url config to your main `urls.py`:
```python
from django.urls import path, include
urlpatterns = [
# your project's patterns here
...
path(r'^celery-progress/', include('celery_progress.urls')), # add this line (the endpoint is configurable)
]
```
### Recording Progress
In your task you should add something like this:
```python
from celery import shared_task
from celery_progress.backend import ProgressRecorder
import time
@shared_task(bind=True)
def my_task(self, seconds):
progress_recorder = ProgressRecorder(self)
result = 0
for i in range(seconds):
time.sleep(1)
result += i
progress_recorder.set_progress(i + 1, seconds)
return result
```
You can add an optional progress description like this:
```python
progress_recorder.set_progress(i + 1, seconds, description='my progress description')
```
### Displaying progress
In the view where you call the task you need to get the task ID like so:
**views.py**
```python
def progress_view(request):
result = my_task.delay(10)
return render(request, 'display_progress.html', context={'task_id': result.task_id})
```
Then in the page you want to show the progress bar you just do the following.
#### Add the following HTML wherever you want your progress bar to appear:
**display_progress.html**
```html
<div class='progress-wrapper'>
<div id='progress-bar' class='progress-bar' style="background-color: #68a9ef; width: 0%;"> </div>
</div>
<div id="progress-bar-message">Waiting for progress to start...</div>
```
#### Import the javascript file.
**display_progress.html**
```html
<script src="{% static 'celery_progress/celery_progress.js' %}"></script>
```
#### Initialize the progress bar:
```javascript
// vanilla JS version
document.addEventListener("DOMContentLoaded", function () {
var progressUrl = "{% url 'celery_progress:task_status' task_id %}";
CeleryProgressBar.initProgressBar(progressUrl);
});
```
or
```javascript
// JQuery
$(function () {
var progressUrl = "{% url 'celery_progress:task_status' task_id %}";
CeleryProgressBar.initProgressBar(progressUrl)
});
```
### Displaying the result of a task
If you'd like you can also display the result of your task on the front end.
To do that follow the steps below. Result handling can also be customized.
#### Initialize the result block:
This is all that's needed to render the result on the page.
**display_progress.html**
```html
<div id="celery-result"></div>
```
But more likely you will want to customize how the result looks, which can be done as below:
```javascript
// JQuery
var progressUrl = "{% url 'celery_progress:task_status' task_id %}";
function customResult(resultElement, result) {
$( resultElement ).append(
$('<p>').text('Sum of all seconds is ' + result)
);
}
$(function () {
CeleryProgressBar.initProgressBar(progressUrl, {
onResult: customResult,
})
});
```
## Customization
The `initProgressBar` function takes an optional object of options. The following options are supported:
| Option | What it does | Default Value |
|--------|--------------|---------------|
| pollInterval | How frequently to poll for progress (in milliseconds) | 500 |
| progressBarId | Override the ID used for the progress bar | 'progress-bar' |
| progressBarMessageId | Override the ID used for the progress bar message | 'progress-bar-message' |
| progressBarElement | Override the *element* used for the progress bar. If specified, progressBarId will be ignored. | document.getElementById(progressBarId) |
| progressBarMessageElement | Override the *element* used for the progress bar message. If specified, progressBarMessageId will be ignored. | document.getElementById(progressBarMessageId) |
| resultElementId | Override the ID used for the result | 'celery-result' |
| resultElement | Override the *element* used for the result. If specified, resultElementId will be ignored. | document.getElementById(resultElementId) |
| onProgress | function to call when progress is updated | onProgressDefault |
| onSuccess | function to call when progress successfully completes | onSuccessDefault |
| onError | function to call on a known error with no specified handler | onErrorDefault |
| onRetry | function to call when a task attempts to retry | onRetryDefault |
| onIgnored | function to call when a task result is ignored | onIgnoredDefault |
| onTaskError | function to call when progress completes with an error | onError |
| onNetworkError | function to call on a network error (ignored by WebSocket) | onError |
| onHttpError | function to call on a non-200 response (ignored by WebSocket) | onError |
| onDataError | function to call on a response that's not JSON or has invalid schema due to a programming error | onError |
| onResult | function to call when returned non empty result | CeleryProgressBar.onResultDefault |
| barColors | dictionary containing color values for various progress bar states. Colors that are not specified will defer to defaults | barColorsDefault |
| defaultMessages | dictionary containing default messages that can be overridden | see below |
The `barColors` option allows you to customize the color of each progress bar state by passing a dictionary of key-value pairs of `state: #hexcode`. The defaults are shown below.
| State | Hex Code | Image Color |
|-------|----------|:-------------:|
| success | #76ce60 |  |
| error | #dc4f63 |  |
| progress | #68a9ef |  |
| ignored | #7a7a7a |  |
The `defaultMessages` option allows you to override some default messages in the UI. At the moment these are:
| Message Id | When Shown | Default Value |
|-------|----------|:-------------:|
| waiting | Task is waiting to start | 'Waiting for task to start...'
| started | Task has started but reports no progress | 'Task started...'
# WebSocket Support
Additionally, this library offers WebSocket support using [Django Channels](https://channels.readthedocs.io/en/latest/)
courtesy of [EJH2](https://github.com/EJH2/).
A working example project leveraging WebSockets is [available here](https://github.com/EJH2/cp_ws-example).
To use WebSockets, install with `pip install celery-progress[websockets,redis]` or
`pip install celery-progress[websockets,rabbitmq]` (depending on broker dependencies).
See `WebSocketProgressRecorder` and `websockets.js` for details.
# Securing the get_progress endpoint
By default, anyone can see the status and result of any task by accessing `/celery-progress/<task_id>`
To limit access, you need to wrap `get_progress()` in a view of your own which implements the permissions check, and create a new url routing to point to your view. Make sure to remove any existing (unprotected) celery progress urls from your root urlconf at the same time.
For example, requiring login with a class-based view:
```python
# views.py
from celery_progress.views import get_progress
from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import View
class TaskStatus(LoginRequiredMixin, View):
def get(self, request, task_id, *args, **kwargs):
# Other checks could go here
return get_progress(request, task_id=task_id)
```
```python
# urls.py
from django.urls import path
from . import views
urlpatterns = [
...
path('task-status/<uuid:task_id>', views.TaskStatus.as_view(), name='task_status'),
...
]
```
Requiring login with a function-based view:
```python
# views.py
from celery_progress.views import get_progress
from django.contrib.auth.decorators import login_required
@login_required
def task_status(request, task_id):
# Other checks could go here
return get_progress(request, task_id)
```
```python
# urls.py
from django.urls import path
from . import views
urlpatterns = [
...
path('task-status/<uuid:task_id>', views.task_status, name='task_status'),
...
]
```
Any links to `'celery_progress:task_status'` will need to be changed to point to your new endpoint.
Raw data
{
"_id": null,
"home_page": "https://github.com/czue/celery-progress",
"name": "celery-progress",
"maintainer": "",
"docs_url": null,
"requires_python": "",
"maintainer_email": "",
"keywords": "",
"author": "Cory Zue",
"author_email": "cory@coryzue.com",
"download_url": "https://files.pythonhosted.org/packages/c6/3c/50a7f9a49822fdd02ff8fd7b5cfd5465ca907905af8145e3a433dc3f3d95/celery-progress-0.3.tar.gz",
"platform": null,
"description": "# Celery Progress Bars for Django\n\nDrop in, dependency-free progress bars for your Django/Celery applications.\n\nSuper simple setup. Lots of customization available.\n\n## Demo\n\n[Celery Progress Bar demo on Build With Django](https://buildwithdjango.com/projects/celery-progress/)\n\n### Github demo application: build a download progress bar for Django\nStarting with Celery can be challenging, [eeintech](https://github.com/eeintech) built a complete [Django demo application](https://github.com/eeintech/django-celery-progress-demo) along with a [step-by-step guide](https://eeinte.ch/stream/progress-bar-django-using-celery/) to get you started on building your own progress bar!\n\n## Installation\n\nIf you haven't already, make sure you have properly [set up celery in your project](https://docs.celeryproject.org/en/stable/getting-started/first-steps-with-celery.html#first-steps).\n\nThen install this library:\n\n```bash\npip install celery-progress\n```\n\n## Usage\n\n### Prerequisites\n\nFirst add `celery_progress` to your `INSTALLED_APPS` in `settings.py`.\n\nThen add the following url config to your main `urls.py`:\n\n```python\nfrom django.urls import path, include\n\nurlpatterns = [\n # your project's patterns here\n ...\n path(r'^celery-progress/', include('celery_progress.urls')), # add this line (the endpoint is configurable)\n] \n```\n\n### Recording Progress\n\nIn your task you should add something like this:\n\n```python\nfrom celery import shared_task\nfrom celery_progress.backend import ProgressRecorder\nimport time\n\n@shared_task(bind=True)\ndef my_task(self, seconds):\n progress_recorder = ProgressRecorder(self)\n result = 0\n for i in range(seconds):\n time.sleep(1)\n result += i\n progress_recorder.set_progress(i + 1, seconds)\n return result\n```\n\nYou can add an optional progress description like this:\n\n```python\n progress_recorder.set_progress(i + 1, seconds, description='my progress description')\n```\n\n### Displaying progress\n\nIn the view where you call the task you need to get the task ID like so:\n\n**views.py**\n```python\ndef progress_view(request):\n result = my_task.delay(10)\n return render(request, 'display_progress.html', context={'task_id': result.task_id})\n```\n\nThen in the page you want to show the progress bar you just do the following.\n\n#### Add the following HTML wherever you want your progress bar to appear:\n\n**display_progress.html**\n```html\n<div class='progress-wrapper'>\n <div id='progress-bar' class='progress-bar' style=\"background-color: #68a9ef; width: 0%;\"> </div>\n</div>\n<div id=\"progress-bar-message\">Waiting for progress to start...</div>\n```\n\n#### Import the javascript file.\n\n**display_progress.html**\n```html\n<script src=\"{% static 'celery_progress/celery_progress.js' %}\"></script>\n```\n\n#### Initialize the progress bar:\n\n```javascript\n// vanilla JS version\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n var progressUrl = \"{% url 'celery_progress:task_status' task_id %}\";\n CeleryProgressBar.initProgressBar(progressUrl);\n});\n```\n\nor\n\n```javascript\n// JQuery\n$(function () {\n var progressUrl = \"{% url 'celery_progress:task_status' task_id %}\";\n CeleryProgressBar.initProgressBar(progressUrl)\n});\n```\n\n### Displaying the result of a task\n\nIf you'd like you can also display the result of your task on the front end. \n\nTo do that follow the steps below. Result handling can also be customized.\n\n#### Initialize the result block:\n\nThis is all that's needed to render the result on the page.\n\n**display_progress.html**\n```html\n<div id=\"celery-result\"></div>\n```\n\nBut more likely you will want to customize how the result looks, which can be done as below:\n\n```javascript\n// JQuery\nvar progressUrl = \"{% url 'celery_progress:task_status' task_id %}\";\n\nfunction customResult(resultElement, result) {\n $( resultElement ).append(\n $('<p>').text('Sum of all seconds is ' + result)\n );\n}\n\n$(function () {\n CeleryProgressBar.initProgressBar(progressUrl, {\n onResult: customResult,\n })\n});\n```\n\n## Customization\n\nThe `initProgressBar` function takes an optional object of options. The following options are supported:\n\n| Option | What it does | Default Value |\n|--------|--------------|---------------|\n| pollInterval | How frequently to poll for progress (in milliseconds) | 500 |\n| progressBarId | Override the ID used for the progress bar | 'progress-bar' |\n| progressBarMessageId | Override the ID used for the progress bar message | 'progress-bar-message' |\n| progressBarElement | Override the *element* used for the progress bar. If specified, progressBarId will be ignored. | document.getElementById(progressBarId) |\n| progressBarMessageElement | Override the *element* used for the progress bar message. If specified, progressBarMessageId will be ignored. | document.getElementById(progressBarMessageId) |\n| resultElementId | Override the ID used for the result | 'celery-result' |\n| resultElement | Override the *element* used for the result. If specified, resultElementId will be ignored. | document.getElementById(resultElementId) |\n| onProgress | function to call when progress is updated | onProgressDefault |\n| onSuccess | function to call when progress successfully completes | onSuccessDefault |\n| onError | function to call on a known error with no specified handler | onErrorDefault |\n| onRetry | function to call when a task attempts to retry | onRetryDefault |\n| onIgnored | function to call when a task result is ignored | onIgnoredDefault |\n| onTaskError | function to call when progress completes with an error | onError |\n| onNetworkError | function to call on a network error (ignored by WebSocket) | onError |\n| onHttpError | function to call on a non-200 response (ignored by WebSocket) | onError |\n| onDataError | function to call on a response that's not JSON or has invalid schema due to a programming error | onError |\n| onResult | function to call when returned non empty result | CeleryProgressBar.onResultDefault |\n| barColors | dictionary containing color values for various progress bar states. Colors that are not specified will defer to defaults | barColorsDefault |\n| defaultMessages | dictionary containing default messages that can be overridden | see below |\n\nThe `barColors` option allows you to customize the color of each progress bar state by passing a dictionary of key-value pairs of `state: #hexcode`. The defaults are shown below.\n\n| State | Hex Code | Image Color | \n|-------|----------|:-------------:|\n| success | #76ce60 |  |\n| error | #dc4f63 |  |\n| progress | #68a9ef |  |\n| ignored | #7a7a7a |  |\n\nThe `defaultMessages` option allows you to override some default messages in the UI. At the moment these are:\n\n| Message Id | When Shown | Default Value |\n|-------|----------|:-------------:|\n| waiting | Task is waiting to start | 'Waiting for task to start...'\n| started | Task has started but reports no progress | 'Task started...'\n\n# WebSocket Support\n\nAdditionally, this library offers WebSocket support using [Django Channels](https://channels.readthedocs.io/en/latest/)\ncourtesy of [EJH2](https://github.com/EJH2/).\n\nA working example project leveraging WebSockets is [available here](https://github.com/EJH2/cp_ws-example).\n\nTo use WebSockets, install with `pip install celery-progress[websockets,redis]` or\n`pip install celery-progress[websockets,rabbitmq]` (depending on broker dependencies).\n\nSee `WebSocketProgressRecorder` and `websockets.js` for details.\n\n# Securing the get_progress endpoint\nBy default, anyone can see the status and result of any task by accessing `/celery-progress/<task_id>`\n\nTo limit access, you need to wrap `get_progress()` in a view of your own which implements the permissions check, and create a new url routing to point to your view. Make sure to remove any existing (unprotected) celery progress urls from your root urlconf at the same time.\n\n\nFor example, requiring login with a class-based view:\n```python\n\n# views.py\nfrom celery_progress.views import get_progress\nfrom django.contrib.auth.mixins import LoginRequiredMixin\nfrom django.views.generic import View\n\nclass TaskStatus(LoginRequiredMixin, View):\n def get(self, request, task_id, *args, **kwargs):\n # Other checks could go here\n return get_progress(request, task_id=task_id)\n```\n\n```python\n# urls.py\nfrom django.urls import path\nfrom . import views\n\nurlpatterns = [\n ...\n path('task-status/<uuid:task_id>', views.TaskStatus.as_view(), name='task_status'),\n ...\n]\n```\n\nRequiring login with a function-based view:\n```python\n\n# views.py\nfrom celery_progress.views import get_progress\nfrom django.contrib.auth.decorators import login_required\n\n@login_required\ndef task_status(request, task_id):\n # Other checks could go here\n return get_progress(request, task_id)\n```\n\n```python\n# urls.py\nfrom django.urls import path\n\nfrom . import views\n\nurlpatterns = [\n ...\n path('task-status/<uuid:task_id>', views.task_status, name='task_status'),\n ...\n]\n```\n\n\nAny links to `'celery_progress:task_status'` will need to be changed to point to your new endpoint.\n\n",
"bugtrack_url": null,
"license": "MIT License",
"summary": "Drop in, configurable, dependency-free progress bars for your Django/Celery applications.",
"version": "0.3",
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "d8386a209a32130a6bd51d00f78b69068248fd3f7921062b0b432f5842ee3323",
"md5": "b13b9ccd7c1c518186cd120ffe36e05c",
"sha256": "f24c844cfd6419376fd69a852b4a56167fc026a16db93eba793551f120f1f599"
},
"downloads": -1,
"filename": "celery_progress-0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b13b9ccd7c1c518186cd120ffe36e05c",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 16472,
"upload_time": "2023-04-03T15:36:52",
"upload_time_iso_8601": "2023-04-03T15:36:52.423483Z",
"url": "https://files.pythonhosted.org/packages/d8/38/6a209a32130a6bd51d00f78b69068248fd3f7921062b0b432f5842ee3323/celery_progress-0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "c63c50a7f9a49822fdd02ff8fd7b5cfd5465ca907905af8145e3a433dc3f3d95",
"md5": "7d802933d6fa1aa41ac6eb5556534e58",
"sha256": "9128e8d412548c9848a2a2994ee1f02f36cb2c8e7e6b03cf653f98908ffc0b7b"
},
"downloads": -1,
"filename": "celery-progress-0.3.tar.gz",
"has_sig": false,
"md5_digest": "7d802933d6fa1aa41ac6eb5556534e58",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 14602,
"upload_time": "2023-04-03T15:37:00",
"upload_time_iso_8601": "2023-04-03T15:37:00.315464Z",
"url": "https://files.pythonhosted.org/packages/c6/3c/50a7f9a49822fdd02ff8fd7b5cfd5465ca907905af8145e3a433dc3f3d95/celery-progress-0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-04-03 15:37:00",
"github": true,
"gitlab": false,
"bitbucket": false,
"github_user": "czue",
"github_project": "celery-progress",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "celery-progress"
}
JSON
