From 9f7a94afb238a3258dfea8df0a4afacf19d0ce7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tina=20M=C3=BCller?= <tina.mueller@suse.com>
Date: Wed, 7 Aug 2024 17:59:53 +0200
Subject: [PATCH] Proof of Concept: Interactive log viewer

Issue: https://progress.opensuse.org/issues/162218
---
 assets/javascripts/test_result.js     | 35 +++++++++++++++++++++++++++
 templates/webapi/test/logfile.html.ep |  2 ++
 2 files changed, 37 insertions(+)

diff --git a/assets/javascripts/test_result.js b/assets/javascripts/test_result.js
index 63daaf2fb07..d7f0c866c19 100644
--- a/assets/javascripts/test_result.js
+++ b/assets/javascripts/test_result.js
@@ -578,6 +578,36 @@ 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) {
@@ -585,6 +615,7 @@ function loadEmbeddedLogFiles() {
     }
     $.ajax(logFileElement.dataset.src)
       .done(function (response) {
+        logFileElement.dataset.response = response;
         logFileElement.innerHTML = ansiToHtml(response);
         logFileElement.dataset.contentsLoaded = true;
       })
@@ -592,6 +623,10 @@ function loadEmbeddedLogFiles() {
         logFileElement.appendChild(document.createTextNode('Unable to load logfile: ' + errorThrown));
       });
   });
+  var searchBox = document.getElementById('search');
+  searchBox.addEventListener('keyup', function() {
+    filterLogLines(searchBox);
+  });
 }
 
 function setCurrentPreviewFromStepLinkIfPossible(stepLink) {
diff --git a/templates/webapi/test/logfile.html.ep b/templates/webapi/test/logfile.html.ep
index 24c7afb03ce..1a4c4e0c80e 100644
--- a/templates/webapi/test/logfile.html.ep
+++ b/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>