From 80ef1be239a1a7cbbf90ee235469c9b7c7448c3a Mon Sep 17 00:00:00 2001 From: Louis Date: Wed, 5 Aug 2026 12:42:40 +0200 Subject: [PATCH] feat: show export and import progress --- netbox_export/__init__.py | 2 +- netbox_export/services/exporter.py | 2 +- .../templates/netbox_export/dashboard.html | 128 +++++++++++++++++- netbox_export/views.py | 2 +- pyproject.toml | 2 +- 5 files changed, 130 insertions(+), 6 deletions(-) diff --git a/netbox_export/__init__.py b/netbox_export/__init__.py index 9ffe67f..2df0a59 100644 --- a/netbox_export/__init__.py +++ b/netbox_export/__init__.py @@ -7,7 +7,7 @@ class NetBoxExportConfig(PluginConfig): name = "netbox_export" verbose_name = "NetBox-Export" description = "Portable ZIP export and import for tenants and locations" - version = "0.1.0" + version = "0.2.0" author = "NetBox Export contributors" base_url = "netbox-export" min_version = "4.6.0" diff --git a/netbox_export/services/exporter.py b/netbox_export/services/exporter.py index 3bf61d2..422f321 100644 --- a/netbox_export/services/exporter.py +++ b/netbox_export/services/exporter.py @@ -26,7 +26,7 @@ def export_scope(scope_type: str, scope_id: int, *, max_objects: int, signing_ke "created_at": datetime.now(UTC).isoformat(), "source_instance": str(InstanceIdentity.local_id()), "source_netbox_version": getattr(getattr(settings, "RELEASE", None), "version", "4.6"), - "plugin_version": "0.1.0", + "plugin_version": "0.2.0", "scope": { "type": scope_type, "source_pk": str(scope_id), diff --git a/netbox_export/templates/netbox_export/dashboard.html b/netbox_export/templates/netbox_export/dashboard.html index 88682da..f7cb8ba 100644 --- a/netbox_export/templates/netbox_export/dashboard.html +++ b/netbox_export/templates/netbox_export/dashboard.html @@ -52,7 +52,7 @@

Export

-
+ {% csrf_token %}
@@ -62,6 +62,15 @@ {% render_form export_form %}
+ @@ -75,7 +84,7 @@

Import

- + {% csrf_token %}
@@ -85,6 +94,15 @@ {% render_form import_form %}
+ @@ -112,6 +130,112 @@ typeSelect.addEventListener('change', refresh); refresh(); } + + const replacePage = (html) => { + document.open(); + document.write(html); + document.close(); + }; + + const filenameFromHeader = (header) => { + const match = header && header.match(/filename="([^"]+)"/i); + return match ? match[1] : 'netbox-export.zip'; + }; + + const setBusy = (form, busy) => { + document.querySelectorAll('#netbox-export-form button, #netbox-import-form button').forEach((button) => { + button.disabled = busy; + }); + form.setAttribute('aria-busy', busy ? 'true' : 'false'); + }; + + const updateProgress = (container, label, percent = null, state = 'active') => { + const bar = container.querySelector('.progress-bar'); + const progress = container.querySelector('[role="progressbar"]'); + container.hidden = false; + container.querySelector('.progress-label').textContent = label; + container.querySelector('.progress-percent').textContent = percent === null ? '' : `${percent}%`; + bar.style.width = percent === null ? '100%' : `${percent}%`; + bar.classList.toggle('progress-bar-animated', state === 'active'); + bar.classList.toggle('progress-bar-striped', state === 'active'); + bar.classList.toggle('bg-success', state === 'success'); + bar.classList.toggle('bg-danger', state === 'error'); + if (percent === null) { + progress.removeAttribute('aria-valuenow'); + progress.setAttribute('aria-valuetext', label); + } else { + progress.setAttribute('aria-valuenow', percent); + progress.removeAttribute('aria-valuetext'); + } + }; + + const exportForm = document.getElementById('netbox-export-form'); + const exportProgress = document.getElementById('export-progress'); + exportForm.addEventListener('submit', (event) => { + if (!window.XMLHttpRequest || !window.FormData) return; + event.preventDefault(); + if (!exportForm.reportValidity()) return; + setBusy(exportForm, true); + updateProgress(exportProgress, 'Export wird vorbereitet ...'); + + const request = new XMLHttpRequest(); + request.open('POST', exportForm.action || window.location.href); + request.responseType = 'blob'; + request.onprogress = (progressEvent) => { + if (!progressEvent.lengthComputable) return; + const percent = Math.min(99, Math.round((progressEvent.loaded / progressEvent.total) * 100)); + updateProgress(exportProgress, 'ZIP wird übertragen ...', percent); + }; + request.onload = async () => { + const contentType = request.getResponseHeader('Content-Type') || ''; + if (request.status < 200 || request.status >= 300 || !contentType.includes('application/zip')) { + replacePage(await request.response.text()); + return; + } + const downloadUrl = URL.createObjectURL(request.response); + const link = document.createElement('a'); + link.href = downloadUrl; + link.download = filenameFromHeader(request.getResponseHeader('Content-Disposition')); + document.body.appendChild(link); + link.click(); + link.remove(); + window.setTimeout(() => URL.revokeObjectURL(downloadUrl), 1000); + updateProgress(exportProgress, 'Export abgeschlossen', 100, 'success'); + setBusy(exportForm, false); + }; + request.onerror = () => { + updateProgress(exportProgress, 'Export fehlgeschlagen', 100, 'error'); + setBusy(exportForm, false); + }; + request.send(new FormData(exportForm)); + }); + + const importForm = document.getElementById('netbox-import-form'); + const importProgress = document.getElementById('import-progress'); + importForm.addEventListener('submit', (event) => { + if (!window.XMLHttpRequest || !window.FormData) return; + event.preventDefault(); + if (!importForm.reportValidity()) return; + setBusy(importForm, true); + updateProgress(importProgress, 'Archiv wird hochgeladen ...', 0); + + const request = new XMLHttpRequest(); + request.open('POST', importForm.action || window.location.href); + request.upload.onprogress = (progressEvent) => { + if (!progressEvent.lengthComputable) return; + const percent = Math.min(100, Math.round((progressEvent.loaded / progressEvent.total) * 100)); + updateProgress(importProgress, 'Archiv wird hochgeladen ...', percent); + }; + request.upload.onload = () => { + updateProgress(importProgress, 'Archiv wird geprüft und verarbeitet ...'); + }; + request.onload = () => replacePage(request.responseText); + request.onerror = () => { + updateProgress(importProgress, 'Import fehlgeschlagen', 100, 'error'); + setBusy(importForm, false); + }; + request.send(new FormData(importForm)); + }); })(); {% endblock javascript %} diff --git a/netbox_export/views.py b/netbox_export/views.py index 85ee017..e832842 100644 --- a/netbox_export/views.py +++ b/netbox_export/views.py @@ -57,6 +57,7 @@ class DashboardView(UserPassesTestMixin, View): filename = f"netbox-export-{form.cleaned_data['scope_type']}-{slugify(str(scope)) or scope.pk}.zip" response = HttpResponse(payload, content_type="application/zip") response["Content-Disposition"] = f'attachment; filename="{filename}"' + response["Content-Length"] = len(payload) response["X-Content-Type-Options"] = "nosniff" return response @@ -85,4 +86,3 @@ class DashboardView(UserPassesTestMixin, View): self.template_name, self._context(import_form=ImportForm(prefix="import"), report=report, manifest=parsed.manifest), ) - diff --git a/pyproject.toml b/pyproject.toml index bedc9e5..f654d5a 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "netbox-export" -version = "0.1.0" +version = "0.2.0" description = "Portable ZIP export and import for scoped NetBox data" readme = "README.md" requires-python = ">=3.12"