Logs: Hide filters in log details if the data source doesn't support them (#73230)

* Logs: Hide filters in log details if the data source doesn't support them

* Logs Container: use logsQueries prop

* Log details: add filters visibility test

public/app/features/explore/Logs/LogsContainer.tsx

@@ -17,7 +17,9 @@ import {
   LogRowContextOptions,
   DataSourceWithLogsContextSupport,
   DataSourceApi,
+  hasToggleableQueryFiltersSupport,
 } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
 import { Collapse } from '@grafana/ui';
 import { StoreState } from 'app/types';
@@ -55,7 +57,50 @@ interface LogsContainerProps extends PropsFromRedux {
   isFilterLabelActive: (key: string, value: string) => Promise<boolean>;
 }
 
-class LogsContainer extends PureComponent<LogsContainerProps> {
+interface LogsContainerState {
+  logDetailsFilterAvailable: boolean;
+}
+
+class LogsContainer extends PureComponent<LogsContainerProps, LogsContainerState> {
+  state: LogsContainerState = {
+    logDetailsFilterAvailable: false,
+  };
+
+  componentDidMount() {
+    this.checkFiltersAvailability();
+  }
+
+  componentDidUpdate(prevProps: LogsContainerProps) {
+    this.checkFiltersAvailability();
+  }
+
+  private checkFiltersAvailability() {
+    const { logsQueries, datasourceInstance } = this.props;
+
+    if (!logsQueries) {
+      return;
+    }
+
+    if (datasourceInstance?.modifyQuery || hasToggleableQueryFiltersSupport(datasourceInstance)) {
+      this.setState({ logDetailsFilterAvailable: true });
+      return;
+    }
+
+    const promises = [];
+    for (const query of logsQueries) {
+      if (query.datasource) {
+        promises.push(getDataSourceSrv().get(query.datasource));
+      }
+    }
+
+    Promise.all(promises).then((dataSources) => {
+      const logDetailsFilterAvailable = dataSources.some(
+        (ds) => ds.modifyQuery || hasToggleableQueryFiltersSupport(ds)
+      );
+      this.setState({ logDetailsFilterAvailable });
+    });
+  }
+
   onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
     const { exploreId, updateTimeRange } = this.props;
     updateTimeRange({ exploreId, absoluteRange });
@@ -153,6 +198,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
       logsVolume,
       scrollElement,
     } = this.props;
+    const { logDetailsFilterAvailable } = this.state;
 
     if (!logRows) {
       return null;
@@ -197,8 +243,8 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
             loadingState={loadingState}
             loadLogsVolumeData={() => loadSupplementaryQueryData(exploreId, SupplementaryQueryType.LogsVolume)}
             onChangeTime={this.onChangeTime}
-            onClickFilterLabel={onClickFilterLabel}
-            onClickFilterOutLabel={onClickFilterOutLabel}
+            onClickFilterLabel={logDetailsFilterAvailable ? onClickFilterLabel : undefined}
+            onClickFilterOutLabel={logDetailsFilterAvailable ? onClickFilterOutLabel : undefined}
             onStartScanning={onStartScanning}
             onStopScanning={onStopScanning}
             absoluteRange={absoluteRange}
@@ -217,7 +263,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
             panelState={this.props.panelState}
             logsFrames={this.props.logsFrames}
             scrollElement={scrollElement}
-            isFilterLabelActive={this.props.isFilterLabelActive}
+            isFilterLabelActive={logDetailsFilterAvailable ? this.props.isFilterLabelActive : undefined}
             range={range}
           />
         </LogsCrossFadeTransition>