added simulated progress

This commit is contained in:
Edmund Tan 2025-07-23 16:21:57 +08:00
parent 8b946945db
commit 9128fce5c2
1 changed files with 98 additions and 2 deletions

View File

@ -221,6 +221,45 @@ class EnrollmentUI {
}
}
simulateProgress() {
const steps = [
{ step: 0, message: 'Initializing enrollment process...', delay: 800 },
{ step: 1, message: 'Verifying OpenZiti installation and requirements...', delay: 2500 },
{ step: 3, message: 'Creating necessary directories...', delay: 1800 },
{ step: 4, message: 'Registering router with ZitiNexus Portal...', delay: 3500 },
{ step: 5, message: 'Saving configuration files and certificates...', delay: 2200 },
{ step: 6, message: 'Enrolling router with OpenZiti controller...', delay: 4000 },
{ step: 7, message: 'Creating and configuring systemd service...', delay: 2000 },
{ step: 8, message: 'Starting router service...', delay: 2800 },
{ step: 9, message: 'Reporting enrollment status...', delay: 1500 }
];
let currentIndex = 0;
this.progressSimulationActive = true;
const advanceStep = () => {
if (currentIndex < steps.length && this.enrollmentInProgress && this.progressSimulationActive) {
const { step, message, delay } = steps[currentIndex];
this.currentStep = step;
// Calculate percentage based on step progress
const percentage = Math.round(((step + 1) / 11) * 90); // Cap at 90% until real completion
this.updateProgress(percentage, message);
currentIndex++;
setTimeout(advanceStep, delay);
}
};
// Start simulation after a brief delay
setTimeout(advanceStep, 300);
}
stopProgressSimulation() {
this.progressSimulationActive = false;
}
async startEnrollment() {
if (this.enrollmentInProgress) {
return;
@ -249,7 +288,9 @@ class EnrollmentUI {
this.showProgressContainer();
this.clearLogs();
this.updateProgress(0, 'Initializing...');
// Start progress simulation immediately
this.simulateProgress();
try {
const formData = new FormData();
@ -272,7 +313,12 @@ class EnrollmentUI {
const result = await response.json();
// Stop progress simulation
this.stopProgressSimulation();
if (result.success) {
// Complete the progress
this.currentStep = 10; // Final step
this.updateProgress(100, 'Enrollment completed successfully!');
this.addLogEntry('success', `Router '${result.routerName}' enrolled successfully`);
this.showAlert(`Router enrollment completed successfully! Router: ${result.routerName}`, 'success');
@ -287,6 +333,9 @@ class EnrollmentUI {
} catch (error) {
console.error('Enrollment failed:', error);
// Stop progress simulation and show error
this.stopProgressSimulation();
this.updateProgress(null, 'Enrollment failed');
this.addLogEntry('error', `Enrollment failed: ${error.message}`);
this.showAlert(`Enrollment failed: ${error.message}`, 'error');
@ -396,6 +445,42 @@ class EnrollmentUI {
}
}
simulateCleanupProgress() {
const cleanupSteps = [
{ step: 0, message: 'Starting router cleanup process...', delay: 500 },
{ step: 2, message: 'Stopping ziti-router service...', delay: 1500 },
{ step: 4, message: 'Resetting service failed state...', delay: 1000 },
{ step: 6, message: 'Cleaning service state...', delay: 1200 },
{ step: 8, message: 'Removing router configuration directory...', delay: 2000 },
{ step: 9, message: 'Removing systemd service file...', delay: 1000 }
];
let currentIndex = 0;
this.cleanupSimulationActive = true;
const advanceStep = () => {
if (currentIndex < cleanupSteps.length && this.cleanupSimulationActive) {
const { step, message, delay } = cleanupSteps[currentIndex];
this.currentStep = step;
// Calculate percentage based on cleanup progress
const percentage = Math.round(((step + 1) / 11) * 85); // Cap at 85% until real completion
this.updateProgress(percentage, message);
currentIndex++;
setTimeout(advanceStep, delay);
}
};
// Start cleanup simulation after a brief delay
setTimeout(advanceStep, 200);
}
stopCleanupSimulation() {
this.cleanupSimulationActive = false;
}
async startCleanup() {
if (this.enrollmentInProgress) {
this.showAlert('Cannot perform cleanup while enrollment is in progress', 'error');
@ -410,7 +495,10 @@ class EnrollmentUI {
this.showProgressContainer();
this.clearLogs();
this.updateProgress(0, 'Starting cleanup...');
this.currentStep = 0;
// Start cleanup progress simulation
this.simulateCleanupProgress();
try {
const formData = new FormData();
@ -431,7 +519,12 @@ class EnrollmentUI {
const result = await response.json();
// Stop cleanup simulation
this.stopCleanupSimulation();
if (result.success) {
// Complete the cleanup progress
this.currentStep = 10; // Final step
this.updateProgress(100, 'Cleanup completed successfully!');
this.addLogEntry('success', result.message);
this.showAlert('Router cleanup completed successfully! The page will reload in 3 seconds.', 'success');
@ -456,6 +549,9 @@ class EnrollmentUI {
} catch (error) {
console.error('Cleanup failed:', error);
// Stop cleanup simulation and show error
this.stopCleanupSimulation();
this.updateProgress(null, 'Cleanup failed');
this.addLogEntry('error', `Cleanup failed: ${error.message}`);
this.showAlert(`Cleanup failed: ${error.message}`, 'error');