IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeSeries panel: Allow adding annotations from the panel (#36220)

Browse Source 
* First stab on UI for adding annotations in time series panel

* Extend panel context with annotations api

* Annotations editor UI & CRUD

* Prevent annotation markers to overflow uPlot canvas

* Do not overflow graphing area with region annotations

* Align annotation id type

* Fix exemplar markers positioning

* Use clipping region rather than adjusting annotation region bounds

* Smaller icons

* Improve annotation tooltip and editor auto positioning, reorg code

* Renames

* Enable annotations ctx menu only when adding annotations is allowed

* Wrap setSelect hooks diring init hook

* Use TagFilter instead of TagsInput

* Add id to annotation events

* Add support for cmd+click for adding point annotations

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Dominik Prokop
2021-07-08 10:39:03 +02:00
committed by GitHub
parent a0dac9c6d9
commit 7df0010412
24 changed files with 1041 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

@@ -8,6 +8,7 @@ import { ContextMenuPlugin } from './plugins/ContextMenuPlugin';
import { ExemplarsPlugin } from './plugins/ExemplarsPlugin';
import { TimeSeriesOptions } from './types';
import { prepareGraphableFields } from './utils';
import { AnnotationEditorPlugin } from './plugins/AnnotationEditorPlugin';
interface TimeSeriesPanelProps extends PanelProps<TimeSeriesOptions> {}
@@ -21,7 +22,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
onChangeTimeRange,
replaceVariables,
}) => {
const { sync } = usePanelContext();
const { sync, canAddAnnotations } = usePanelContext();
const getFieldLinks = (field: Field, rowIndex: number) => {
return getFieldLinksForExplore({ field, rowIndex, range: timeRange });
@@ -37,6 +38,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
);
}
const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
return (
<TimeSeries
frames={frames}
@@ -57,16 +59,44 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
mode={sync === DashboardCursorSync.Tooltip ? TooltipDisplayMode.Multi : options.tooltip.mode}
timeZone={timeZone}
/>
<ContextMenuPlugin
data={alignedDataFrame}
config={config}
timeZone={timeZone}
replaceVariables={replaceVariables}
/>
{/* Renders annotation markers*/}
{data.annotations && (
<AnnotationsPlugin annotations={data.annotations} config={config} timeZone={timeZone} />
)}
{/* Enables annotations creation*/}
<AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={config}>
{({ startAnnotating }) => {
return (
<ContextMenuPlugin
data={alignedDataFrame}
config={config}
timeZone={timeZone}
replaceVariables={replaceVariables}
defaultItems={
enableAnnotationCreation
? [
{
items: [
{
label: 'Add annotation',
ariaLabel: 'Add annotation',
icon: 'comment-alt',
onClick: (e, p) => {
if (!p) {
return;
}
startAnnotating({ coords: p.coords });
},
},
],
},
]
: []
}
/>
);
}}
</AnnotationEditorPlugin>
{data.annotations && (
<ExemplarsPlugin
config={config}