[IMP] queue_job: Display warning before displaying big dependency graphs

OCA · Jun 4, 2024 · 9a18ac9 · 9a18ac9
1 parent 76a42e2
commit 9a18ac9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/queue_job/static/src/js/queue_job_fields.js b/queue_job/static/src/js/queue_job_fields.js
@@ -16,6 +16,7 @@ odoo.define("queue_job.fields", function (require) {
         init: function () {
             this._super.apply(this, arguments);
             this.network = null;
+            this.forceRender = false;
             this.tabListenerInstalled = false;
         },
         start: function () {
@@ -88,6 +89,26 @@ odoo.define("queue_job.fields", function (require) {
                 });
             });
 
+            if (nodes.length * edges.length > 5000 && !this.forceRender) {
+                const warningDiv = document.createElement("div");
+                warningDiv.className = "alert alert-warning";
+                warningDiv.innerText = (
+                    `This graph is big (${nodes.length} nodes, ` +
+                    `${edges.length} edges), it may take a while to display.`
+                );
+                const button = document.createElement("button");
+                button.innerText = "Display anyway";
+                button.className = "btn btn-secondary";
+                button.onclick = function () {
+                    self.forceRender = true;
+                    warningDiv.parentNode.removeChild(warningDiv);
+                    self._render();
+                };
+                warningDiv.appendChild(button);
+                this.$el.append(warningDiv);
+                return
+            }
+
             var data = {
                 // eslint-disable-next-line no-undef
                 nodes: new vis.DataSet(nodes),

diff --git a/queue_job/static/src/scss/queue_job_fields.scss b/queue_job/static/src/scss/queue_job_fields.scss
@@ -2,4 +2,11 @@
     width: 600px;
     height: 400px;
     border: 1px solid lightgray;
+    .alert {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
 }