mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-12-06 04:41:41 +01:00
[CHANGE] Move task queue update JS into its own file
This commit is contained in:
Peter Pfeufer
parent
cc76f09a6e
commit
464016ac05
@ -0,0 +1,207 @@
|
||||
/* global fetchGet, numberFormatter, taskQueueSettings */
|
||||
|
||||
$(document).ready(() => {
|
||||
'use strict';
|
||||
|
||||
const elements = {
|
||||
total: document.getElementById('total-task-count'),
|
||||
uptime: document.getElementById('celery-uptime'),
|
||||
running: document.getElementById('running-task-count'),
|
||||
queued: document.getElementById('queued-tasks-count'),
|
||||
succeeded: document.getElementById('succeeded-tasks-count'),
|
||||
retried: document.getElementById('retried-tasks-count'),
|
||||
failed: document.getElementById('failed-tasks-count')
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches the task queue status and updates the UI elements accordingly.
|
||||
* It retrieves the total number of tasks, running tasks, queued tasks,
|
||||
* succeeded tasks, retried tasks, and failed tasks, and updates the
|
||||
* corresponding HTML elements with the fetched data.
|
||||
* It also updates the progress bars for succeeded, retried, and failed tasks.
|
||||
* The function is called immediately and then every 30 seconds to keep the
|
||||
* task queue status up to date.
|
||||
*/
|
||||
const updateTaskCount = () => {
|
||||
fetchGet({url: taskQueueSettings.url})
|
||||
.then((data) => {
|
||||
const elemProgressBar = document.getElementById('celery-tasks-progress-bar');
|
||||
const progressElements = {
|
||||
succeeded: {
|
||||
bar: document.getElementById('celery-progress-bar-succeeded'),
|
||||
text: document.getElementById('celery-progress-bar-succeeded-progress')
|
||||
},
|
||||
retried: {
|
||||
bar: document.getElementById('celery-progress-bar-retried'),
|
||||
text: document.getElementById('celery-progress-bar-retried-progress')
|
||||
},
|
||||
failed: {
|
||||
bar: document.getElementById('celery-progress-bar-failed'),
|
||||
text: document.getElementById('celery-progress-bar-failed-progress')
|
||||
}
|
||||
};
|
||||
|
||||
// Assign progress data from the fetched data to variables
|
||||
const {
|
||||
earliest_task: earliestTask,
|
||||
tasks_total: tasksTotal,
|
||||
tasks_running: tasksRunning,
|
||||
tasks_queued: tasksQueued,
|
||||
tasks_succeeded: tasksSucceeded,
|
||||
tasks_retried: tasksRetried,
|
||||
tasks_failed: tasksFailed
|
||||
} = data;
|
||||
|
||||
/**
|
||||
* Updates the text content of the specified HTML element with the given value.
|
||||
* If the value is null, it sets the text to 'N/A'.
|
||||
* Otherwise, it formats the number using the locale-specific format.
|
||||
*
|
||||
* @param {HTMLElement} element The HTML element to update.
|
||||
* @param {number|null} value The value to set in the element.
|
||||
*/
|
||||
const updateTaskCount = (element, value) => {
|
||||
element.textContent = value === null ? taskQueueSettings.l10n.na : numberFormatter({value: value, locales: taskQueueSettings.l10n.language});
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the time since the given timestamp and returns a formatted string.
|
||||
* If the timestamp is null or undefined, it returns 'N/A'.
|
||||
* The returned string is in the format of "X hours, Y minutes" or "X minutes, Y seconds".
|
||||
*
|
||||
* @param {string|null} timestamp The timestamp to calculate the time since.
|
||||
* @returns {string} A formatted string representing the time since the timestamp.
|
||||
*/
|
||||
const timeSince = (timestamp) => {
|
||||
if (!timestamp) {
|
||||
return taskQueueSettings.l10n.na;
|
||||
}
|
||||
|
||||
const diffSecs = Math.floor((Date.now() - new Date(timestamp)) / 1000);
|
||||
|
||||
if (diffSecs >= 3600) {
|
||||
const hours = Math.floor(diffSecs / 3600);
|
||||
const minutes = Math.floor((diffSecs % 3600) / 60);
|
||||
|
||||
if (minutes > 0) {
|
||||
const hourText = hours === 1 ? taskQueueSettings.l10n.hour_singular : taskQueueSettings.l10n.hour_plural;
|
||||
const minuteText = minutes === 1 ? taskQueueSettings.l10n.minute_singular : taskQueueSettings.l10n.minute_plural;
|
||||
|
||||
return `${hours} ${hourText}, ${minutes} ${minuteText}`;
|
||||
}
|
||||
|
||||
const hourText = hours === 1 ? taskQueueSettings.l10n.hour_singular : taskQueueSettings.l10n.hour_plural;
|
||||
|
||||
return `${hours} ${hourText}`;
|
||||
}
|
||||
|
||||
const units = [
|
||||
[
|
||||
60,
|
||||
taskQueueSettings.l10n.minute_singular,
|
||||
taskQueueSettings.l10n.minute_plural
|
||||
],
|
||||
[
|
||||
1,
|
||||
taskQueueSettings.l10n.second_singular,
|
||||
taskQueueSettings.l10n.second_plural
|
||||
]
|
||||
];
|
||||
|
||||
for (const [seconds, singular, plural] of units) {
|
||||
const value = Math.floor(diffSecs / seconds);
|
||||
|
||||
if (value > 0) {
|
||||
return `${value} ${value > 1 ? plural : singular}`;
|
||||
}
|
||||
}
|
||||
|
||||
return `0 ${taskQueueSettings.l10n.second_plural}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the progress bar element and its text content based on the given value and total.
|
||||
* It calculates the percentage of completion and updates the aria attributes and styles accordingly.
|
||||
*
|
||||
* @param {HTMLElement} element The progress bar element to update.
|
||||
* @param {HTMLElement} textElement The text element to update with the percentage.
|
||||
* @param {number} value The current value to set in the progress bar.
|
||||
* @param {number} total The total value for calculating the percentage.
|
||||
*/
|
||||
const updateProgressBar = (element, textElement, value, total) => {
|
||||
const percentage = total ? (value / total) * 100 : 0;
|
||||
|
||||
element.setAttribute('aria-valuenow', percentage.toString());
|
||||
textElement.textContent = `${numberFormatter({value: percentage.toFixed(0), locales: taskQueueSettings.l10n.language})}%`;
|
||||
element.style.width = `${percentage}%`;
|
||||
};
|
||||
|
||||
// Update task counts
|
||||
[
|
||||
[elements.total, tasksTotal],
|
||||
[elements.running, tasksRunning],
|
||||
[elements.queued, tasksQueued],
|
||||
[elements.succeeded, tasksSucceeded],
|
||||
[elements.retried, tasksRetried],
|
||||
[elements.failed, tasksFailed]
|
||||
].forEach(([element, value]) => {
|
||||
updateTaskCount(element, value);
|
||||
});
|
||||
|
||||
// Update uptime
|
||||
elements.uptime.textContent = timeSince(earliestTask);
|
||||
|
||||
// Update progress bar title
|
||||
const [
|
||||
titleTextSucceeded,
|
||||
titleTextRetried,
|
||||
titleTextFailed
|
||||
] = [
|
||||
[tasksSucceeded, taskQueueSettings.l10n.succeeded],
|
||||
[tasksRetried, taskQueueSettings.l10n.retried],
|
||||
[tasksFailed, taskQueueSettings.l10n.failed]
|
||||
].map(([count, label]) => {
|
||||
return `${numberFormatter({value: count, locales: taskQueueSettings.l10n.language})} ${label}`;
|
||||
});
|
||||
|
||||
// Set the title attribute for the progress bar
|
||||
elemProgressBar.setAttribute(
|
||||
'title',
|
||||
`${titleTextSucceeded}, ${titleTextRetried}, ${titleTextFailed}`
|
||||
);
|
||||
|
||||
// Update progress bars
|
||||
[
|
||||
tasksSucceeded,
|
||||
tasksRetried,
|
||||
tasksFailed
|
||||
].forEach((count, index) => {
|
||||
const type = ['succeeded', 'retried', 'failed'][index];
|
||||
|
||||
updateProgressBar(
|
||||
progressElements[type].bar,
|
||||
progressElements[type].text,
|
||||
count,
|
||||
tasksTotal
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching task queue:', error);
|
||||
|
||||
// If there is an error fetching the task queue, set all elements to 'ERROR'
|
||||
[
|
||||
elements.running,
|
||||
elements.queued,
|
||||
elements.succeeded,
|
||||
elements.retried,
|
||||
elements.failed
|
||||
].forEach((elem) => {
|
||||
elem.textContent = taskQueueSettings.l10n.error;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
updateTaskCount();
|
||||
setInterval(updateTaskCount, 30000);
|
||||
});
|
||||
@ -161,206 +161,24 @@ the escapejs filter without having to redefine them later.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const elements = {
|
||||
total: document.getElementById('total-task-count'),
|
||||
uptime: document.getElementById('celery-uptime'),
|
||||
running: document.getElementById('running-task-count'),
|
||||
queued: document.getElementById('queued-tasks-count'),
|
||||
succeeded: document.getElementById('succeeded-tasks-count'),
|
||||
retried: document.getElementById('retried-tasks-count'),
|
||||
failed: document.getElementById('failed-tasks-count')
|
||||
const taskQueueSettings = {
|
||||
url: '{% url "authentication:task_counts" %}',
|
||||
l10n: {
|
||||
language: '{{ LANGUAGE_CODE }}',
|
||||
second_singular: '{{ l10nSecondSingular|escapejs }}',
|
||||
second_plural: '{{ l10nSecondPlural|escapejs }}',
|
||||
minute_singular: '{{ l10nMinuteSingular|escapejs }}',
|
||||
minute_plural: '{{ l10nMinutePlural|escapejs }}',
|
||||
hour_singular: '{{ l10nHourSingular|escapejs }}',
|
||||
hour_plural: '{{ l10nHourPlural|escapejs }}',
|
||||
na: '{{ l10nNA|escapejs }}',
|
||||
error: '{{ l10nError|escapejs }}',
|
||||
running: '{{ l10nRunning|escapejs }}',
|
||||
queued: '{{ l10nQueued|escapejs }}',
|
||||
succeeded: '{{ l10nSucceeded|escapejs }}',
|
||||
retried: '{{ l10nRetried|escapejs }}',
|
||||
failed: '{{ l10nFailed|escapejs }}'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches the task queue status and updates the UI elements accordingly.
|
||||
* It retrieves the total number of tasks, running tasks, queued tasks,
|
||||
* succeeded tasks, retried tasks, and failed tasks, and updates the
|
||||
* corresponding HTML elements with the fetched data.
|
||||
* It also updates the progress bars for succeeded, retried, and failed tasks.
|
||||
* The function is called immediately and then every 30 seconds to keep the
|
||||
* task queue status up to date.
|
||||
*/
|
||||
const updateTaskCount = () => {
|
||||
fetchGet({url: '{% url "authentication:task_counts" %}'})
|
||||
.then((data) => {
|
||||
const numberL10nFormat = new Intl.NumberFormat('{{ LANGUAGE_CODE }}');
|
||||
const elemProgressBar = document.getElementById('celery-tasks-progress-bar');
|
||||
const progressElements = {
|
||||
succeeded: {
|
||||
bar: document.getElementById('celery-progress-bar-succeeded'),
|
||||
text: document.getElementById('celery-progress-bar-succeeded-progress')
|
||||
},
|
||||
retried: {
|
||||
bar: document.getElementById('celery-progress-bar-retried'),
|
||||
text: document.getElementById('celery-progress-bar-retried-progress')
|
||||
},
|
||||
failed: {
|
||||
bar: document.getElementById('celery-progress-bar-failed'),
|
||||
text: document.getElementById('celery-progress-bar-failed-progress')
|
||||
}
|
||||
};
|
||||
|
||||
// Assign progress data from the fetched data to variables
|
||||
const {
|
||||
earliest_task: earliestTask,
|
||||
tasks_total: tasksTotal,
|
||||
tasks_running: tasksRunning,
|
||||
tasks_queued: tasksQueued,
|
||||
tasks_succeeded: tasksSucceeded,
|
||||
tasks_retried: tasksRetried,
|
||||
tasks_failed: tasksFailed
|
||||
} = data;
|
||||
|
||||
/**
|
||||
* Updates the text content of the specified HTML element with the given value.
|
||||
* If the value is null, it sets the text to 'N/A'.
|
||||
* Otherwise, it formats the number using the locale-specific format.
|
||||
*
|
||||
* @param {HTMLElement} element The HTML element to update.
|
||||
* @param {number|null} value The value to set in the element.
|
||||
*/
|
||||
const updateTaskCount = (element, value) => {
|
||||
element.textContent = value == null ? '{{ l10nNA|escapejs }}' : numberL10nFormat.format(value);
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the time since the given timestamp and returns a formatted string.
|
||||
* If the timestamp is null or undefined, it returns 'N/A'.
|
||||
* The returned string is in the format of "X hours, Y minutes" or "X minutes, Y seconds".
|
||||
*
|
||||
* @param {string|null} timestamp The timestamp to calculate the time since.
|
||||
* @returns {string} A formatted string representing the time since the timestamp.
|
||||
*/
|
||||
const timeSince = (timestamp) => {
|
||||
if (!timestamp) {
|
||||
return '{{ l10nNA|escapejs }}';
|
||||
}
|
||||
|
||||
const diffSecs = Math.floor((Date.now() - new Date(timestamp)) / 1000);
|
||||
|
||||
if (diffSecs >= 3600) {
|
||||
const hours = Math.floor(diffSecs / 3600);
|
||||
const minutes = Math.floor((diffSecs % 3600) / 60);
|
||||
|
||||
if (minutes > 0) {
|
||||
const hourText = hours === 1 ? '{{ l10nHourSingular|escapejs }}' : '{{ l10nHourPlural|escapejs }}';
|
||||
const minuteText = minutes === 1 ? '{{ l10nMinuteSingular|escapejs }}' : '{{ l10nMinutePlural|escapejs }}';
|
||||
|
||||
return `${hours} ${hourText}, ${minutes} ${minuteText}`;
|
||||
}
|
||||
|
||||
const hourText = hours === 1 ? '{{ l10nHourSingular|escapejs }}' : '{{ l10nHourPlural|escapejs }}';
|
||||
|
||||
return `${hours} ${hourText}`;
|
||||
}
|
||||
|
||||
const units = [
|
||||
[
|
||||
60,
|
||||
'{{ l10nMinuteSingular|escapejs }}',
|
||||
'{{ l10nMinutePlural|escapejs }}'
|
||||
],
|
||||
[
|
||||
1,
|
||||
'{{ l10nSecondSingular|escapejs }}',
|
||||
'{{ l10nSecondPlural|escapejs }}'
|
||||
]
|
||||
];
|
||||
|
||||
for (const [seconds, singular, plural] of units) {
|
||||
const value = Math.floor(diffSecs / seconds);
|
||||
|
||||
if (value > 0) {
|
||||
return `${value} ${value > 1 ? plural : singular}`;
|
||||
}
|
||||
}
|
||||
|
||||
return '0 {{ l10nSecondPlural|escapejs }}';
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the progress bar element and its text content based on the given value and total.
|
||||
* It calculates the percentage of completion and updates the aria attributes and styles accordingly.
|
||||
*
|
||||
* @param {HTMLElement} element The progress bar element to update.
|
||||
* @param {HTMLElement} textElement The text element to update with the percentage.
|
||||
* @param {number} value The current value to set in the progress bar.
|
||||
* @param {number} total The total value for calculating the percentage.
|
||||
*/
|
||||
const updateProgressBar = (element, textElement, value, total) => {
|
||||
const percentage = total ? (value / total) * 100 : 0;
|
||||
|
||||
element.setAttribute('aria-valuenow', percentage.toString());
|
||||
textElement.textContent = `${numberL10nFormat.format(percentage.toFixed(0))}%`;
|
||||
element.style.width = `${percentage}%`;
|
||||
};
|
||||
|
||||
// Update task counts
|
||||
[
|
||||
[elements.total, tasksTotal],
|
||||
[elements.running, tasksRunning],
|
||||
[elements.queued, tasksQueued],
|
||||
[elements.succeeded, tasksSucceeded],
|
||||
[elements.retried, tasksRetried],
|
||||
[elements.failed, tasksFailed]
|
||||
].forEach(([element, value]) => {
|
||||
updateTaskCount(element, value);
|
||||
});
|
||||
|
||||
// Update uptime
|
||||
elements.uptime.textContent = timeSince(earliestTask);
|
||||
|
||||
// Update progress bar title
|
||||
const [
|
||||
titleTextSucceeded,
|
||||
titleTextRetried,
|
||||
titleTextFailed
|
||||
] = [
|
||||
[tasksSucceeded, '{{ l10nSucceeded|escapejs }}'],
|
||||
[tasksRetried, '{{ l10nRetried|escapejs }}'],
|
||||
[tasksFailed, '{{ l10nFailed|escapejs }}']
|
||||
].map(([count, label]) => {
|
||||
return `${numberL10nFormat.format(count)} ${label}`;
|
||||
});
|
||||
|
||||
// Set the title attribute for the progress bar
|
||||
elemProgressBar.setAttribute(
|
||||
'title',
|
||||
`${titleTextSucceeded}, ${titleTextRetried}, ${titleTextFailed}`
|
||||
);
|
||||
|
||||
// Update progress bars
|
||||
[
|
||||
tasksSucceeded,
|
||||
tasksRetried,
|
||||
tasksFailed
|
||||
].forEach((count, index) => {
|
||||
const type = ['succeeded', 'retried', 'failed'][index];
|
||||
|
||||
updateProgressBar(
|
||||
progressElements[type].bar,
|
||||
progressElements[type].text,
|
||||
count,
|
||||
tasksTotal
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching task queue:', error);
|
||||
|
||||
// If there is an error fetching the task queue, set all elements to 'ERROR'
|
||||
[
|
||||
elements.running,
|
||||
elements.queued,
|
||||
elements.succeeded,
|
||||
elements.retried,
|
||||
elements.failed
|
||||
].forEach((elem) => {
|
||||
elem.textContent = '{{ l10nError|escapejs }}';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
updateTaskCount();
|
||||
setInterval(updateTaskCount, 30000);
|
||||
</script>
|
||||
{% include "bundles/auth-dashboard-task-queue-js.html" %}
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
{% load sri %}
|
||||
|
||||
{% sri_static 'allianceauth/js/dashboard-update-task-queue.js' %}
|
||||
Loading…
x
Reference in New Issue
Block a user