Преглед изворни кода

HUE-1778 [dbquery] Query hangs with MySql

The query hangs because the browser is busy trying to add DOM
elements for over 1000 rows. Also, datatables is trying to manage
more DOM elements than it seemingly can. Added infinite scrolling
without backend to fix this.
Abraham Elmahrek пре 12 година
родитељ
комит
3f21246b87
2 измењених фајлова са 26 додато и 13 уклоњено
  1. 24 5
      apps/rdbms/src/rdbms/templates/execute.mako
  2. 2 8
      apps/rdbms/static/js/rdbms.vm.js

+ 24 - 5
apps/rdbms/src/rdbms/templates/execute.mako

@@ -119,11 +119,6 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
               <th data-bind="text: $data"></th>
             </tr>
           </thead>
-          <tbody data-bind="foreach: rows">
-            <tr data-bind="foreach: $data">
-              <td data-bind="text: $data"></td>
-            </tr>
-          </tbody>
         </table>
       </div>
     </div>
@@ -722,6 +717,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
   var dataTable = null;
   function cleanResultsTable() {
     if (dataTable) {
+      dataTable.fnClearTable();
       dataTable.fnDestroy();
       viewModel.columns.valueHasMutated();
       viewModel.rows.valueHasMutated();
@@ -729,6 +725,16 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     }
   }
 
+  function addResults(viewModel, dataTable, index, pageSize) {
+    $.each(viewModel.rows.slice(index, index+pageSize), function(row_index, row) {
+      var ordered_row = [];
+      $.each(viewModel.columns(), function(col_index, col) {
+        ordered_row.push(row[col]);
+      });
+      dataTable.fnAddData(ordered_row);
+    });
+  }
+
   function resultsTable() {
     if (!dataTable) {
       dataTable = $(".resultTable").dataTable({
@@ -750,6 +756,19 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       $(".dataTables_filter").hide();
       $(".dataTables_wrapper").jHueTableScroller();
 
+      // Automatic results grower
+      var dataTableEl = $(".dataTables_wrapper");
+      var index = 0;
+      var pageSize = 100;
+      dataTableEl.on("scroll", function (e) {
+        if (dataTableEl.scrollTop() + dataTableEl.outerHeight() + 20 > dataTableEl[0].scrollHeight && dataTable) {
+          addResults(viewModel, dataTable, index, pageSize);
+          index += pageSize;
+        }
+      });
+      addResults(viewModel, dataTable, index, pageSize);
+      index += pageSize;
+
       $(".resultTable").width($(".resultTable").parent().width());
     }
   }

+ 2 - 8
apps/rdbms/static/js/rdbms.vm.js

@@ -79,14 +79,8 @@ function RdbmsViewModel() {
     var rows = [];
     self.columns.removeAll();  // Needed for datatables to refresh properly.
     self.columns(results.columns);
-    $.each(results.rows, function(i, result_row) {
-      var row = [];
-      $.each(self.columns(), function(j, column) {
-        row.push(result_row[column]);
-      });
-      rows.push(row);
-    });
-    self.rows(rows);
+    self.rows.removeAll();
+    self.rows(results.rows);
   };
 
   self.updateServers = function(servers) {