influxdata / influxdata/ui

Annotations: As a user I can write an annotation to a new annotation stream

Open
#241 0 comments 0 reactions 0 assignees View on GitHub
team/ui
Dominant language
TypeScript
Stars
117
Forks
51
Avg merge
2d 15h
Merged PRs (30d)
4

Description

See: https://github.com/influxdata/idpe/issues/9001
See #242 [updating]
See #222 [deleting]

---
Please put behind a FEATURE FLAG: ANNOTATIONS
I am a user and I want to annotate a visualization I am looking at

GIVEN I do not have an annotation stream in mind for the annotation I am creating currently
AND I am looking at a visualization in the Data Explorer or a Dashboard

WHEN I click the `Annotations` button
THEN I see a toolbar with controls for annotations

WHEN I click the blue `Annotate` button
THEN I see instructions on how to annotate a visualization

WHEN I hover over a compatible visualization (TBD)
THEN I see a vertical marker following my mouse (inside the visualization)
AND the vertical marker tells me I can `Click to add single point, click + drag to add a range`

WHEN I click or click+drag on a compatible visualization
THEN I see an overlay with a form for creating the annotation

[Design Mockup](https://www.figma.com/file/AQk0tUthLFepRhFUibvzMI/Annotations?node-id=145%3A381)
![Screen Shot 2020-11-13 at 3.54.08 PM.png](https://images.zenhubusercontent.com/5c33b08d24dda4712ef4ae10/5df72995-0b7d-483d-8a52-1fe05e0f202d)

GIVEN I have not created any Annotation Streams yet
THEN `Create New` is selected by default
AND I can specify a name, measurement name, bucket, and color for my pending annotation stream

WHEN I click the blue `Add Annotation` button
AND there are no form errors
THEN the annotation stream I described is created
AND my annotation is written to the bucket associated with the stream selected and inherits tags + measurements
AND I see a notification appear (success, 5s, "Annotation written successfully! Please wait a moment for it to appear")
AND that newly created stream is enabled
AND I see my vertical marker visible on all compatible visualizations on the page

### Error Case

WHEN I click the blue `Add Annotation` button
AND there are form errors (required fields are empty, name & measurement are empty)
THEN I see error text below each invalid input
AND the form does not submit

This UI is partially built out:

Look for `src/annotations/components/AddAnnotationOverlay.tsx`
Access the overlay by clicking `Annotate`
Access the overlay with route `orgs/orgID/dashboard/dashboardID/add-annotation` (from dashboard) or `orgs/orgID/data-explorer/add-annotation` (from DE)
Use search params to specify start and stop time `/add-annotation?timeStart=12345&timeStop=24234242`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.