mirror of https://github.com/grafana/grafana.git
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
import { AnnotationQuery, DataQuery, EventBus } from '@grafana/data';
|
|
import { selectors } from '@grafana/e2e-selectors';
|
|
|
|
import { AnnotationPicker } from './AnnotationPicker';
|
|
|
|
interface Props {
|
|
events: EventBus;
|
|
annotations: AnnotationQuery[];
|
|
onAnnotationChanged: (annotation: AnnotationQuery<DataQuery>) => void;
|
|
}
|
|
|
|
export const Annotations = ({ annotations, onAnnotationChanged, events }: Props) => {
|
|
const [visibleAnnotations, setVisibleAnnotations] = useState<AnnotationQuery[]>([]);
|
|
useEffect(() => {
|
|
setVisibleAnnotations(annotations.filter((annotation) => annotation.hide !== true));
|
|
}, [annotations]);
|
|
|
|
if (visibleAnnotations.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div data-testid={selectors.pages.Dashboard.SubMenu.Annotations.annotationsWrapper}>
|
|
{visibleAnnotations.map((annotation) => (
|
|
<AnnotationPicker
|
|
events={events}
|
|
annotation={annotation}
|
|
onEnabledChanged={onAnnotationChanged}
|
|
key={annotation.name}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|