more fixes

This commit is contained in:
Raven Scott
2025-11-24 19:29:37 -05:00
parent 5200028070
commit ebd6512976
3 changed files with 143 additions and 82 deletions
+131 -44
View File
@@ -492,7 +492,9 @@ function addVolumeMount(volumeData = null) {
<label class="volume-field-label">Volume Name</label>
<select class="form-select bg-dark text-white volume-named-input"
data-volume-named="${id}"
onchange="validateVolumeMount('${id}')">
onchange="validateVolumeMount('${id}')"
onfocus="loadVolumesForSelect('${id}')"
onclick="loadVolumesForSelect('${id}')">
<option value="">Select or create volume...</option>
</select>
<small class="volume-error-msg" data-volume-named-error="${id}" style="display: none;"></small>
@@ -551,6 +553,7 @@ function handleVolumeTypeChange(volumeId) {
} else {
if (hostPathGroup) hostPathGroup.style.display = 'none';
if (namedGroup) namedGroup.style.display = '';
// Always fetch fresh volumes list when Named Volume is selected
loadVolumesForSelect(volumeId);
}
@@ -1074,58 +1077,140 @@ window.openFileBrowser = openFileBrowser;
// Load volumes for named volume select
async function loadVolumesForSelect(volumeId) {
console.log('[DEBUG] Loading volumes for select, volume ID:', volumeId);
const namedSelect = document.querySelector(`[data-volume-named="${volumeId}"]`);
if (!namedSelect) return;
if (!namedSelect) {
console.error('[ERROR] Named volume select element not found for ID:', volumeId);
return;
}
try {
// Clear existing options except the first one
namedSelect.innerHTML = '<option value="">Select or create volume...</option>';
// Show loading state
namedSelect.innerHTML = '<option value="">Loading volumes...</option>';
namedSelect.disabled = true;
// Fetch volumes from server
if (typeof window.sendCommand === 'function') {
// Store original handler
const originalHandler = window.handlePeerResponse;
let volumesReceived = false;
if (typeof window.sendCommand !== 'function') {
console.error('[ERROR] sendCommand function not available');
namedSelect.innerHTML = '<option value="">Error: Cannot communicate with server</option>';
namedSelect.disabled = false;
return;
}
// Store original handler
const originalHandler = window.handlePeerResponse;
let volumesReceived = false;
const requestId = `volumes_${Date.now()}_${Math.random()}`;
console.log('[DEBUG] Setting up volume handler with request ID:', requestId);
const volumeHandler = (response) => {
console.log('[DEBUG] Volume handler received response:', response);
const volumeHandler = (response) => {
if (volumesReceived) {
if (typeof originalHandler === 'function') {
originalHandler(response);
}
return;
// Check if this is a volumes list response
const isVolumesResponse =
(response.success === true && Array.isArray(response.volumes)) ||
(response.error && (response.error.includes('volume') || response.error.includes('Volume')));
if (!isVolumesResponse) {
// Not a volumes response, pass to original handler
if (typeof originalHandler === 'function') {
originalHandler(response);
}
return;
}
if (volumesReceived) {
// Already processed, pass to original handler
if (typeof originalHandler === 'function') {
originalHandler(response);
}
return;
}
console.log('[DEBUG] Processing volumes response');
// Handle success response
if (response.success === true && Array.isArray(response.volumes)) {
volumesReceived = true;
window.handlePeerResponse = originalHandler;
console.log('[DEBUG] Adding volumes to select, count:', response.volumes.length);
// Clear and rebuild options
namedSelect.innerHTML = '<option value="">Select or create volume...</option>';
// Add existing volumes
if (response.volumes.length === 0) {
const option = document.createElement('option');
option.value = '';
option.textContent = 'No volumes available';
option.disabled = true;
namedSelect.appendChild(option);
} else {
response.volumes.forEach(volume => {
const volumeName = volume.Name || volume.name || volume;
if (volumeName) {
const option = document.createElement('option');
option.value = volumeName;
option.textContent = volumeName;
namedSelect.appendChild(option);
}
});
}
if (response.success && response.volumes) {
volumesReceived = true;
window.handlePeerResponse = originalHandler;
// Add existing volumes
if (Array.isArray(response.volumes)) {
response.volumes.forEach(volume => {
const option = document.createElement('option');
option.value = volume.Name || volume.name;
option.textContent = volume.Name || volume.name;
namedSelect.appendChild(option);
});
}
} else if (response.error && response.error.includes('volume')) {
volumesReceived = true;
window.handlePeerResponse = originalHandler;
}
};
window.handlePeerResponse = volumeHandler;
window.sendCommand('listVolumes');
// Timeout after 5 seconds
setTimeout(() => {
if (!volumesReceived) {
window.handlePeerResponse = originalHandler;
}
}, 5000);
}
namedSelect.disabled = false;
console.log('[DEBUG] Volumes added to select successfully');
}
// Handle error response
else if (response.error) {
volumesReceived = true;
window.handlePeerResponse = originalHandler;
console.error('[ERROR] Failed to load volumes:', response.error);
namedSelect.innerHTML = '<option value="">Select or create volume...</option>';
const option = document.createElement('option');
option.value = '';
option.textContent = `Error: ${response.error}`;
option.disabled = true;
namedSelect.appendChild(option);
namedSelect.disabled = false;
}
};
// Set the handler
window.handlePeerResponse = volumeHandler;
// Send the command - always fetch fresh from server
console.log('[DEBUG] Sending listVolumes command to fetch fresh volumes list');
window.sendCommand('listVolumes');
// Timeout after 5 seconds
const timeoutId = setTimeout(() => {
if (!volumesReceived) {
console.warn('[WARN] Volumes list request timed out');
window.handlePeerResponse = originalHandler;
volumesReceived = true; // Mark as received to prevent double handling
namedSelect.innerHTML = '<option value="">Select or create volume...</option>';
const option = document.createElement('option');
option.value = '';
option.textContent = 'Request timed out - click to retry';
option.disabled = true;
namedSelect.appendChild(option);
namedSelect.disabled = false;
}
}, 5000);
} catch (error) {
console.error('[ERROR] Failed to load volumes:', error);
namedSelect.innerHTML = '<option value="">Select or create volume...</option>';
const option = document.createElement('option');
option.value = '';
option.textContent = `Error: ${error.message}`;
option.disabled = true;
namedSelect.appendChild(option);
namedSelect.disabled = false;
}
}
@@ -2261,7 +2346,9 @@ function addDuplicateVolumeMount(volumeData = null) {
<label class="volume-field-label">Volume Name</label>
<select class="form-select bg-dark text-white volume-named-input"
data-volume-named="${id}"
onchange="validateVolumeMount('${id}')">
onchange="validateVolumeMount('${id}')"
onfocus="loadVolumesForSelect('${id}')"
onclick="loadVolumesForSelect('${id}')">
<option value="">Select or create volume...</option>
</select>
<small class="volume-error-msg" data-volume-named-error="${id}" style="display: none;"></small>