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>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const elements = {
|
const taskQueueSettings = {
|
||||||
total: document.getElementById('total-task-count'),
|
url: '{% url "authentication:task_counts" %}',
|
||||||
uptime: document.getElementById('celery-uptime'),
|
l10n: {
|
||||||
running: document.getElementById('running-task-count'),
|
language: '{{ LANGUAGE_CODE }}',
|
||||||
queued: document.getElementById('queued-tasks-count'),
|
second_singular: '{{ l10nSecondSingular|escapejs }}',
|
||||||
succeeded: document.getElementById('succeeded-tasks-count'),
|
second_plural: '{{ l10nSecondPlural|escapejs }}',
|
||||||
retried: document.getElementById('retried-tasks-count'),
|
minute_singular: '{{ l10nMinuteSingular|escapejs }}',
|
||||||
failed: document.getElementById('failed-tasks-count')
|
minute_plural: '{{ l10nMinutePlural|escapejs }}',
|
||||||
};
|
hour_singular: '{{ l10nHourSingular|escapejs }}',
|
||||||
|
hour_plural: '{{ l10nHourPlural|escapejs }}',
|
||||||
/**
|
na: '{{ l10nNA|escapejs }}',
|
||||||
* Fetches the task queue status and updates the UI elements accordingly.
|
error: '{{ l10nError|escapejs }}',
|
||||||
* It retrieves the total number of tasks, running tasks, queued tasks,
|
running: '{{ l10nRunning|escapejs }}',
|
||||||
* succeeded tasks, retried tasks, and failed tasks, and updates the
|
queued: '{{ l10nQueued|escapejs }}',
|
||||||
* corresponding HTML elements with the fetched data.
|
succeeded: '{{ l10nSucceeded|escapejs }}',
|
||||||
* It also updates the progress bars for succeeded, retried, and failed tasks.
|
retried: '{{ l10nRetried|escapejs }}',
|
||||||
* The function is called immediately and then every 30 seconds to keep the
|
failed: '{{ l10nFailed|escapejs }}'
|
||||||
* 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>
|
</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