Add job log search feature

What does this MR do and why?

The week of 2022-06-22 - 2022-07-01 is Verify Hackathon week! This week inspired me to build a job log search feature. This feature allows users to search through the visible job log. A similar feature can be found for GH here https://github.com/pburdette/gl-pipeline-analyzer/runs/6611951605 on one of my test projects.

1. A user enters a substring
2. We scroll to the first result (if there is more than one result) or show no results found in a toast message
3. We highlight all job log lines that contain the substring (if found)

This feature is behind a feature flag job_log_search.

Limitations

Currently due to performance reasons we do not render the entire job log if the job log is over a certain size. We send the user to a raw job log path. Given that we can only search through the visible job log that is rendered on the page. There are plans to re-work this in the future maybe using canvas to have better performance for this view and the logs.

We don't store a counter of the results like a traditional CMD+F browser search. Instead for the first iteration we store all results of the search and highlight them all in the job log. I'd like to have a follow up for this to store a counter and highlight one line at a time as you navigate the log.

Data Shape

If the job log is a collapsible section the data shape is

{
  line: {},
  lines: [],
  lineNumber: 1
}

where line is the line of the section and lines is the data within the section.

If the line in the log is not a collapsible section, the data will not have a line or lines property.

{
 content: {}, // where text is stored
 lineNumber: 2
}

Implementation

Given we are trying to move away for Vuex and use a top-level pattern with GraphQL. I have chosen not to add any more technical debt to this area and utilize the component tree with events.

The top level job_app passes the log data with the data shape stated above to the job_log_controllers. From there we use a GitLab UI component for the search box and do a bit of data handling as seen in the searchJobLog method. This method prepares the data in a single format.

If we have results we scroll to those results and show the number of results found (via toast message). Then we emit an event that travels down to the line.vue component which handles the styling. If we do not have results, we alert the user with a toast message that search term did not yield any matching results.

Screenshots or screen recordings

Screenshots

Note: Search box placed to right to be near the rest of the controls for the log. Also to not break the layout when dynamic content is injected in the DOM on the left of the sidebar.

Demo

https://www.youtube.com/watch?v=W5OdvCWS0SQ

How to set up and validate locally

1. Enable job_log_search in the rails console
2. Visit a project with CI
3. Visit a job
4. Enter a search term

Future plans ❤

In a future iteration we would build a new component like the below. That would store a counter of search results found and navigate to each search item one by one.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.