diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 6544aaeab17..e1fde180923 100644 --- a/public/app/core/angular_wrappers.ts +++ b/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 diff --git a/public/app/plugins/panel/graph/GraphContextMenu.tsx b/public/app/plugins/panel/graph/GraphContextMenu.tsx index 0d80986d617..fd0e3ef50b9 100644 --- a/public/app/plugins/panel/graph/GraphContextMenu.tsx +++ b/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 = ({ getContextMenuSource, items, ...otherProps }) => { +export const GraphContextMenu: React.FC = ({ + getContextMenuSource, + formatSourceDate, + items, + ...otherProps +}) => { const theme = useContext(ThemeContext); const source = getContextMenuSource(); @@ -35,7 +41,7 @@ export const GraphContextMenu: React.FC = ({ getContextMe font-size: ${theme.typography.size.sm}; `} > - {dateTime(source.datapoint[0]).format(timeFormat)} + {formatSourceDate(source.datapoint[0], timeFormat)}
{ this.source = source; }; + getSource = () => { return this.source; }; diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 56c059d3c4c..84c29ab0b6e 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/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 }; diff --git a/public/app/plugins/panel/graph/template.ts b/public/app/plugins/panel/graph/template.ts index 2629f327a51..462e0a0d645 100644 --- a/public/app/plugins/panel/graph/template.ts +++ b/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" >