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

queue_job/static/src/js/queue_job_fields.js

@@ -17,6 +17,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 () {
@@ -89,6 +90,25 @@ 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 = {
                 nodes: new vis.DataSet(nodes),
                 edges: new vis.DataSet(edges),

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;
+    }
 }