Log viewer with search bar

In order to view logs within GitLab, we will need to an interface to show and search through them. As an MVC, we should leverage the current framework we have today (similar to the issue board) with simple search interface tied to Elasticsearch.

From there, we should offer a simple plain text search box which queries ES and returns the results.

WIP Proposal

In scope work for this issue:

  • We will focus on creating the list view with search, which will only show up when ES is enabled.
  • If ES is not enabled, we can just offer up the empty state we created as part of #24088 (closed) (Design).

Out-of-scope work for this issue:

  • How to display the log detail view (whether in a modal, a flyout, or a separate page). As a first pass, this will be a simple list view, without the ability to click into the list items at all.
  • A list view for when Kubernetes is being used rather than ES. This work will also happen as part of a subsequent iteration.
  • Filter by container.id or pod.name
  • Time picker

Design

The list view for when Elastic search is enabled, with infinite scroll and a simple search:

Default view When scrolling is triggered
_5696-final-list-view 5696-scroll_engaged-final

Note: the log message is allowed to wrap if needed, as shown in row 3 of the table.

Related links

Design guidelines for tables //Design specs for tables

Design guidelines for infinite scrolling // Design specs for infinite scroll

Edited by 🤖 GitLab Bot 🤖