Annotations: Datalink support in annotation tooltips (#112129)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx

@@ -249,6 +249,7 @@ export const AnnotationsPlugin2 = ({
 
           markers.push(
             <AnnotationMarker2
+              frame={frame}
               annoIdx={i}
               annoVals={vals}
               className={className}

public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationMarker2.tsx

@@ -5,15 +5,17 @@ import { useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { DataFrame, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { TimeZone } from '@grafana/schema';
 import { floatingUtils, useStyles2 } from '@grafana/ui';
+import { getDataLinks } from 'app/plugins/panel/status-history/utils';
 
 import { AnnotationEditor2 } from './AnnotationEditor2';
 import { AnnotationTooltip2 } from './AnnotationTooltip2';
 
 interface AnnoBoxProps {
+  frame: DataFrame;
   annoVals: Record<string, any[]>;
   annoIdx: number;
   style: React.CSSProperties | null;
@@ -28,6 +30,7 @@ const STATE_EDITING = 1;
 const STATE_HOVERED = 2;
 
 export const AnnotationMarker2 = ({
+  frame,
   annoVals,
   annoIdx,
   className,
@@ -48,6 +51,14 @@ export const AnnotationMarker2 = ({
     strategy: 'fixed',
   });
 
+  const links: LinkModel[] = [];
+
+  if (STATE_HOVERED) {
+    frame.fields.forEach((field) => {
+      links.push(...getDataLinks(field, annoIdx));
+    });
+  }
+
   const contents =
     state === STATE_HOVERED ? (
       <AnnotationTooltip2
@@ -55,6 +66,7 @@ export const AnnotationMarker2 = ({
         annoVals={annoVals}
         timeZone={timeZone}
         onEdit={() => setState(STATE_EDITING)}
+        links={links}
       />
     ) : state === STATE_EDITING ? (
       <AnnotationEditor2

public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx

@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
 import * as React from 'react';
 
-import { GrafanaTheme2, dateTimeFormat, systemDateFormats, textUtil } from '@grafana/data';
+import { GrafanaTheme2, dateTimeFormat, systemDateFormats, textUtil, LinkModel } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { Stack, IconButton, Tag, usePanelContext, useStyles2 } from '@grafana/ui';
+import { VizTooltipFooter } from '@grafana/ui/internal';
 import alertDef from 'app/features/alerting/state/alertDef';
 
 interface Props {
@@ -11,11 +12,12 @@ interface Props {
   annoIdx: number;
   timeZone: string;
   onEdit: () => void;
+  links?: LinkModel[];
 }
 
 const retFalse = () => false;
 
-export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit }: Props) => {
+export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit, links = [] }: Props) => {
   const annoId = annoVals.id?.[annoIdx];
 
   const styles = useStyles2(getStyles);
@@ -107,6 +109,8 @@ export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit }: Prop
           </Stack>
         </div>
       </div>
+
+      {links.length > 0 && <VizTooltipFooter dataLinks={links} />}
     </div>
   );
 };