mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 21:38:24 -04:00
Make job page poll for updates
This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
This commit is contained in:
Chris Hill-Scott
24
app/templates/partials/jobs/count.html
Normal file
24
app/templates/partials/jobs/count.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% from "components/big-number.html" import big_number %}
|
||||
<ul class="grid-row job-totals">
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.queued, 'queued'
|
||||
)}}
|
||||
</li>
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.sent, 'sent'
|
||||
)}}
|
||||
</li>
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.failed,
|
||||
'failed'
|
||||
)}}
|
||||
</li>
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.cost, 'total cost'
|
||||
)}}
|
||||
</li>
|
||||
</ul>
|
||||
22
app/templates/partials/jobs/notifications.html
Normal file
22
app/templates/partials/jobs/notifications.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
|
||||
|
||||
{% call(item) list_table(
|
||||
notifications,
|
||||
caption=uploaded_file_name,
|
||||
caption_visible=False,
|
||||
empty_message="No messages to show yet",
|
||||
field_headings=[
|
||||
'Recipient',
|
||||
right_aligned_field_heading('Status')
|
||||
]
|
||||
) %}
|
||||
{% call field() %}
|
||||
{{ item.to }}
|
||||
{% endcall %}
|
||||
{% call field(
|
||||
align='right',
|
||||
status='error' if item.status == 'Failed' else 'default'
|
||||
) %}
|
||||
{{ item.status|title }} at {{ item.sent_at|format_time }}
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
9
app/templates/partials/jobs/status.html
Normal file
9
app/templates/partials/jobs/status.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{% if finished_at %}
|
||||
<p class='heading-small'>
|
||||
Finished {{ finished_at|format_datetime }}
|
||||
</p>
|
||||
{% else %}
|
||||
<p class='heading-small'>
|
||||
Started {{ uploaded_at|format_datetime }}
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -1,97 +0,0 @@
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
|
||||
{% from "components/big-number.html" import big_number %}
|
||||
{% from "components/banner.html" import banner %}
|
||||
{% from "components/sms-message.html" import sms_message %}
|
||||
{% from "components/email-message.html" import email_message %}
|
||||
|
||||
{% block page_title %}
|
||||
{{ uploaded_file_name }} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
<h1 class="heading-large">
|
||||
{{ uploaded_file_name }}
|
||||
</h1>
|
||||
|
||||
{% if 'sms' == template.template_type %}
|
||||
<div class="grid-row">
|
||||
<div class="column-two-thirds">
|
||||
{{ sms_message(
|
||||
template.formatted_as_markup,
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
{% elif 'email' == template.template_type %}
|
||||
{{ email_message(
|
||||
template.subject,
|
||||
template,
|
||||
from_address='{}@notifications.service.gov.uk'.format(service.email_from),
|
||||
from_name=from_name
|
||||
)}}
|
||||
{% endif %}
|
||||
|
||||
{% if finished_at %}
|
||||
<p class='heading-small'>
|
||||
Finished {{ finished_at|format_datetime }}
|
||||
</p>
|
||||
{% else %}
|
||||
<p class='heading-small'>
|
||||
Started {{ uploaded_at|format_datetime }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<ul class="grid-row job-totals">
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.queued, 'queued'
|
||||
)}}
|
||||
</li>
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.sent, 'sent'
|
||||
)}}
|
||||
</li>
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
counts.failed,
|
||||
'failed'
|
||||
)}}
|
||||
</li>
|
||||
<li class="column-one-quarter">
|
||||
{{ big_number(
|
||||
cost, 'total cost'
|
||||
)}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
{% if notifications %}
|
||||
{% call(item) list_table(
|
||||
notifications,
|
||||
caption=uploaded_file_name,
|
||||
caption_visible=False,
|
||||
empty_message="Messages go here",
|
||||
field_headings=[
|
||||
'Recipient',
|
||||
right_aligned_field_heading('Status')
|
||||
]
|
||||
) %}
|
||||
{% call field() %}
|
||||
{{ item.to }}
|
||||
{% endcall %}
|
||||
{% call field(
|
||||
align='right',
|
||||
status='error' if item.status == 'Failed' else 'default'
|
||||
) %}
|
||||
{{ item.status|title }} at {{ item.sent_at|format_time }}
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
{% else %}
|
||||
<p>
|
||||
<a href="{{ url_for(".view_job", service_id=service_id, job_id=job_id) }}">Refresh</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
69
app/templates/views/jobs/job.html
Normal file
69
app/templates/views/jobs/job.html
Normal file
@@ -0,0 +1,69 @@
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/banner.html" import banner %}
|
||||
{% from "components/sms-message.html" import sms_message %}
|
||||
{% from "components/email-message.html" import email_message %}
|
||||
|
||||
{% block page_title %}
|
||||
{{ uploaded_file_name }} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
<h1 class="heading-large">
|
||||
{{ uploaded_file_name }}
|
||||
</h1>
|
||||
|
||||
{% if 'sms' == template.template_type %}
|
||||
<div class="grid-row">
|
||||
<div class="column-two-thirds">
|
||||
{{ sms_message(
|
||||
template.formatted_as_markup,
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
{% elif 'email' == template.template_type %}
|
||||
{{ email_message(
|
||||
template.subject,
|
||||
template,
|
||||
from_address='{}@notifications.service.gov.uk'.format(service.email_from),
|
||||
from_name=from_name
|
||||
)}}
|
||||
{% endif %}
|
||||
|
||||
{% if not finished_at %}
|
||||
<div
|
||||
data-module="update-content"
|
||||
data-resource="{{url_for(".view_job_updates", service_id=service_id, job_id=job_id)}}"
|
||||
data-key="status"
|
||||
>
|
||||
{% endif %}
|
||||
{% include 'partials/jobs/status.html' %}
|
||||
{% if not finished_at %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not finished_at %}
|
||||
<div
|
||||
data-module="update-content"
|
||||
data-resource="{{url_for(".view_job_updates", service_id=service_id, job_id=job_id)}}"
|
||||
data-key="counts"
|
||||
>
|
||||
{% endif %}
|
||||
{% include 'partials/jobs/count.html' %}
|
||||
{% if not finished_at %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not finished_at %}
|
||||
<div
|
||||
data-module="update-content"
|
||||
data-resource="{{url_for(".view_job_updates", service_id=service_id, job_id=job_id)}}"
|
||||
data-key="notifications"
|
||||
>
|
||||
{% endif %}
|
||||
{% include 'partials/jobs/notifications.html' %}
|
||||
{% if not finished_at %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user