TablePanel: Fix ad-hoc variabes not working on default datasources (#44314) (#44626)

* Dashboards: Fix ad-hoc variabes not working on default datasources

* not async

* Update comment

(cherry picked from commit b1b6205651)

Co-authored-by: Josh Hunt <joshhunt@users.noreply.github.com>

public/app/plugins/panel/table/TablePanel.tsx

@@ -1,6 +1,13 @@
 import React, { Component } from 'react';
 import { Select, Table } from '@grafana/ui';
-import { DataFrame, FieldMatcherID, getFrameDisplayName, PanelProps, SelectableValue } from '@grafana/data';
+import {
+  DataFrame,
+  FieldMatcherID,
+  getDataSourceRef,
+  getFrameDisplayName,
+  PanelProps,
+  SelectableValue,
+} from '@grafana/data';
 import { PanelOptions } from './models.gen';
 import { css } from '@emotion/css';
 import { config } from 'app/core/config';
@@ -9,6 +16,7 @@ import { dispatch } from '../../../store/store';
 import { applyFilterFromTable } from '../../../features/variables/adhoc/actions';
 import { getDashboardSrv } from '../../../features/dashboard/services/DashboardSrv';
 import { getFooterCells } from './footer';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 interface Props extends PanelProps<PanelOptions> {}
 
@@ -68,13 +76,19 @@ export class TablePanel extends Component<Props> {
   onCellFilterAdded = (filter: FilterItem) => {
     const { key, value, operator } = filter;
     const panelModel = getDashboardSrv().getCurrent()?.getPanelById(this.props.id);
-    const datasource = panelModel?.datasource;
-
-    if (!datasource) {
+    if (!panelModel) {
       return;
     }
 
-    dispatch(applyFilterFromTable({ datasource, key, operator, value }));
+    // When the datasource is null/undefined (for a default datasource), we use getInstanceSettings
+    // to find the real datasource ref for the default datasource.
+    const datasourceInstance = getDatasourceSrv().getInstanceSettings(panelModel.datasource);
+    const datasourceRef = datasourceInstance && getDataSourceRef(datasourceInstance);
+    if (!datasourceRef) {
+      return;
+    }
+
+    dispatch(applyFilterFromTable({ datasource: datasourceRef, key, operator, value }));
   };
 
   renderTable(frame: DataFrame, width: number, height: number) {