mirror of https://github.com/grafana/grafana
Panels: AnnotationsPlugin2 (#79531)
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>pull/80412/head
Leon Sorokin
1 year ago
committed by
GitHub
parent
d4f76c3391
commit
b53e0521d2
@ -0,0 +1,249 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; |
||||||
|
import { createPortal } from 'react-dom'; |
||||||
|
import tinycolor from 'tinycolor2'; |
||||||
|
import uPlot from 'uplot'; |
||||||
|
|
||||||
|
import { arrayToDataFrame, colorManipulator, DataFrame, DataTopic, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { TimeZone } from '@grafana/schema'; |
||||||
|
import { DEFAULT_ANNOTATION_COLOR, UPlotConfigBuilder, useStyles2, useTheme2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { AnnotationMarker2 } from './annotations2/AnnotationMarker2'; |
||||||
|
|
||||||
|
// (copied from TooltipPlugin2)
|
||||||
|
interface TimeRange2 { |
||||||
|
from: number; |
||||||
|
to: number; |
||||||
|
} |
||||||
|
|
||||||
|
interface AnnotationsPluginProps { |
||||||
|
config: UPlotConfigBuilder; |
||||||
|
annotations: DataFrame[]; |
||||||
|
timeZone: TimeZone; |
||||||
|
newRange: TimeRange2 | null; |
||||||
|
setNewRange: (newRage: TimeRange2 | null) => void; |
||||||
|
canvasRegionRendering?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: batch by color, use Path2D objects
|
||||||
|
const renderLine = (ctx: CanvasRenderingContext2D, y0: number, y1: number, x: number, color: string) => { |
||||||
|
ctx.beginPath(); |
||||||
|
ctx.moveTo(x, y0); |
||||||
|
ctx.lineTo(x, y1); |
||||||
|
ctx.strokeStyle = color; |
||||||
|
ctx.stroke(); |
||||||
|
}; |
||||||
|
|
||||||
|
// const renderUpTriangle = (ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, color: string) => {
|
||||||
|
// ctx.beginPath();
|
||||||
|
// ctx.moveTo(x - w/2, y + h/2);
|
||||||
|
// ctx.lineTo(x + w/2, y + h/2);
|
||||||
|
// ctx.lineTo(x, y);
|
||||||
|
// ctx.closePath();
|
||||||
|
// ctx.fillStyle = color;
|
||||||
|
// ctx.fill();
|
||||||
|
// }
|
||||||
|
|
||||||
|
const DEFAULT_ANNOTATION_COLOR_HEX8 = tinycolor(DEFAULT_ANNOTATION_COLOR).toHex8String(); |
||||||
|
|
||||||
|
function getVals(frame: DataFrame) { |
||||||
|
let vals: Record<string, any[]> = {}; |
||||||
|
frame.fields.forEach((f) => { |
||||||
|
vals[f.name] = f.values; |
||||||
|
}); |
||||||
|
|
||||||
|
return vals; |
||||||
|
} |
||||||
|
|
||||||
|
export const AnnotationsPlugin2 = ({ |
||||||
|
annotations, |
||||||
|
timeZone, |
||||||
|
config, |
||||||
|
newRange, |
||||||
|
setNewRange, |
||||||
|
canvasRegionRendering = true, |
||||||
|
}: AnnotationsPluginProps) => { |
||||||
|
const [plot, setPlot] = useState<uPlot>(); |
||||||
|
|
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const getColorByName = useTheme2().visualization.getColorByName; |
||||||
|
|
||||||
|
const annos = useMemo(() => { |
||||||
|
let annos = annotations.slice(); |
||||||
|
|
||||||
|
if (newRange) { |
||||||
|
let isRegion = newRange.to > newRange.from; |
||||||
|
|
||||||
|
const wipAnnoFrame = arrayToDataFrame([ |
||||||
|
{ |
||||||
|
time: newRange.from, |
||||||
|
timeEnd: isRegion ? newRange.to : null, |
||||||
|
isRegion: isRegion, |
||||||
|
color: DEFAULT_ANNOTATION_COLOR_HEX8, |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
wipAnnoFrame.meta = { |
||||||
|
dataTopic: DataTopic.Annotations, |
||||||
|
custom: { |
||||||
|
isWip: true, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
annos.push(wipAnnoFrame); |
||||||
|
} |
||||||
|
|
||||||
|
return annos; |
||||||
|
}, [annotations, newRange]); |
||||||
|
|
||||||
|
const exitWipEdit = useCallback(() => { |
||||||
|
setNewRange(null); |
||||||
|
}, [setNewRange]); |
||||||
|
|
||||||
|
const annoRef = useRef(annos); |
||||||
|
annoRef.current = annos; |
||||||
|
const newRangeRef = useRef(newRange); |
||||||
|
newRangeRef.current = newRange; |
||||||
|
|
||||||
|
const xAxisRef = useRef<HTMLDivElement>(); |
||||||
|
|
||||||
|
useLayoutEffect(() => { |
||||||
|
config.addHook('ready', (u) => { |
||||||
|
let xAxisEl = u.root.querySelector<HTMLDivElement>('.u-axis')!; |
||||||
|
xAxisRef.current = xAxisEl; |
||||||
|
setPlot(u); |
||||||
|
}); |
||||||
|
|
||||||
|
config.addHook('draw', (u) => { |
||||||
|
let annos = annoRef.current; |
||||||
|
|
||||||
|
const ctx = u.ctx; |
||||||
|
|
||||||
|
let y0 = u.bbox.top; |
||||||
|
let y1 = y0 + u.bbox.height; |
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
|
||||||
|
ctx.beginPath(); |
||||||
|
ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height); |
||||||
|
ctx.clip(); |
||||||
|
|
||||||
|
ctx.lineWidth = 2; |
||||||
|
ctx.setLineDash([5, 5]); |
||||||
|
|
||||||
|
annos.forEach((frame) => { |
||||||
|
let vals = getVals(frame); |
||||||
|
|
||||||
|
for (let i = 0; i < vals.time.length; i++) { |
||||||
|
let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR_HEX8); |
||||||
|
|
||||||
|
let x0 = u.valToPos(vals.time[i], 'x', true); |
||||||
|
|
||||||
|
if (!vals.isRegion?.[i]) { |
||||||
|
renderLine(ctx, y0, y1, x0, color); |
||||||
|
// renderUpTriangle(ctx, x0, y1, 8 * uPlot.pxRatio, 5 * uPlot.pxRatio, color);
|
||||||
|
} else if (canvasRegionRendering) { |
||||||
|
renderLine(ctx, y0, y1, x0, color); |
||||||
|
|
||||||
|
let x1 = u.valToPos(vals.timeEnd[i], 'x', true); |
||||||
|
|
||||||
|
renderLine(ctx, y0, y1, x1, color); |
||||||
|
|
||||||
|
ctx.fillStyle = colorManipulator.alpha(color, 0.1); |
||||||
|
ctx.fillRect(x0, y0, x1 - x0, u.bbox.height); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
}); |
||||||
|
}, [config, canvasRegionRendering, getColorByName]); |
||||||
|
|
||||||
|
// ensure annos are re-drawn whenever they change
|
||||||
|
useEffect(() => { |
||||||
|
if (plot) { |
||||||
|
plot.redraw(); |
||||||
|
} |
||||||
|
}, [annos, plot]); |
||||||
|
|
||||||
|
if (plot) { |
||||||
|
let markers = annos.flatMap((frame, frameIdx) => { |
||||||
|
let vals = getVals(frame); |
||||||
|
|
||||||
|
let markers: React.ReactNode[] = []; |
||||||
|
|
||||||
|
for (let i = 0; i < vals.time.length; i++) { |
||||||
|
let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR); |
||||||
|
let left = plot.valToPos(vals.time[i], 'x'); |
||||||
|
let style: React.CSSProperties | null = null; |
||||||
|
let className = ''; |
||||||
|
let isVisible = true; |
||||||
|
|
||||||
|
if (vals.isRegion?.[i]) { |
||||||
|
let right = plot.valToPos(vals.timeEnd?.[i], 'x'); |
||||||
|
|
||||||
|
isVisible = left < plot.rect.width && right > 0; |
||||||
|
|
||||||
|
if (isVisible) { |
||||||
|
let clampedLeft = Math.max(0, left); |
||||||
|
let clampedRight = Math.min(plot.rect.width, right); |
||||||
|
|
||||||
|
style = { left: clampedLeft, background: color, width: clampedRight - clampedLeft }; |
||||||
|
className = styles.annoRegion; |
||||||
|
} |
||||||
|
} else { |
||||||
|
isVisible = left > 0 && left <= plot.rect.width; |
||||||
|
|
||||||
|
if (isVisible) { |
||||||
|
style = { left, borderBottomColor: color }; |
||||||
|
className = styles.annoMarker; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// @TODO: Reset newRange after annotation is saved
|
||||||
|
if (isVisible) { |
||||||
|
let isWip = frame.meta?.custom?.isWip; |
||||||
|
|
||||||
|
markers.push( |
||||||
|
<AnnotationMarker2 |
||||||
|
annoIdx={i} |
||||||
|
annoVals={vals} |
||||||
|
className={className} |
||||||
|
style={style} |
||||||
|
timezone={timeZone} |
||||||
|
key={`${frameIdx}:${i}`} |
||||||
|
exitWipEdit={isWip ? exitWipEdit : null} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return markers; |
||||||
|
}); |
||||||
|
|
||||||
|
return createPortal(markers, xAxisRef.current!); |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
annoMarker: css({ |
||||||
|
position: 'absolute', |
||||||
|
width: 0, |
||||||
|
height: 0, |
||||||
|
borderLeft: '6px solid transparent', |
||||||
|
borderRight: '6px solid transparent', |
||||||
|
borderBottomWidth: '6px', |
||||||
|
borderBottomStyle: 'solid', |
||||||
|
transform: 'translateX(-50%)', |
||||||
|
cursor: 'pointer', |
||||||
|
zIndex: 1, |
||||||
|
}), |
||||||
|
annoRegion: css({ |
||||||
|
position: 'absolute', |
||||||
|
height: '5px', |
||||||
|
cursor: 'pointer', |
||||||
|
zIndex: 1, |
||||||
|
}), |
||||||
|
}); |
||||||
@ -0,0 +1,160 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useContext, useEffect } from 'react'; |
||||||
|
import { useAsyncFn } from 'react-use'; |
||||||
|
|
||||||
|
import { AnnotationEventUIModel, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { |
||||||
|
Button, |
||||||
|
Field, |
||||||
|
Form, |
||||||
|
HorizontalGroup, |
||||||
|
InputControl, |
||||||
|
LayoutItemContext, |
||||||
|
TextArea, |
||||||
|
usePanelContext, |
||||||
|
useStyles2, |
||||||
|
} from '@grafana/ui'; |
||||||
|
import { TagFilter } from 'app/core/components/TagFilter/TagFilter'; |
||||||
|
import { getAnnotationTags } from 'app/features/annotations/api'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
annoVals: Record<string, any[]>; |
||||||
|
annoIdx: number; |
||||||
|
timeFormatter: (v: number) => string; |
||||||
|
dismiss: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface AnnotationEditFormDTO { |
||||||
|
description: string; |
||||||
|
tags: string[]; |
||||||
|
} |
||||||
|
|
||||||
|
export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeFormatter, ...otherProps }: Props) => { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const panelContext = usePanelContext(); |
||||||
|
|
||||||
|
const layoutCtx = useContext(LayoutItemContext); |
||||||
|
useEffect(() => layoutCtx.boostZIndex(), [layoutCtx]); |
||||||
|
|
||||||
|
const [createAnnotationState, createAnnotation] = useAsyncFn(async (event: AnnotationEventUIModel) => { |
||||||
|
const result = await panelContext.onAnnotationCreate!(event); |
||||||
|
dismiss(); |
||||||
|
return result; |
||||||
|
}); |
||||||
|
|
||||||
|
const [updateAnnotationState, updateAnnotation] = useAsyncFn(async (event: AnnotationEventUIModel) => { |
||||||
|
const result = await panelContext.onAnnotationUpdate!(event); |
||||||
|
dismiss(); |
||||||
|
return result; |
||||||
|
}); |
||||||
|
|
||||||
|
const isUpdatingAnnotation = annoVals.id?.[annoIdx] != null; |
||||||
|
const isRegionAnnotation = annoVals.isRegion?.[annoIdx]; |
||||||
|
const operation = isUpdatingAnnotation ? updateAnnotation : createAnnotation; |
||||||
|
const stateIndicator = isUpdatingAnnotation ? updateAnnotationState : createAnnotationState; |
||||||
|
const time = isRegionAnnotation |
||||||
|
? `${timeFormatter(annoVals.time[annoIdx])} - ${timeFormatter(annoVals.timeEnd[annoIdx])}` |
||||||
|
: timeFormatter(annoVals.time[annoIdx]); |
||||||
|
|
||||||
|
const onSubmit = ({ tags, description }: AnnotationEditFormDTO) => { |
||||||
|
operation({ |
||||||
|
id: annoVals.id?.[annoIdx] ?? undefined, |
||||||
|
tags, |
||||||
|
description, |
||||||
|
from: Math.round(annoVals.time[annoIdx]!), |
||||||
|
to: Math.round(annoVals.timeEnd?.[annoIdx] ?? annoVals.time[annoIdx]!), |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// Annotation editor
|
||||||
|
return ( |
||||||
|
<div className={styles.editor} {...otherProps}> |
||||||
|
<div className={styles.header}> |
||||||
|
<HorizontalGroup justify={'space-between'} align={'center'}> |
||||||
|
<div>{isUpdatingAnnotation ? 'Edit annotation' : 'Add annotation'}</div> |
||||||
|
<div>{time}</div> |
||||||
|
</HorizontalGroup> |
||||||
|
</div> |
||||||
|
<Form<AnnotationEditFormDTO> |
||||||
|
onSubmit={onSubmit} |
||||||
|
defaultValues={{ description: annoVals.text?.[annoIdx], tags: annoVals.tags?.[annoIdx] || [] }} |
||||||
|
> |
||||||
|
{({ register, errors, control }) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className={styles.content}> |
||||||
|
<Field label={'Description'} invalid={!!errors.description} error={errors?.description?.message}> |
||||||
|
<TextArea |
||||||
|
className={styles.textarea} |
||||||
|
{...register('description', { |
||||||
|
required: 'Annotation description is required', |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
<Field label={'Tags'}> |
||||||
|
<InputControl |
||||||
|
control={control} |
||||||
|
name="tags" |
||||||
|
render={({ field: { ref, onChange, ...field } }) => { |
||||||
|
return ( |
||||||
|
<TagFilter |
||||||
|
allowCustomValue |
||||||
|
placeholder="Add tags" |
||||||
|
onChange={onChange} |
||||||
|
tagOptions={getAnnotationTags} |
||||||
|
tags={field.value} |
||||||
|
/> |
||||||
|
); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
</div> |
||||||
|
<div className={styles.footer}> |
||||||
|
<HorizontalGroup justify={'flex-end'}> |
||||||
|
<Button size={'sm'} variant="secondary" onClick={dismiss} fill="outline"> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
<Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}> |
||||||
|
{stateIndicator?.loading ? 'Saving' : 'Save'} |
||||||
|
</Button> |
||||||
|
</HorizontalGroup> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}} |
||||||
|
</Form> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => { |
||||||
|
return { |
||||||
|
editor: css({ |
||||||
|
// zIndex: theme.zIndex.tooltip,
|
||||||
|
background: theme.colors.background.primary, |
||||||
|
border: `1px solid ${theme.colors.border.weak}`, |
||||||
|
borderRadius: theme.shape.radius.default, |
||||||
|
boxShadow: theme.shadows.z3, |
||||||
|
userSelect: 'text', |
||||||
|
width: '460px', |
||||||
|
}), |
||||||
|
content: css({ |
||||||
|
padding: theme.spacing(1), |
||||||
|
}), |
||||||
|
header: css({ |
||||||
|
borderBottom: `1px solid ${theme.colors.border.weak}`, |
||||||
|
padding: theme.spacing(0.5, 1), |
||||||
|
fontWeight: theme.typography.fontWeightBold, |
||||||
|
fontSize: theme.typography.fontSize, |
||||||
|
color: theme.colors.text.primary, |
||||||
|
}), |
||||||
|
footer: css({ |
||||||
|
borderTop: `1px solid ${theme.colors.border.weak}`, |
||||||
|
padding: theme.spacing(1, 1), |
||||||
|
}), |
||||||
|
textarea: css({ |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
fontSize: theme.typography.bodySmall.fontSize, |
||||||
|
}), |
||||||
|
}; |
||||||
|
}; |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; |
||||||
|
import useClickAway from 'react-use/lib/useClickAway'; |
||||||
|
|
||||||
|
import { dateTimeFormat, GrafanaTheme2, systemDateFormats } from '@grafana/data'; |
||||||
|
import { TimeZone } from '@grafana/schema'; |
||||||
|
import { usePanelContext, useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { AnnotationEditor2 } from './AnnotationEditor2'; |
||||||
|
import { AnnotationTooltip2 } from './AnnotationTooltip2'; |
||||||
|
|
||||||
|
interface AnnoBoxProps { |
||||||
|
annoVals: Record<string, any[]>; |
||||||
|
annoIdx: number; |
||||||
|
style: React.CSSProperties | null; |
||||||
|
className: string; |
||||||
|
timezone: TimeZone; |
||||||
|
exitWipEdit?: null | (() => void); |
||||||
|
} |
||||||
|
|
||||||
|
const STATE_DEFAULT = 0; |
||||||
|
const STATE_EDITING = 1; |
||||||
|
const STATE_HOVERED = 2; |
||||||
|
|
||||||
|
export const AnnotationMarker2 = ({ annoVals, annoIdx, className, style, exitWipEdit, timezone }: AnnoBoxProps) => { |
||||||
|
const { canEditAnnotations, canDeleteAnnotations, ...panelCtx } = usePanelContext(); |
||||||
|
|
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const [state, setState] = useState(STATE_DEFAULT); |
||||||
|
|
||||||
|
const clickAwayRef = useRef(null); |
||||||
|
|
||||||
|
useClickAway(clickAwayRef, () => { |
||||||
|
if (state === STATE_EDITING) { |
||||||
|
setIsEditingWrap(false); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const domRef = React.createRef<HTMLDivElement>(); |
||||||
|
|
||||||
|
// similar to TooltipPlugin2, when editing annotation (pinned), it should boost z-index
|
||||||
|
const setIsEditingWrap = useCallback( |
||||||
|
(isEditing: boolean) => { |
||||||
|
setState(isEditing ? STATE_EDITING : STATE_DEFAULT); |
||||||
|
if (!isEditing && exitWipEdit != null) { |
||||||
|
exitWipEdit(); |
||||||
|
} |
||||||
|
}, |
||||||
|
[exitWipEdit] |
||||||
|
); |
||||||
|
|
||||||
|
const onAnnotationEdit = useCallback(() => { |
||||||
|
setIsEditingWrap(true); |
||||||
|
}, [setIsEditingWrap]); |
||||||
|
|
||||||
|
const onAnnotationDelete = useCallback(() => { |
||||||
|
if (panelCtx.onAnnotationDelete) { |
||||||
|
panelCtx.onAnnotationDelete(annoVals.id?.[annoIdx]); |
||||||
|
} |
||||||
|
}, [annoIdx, annoVals.id, panelCtx]); |
||||||
|
|
||||||
|
const timeFormatter = useCallback( |
||||||
|
(value: number) => { |
||||||
|
return dateTimeFormat(value, { |
||||||
|
format: systemDateFormats.fullDate, |
||||||
|
timeZone: timezone, |
||||||
|
}); |
||||||
|
}, |
||||||
|
[timezone] |
||||||
|
); |
||||||
|
|
||||||
|
useLayoutEffect( |
||||||
|
() => { |
||||||
|
if (exitWipEdit != null) { |
||||||
|
setIsEditingWrap(true); |
||||||
|
} |
||||||
|
}, |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[] |
||||||
|
); |
||||||
|
|
||||||
|
const renderAnnotationTooltip = useCallback(() => { |
||||||
|
let dashboardUID = annoVals.dashboardUID?.[annoIdx]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<AnnotationTooltip2 |
||||||
|
timeFormatter={timeFormatter} |
||||||
|
onEdit={onAnnotationEdit} |
||||||
|
onDelete={onAnnotationDelete} |
||||||
|
canEdit={canEditAnnotations ? canEditAnnotations(dashboardUID) : false} |
||||||
|
canDelete={canDeleteAnnotations ? canDeleteAnnotations(dashboardUID) : false} |
||||||
|
annoIdx={annoIdx} |
||||||
|
annoVals={annoVals} |
||||||
|
/> |
||||||
|
); |
||||||
|
}, [ |
||||||
|
timeFormatter, |
||||||
|
onAnnotationEdit, |
||||||
|
onAnnotationDelete, |
||||||
|
canEditAnnotations, |
||||||
|
annoVals, |
||||||
|
annoIdx, |
||||||
|
canDeleteAnnotations, |
||||||
|
]); |
||||||
|
|
||||||
|
const renderAnnotationEditor = useCallback(() => { |
||||||
|
return ( |
||||||
|
<AnnotationEditor2 |
||||||
|
dismiss={() => setIsEditingWrap(false)} |
||||||
|
timeFormatter={timeFormatter} |
||||||
|
annoIdx={annoIdx} |
||||||
|
annoVals={annoVals} |
||||||
|
/> |
||||||
|
); |
||||||
|
}, [annoIdx, annoVals, timeFormatter, setIsEditingWrap]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={domRef} |
||||||
|
className={className} |
||||||
|
style={style!} |
||||||
|
onMouseEnter={() => state !== STATE_EDITING && setState(STATE_HOVERED)} |
||||||
|
onMouseLeave={() => state !== STATE_EDITING && setState(STATE_DEFAULT)} |
||||||
|
> |
||||||
|
<div className={styles.annoInfo} ref={clickAwayRef}> |
||||||
|
{state === STATE_HOVERED && renderAnnotationTooltip()} |
||||||
|
{state === STATE_EDITING && renderAnnotationEditor()} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
annoInfo: css({ |
||||||
|
background: theme.colors.background.secondary, |
||||||
|
minWidth: '300px', |
||||||
|
// maxWidth: '400px',
|
||||||
|
position: 'absolute', |
||||||
|
top: '5px', |
||||||
|
left: '50%', |
||||||
|
transform: 'translateX(-50%)', |
||||||
|
}), |
||||||
|
}); |
||||||
@ -0,0 +1,157 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useContext, useEffect } from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2, textUtil } from '@grafana/data'; |
||||||
|
import { HorizontalGroup, IconButton, LayoutItemContext, Tag, useStyles2 } from '@grafana/ui'; |
||||||
|
import alertDef from 'app/features/alerting/state/alertDef'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
annoVals: Record<string, any[]>; |
||||||
|
annoIdx: number; |
||||||
|
timeFormatter: (v: number) => string; |
||||||
|
canEdit: boolean; |
||||||
|
canDelete: boolean; |
||||||
|
onEdit: () => void; |
||||||
|
onDelete: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const AnnotationTooltip2 = ({ |
||||||
|
annoVals, |
||||||
|
annoIdx, |
||||||
|
timeFormatter, |
||||||
|
canEdit, |
||||||
|
canDelete, |
||||||
|
onEdit, |
||||||
|
onDelete, |
||||||
|
}: Props) => { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const layoutCtx = useContext(LayoutItemContext); |
||||||
|
useEffect(() => layoutCtx.boostZIndex(), [layoutCtx]); |
||||||
|
|
||||||
|
let time = timeFormatter(annoVals.time[annoIdx]); |
||||||
|
let text = annoVals.text[annoIdx]; |
||||||
|
|
||||||
|
if (annoVals.isRegion?.[annoIdx]) { |
||||||
|
time += ' - ' + timeFormatter(annoVals.timeEnd[annoIdx]); |
||||||
|
} |
||||||
|
|
||||||
|
let avatar; |
||||||
|
if (annoVals.login?.[annoIdx] && annoVals.avatarUrl?.[annoIdx]) { |
||||||
|
avatar = <img className={styles.avatar} alt="Annotation avatar" src={annoVals.avatarUrl[annoIdx]} />; |
||||||
|
} |
||||||
|
|
||||||
|
let state: React.ReactNode | null = null; |
||||||
|
let alertText = ''; |
||||||
|
|
||||||
|
if (annoVals.alertId?.[annoIdx] !== undefined && annoVals.newState?.[annoIdx]) { |
||||||
|
const stateModel = alertDef.getStateDisplayModel(annoVals.newState[annoIdx]); |
||||||
|
state = ( |
||||||
|
<div className={styles.alertState}> |
||||||
|
<i className={stateModel.stateClass}>{stateModel.text}</i> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
// alertText = alertDef.getAlertAnnotationInfo(annotation); // @TODO ??
|
||||||
|
} else if (annoVals.title?.[annoIdx]) { |
||||||
|
text = annoVals.title[annoIdx] + '<br />' + (typeof text === 'string' ? text : ''); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.wrapper}> |
||||||
|
<div className={styles.header}> |
||||||
|
<HorizontalGroup justify={'space-between'} align={'center'} spacing={'md'}> |
||||||
|
<div className={styles.meta}> |
||||||
|
<span> |
||||||
|
{avatar} |
||||||
|
{state} |
||||||
|
</span> |
||||||
|
{time} |
||||||
|
</div> |
||||||
|
{(canEdit || canDelete) && ( |
||||||
|
<div className={styles.editControls}> |
||||||
|
{canEdit && <IconButton name={'pen'} size={'sm'} onClick={onEdit} tooltip="Edit" />} |
||||||
|
{canDelete && ( |
||||||
|
<IconButton |
||||||
|
name={'trash-alt'} |
||||||
|
size={'sm'} |
||||||
|
onClick={onDelete} |
||||||
|
tooltip="Delete" |
||||||
|
disabled={!annoVals.id?.[annoIdx]} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</HorizontalGroup> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className={styles.body}> |
||||||
|
{text && <div className={styles.text} dangerouslySetInnerHTML={{ __html: textUtil.sanitize(text) }} />} |
||||||
|
{alertText} |
||||||
|
<div> |
||||||
|
<HorizontalGroup spacing="xs" wrap> |
||||||
|
{annoVals.tags?.[annoIdx]?.map((t: string, i: number) => <Tag name={t} key={`${t}-${i}`} />)} |
||||||
|
</HorizontalGroup> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
wrapper: css({ |
||||||
|
zIndex: theme.zIndex.tooltip, |
||||||
|
whiteSpace: 'initial', |
||||||
|
borderRadius: theme.shape.radius.default, |
||||||
|
background: theme.colors.background.primary, |
||||||
|
border: `1px solid ${theme.colors.border.weak}`, |
||||||
|
boxShadow: theme.shadows.z2, |
||||||
|
userSelect: 'text', |
||||||
|
}), |
||||||
|
header: css({ |
||||||
|
padding: theme.spacing(0.5, 1), |
||||||
|
borderBottom: `1px solid ${theme.colors.border.weak}`, |
||||||
|
fontWeight: theme.typography.fontWeightBold, |
||||||
|
fontSize: theme.typography.fontSize, |
||||||
|
color: theme.colors.text.primary, |
||||||
|
display: 'flex', |
||||||
|
}), |
||||||
|
meta: css({ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
color: theme.colors.text.primary, |
||||||
|
fontWeight: 400, |
||||||
|
}), |
||||||
|
editControls: css({ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center', |
||||||
|
'> :last-child': { |
||||||
|
marginLeft: 0, |
||||||
|
}, |
||||||
|
}), |
||||||
|
body: css({ |
||||||
|
padding: theme.spacing(1), |
||||||
|
fontSize: theme.typography.bodySmall.fontSize, |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
fontWeight: 400, |
||||||
|
a: { |
||||||
|
color: theme.colors.text.link, |
||||||
|
'&:hover': { |
||||||
|
textDecoration: 'underline', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}), |
||||||
|
text: css({ |
||||||
|
paddingBottom: theme.spacing(1), |
||||||
|
}), |
||||||
|
avatar: css({ |
||||||
|
borderRadius: theme.shape.radius.circle, |
||||||
|
width: 16, |
||||||
|
height: 16, |
||||||
|
marginRight: theme.spacing(1), |
||||||
|
}), |
||||||
|
alertState: css({ |
||||||
|
paddingRight: theme.spacing(1), |
||||||
|
fontWeight: theme.typography.fontWeightMedium, |
||||||
|
}), |
||||||
|
}); |
||||||
Loading…
Reference in new issue