IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

State Timeline: Enable support for annotations (#47887)

Browse Source 
* WIP: Enable annotations display and annotations editor in State timeline panel

* Note support for annotations in module file

* Lint fix

* Post review

Co-authored-by: Kyle Cunningham <kyle@codeincarnate.com>
This commit is contained in:
Dominik Prokop 2022-07-04 10:27:27 +02:00 committed by GitHub
parent ebb9025669
commit 16f9830fc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@ -4,6 +4,9 @@ import { DataFrame, FieldType, PanelProps } from '@grafana/data';
import { TooltipPlugin, useTheme2, ZoomPlugin, usePanelContext } from '@grafana/ui';
import { getLastStreamingDataFramePacket } from 'app/features/live/data/StreamingDataFrame';
import { AnnotationEditorPlugin } from '../timeseries/plugins/AnnotationEditorPlugin';
import { AnnotationsPlugin } from '../timeseries/plugins/AnnotationsPlugin';
import { ContextMenuPlugin } from '../timeseries/plugins/ContextMenuPlugin';
import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
import { StateTimelineTooltip } from './StateTimelineTooltip';
@ -23,10 +26,11 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
options,
width,
height,
replaceVariables,
onChangeTimeRange,
}) => {
const theme = useTheme2();
const { sync } = usePanelContext();
const { sync, canAddAnnotations } = usePanelContext();
const { frames, warn } = useMemo(
() => prepareTimelineFields(data?.series, options.mergeValues ?? true, timeRange, theme),
@ -92,6 +96,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
// console.log('STREAM Packet', packet);
}
}
const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
return (
<TimelineChart
@ -119,6 +124,42 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
renderTooltip={renderCustomTooltip}
/>
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
{data.annotations && (
<AnnotationsPlugin annotations={data.annotations} config={config} timeZone={timeZone} />
)}
{enableAnnotationCreation && (
<AnnotationEditorPlugin data={alignedFrame} timeZone={timeZone} config={config}>
{({ startAnnotating }) => {
return (
<ContextMenuPlugin
data={alignedFrame}
config={config}
timeZone={timeZone}
replaceVariables={replaceVariables}
defaultItems={[
{
items: [
{
label: 'Add annotation',
ariaLabel: 'Add annotation',
icon: 'comment-alt',
onClick: (e, p) => {
if (!p) {
return;
}
startAnnotating({ coords: p.coords });
},
},
],
},
]}
/>
);
}}
</AnnotationEditorPlugin>
)}
</>
);
}}

3
public/app/plugins/panel/state-timeline/module.tsx
View File

@ -107,4 +107,5 @@ export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(Stat
commonOptionsBuilder.addLegendOptions(builder, false);
commonOptionsBuilder.addTooltipOptions(builder, true);
})
.setSuggestionsSupplier(new StatTimelineSuggestionsSupplier());
.setSuggestionsSupplier(new StatTimelineSuggestionsSupplier())
.setDataSupport({ annotations: true });