- Move global config files to globals iso global folder, as the name global conflicts with python language
- Creation of Traicie Vancancy Definition specialist - Allow to invoke non-interaction specialists from withing Evie's mgmt interface (eveai_app) - Improvements to crewai specialized classes - Introduction to json editor for showing specialists arguments and results in a better way - Introduction of more complex pagination (adding extra arguments) by adding a global 'get_pagination_html' - Allow follow-up of ChatSession / Specialist execution - Improvement in logging of Specialists (but needs to be finished)
This commit is contained in:
Josako
192
eveai_app/templates/interaction/specialist_execution_status.html
Normal file
192
eveai_app/templates/interaction/specialist_execution_status.html
Normal file
@@ -0,0 +1,192 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Specialist Execution Status{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h4>Specialist Execution Status</h4>
|
||||
{% if specialist %}
|
||||
<span class="badge bg-primary">{{ specialist.name }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-4">
|
||||
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<h5>Current Status:</h5>
|
||||
<div id="current-status" class="alert alert-info">Execution starting...</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<h5>Execution Log:</h5>
|
||||
<div id="execution-log" class="border p-3 bg-light" style="max-height: 300px; overflow-y: auto;">
|
||||
<div class="text-muted">Waiting for updates...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="completion-actions" class="d-none">
|
||||
<hr>
|
||||
<h5>Execution Completed</h5>
|
||||
<p>The specialist has completed processing.</p>
|
||||
<a id="view-results-btn" href="{{ prefixed_url_for('interaction_bp.view_chat_session_by_session_id', session_id=chat_session_id) }}" class="btn btn-primary">View Results</a>
|
||||
<a href="{{ prefixed_url_for('interaction_bp.specialists') }}" class="btn btn-secondary">Back to Specialists</a>
|
||||
</div>
|
||||
|
||||
<div id="error-actions" class="d-none">
|
||||
<hr>
|
||||
<h5>Error Occurred</h5>
|
||||
<p>An error occurred during specialist execution.</p>
|
||||
<div id="error-details" class="alert alert-danger"></div>
|
||||
<a href="{{ prefixed_url_for('interaction_bp.specialists') }}" class="btn btn-secondary">Back to Specialists</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const taskId = "{{ task_id }}";
|
||||
const executionLog = document.getElementById('execution-log');
|
||||
const currentStatus = document.getElementById('current-status');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const completionActions = document.getElementById('completion-actions');
|
||||
const errorActions = document.getElementById('error-actions');
|
||||
const errorDetails = document.getElementById('error-details');
|
||||
|
||||
let logEntries = [];
|
||||
let isComplete = false;
|
||||
|
||||
// Connect to the SSE stream
|
||||
const eventSource = new EventSource("{{ prefixed_url_for('interaction_bp.specialist_execution_updates', task_id=task_id) }}");
|
||||
|
||||
// General data handler
|
||||
eventSource.onmessage = function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
addLogEntry(data);
|
||||
updateStatus(data);
|
||||
};
|
||||
|
||||
// Specific event handlers
|
||||
eventSource.addEventListener('Task Started', function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
progressBar.style.width = '10%';
|
||||
currentStatus.textContent = 'Task started: ' + data.data.message;
|
||||
currentStatus.className = 'alert alert-info';
|
||||
});
|
||||
|
||||
eventSource.addEventListener('Task Progress', function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
// Update progress percentage if available
|
||||
if (data.data.percentage) {
|
||||
progressBar.style.width = data.data.percentage + '%';
|
||||
} else {
|
||||
// Incremental progress if no percentage available
|
||||
const currentWidth = parseInt(progressBar.style.width) || 0;
|
||||
progressBar.style.width = Math.min(currentWidth + 5, 90) + '%';
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('Task Complete', function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
progressBar.style.width = '100%';
|
||||
progressBar.className = 'progress-bar bg-success';
|
||||
currentStatus.textContent = 'Processing completed: ' + data.data.message;
|
||||
currentStatus.className = 'alert alert-success';
|
||||
completionActions.classList.remove('d-none');
|
||||
isComplete = true;
|
||||
eventSource.close();
|
||||
});
|
||||
|
||||
eventSource.addEventListener('Task Error', function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
progressBar.className = 'progress-bar bg-danger';
|
||||
currentStatus.textContent = 'Error occurred';
|
||||
currentStatus.className = 'alert alert-danger';
|
||||
errorDetails.textContent = data.data.error;
|
||||
errorActions.classList.remove('d-none');
|
||||
eventSource.close();
|
||||
});
|
||||
|
||||
eventSource.addEventListener('EveAI Specialist Complete', function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
progressBar.style.width = '100%';
|
||||
progressBar.className = 'progress-bar bg-success';
|
||||
currentStatus.textContent = 'Specialist processing completed';
|
||||
currentStatus.className = 'alert alert-success';
|
||||
completionActions.classList.remove('d-none');
|
||||
isComplete = true;
|
||||
eventSource.close();
|
||||
});
|
||||
|
||||
eventSource.onerror = function(event) {
|
||||
// Only report an error if the task is not already completed
|
||||
if (!isComplete) {
|
||||
currentStatus.textContent = 'Connection to server lost';
|
||||
currentStatus.className = 'alert alert-warning';
|
||||
errorDetails.textContent = 'The connection to the server was lost. The task may still be running.';
|
||||
errorActions.classList.remove('d-none');
|
||||
}
|
||||
};
|
||||
|
||||
function addLogEntry(data) {
|
||||
const timestamp = new Date(data.timestamp).toLocaleTimeString();
|
||||
const message = data.data.message || JSON.stringify(data.data);
|
||||
const type = data.processing_type;
|
||||
|
||||
// Add the log entry to the array
|
||||
logEntries.push({timestamp, message, type});
|
||||
|
||||
// Limit to last 100 entries
|
||||
if (logEntries.length > 100) {
|
||||
logEntries.shift();
|
||||
}
|
||||
|
||||
// Refresh the log element
|
||||
renderLog();
|
||||
}
|
||||
|
||||
function renderLog() {
|
||||
executionLog.innerHTML = '';
|
||||
|
||||
logEntries.forEach(entry => {
|
||||
const entryElement = document.createElement('div');
|
||||
entryElement.className = 'log-entry mb-1';
|
||||
|
||||
// Determine the appropriate badge color based on type
|
||||
let badgeClass = 'bg-secondary';
|
||||
if (entry.type === 'Task Started') badgeClass = 'bg-primary';
|
||||
if (entry.type === 'Task Progress') badgeClass = 'bg-info';
|
||||
if (entry.type === 'Task Complete' || entry.type === 'EveAI Specialist Complete') badgeClass = 'bg-success';
|
||||
if (entry.type === 'Task Error') badgeClass = 'bg-danger';
|
||||
|
||||
entryElement.innerHTML = `
|
||||
<span class="badge ${badgeClass}">${entry.timestamp}</span>
|
||||
<span class="ms-2">${entry.message}</span>
|
||||
`;
|
||||
|
||||
executionLog.appendChild(entryElement);
|
||||
});
|
||||
|
||||
// Scroll to bottom
|
||||
executionLog.scrollTop = executionLog.scrollHeight;
|
||||
}
|
||||
|
||||
function updateStatus(data) {
|
||||
// Update the current status with the latest information
|
||||
if (data.data.message) {
|
||||
currentStatus.textContent = data.data.message;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user