Job log search doesn't find text that is currently rendered on the page

The Problem

Discussion

Looks like that search is conducted entirely on the front end, the logic is in https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue#L147

    searchJobLog() {
      this.searchResults = [];

      if (!this.searchTerm) return;

      const compactedLog = compactJobLog(this.jobLog);

      compactedLog.forEach((line) => {
        const lineText = line.content[0].text;

        if (lineText.toLocaleLowerCase().includes(this.searchTerm.toLocaleLowerCase())) {
          this.searchResults.push(line);
        }
      });

      if (this.searchResults.length > 0) {
        this.$emit('searchResults', this.searchResults);

        // BE returns zero based index, we need to add one to match the line numbers in the DOM
        const firstSearchResult = `#L${this.searchResults[0].lineNumber + 1}`;
        const logLine = document.querySelector(`.js-log-line ${firstSearchResult}`);

        if (logLine) {
          setTimeout(() => scrollToElement(logLine));

          const message = sprintf(
            n__(
              'Job|%{searchLength} result found for %{searchTerm}',
              'Job|%{searchLength} results found for %{searchTerm}',
              this.searchResults.length,
            ),
            {
              searchLength: this.searchResults.length,
              searchTerm: this.searchTerm,
            },
          );

          this.$toast.show(message);
        } else {
          this.$toast.show(this.$options.i18n.logLineNumberNotFound);
        }
      } else {
        this.$toast.show(this.$options.i18n.noResults);
      }
    }

This means that (a) spaces should be fine and (b) partial word matches should be fine (these were mentioned in your original thread). I think the problem here is that a truncated version of the log is presented to the user. Without recreating this kind of log in the GDK I can't fully test this, but I think that what you can see is not what you are searching against here. Not clear if anyone on the #g_pipeline-execution team knows about this, but they would be the experts here.

Prior work

Add job log search feature (!91293 - merged)

(A) Proposal(s)

The fix here would be to to concatenate all content segments (span tags). Maybe something like:

diff --git a/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue b/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue
index eb3dcdacf1f2..9d043637c74d 100644
--- a/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue
@@ -152,7 +152,7 @@ export default {
       const compactedLog = compactJobLog(this.jobLog);
 
       compactedLog.forEach((line) => {
-        const lineText = line.content[0].text;
+        const lineText = line.content.map((content) => content.text).join('');
 
         if (lineText.toLocaleLowerCase().includes(this.searchTerm.toLocaleLowerCase())) {
           this.searchResults.push(line);