Improve the experience for navigating from the metrics chart to log explorer
<!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> ### Problem to solve In gitlab#122013 we're implementing an MVC solution: > As an MVC, we should allow the user to navigate to logs based on the selected timeframe via the chart dropdown menu (`View logs` menu item). By default, the user will be taken to whatever timeframe is selected in the dashboard timeframe picker (which also coincides with the default range in charts). If the chart is zoomed in and the user views logs for the that chart, they'll be taken to the selected, zoomed in range for that chart. > > The user should be able to scroll through the logs. This issue is meant as a follow-up to improve the user experience for navigating from the metrics chart to log explorer. We want to explore allowing the user to navigate to a specific point in time vs. a defined range, and change the interaction to allow the user to just click on any point on the chart to navigate to that point in the logs. ### Further details We may want to consider an interaction that makes it easier to navigate to the logs for a very specific point in the chart. For example, we can allow the user to just click on the chart and navigate to the log explorer. As a user, I would like to click on any section on the metric chart and navigate into the log explorer. | Grafana upon click interation | |-------------------------------| | ![Screenshot_2020-01-20_at_10.18.29](https://gitlab.com/gitlab-org/gitlab/uploads/973acdf2c1dabebe1f4902502ea90d52/Screenshot_2020-01-20_at_10.18.29.png) | We may want to consider, for example, a pop-up menu upon click, similar to what Grafana is doing, where the "View logs" link can be placed, and any other actions we may want to introduce in the future. That would give the user more control. Also, to make this new functionality more discoverable, we can add an alert at the top of the page informing the user of the new feature and prompting them to try it out. ### WIP Proposal This issue has 2 major parts we'll need to work on We'll focus on having a drill to a **single** point in time in the log explorer, today the log explorer needs a range (start and end timestamp), it is preferred that the timestamp will be the last log entry that fits into the screen (however if this presents a technical challenge we can ignore this for now) the user should be able to scroll backward or forward (if possible) to view the rest of the logs as much as desired. The next task will be to allow our users to click on a specific point on the metric chart allow a drill down to the log explorer from a single point in time (the MVC for 12.8 is to allow a drill to the log explorer using a time range) ### Technical Requirements To implement the first part we'll need: * BE issue to allow log explorer to receive a single timestamp * Design issue (follow by implementation issue/MR) to add to the current time picker the ability to select a single point in time (today we support quicktime and range) For the second part we'll need: * Design issue (follow by implementation issue/MR) for having an interaction with the user to allow drill down into the log explorer (probably a pop-up menu upon clicking on a chart) * BE issue for getting the timestamp while clicking on the chart ### Links / references
epic