DataLinks: enable access to labels & field names (#18918)

* POC: trying to see if there is a way to support objects in template interpolations

* Added support for nested objects, and arrays

* Added accessor cache

* fixed unit tests

* First take

* Use links supplier in graph

* Add field's index to cache items

* Get field index from field cache

* CHange FiledCacheItem to FieldWithIndex

* Add refId to TimeSeries class

* Make field link supplier work with _series, _field and _value vars

* use field link supplier in graph

* Fix yaxis settings

* Update dashboard schema version and add migration for data links variables

* Update snapshots

* Update build in data link variables

* FieldCache - idx -> index

* Add current query results to panel editor

* WIP Updated data links dropdown to display new variables

* Fix build

* Update variables syntac in field display, update migration

* Field links supplier: review updates

* Add data frame view and field name to TimeSeries for later inspection

* Retrieve data frame from TimeSeries when clicking on plot graph

* Use data frame's index instead of view

* Retrieve data frame by index instead of view on TimeSeries

* Update data links prism regex

* Fix typecheck

* Add value variables to suggestions list

* UI update

* Rename field to config in DisplayProcessorOptions

* Proces single value of a field instead of entire data frame

* Updated font size from 10px to 12px for auto complete

* Replace fieldName with fieldIndex in TimeSeries

* Don't use .entries() for iterating in field cache

* Don't use FieldCache when retrieving field for datalinks in graph

* Add value calculation variable to data links (#19031)

* Add support for labels with dots in the name (#19033)

* Docs update

* Use field name instead of removed series.fieldName

* Add test dashboard

* Typos fix

* Make visualization tab subscribe to query results

* Added tags to dashboard so it shows up in lists

* minor docs fix

* Update singlestat-ish variables suggestions to contain series variables

* Decrease suggestions update debounce

* Enable whitespace characters(new line, space) in links and strip them when processing the data link

* minor data links UI update

* DataLinks: Add __from and __to variables suggestions to data links (#19093)

* Add from and to variables suggestions to data links

* Update docs

* UI update and added info text

* Change ESC global bind to bind (doesn't capture ESC on input)

* Close datalinks suggestions on ESC

* Remove unnecessary fragment

public/app/features/dashboard/panel_editor/VisualizationTab.tsx

@@ -18,8 +18,10 @@ import { PanelModel } from '../state';
 import { DashboardModel } from '../state';
 import { VizPickerSearch } from './VizPickerSearch';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
-import { PanelPlugin, PanelPluginMeta } from '@grafana/ui';
+import { PanelPlugin, PanelPluginMeta, PanelData } from '@grafana/ui';
 import { PanelCtrl } from 'app/plugins/sdk';
+import { Unsubscribable } from 'rxjs';
+import { LoadingState } from '@grafana/data';
 
 interface Props {
   panel: PanelModel;
@@ -36,11 +38,13 @@ interface State {
   searchQuery: string;
   scrollTop: number;
   hasBeenFocused: boolean;
+  data: PanelData;
 }
 
 export class VisualizationTab extends PureComponent<Props, State> {
   element: HTMLElement;
   angularOptions: AngularComponent;
+  querySubscription: Unsubscribable;
 
   constructor(props: Props) {
     super(props);
@@ -50,6 +54,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
       hasBeenFocused: false,
       searchQuery: '',
       scrollTop: 0,
+      data: {
+        state: LoadingState.NotStarted,
+        series: [],
+      },
     };
   }
 
@@ -66,16 +74,28 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
 
     if (plugin.editor) {
-      return <plugin.editor options={this.getReactPanelOptions()} onOptionsChange={this.onPanelOptionsChanged} />;
+      return (
+        <plugin.editor
+          data={this.state.data}
+          options={this.getReactPanelOptions()}
+          onOptionsChange={this.onPanelOptionsChanged}
+        />
+      );
     }
 
     return <p>Visualization has no options</p>;
   }
 
   componentDidMount() {
+    const { panel } = this.props;
+    const queryRunner = panel.getQueryRunner();
     if (this.shouldLoadAngularOptions()) {
       this.loadAngularOptions();
     }
+
+    this.querySubscription = queryRunner.getData().subscribe({
+      next: (data: PanelData) => this.setState({ data }),
+    });
   }
 
   componentDidUpdate(prevProps: Props) {