Logs: Add documentation for log details and caching (#35103)

* Add documentation for logs navigation and log details

* Change step to Step in Prometheus annotation editor

* Update docs/sources/explore/logs-integration.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

docs/sources/explore/logs-integration.md

@@ -51,7 +51,7 @@ For logs where a **level** label is specified, we use the value of the label to
 
 ### Logs navigation
 
-Logs navigation next to the log lines can be used to request more logs. You can do this by clicking on Older logs button on the bottom of navigation. This is especially useful when you hit the line limit and you want to see more logs. Each request that is run from the navigation is then displayed in the navigation as separate page. Every page is showing from and to timestamp of the incoming log lines. You can re-rerun the same request by clicking on the page.
+Logs navigation next to the log lines can be used to request more logs. You can do this by clicking on Older logs button on the bottom of navigation. This is especially useful when you hit the line limit and you want to see more logs. Each request that is run from the navigation is then displayed in the navigation as separate page. Every page is showing from and to timestamp of the incoming log lines. You can see previous results by clicking on the page. Explore is caching last five requests run from the logs navigation, so you are not re-running the same queries when clicking on the pages.
 
 ![Navigate logs in Explore](/static/img/docs/explore/navigate-logs-8-0.png)
 

docs/sources/panels/visualizations/logs-panel.md

@@ -19,6 +19,14 @@ To limit the number of lines rendered, you can use the **Max data points** setti
 
 For logs where a **level** label is specified, we use the value of the label to determine the log level and update color accordingly. If the log doesn't have a level label specified, we parse the log to find out if its content matches any of the supported expressions (see below for more information). The log level is always determined by the first match. In case Grafana is not able to determine a log level, it will be visualized with **unknown** log level. See [supported log levels and mappings of log level abbreviation and expressions]({{< relref "../../explore/_index.md#log-level" >}}).
 
+## Log details
+
+Each log row has an extendable area with its labels and detected fields, for more robust interaction. Each field or label has a stats icon to display ad-hoc statistics in relation to all displayed logs.
+
+### Derived fields links
+
+By using Derived fields, you can turn any part of a log message into an internal or external link. The created link is visible as a button next to the Detected field in the Log details view.
+
 ### Display options
 
 Use these settings to refine your visualization:
@@ -26,4 +34,5 @@ Use these settings to refine your visualization:
 - **Time -** Show or hide the time column. This is the timestamp associated with the log line as reported from the data source.
 - **Unique labels -** Show or hide the unique labels column, which shows only non-common labels.
 - **Wrap lines -** Toggle line wrapping.
+- **Enable log details -** Toggle option to see the log details view for each log row. The default setting is true.
 - **Order -** Display results in descending or ascending time order. The default is **Descending**, showing the newest logs first. Set to **Ascending** to show the oldest log lines first.

public/app/plugins/datasource/prometheus/partials/annotations.editor.html

@@ -4,7 +4,7 @@
 		<input type="text" class="gf-form-input" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
 	</div>
 	<div class="gf-form">
-		<span class="gf-form-label width-10">step</span>
+		<span class="gf-form-label width-10">Step</span>
 		<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.annotation.step' placeholder="{{::ctrl.stepDefaultValuePlaceholder}}"></input>
 	</div>
 </div>