Merge pull request #6981 from saraycp/server-side-monitor

DataTable rendering on Monitor page

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();