fix: PBS form editing now correctly sets node type (addresses #296)

The issue was that when editing a PBS node, the currentNodeType wasn't being set,
causing the modal to not populate the form correctly. Now setCurrentNodeType is
called with the node's type when editing any node.

This ensures:
- PBS forms don't get contaminated with PVE data
- Editing PBS nodes properly populates the form with PBS data
- No cross-contamination between node types
This commit is contained in:
Pulse Monitor
2025-08-11 20:35:48 +00:00
parent b5490e6dde
commit 25141d7cde
3 changed files with 232 additions and 0 deletions
@@ -883,6 +883,7 @@ const Settings: Component = () => {
<button
onClick={() => {
setEditingNode(node);
setCurrentNodeType(node.type as 'pve' | 'pbs');
setShowNodeModal(true);
}}
class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
@@ -1059,6 +1060,7 @@ const Settings: Component = () => {
<button
onClick={() => {
setEditingNode(node);
setCurrentNodeType(node.type as 'pve' | 'pbs');
setShowNodeModal(true);
}}
class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
+157
View File
@@ -0,0 +1,157 @@
#!/usr/bin/env node
// Test to verify PBS form doesn't get contaminated with PVE data
// and that editing PBS nodes properly populates the form
const puppeteer = require('puppeteer');
async function test() {
const browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
console.log('Testing PBS form contamination fix...\n');
try {
// Navigate to Pulse
await page.goto('http://localhost:7655', { waitUntil: 'networkidle0' });
console.log('✓ Connected to Pulse');
// Go to Settings - find the Settings nav item
await page.waitForSelector('nav');
const settingsLink = await page.$('a:has-text("Settings")') || await page.$('button:has-text("Settings")');
if (settingsLink) {
await settingsLink.click();
} else {
// Try clicking by text
await page.evaluate(() => {
const links = Array.from(document.querySelectorAll('a, button'));
const settings = links.find(el => el.textContent?.includes('Settings'));
if (settings) settings.click();
});
}
await page.waitForTimeout(1000);
console.log('✓ Navigated to Settings');
// Test 1: Add a PVE node first
console.log('\n--- Test 1: Add PVE node ---');
await page.click('button:has-text("Add PVE Node")');
await page.waitForSelector('h3:has-text("Add Proxmox VE Node")');
// Fill PVE form
await page.type('input[placeholder="pve.example.com or IP"]', 'pve-test.local');
await page.type('input[placeholder="https://pve.example.com:8006"]', 'https://192.168.1.100:8006');
// Close PVE modal
await page.keyboard.press('Escape');
await page.waitForTimeout(500);
console.log('✓ Filled and closed PVE form');
// Test 2: Now add PBS node - should NOT have PVE data
console.log('\n--- Test 2: Add PBS after PVE - check for contamination ---');
await page.click('button:has-text("Add PBS Node")');
await page.waitForSelector('h3:has-text("Add Proxmox Backup Server Node")');
// Check that PBS form fields are empty (not contaminated with PVE data)
const pbsName = await page.$eval('input[placeholder="pbs.example.com or IP"]', el => el.value);
const pbsHost = await page.$eval('input[placeholder="https://pbs.example.com:8007"]', el => el.value);
if (pbsName === '' && pbsHost === '') {
console.log('✓ PBS form is clean - no PVE contamination');
} else {
console.log('✗ FAIL: PBS form contaminated with data:', { pbsName, pbsHost });
throw new Error('PBS form contaminated with PVE data');
}
// Fill PBS form for next test
await page.type('input[placeholder="pbs.example.com or IP"]', 'pbs-test.local');
await page.type('input[placeholder="https://pbs.example.com:8007"]', 'https://192.168.1.200:8007');
await page.type('input[placeholder="root@pam!tokenname"]', 'root@pam!test-token');
await page.type('input[placeholder*="xxxx"]', 'test-token-value-12345');
// Save PBS node
await page.click('button:has-text("Add Node")');
await page.waitForTimeout(1000);
console.log('✓ PBS node added');
// Test 3: Edit PBS node - should populate with PBS data
console.log('\n--- Test 3: Edit PBS node - check data population ---');
// Find and click edit button for PBS node
const pbsCard = await page.$('div:has(h4:has-text("pbs-test.local"))');
if (pbsCard) {
const editButton = await pbsCard.$('button[title*="dit"]');
if (editButton) {
await editButton.click();
await page.waitForSelector('h3:has-text("Edit Proxmox Backup Server Node")');
// Check that form is populated with PBS data
const editName = await page.$eval('input[placeholder="pbs.example.com or IP"]', el => el.value);
const editHost = await page.$eval('input[placeholder="https://pbs.example.com:8007"]', el => el.value);
const editToken = await page.$eval('input[placeholder="root@pam!tokenname"]', el => el.value);
if (editName === 'pbs-test.local' &&
editHost === 'https://192.168.1.200:8007' &&
editToken === 'root@pam!test-token') {
console.log('✓ PBS edit form correctly populated with PBS data');
} else {
console.log('✗ FAIL: PBS edit form not populated correctly:', { editName, editHost, editToken });
throw new Error('PBS edit form not populated correctly');
}
}
}
// Close modal
await page.keyboard.press('Escape');
await page.waitForTimeout(500);
// Test 4: Edit PVE after PBS - ensure no cross-contamination
console.log('\n--- Test 4: Edit PVE after PBS - check for contamination ---');
// First need to add a real PVE node to edit
await page.click('button:has-text("Add PVE Node")');
await page.waitForSelector('h3:has-text("Add Proxmox VE Node")');
await page.type('input[placeholder="pve.example.com or IP"]', 'pve-real.local');
await page.type('input[placeholder="https://pve.example.com:8006"]', 'https://192.168.1.50:8006');
await page.type('input[placeholder="root@pam!tokenname"]', 'root@pam!pve-token');
await page.type('input[placeholder*="xxxx"]', 'pve-token-value-54321');
await page.click('button:has-text("Add Node")');
await page.waitForTimeout(1000);
// Now edit the PVE node
const pveCard = await page.$('div:has(h4:has-text("pve-real.local"))');
if (pveCard) {
const editButton = await pveCard.$('button[title*="dit"]');
if (editButton) {
await editButton.click();
await page.waitForSelector('h3:has-text("Edit Proxmox VE Node")');
// Check that form is populated with PVE data, not PBS data
const pveEditName = await page.$eval('input[placeholder="pve.example.com or IP"]', el => el.value);
const pveEditHost = await page.$eval('input[placeholder="https://pve.example.com:8006"]', el => el.value);
if (pveEditName === 'pve-real.local' && pveEditHost === 'https://192.168.1.50:8006') {
console.log('✓ PVE edit form correctly populated with PVE data (no PBS contamination)');
} else {
console.log('✗ FAIL: PVE edit form contaminated or incorrect:', { pveEditName, pveEditHost });
throw new Error('PVE edit form contaminated or incorrect');
}
}
}
console.log('\n========================================');
console.log('✓ ALL TESTS PASSED - PBS form fix verified!');
console.log('========================================\n');
} catch (error) {
console.error('\n✗ TEST FAILED:', error.message);
await browser.close();
process.exit(1);
}
await browser.close();
}
test().catch(console.error);
+73
View File
@@ -0,0 +1,73 @@
#!/bin/bash
echo "Testing PBS form fix..."
echo ""
# Start Pulse if not running
sudo systemctl restart pulse-backend
sleep 3
# Test 1: Add a PVE node
echo "1. Adding PVE node..."
curl -X POST http://localhost:7655/api/nodes \
-H "Content-Type: application/json" \
-d '{
"type": "pve",
"name": "pve-test",
"host": "https://192.168.1.100:8006",
"tokenName": "root@pam!test",
"tokenValue": "test-token-123"
}' 2>/dev/null
if [ $? -eq 0 ]; then
echo "✓ PVE node added"
else
echo "✗ Failed to add PVE node"
fi
echo ""
# Test 2: Add a PBS node
echo "2. Adding PBS node..."
curl -X POST http://localhost:7655/api/nodes \
-H "Content-Type: application/json" \
-d '{
"type": "pbs",
"name": "pbs-test",
"host": "https://192.168.1.200:8007",
"tokenName": "root@pam!pbstest",
"tokenValue": "pbs-token-456"
}' 2>/dev/null
if [ $? -eq 0 ]; then
echo "✓ PBS node added"
else
echo "✗ Failed to add PBS node"
fi
echo ""
# Test 3: Get nodes and verify they're separate
echo "3. Verifying nodes are correctly stored..."
NODES=$(curl -s http://localhost:7655/api/nodes)
# Check if PVE node exists with correct data
if echo "$NODES" | grep -q '"name":"pve-test".*"type":"pve"'; then
echo "✓ PVE node data correct"
else
echo "✗ PVE node data incorrect"
fi
# Check if PBS node exists with correct data
if echo "$NODES" | grep -q '"name":"pbs-test".*"type":"pbs"'; then
echo "✓ PBS node data correct"
else
echo "✗ PBS node data incorrect"
fi
echo ""
echo "Test completed. The UI should now:"
echo "1. Show clean forms when adding new nodes"
echo "2. Populate correct data when editing existing nodes"
echo "3. Not mix PVE and PBS data"