feat: Improve submission status UX during validation (#5742)

* feat: Quietly check submission status before reloading

* chore: Remove misleading "time since" display

* feat: Back off submission status poll frequency

* chore: Fix code comment
This commit is contained in:
Jennifer Richards 2023-06-08 17:15:27 -03:00 committed by GitHub
parent 818f0a9938
commit d18db5bb76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 35 deletions

View file

@ -66,28 +66,31 @@ $(function () {
});
// Reload page periodically if the enableAutoReload checkbox is present and checked
const autoReloadSwitch = document.getElementById("enableAutoReload");
const timeSinceDisplay = document.getElementById("time-since-uploaded");
if (autoReloadSwitch) {
const autoReloadTime = 30000; // ms
let autoReloadTimeoutId;
autoReloadSwitch.parentElement.classList.remove("d-none");
timeSinceDisplay.classList.remove("d-none");
autoReloadTimeoutId = setTimeout(() => location.reload(), autoReloadTime);
autoReloadSwitch.addEventListener("change", (e) => {
if (e.currentTarget.checked) {
if (!autoReloadTimeoutId) {
autoReloadTimeoutId = setTimeout(() => location.reload(), autoReloadTime);
timeSinceDisplay.classList.remove("d-none");
}
} else {
if (autoReloadTimeoutId) {
clearTimeout(autoReloadTimeoutId);
autoReloadTimeoutId = null;
timeSinceDisplay.classList.add("d-none");
}
// If draft is validating, poll until validation is complete, then reload the page
const submissionValidatingAlert = document.getElementById('submission-validating-alert');
if (submissionValidatingAlert) {
let statusPollTimer;
const statusUrl = submissionValidatingAlert.dataset['submissionStatusUrl'];
let statusPollInterval = 2000; // ms
const maxPollInterval = 32000; // ms
function checkStatus() {
if (statusPollInterval < maxPollInterval) {
statusPollInterval *= 2;
}
});
const xhr = new XMLHttpRequest();
xhr.open("GET", statusUrl, true);
xhr.onload = (e) => {
if (xhr.response && xhr.response.state !== 'validating') {
location.reload();
} else {
statusPollTimer = setTimeout(checkStatus, statusPollInterval);
}
};
xhr.onerror = (e) => {statusPollTimer = setTimeout(checkStatus, statusPollInterval);};
xhr.responseType = 'json';
xhr.send('');
}
statusPollTimer = setTimeout(checkStatus, statusPollInterval);
}
});

View file

@ -137,25 +137,20 @@
Notice: The Internet-Draft submission process has changed as of Datatracker version 10.3.0.
Your Internet-Draft is currently being processed and validated asynchronously. Results will be
displayed at this URL when they are available. If JavaScript is enabled in your
browser, this page will refreshed automatically. If JavaScript is not enabled, or if you
disable the automatic refresh with the toggle below, please reload this page in a few
minutes to see the results.
browser, this page will refreshed automatically. If JavaScript is not enabled,
please reload this page in a few minutes to see the results.
</div>
<div class="alert alert-warning my-3">
This submission is being processed and validated. This normally takes a few minutes after
submission.
<div id="submission-validating-alert"
class="alert alert-warning my-3"
data-submission-status-url="{% url 'ietf.submit.views.api_submission_status' submission_id=submission.pk %}">
This submission is being processed and validated. This usually takes a few seconds but may
take a few minutes for complex drafts or during periods of heavy load.
{% with earliest_event=submission.submissionevent_set.last %}
{% if earliest_event %}
Your draft was uploaded at {{ earliest_event.time }}<span id="time-since-uploaded" class="d-none">
({{ earliest_event.time|timesince }} ago)</span>.
Your draft was uploaded at {{ earliest_event.time }}.
{% endif %}
{% endwith %}
Please contact the secretariat for assistance if it has been more than an hour.
<div class="form-check form-switch mt-3 d-none">{# hide with d-none unless javascript makes it visible #}
<input class="form-check-input" type="checkbox" id="enableAutoReload" checked>
<label class="form-check-label" for="enableAutoReload"> Refresh automatically </label>
</div>
</div>
{% else %}
<h2 class="mt-5">Meta-data from the submission</h2>