DataLinks: respect timezone when displaying datapoint's timestamp in graph context menu (#18461)

public/app/core/angular_wrappers.ts

@@ -77,6 +77,7 @@ export function registerAngularDirectives() {
     'items',
     ['onClose', { watchDepth: 'reference', wrapApply: true }],
     ['getContextMenuSource', { watchDepth: 'reference', wrapApply: true }],
+    ['formatSourceDate', { watchDepth: 'reference', wrapApply: true }],
   ]);
 
   // We keep the drilldown terminology here because of as using data-* directive

public/app/plugins/panel/graph/GraphContextMenu.tsx

@@ -1,14 +1,20 @@
 import React, { useContext } from 'react';
 import { FlotDataPoint } from './GraphContextMenuCtrl';
 import { ContextMenu, ContextMenuProps, SeriesIcon, ThemeContext } from '@grafana/ui';
-import { dateTime } from '@grafana/data';
+import { DateTimeInput } from '@grafana/data';
 import { css } from 'emotion';
 
 type GraphContextMenuProps = ContextMenuProps & {
   getContextMenuSource: () => FlotDataPoint | null;
+  formatSourceDate: (date: DateTimeInput, format?: string) => string;
 };
 
-export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({ getContextMenuSource, items, ...otherProps }) => {
+export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
+  getContextMenuSource,
+  formatSourceDate,
+  items,
+  ...otherProps
+}) => {
   const theme = useContext(ThemeContext);
   const source = getContextMenuSource();
 
@@ -35,7 +41,7 @@ export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({ getContextMe
               font-size: ${theme.typography.size.sm};
             `}
           >
-            <strong>{dateTime(source.datapoint[0]).format(timeFormat)}</strong>
+            <strong>{formatSourceDate(source.datapoint[0], timeFormat)}</strong>
             <div>
               <SeriesIcon color={source.series.color} />
               <span

public/app/plugins/panel/graph/GraphContextMenuCtrl.ts

@@ -65,6 +65,7 @@ export class GraphContextMenuCtrl {
   setSource = (source: FlotDataPoint | null) => {
     this.source = source;
   };
+
   getSource = () => {
     return this.source;
   };

public/app/plugins/panel/graph/module.ts

@@ -11,7 +11,7 @@ import { DataProcessor } from './data_processor';
 import { axesEditorComponent } from './axes_editor';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
-import { DataFrame, DataLink } from '@grafana/data';
+import { DataFrame, DataLink, DateTimeInput } from '@grafana/data';
 import { getColorFromHexRgbOrName, LegacyResponseData, VariableSuggestion } from '@grafana/ui';
 import { getProcessedDataFrames } from 'app/features/dashboard/state/PanelQueryState';
 import { PanelQueryRunnerFormat } from 'app/features/dashboard/state/PanelQueryRunner';
@@ -340,6 +340,10 @@ class GraphCtrl extends MetricsPanelCtrl {
   onContextMenuClose = () => {
     this.contextMenuCtrl.toggleMenu();
   };
+
+  formatDate = (date: DateTimeInput, format?: string) => {
+    return this.dashboard.formatDate.apply(this.dashboard, [date, format]);
+  };
 }
 
 export { GraphCtrl, GraphCtrl as PanelCtrl };

public/app/plugins/panel/graph/template.ts

@@ -11,6 +11,7 @@ const template = `
       items="ctrl.contextMenuCtrl.menuItems"
       onClose="ctrl.onContextMenuClose"
       getContextMenuSource="ctrl.contextMenuCtrl.getSource"
+      formatSourceDate="ctrl.formatDate"
       x="ctrl.contextMenuCtrl.position.x"
       y="ctrl.contextMenuCtrl.position.y"
     ></graph-context-menu>