NodeGraph: Fix error when clicking link in a context menu (#34817) (#34830)

* Add prevent default if onClick exists

* Apply field overrides

(cherry picked from commit fcdab32750)

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -43,7 +43,16 @@ export const MenuItem: React.FC<MenuItemProps> = React.memo(
           href={url ? url : undefined}
           target={target}
           className={styles.link}
-          onClick={onClick}
+          onClick={
+            onClick
+              ? (event) => {
+                  if (!(event.ctrlKey || event.metaKey || event.shiftKey) && onClick) {
+                    event.preventDefault();
+                    onClick(event);
+                  }
+                }
+              : undefined
+          }
           rel={target === '_blank' ? 'noopener noreferrer' : undefined}
         >
           {icon && <Icon name={icon} className={styles.icon} />} {label}

public/app/features/explore/NodeGraphContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useToggle } from 'react-use';
-import { Badge, Collapse, useStyles2 } from '@grafana/ui';
-import { DataFrame, GrafanaTheme2, TimeRange } from '@grafana/data';
+import { Badge, Collapse, useStyles2, useTheme2 } from '@grafana/ui';
+import { applyFieldOverrides, DataFrame, GrafanaTheme2, TimeRange } from '@grafana/data';
 import { css } from '@emotion/css';
 import { ExploreId, StoreState } from '../../types';
 import { splitOpen } from './state/main';
@@ -30,10 +30,26 @@ interface Props {
 export function UnconnectedNodeGraphContainer(props: Props & ConnectedProps<typeof connector>) {
   const { dataFrames, range, splitOpen, withTraceView } = props;
   const getLinks = useLinks(range, splitOpen);
+  const theme = useTheme2();
   const styles = useStyles2(getStyles);
 
-  const { nodes } = useCategorizeFrames(dataFrames);
+  // This is implicit dependency that is needed for links to work. At some point when replacing variables in the link
+  // it requires field to have a display property which is added by the overrides even though we don't add any field
+  // overrides in explore.
+  const frames = applyFieldOverrides({
+    fieldConfig: {
+      defaults: {},
+      overrides: [],
+    },
+    data: dataFrames,
+    // We don't need proper replace here as it is only used in getLinks and we use getFieldLinks
+    replaceVariables: (value) => value,
+    theme,
+  });
+
+  const { nodes } = useCategorizeFrames(frames);
   const [open, toggleOpen] = useToggle(false);
+
   const countWarning =
     withTraceView && nodes[0]?.length > 1000 ? (
       <span className={styles.warningText}> ({nodes[0].length} nodes, can be slow to load)</span>
@@ -53,7 +69,7 @@ export function UnconnectedNodeGraphContainer(props: Props & ConnectedProps<type
       onToggle={withTraceView ? () => toggleOpen() : undefined}
     >
       <div style={{ height: withTraceView ? 500 : 600 }}>
-        <NodeGraph dataFrames={dataFrames} getLinks={getLinks} />
+        <NodeGraph dataFrames={frames} getLinks={getLinks} />
       </div>
     </Collapse>
   );

public/app/plugins/panel/nodeGraph/useContextMenu.tsx

@@ -108,6 +108,7 @@ function mapMenuItem<T extends NodeDatum | EdgeDatum>(item: T) {
         label={link.label}
         ariaLabel={link.ariaLabel || link.label}
         onClick={link.onClick ? () => link.onClick?.(item) : undefined}
+        target={'_self'}
       />
     );
   };