DataLinks: enable data links in Gauge, BarGauge and SingleStat2 panel (#18605)

* datalink on field

* add dataFrame to view

* Use scoped variables to pass series name and value time to data links interpolation

* Use scoped variables to pass series name and value time to data links interpolation

* Enable value specific variable suggestions when Gauge is displaying values

* Fix prettier

* Add basic context menu with data links to GaugePanel

* Fix incorrect import in grafana/ui

* Add custom cursor indicating datalinks available via context menu (in Gauge only now)

* Add data links to SingleStat2

* Minor refactor

* Retrieve data links in a lazy way

* Update test to respect links retrieval being lazy

* delay link creation

* cleanup

* Add origin to LinkModel and introduce field & panel links suppliers

* Add value time and series name field link supplier

* Remove links prop from visualization and implement common UI for data links context menu

* Update snapshot

* Rename className prop to clickTargetClassName

* Simplify condition

* Updated drilldown dashboard and minor changes

* Use class name an onClick handler on the top level dom element in visualization

* Enable series name interpolation when presented value is a calculation

packages/grafana-data/src/types/dataFrame.ts

@@ -3,6 +3,7 @@ import { ValueMapping } from './valueMapping';
 import { QueryResultBase, Labels, NullValueMode } from './data';
 import { FieldCalcs } from '../utils/index';
 import { DisplayProcessor } from './displayValue';
+import { DataLink } from './dataLink';
 
 export enum FieldType {
   time = 'time', // or date
@@ -36,6 +37,9 @@ export interface FieldConfig {
   // Used when reducing field values
   nullValueMode?: NullValueMode;
 
+  // The behavior when clicking on a result
+  links?: DataLink[];
+
   // Alternative to empty string
   noValue?: string;
 }

packages/grafana-data/src/types/dataLink.ts

@@ -1,5 +1,30 @@
+/**
+ * Link configuration.  The values may contain variables that need to be
+ * processed before running
+ */
 export interface DataLink {
   url: string;
   title: string;
   targetBlank?: boolean;
 }
+
+export type LinkTarget = '_blank' | '_self';
+
+/**
+ * Processed Link Model.  The values are ready to use
+ */
+export interface LinkModel<T> {
+  href: string;
+  title: string;
+  target: LinkTarget;
+  origin: T;
+}
+
+/**
+ * Provides a way to produce links on demand
+ *
+ * TODO: ScopedVars in in GrafanaUI package!
+ */
+export interface LinkModelSupplier<T extends object> {
+  getLinks(scopedVars?: any): Array<LinkModel<T>>;
+}

packages/grafana-data/src/utils/dataFrameView.ts

@@ -44,6 +44,10 @@ export class DataFrameView<T = any> implements Vector<T> {
     this.obj = obj;
   }
 
+  get dataFrame() {
+    return this.data;
+  }
+
   get length() {
     return this.data.length;
   }