Loki: Full range logs volume (#39327)

* Basic implementation of getLogsVolumeQuery method

* Add todos

* Add a switcher to automatically load logs volume

* De-scope dismissing logs volume panel

* De-scope logs volume query cancellation

* Remove todo

* Aggregate logs volume components in single panel

* Show logs volume only when it's available

* Aggregate logs volume by level

* Simplify aggregation

* Handle no logs volume data

* Add error handling

* Do not show auto-load logs volume switcher when loading logs volume is not available

* Remove old logs volume graph

* Clean up

* Make getting data provider more generic

* Provide complete logs volume data (error, isLoading)

* Display more specific error message

* Add missing props to mocks

* Remove setRequest method

* Mark getQueryRelatedDataProviders as internal

* Add missing dataQueryRequest and add a todo

* Remove redundant loading state

* Do not mutate existing queries

* Apply fix for zooming-in from main

* Post-merge fixes

* Create collection for data provider results

* Use more generic names

* Move aggregation logic to Loki logs volume provider

* Move LogsVolume to common types

* Update tests

* Post-merge fixes

* Fix mapping related data values

* Simplify prop mappings

* Add docs

* Fix property name

* Clean-up

* Mark new types as internal

* Reduce number of providers to logs volume only

* Simplify data structure to DataQueryResponse

* Move Logs Volume panel to a separate component

* Test logsVolumeProvider.ts

* Add observable version of datasource mock

* Test getLogsVolumeDataProvider method

* Test LogsVolumePanel

* Test logs volume reducer

* Clean up

* Clean up

* Fix test

* Use sum by to use level field directly

* Fix strict type errors

* Fix strict type errors

* Use "logs" instead of "unknown" if only one level was detected

* Add docs about logs volume

* Rename histogramRequest to logsVolumeRequest

* Use LogsVolumeContentWrapper all content types

* Move `autoLoadLogsVolume` local storage handling

* Fix strict error

* Move getting autoLoadLogsVolume to initial state

* Cancel current logs volume subscription

* Test cancelling subscriptions

* Update docs/sources/datasources/loki.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update packages/grafana-data/src/types/explore.ts

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Inline container styles

* Ensure logs volume is aggregated per each subscription separately

* Simplify logs volume provider

* Type-guard support for logs volume provider

* Simplify event handlers to avoid casting

* Clean up and docs

* Move auto-load switcher to logs volume panel

* Fix test

* Move DataSourceWithLogsVolumeSupport to avoid cross referencing

* Simplify interface

* Bring back old histogram and hide the new one behind a feature flag

* Add missing props to logs histogram panel

* Clean up the provider when it's not supported

* Simplify storing autoLoadLogsVolume

* Remove docs

* Update packages/grafana-data/src/types/logsVolume.ts

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>

* Skip dataframes without fields (instant queries)

* Revert styles changes

* Revert styles changes

* Add release tag

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>

public/app/features/explore/Logs.tsx

@@ -136,8 +136,8 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     this.setState({ dedupStrategy });
   };
 
-  onChangeLabels = (event?: React.SyntheticEvent) => {
-    const target = event && (event.target as HTMLInputElement);
+  onChangeLabels = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target } = event;
     if (target) {
       const showLabels = target.checked;
       this.setState({
@@ -147,8 +147,8 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     }
   };
 
-  onChangeTime = (event?: React.SyntheticEvent) => {
-    const target = event && (event.target as HTMLInputElement);
+  onChangeTime = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target } = event;
     if (target) {
       const showTime = target.checked;
       this.setState({
@@ -158,8 +158,8 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     }
   };
 
-  onChangewrapLogMessage = (event?: React.SyntheticEvent) => {
-    const target = event && (event.target as HTMLInputElement);
+  onChangewrapLogMessage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target } = event;
     if (target) {
       const wrapLogMessage = target.checked;
       this.setState({
@@ -169,8 +169,8 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     }
   };
 
-  onChangePrettifyLogMessage = (event?: React.SyntheticEvent) => {
-    const target = event && (event.target as HTMLInputElement);
+  onChangePrettifyLogMessage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target } = event;
     if (target) {
       const prettifyLogMessage = target.checked;
       this.setState({
@@ -294,21 +294,24 @@ export class UnthemedLogs extends PureComponent<Props, State> {
 
     return (
       <>
-        <div className={styles.infoText}>
-          This datasource does not support full-range histograms. The graph is based on the logs seen in the response.
-        </div>
         {logsSeries && logsSeries.length ? (
-          <ExploreGraph
-            data={logsSeries}
-            height={150}
-            width={width}
-            tooltipDisplayMode={TooltipDisplayMode.Multi}
-            absoluteRange={visibleRange || absoluteRange}
-            timeZone={timeZone}
-            loadingState={loadingState}
-            onChangeTime={onChangeTime}
-            onHiddenSeriesChanged={this.onToggleLogLevel}
-          />
+          <>
+            <div className={styles.infoText}>
+              This datasource does not support full-range histograms. The graph is based on the logs seen in the
+              response.
+            </div>
+            <ExploreGraph
+              data={logsSeries}
+              height={150}
+              width={width}
+              tooltipDisplayMode={TooltipDisplayMode.Multi}
+              absoluteRange={visibleRange || absoluteRange}
+              timeZone={timeZone}
+              loadingState={loadingState}
+              onChangeTime={onChangeTime}
+              onHiddenSeriesChanged={this.onToggleLogLevel}
+            />
+          </>
         ) : undefined}
         <div className={styles.logOptions} ref={this.topLogsRef}>
           <InlineFieldRow>