Function startMovementTracking

web/scripts/ragnar_modern.js:10368–10418

()

        }
        const [cls, label] = _FHRP_VERDICT_STYLE[d.verdict] || _FHRP_VERDICT_STYLE.unknown;
        let html = `<div class="mb-2 px-3 py-2 rounded border ${cls} text-sm">${label}</div>`;
        html += `<p class="text-xs text-gray-500 mb-2">Interface: ${escapeHtml(d.interface || '—')} · ${d.seconds}s · ${d.packet_count} hello(s), ${d.group_count} group(s) @ ${d.rate}/s${d.learned ? ' · <span class="text-gray-400">baseline learned now</span>' : ''}</p>`;
        (d.groups || []).forEach(g => {
            const auth = g.auth_weak ? `<span class="text-amber-300">${escapeHtml(g.authtype || 'none')} (weak)</span>` : escapeHtml(g.authtype || '—');
            html += `<p class="text-xs uppercase text-gray-400 mt-2 mb-1">${escapeHtml(g.proto.toUpperCase())} group ${g.group == null ? '?' : g.group} · gateway ${escapeHtml((g.vips || []).join(', ') || '?')} · auth ${auth}</p>`;
            html += '<table class="min-w-full text-xs text-gray-300 whitespace-nowrap"><thead>' +
                '<tr class="text-left text-gray-500"><th class="px-2 py-1">Speaker</th><th class="px-2 py-1">Priority</th><th class="px-2 py-1">State/Op</th><th class="px-2 py-1">Status</th></tr>' +
                '</thead><tbody>' +
                (g.speakers || []).map(sp => {
                    const badge = sp.baseline ? '<span class="text-green-400">✓ known</span>' : '<span class="text-amber-300">? new</span>';
                    const so = (sp.states || []).concat(sp.opcodes || []).join(', ') || '—';
                    return `<tr class="border-t border-slate-800">
                        <td class="px-2 py-1 font-mono ${sp.baseline ? '' : 'text-amber-300'}">${escapeHtml(sp.src)}</td>
                        <td class="px-2 py-1 font-mono">${sp.priority == null ? '—' : sp.priority}</td>
                        <td class="px-2 py-1 text-gray-400">${escapeHtml(so)}</td>
                        <td class="px-2 py-1">${badge}</td>
                    </tr>`;
                }).join('') +
                '</tbody></table>';
        });
        if ((d.glbp_forwarders || []).length) {
            html += '<p class="text-xs uppercase text-gray-400 mt-3 mb-1">GLBP forwarder plane (AVF)</p>';
            html += '<table class="min-w-full text-xs text-gray-300 whitespace-nowrap"><thead>' +
                '<tr class="text-left text-gray-500"><th class="px-2 py-1">Group/Fwd</th><th class="px-2 py-1">Owner</th><th class="px-2 py-1">vMAC</th><th class="px-2 py-1">VF prio</th><th class="px-2 py-1">Weight</th><th class="px-2 py-1">State</th><th class="px-2 py-1">Status</th></tr>' +
                '</thead><tbody>';
            (d.glbp_forwarders || []).forEach(fwd => {
                (fwd.owners || []).forEach(o => {
                    const badge = o.baseline ? '<span class="text-green-400">✓ owner</span>' : '<span class="text-red-300">? new</span>';
                    html += `<tr class="border-t border-slate-800">
                        <td class="px-2 py-1 font-mono">${fwd.group}/${fwd.forwarder}</td>
                        <td class="px-2 py-1 font-mono ${o.baseline ? '' : 'text-red-300'}">${escapeHtml(o.src)}</td>
                        <td class="px-2 py-1 font-mono text-gray-400">${escapeHtml(o.vmac || '—')}</td>
                        <td class="px-2 py-1 font-mono">${o.vf_priority == null ? '—' : o.vf_priority}</td>
                        <td class="px-2 py-1 font-mono">${o.weight == null ? '—' : o.weight}</td>
                        <td class="px-2 py-1 text-gray-400">${escapeHtml((o.states || []).join(', ') || '—')}</td>
                        <td class="px-2 py-1">${badge}</td>
                    </tr>`;
                });
            });
            html += '</tbody></table>';
        }
        if (d.reasons && d.reasons.length) {
            html += '<ul class="text-xs text-gray-400 mt-2 list-disc pl-5">' +
                d.reasons.map(r => '<li>' + escapeHtml(r) + '</li>').join('') + '</ul>';
        }
        (d.advisories || []).forEach(a => {
            html += `<div class="mt-2 px-3 py-2 rounded border text-xs text-gray-400 border-slate-700 bg-slate-900/40">${escapeHtml(a)}</div>`;
        });
        out.innerHTML = html;
    } catch (e) {
        out.innerHTML = '<p class="text-sm text-red-400">Failed: ' + escapeHtml(e.message) + '</p>';
    } finally {
        _ndBusy(btn, false);
    }