Proof of Conecpt: Interactive log viewer

Issue: https://progress.opensuse.org/issues/162218

assets/javascripts/test_result.js

@@ -578,20 +578,49 @@ function setupResult(jobid, state, result, status_url) {
   setInfoPanelClassName(state, result);
 }
 
+function filterLogLines(input) {
+  const string = input.value;
+  let flags = undefined;
+  let regex = undefined;
+
+  if (string == undefined) { return }
+  const match = string.match(/^\/(.*)\/([i]*)$/);
+  if (match) {
+    regex = new RegExp(match[1], match[2]);
+  }
+  $('.embedded-logfile').each(function (index, logFileElement) {
+    response = logFileElement.dataset.response;
+    if (response == undefined) { return }
+    const lines = response.split(/\r?\n/);
+    const wanted = [];
+    for (let i = 0; i < lines.length; i++) {
+        if (regex && lines[i].match(regex) || lines[i].includes(string)) {
+            wanted.push(lines[i]);
+        }
+    }
+    logFileElement.innerHTML = ansiToHtml(wanted.join('\n'));
+    var infobox = document.getElementById('search-info');
+    infobox.innerHTML = "Showing " + wanted.length + " / " + lines.length + " lines";
+    });
+}
+
 function loadEmbeddedLogFiles() {
   $('.embedded-logfile').each(function (index, logFileElement) {
     if (logFileElement.dataset.contentsLoaded) {
       return;
     }
     $.ajax(logFileElement.dataset.src)
       .done(function (response) {
+        logFileElement.dataset.response = response;
         logFileElement.innerHTML = ansiToHtml(response);
         logFileElement.dataset.contentsLoaded = true;
       })
       .fail(function (jqXHR, textStatus, errorThrown) {
         logFileElement.appendChild(document.createTextNode('Unable to load logfile: ' + errorThrown));
       });
   });
+  var searchBox = document.getElementById('search');
+  searchBox.addEventListener('keyup', function() { filterLogLines(searchBox) });
 }
 
 function setCurrentPreviewFromStepLinkIfPossible(stepLink) {

templates/webapi/test/logfile.html.ep

@@ -10,6 +10,8 @@
 
 % my $url = url_for('test_file', testid => $testid, filename => $filename);
 <div class="corner-buttons" style="margin-top: -5px;">
+<span id="search-info"></span>
+<input id="search" placeholder="substring or /regex/i" type="text" name="search">
     <a class="btn btn-light" href=".#downloads">
         <i class="fa fa-chevron-left"></i> Back to job <%= $testid %>
     </a>