Add bidirectional replication setup verification and improved UX warnings

This commit is contained in:
2026-01-26 23:29:20 +08:00
parent 6b715851b9
commit ae26d22388
7 changed files with 519 additions and 1 deletions

View File

@@ -1459,6 +1459,30 @@
</div>
</div>
<div id="bidirWarningBucket" class="alert alert-warning d-none mb-4" role="alert">
<h6 class="alert-heading fw-bold d-flex align-items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
</svg>
Requires Configuration on Both Sites
</h6>
<p class="mb-2 small">For bidirectional sync to work, <strong>both sites</strong> must be configured:</p>
<ol class="mb-2 ps-3 small">
<li>This site: Enable bidirectional replication here</li>
<li>Remote site: Register this site as a peer with a connection</li>
<li>Remote site: Create matching bidirectional rule pointing back</li>
<li>Both sites: Ensure <code>SITE_SYNC_ENABLED=true</code></li>
</ol>
<div class="small">
<a href="{{ url_for('ui.sites_dashboard') }}" class="alert-link">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077z"/>
</svg>
Check bidirectional status in Sites Dashboard
</a>
</div>
</div>
<button type="submit" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
@@ -2569,5 +2593,26 @@ window.BucketDetailConfig = {
bucketsOverview: "{{ url_for('ui.buckets_overview') }}"
}
};
(function() {
const bidirWarning = document.getElementById('bidirWarningBucket');
const modeRadios = document.querySelectorAll('input[name="replication_mode"]');
function updateBidirWarning() {
if (!bidirWarning) return;
const selected = document.querySelector('input[name="replication_mode"]:checked');
if (selected && selected.value === 'bidirectional') {
bidirWarning.classList.remove('d-none');
} else {
bidirWarning.classList.add('d-none');
}
}
modeRadios.forEach(function(radio) {
radio.addEventListener('change', updateBidirWarning);
});
updateBidirWarning();
})();
</script>
{% endblock %}