DataTable rendering on Monitor page

The content of the cell is now processed and rendered by JavaScript.
This improves the performance of the DataTable initialization and it is
needed for the upcoming server-side pagination.

For example, with openSUSE:Tools (74 packages) there is a difference of
approximately 2 seconds.

Co-authored-by: Ana María Martínez Gómez <anamaria@martinezgomez.name>

src/api/app/assets/javascripts/webui2/project_monitor.js

@@ -6,18 +6,74 @@ function setAllLinks(event) {
   $(this).closest('.dropdown-menu').find('input').prop('checked', event.data.checked);
 }
 
-function setupProjectMonitor() { // jshint ignore:line
+function statusCell(meta, statusHash, tableInfo, projectName, packageName) {
+  var info = tableInfo[meta.col - 1];
+  var repository = info[0];
+  var architecture = info[1];
+  var status = statusHash[repository][architecture][packageName] || {};
+  var code = status.code;
+  if (code === undefined) return null;
+
+  var klass = 'build-state-' + code;
+  var output = '<a ';
+  if (['succeeded', 'failed', 'building'].includes(code)) {
+    var url = '/package/live_build_log/' + projectName + '/' + packageName + '/' + repository + '/' + architecture;
+    output += 'href="' + url + '"';
+  } else {
+    var id = meta.row + '-' + meta.col;
+    output += 'href="javascript:void(0);" id="' + id + '"';
+
+    if (status.details !== undefined) {
+      if (code === 'scheduled') klass = 'text-warning';
+      output += ' data-content="' + status.details + '" data-placement="right" data-toggle="popover"';
+    }
+  }
+  output += ' class="' + klass + '">' + code + '</a>';
+  return output;
+}
+
+function initializeMonitorDataTable() {
+  var data = $('tbody').data();
+  var packageNames = data.packagenames;
+  var statusHash = data.statushash;
+  var tableInfo = data.tableinfo;
+  var projectName = data.project;
+
   initializeDataTable('#project-monitor-table', { // jshint ignore:line
     scrollX: true,
     fixedColumns: true,
     pageLength: 50,
     lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
+    data: packageNames,
     search: {
       regex: true,
       smart: false,
     },
-    columnDefs: [{ width: 150, targets: 0 }]
+    columnDefs: [
+      {
+        width: 150,
+        targets: 0,
+        className: 'text-left',
+        data: null,
+        render: function (packageName) {
+          var url = '/package/show/' + projectName + '/' + packageName;
+          return '<a href="' + url + '">' + packageName + '</a>';
+        }
+      },
+      {
+        targets: '_all',
+        data: null,
+        className: 'text-center',
+        render: function (packageName, type, row, meta) {
+          return statusCell(meta, statusHash, tableInfo, projectName, packageName);
+        }
+      }
+    ]
   });
+}
+
+function setupProjectMonitor() { // jshint ignore:line
+  initializeMonitorDataTable();
 
   $('#table-spinner').addClass('d-none');
   $('#project-monitor .obs-dataTable').removeClass('invisible');

src/api/app/helpers/webui/buildresult_helper.rb

@@ -29,6 +29,7 @@ def arch_repo_table_cell(repo, arch, package_name, status = nil, enable_help = t
     end
   end
 
+  # NOTE: There is a JavaScript version of this method in project_monitor.js
   def webui2_arch_repo_table_cell(repo, arch, package_name, status = nil, enable_help = true)
     status ||= @statushash[repo][arch][package_name] || { 'package' => package_name }
     status_id = valid_xml_id("id-#{package_name}_#{repo}_#{arch}")

src/api/app/views/webui2/webui/project/monitor.html.haml

@@ -11,6 +11,7 @@
         locals: { project: @project, activate_client_search: @activate_client_search,
         status: @avail_status_values, repositories: @avail_repo_values, architectures: @avail_arch_values,
         repository_filter: @repo_filter, architecture_filter: @arch_filter, status_filter: @status_filter }
+      - tableinfo = []
       .row.mt-4
         .col-md-12.obs-dataTable.invisible
           %table.table.table-sm.table-striped.table-bordered.text-nowrap#project-monitor-table
@@ -25,18 +26,11 @@
                 %th
                 - @repoarray.each do |repo, archlist|
                   - archlist.each do |arch|
+                    - tableinfo << [repo, arch]
                     %th.text-center
                       = webui2_repository_status_icon(status: @repostatushash[repo][arch], html_class: 'fa-xs mr-1')
                       = arch
-            %tbody
-              - @packagenames.each do |packname|
-                %tr
-                  %td
-                    = link_to word_break(packname, 40), controller: :package, action: :show, package: packname, project: @project.to_s
-                  - @repoarray.each do |repo, archlist|
-                    - archlist.each do |arch|
-                      %td.text-center
-                        = webui2_arch_repo_table_cell(repo, arch, packname, nil, false)
+            %tbody{ data: { packagenames: @packagenames, project: @project, statushash: @statushash.to_json, tableinfo: tableinfo } }
 
       - content_for :ready_function do
         setupProjectMonitor();