fix gutter condition and global loading (#1291)

frontend/src/lib/components/Annotations/annotationsLogic.js

@@ -10,7 +10,7 @@ export const annotationsLogic = kea({
     key: (props) => (props.pageKey ? `${props.pageKey}_annotations` : 'annotations_default'),
     connect: {
         actions: [annotationsModel, ['loadGlobalAnnotations', 'deleteGlobalAnnotation', 'createGlobalAnnotation']],
-        values: [annotationsModel, ['globalAnnotations']],
+        values: [annotationsModel, ['activeGlobalAnnotations']],
     },
     actions: () => ({
         createAnnotation: (content, date_marker, apply_all = false) => ({
@@ -93,8 +93,8 @@ export const annotationsLogic = kea({
     }),
     selectors: ({ selectors }) => ({
         annotationsList: [
-            () => [selectors.annotationsToCreate, selectors.annotations, selectors.globalAnnotations],
-            (annotationsToCreate, annotations, globalAnnotations) => {
+            () => [selectors.annotationsToCreate, selectors.annotations, selectors.activeGlobalAnnotations],
+            (annotationsToCreate, annotations, activeGlobalAnnotations) => {
                 const result = [
                     ...annotationsToCreate.map((val) => ({
                         ...val,
@@ -104,7 +104,7 @@ export const annotationsLogic = kea({
                         ...val,
                         id: parseInt(val.id),
                     })),
-                    ...globalAnnotations.map((val) => ({
+                    ...activeGlobalAnnotations.map((val) => ({
                         ...val,
                         id: parseInt(val.id),
                     })),

frontend/src/models/annotationsModel.js

@@ -40,6 +40,14 @@ export const annotationsModel = kea({
             },
         },
     }),
+    selectors: ({ selectors }) => ({
+        activeGlobalAnnotations: [
+            () => [selectors.globalAnnotations],
+            (globalAnnotations) => {
+                return globalAnnotations.filter((annotation) => !annotation.deleted)
+            },
+        ],
+    }),
     listeners: ({ actions }) => ({
         createGlobalAnnotation: async ({ dashboard_item, content, date_marker, created_at }) => {
             await api.create('api/annotation', {

frontend/src/scenes/annotations/AnnotationsTable.tsx

@@ -6,7 +6,7 @@ import 'lib/components/Annotations/AnnotationMarker.scss'
 import { humanFriendlyDetailedTime } from 'lib/utils'
 import moment from 'moment'
 import { annotationsModel } from '~/models/annotationsModel'
-import { DeleteOutlined } from '@ant-design/icons'
+import { DeleteOutlined, RedoOutlined } from '@ant-design/icons'
 
 const { TextArea } = Input
 
@@ -17,7 +17,9 @@ interface Props {
 export function AnnotationsTable(props: Props): JSX.Element {
     const { logic } = props
     const { annotations, annotationsLoading, next, loadingNext } = useValues(logic)
-    const { loadAnnotations, updateAnnotation, deleteAnnotation, loadAnnotationsNext } = useActions(logic)
+    const { loadAnnotations, updateAnnotation, deleteAnnotation, loadAnnotationsNext, restoreAnnotation } = useActions(
+        logic
+    )
     const { createGlobalAnnotation } = useActions(annotationsModel)
     const [open, setOpen] = useState(false)
     const [selectedAnnotation, setSelected] = useState(null)
@@ -56,6 +58,12 @@ export function AnnotationsTable(props: Props): JSX.Element {
             },
             ellipsis: true,
         },
+        {
+            title: 'Date Marker',
+            render: function RenderDateMarker(annotation): JSX.Element {
+                return <span>{moment(annotation.date_marker).format('YYYY-MM-DD')}</span>
+            },
+        },
         {
             title: 'Last Updated',
             render: function RenderLastUpdated(annotation): JSX.Element {
@@ -145,6 +153,10 @@ export function AnnotationsTable(props: Props): JSX.Element {
                     deleteAnnotation(selectedAnnotation.id)
                     closeModal()
                 }}
+                onRestore={(): void => {
+                    restoreAnnotation(selectedAnnotation.id)
+                    closeModal()
+                }}
                 annotation={selectedAnnotation}
             ></CreateAnnotationModal>
         </div>
@@ -155,6 +167,7 @@ interface CreateAnnotationModalProps {
     visible: boolean
     onCancel: () => void
     onDelete: () => void
+    onRestore: () => void
     onSubmit: (input: string, date: moment.Moment) => void
     annotation?: any
 }
@@ -206,12 +219,21 @@ function CreateAnnotationModal(props: CreateAnnotationModalProps): JSX.Element {
             ) : (
                 <Row justify="space-between">
                     <span>Change existing annotation text</span>
-                    <DeleteOutlined
-                        className="clickable"
-                        onClick={(): void => {
-                            props.onDelete()
-                        }}
-                    ></DeleteOutlined>
+                    {!props.annotation?.deleted ? (
+                        <DeleteOutlined
+                            className="clickable"
+                            onClick={(): void => {
+                                props.onDelete()
+                            }}
+                        />
+                    ) : (
+                        <RedoOutlined
+                            className="clickable"
+                            onClick={(): void => {
+                                props.onRestore()
+                            }}
+                        />
+                    )}
                 </Row>
             )}
             <br></br>

frontend/src/scenes/annotations/annotationsTableLogic.js

@@ -34,6 +34,7 @@ export const annotationsTableLogic = kea({
     actions: () => ({
         updateAnnotation: (id, content) => ({ id, content }),
         deleteAnnotation: (id) => ({ id }),
+        restoreAnnotation: (id) => ({ id }),
         loadAnnotationsNext: () => true,
         setNext: (next) => ({ next }),
         appendAnnotations: (annotations) => ({ annotations }),
@@ -42,6 +43,10 @@ export const annotationsTableLogic = kea({
         updateAnnotation: async ({ id, content }) => {
             await api.update(`api/annotation/${id}`, { content })
         },
+        restoreAnnotation: async ({ id }) => {
+            await api.update(`api/annotation/${id}`, { deleted: false })
+            actions.loadAnnotations({})
+        },
         deleteAnnotation: ({ id }) => {
             deleteWithUndo({
                 endpoint: 'annotation',

frontend/src/scenes/trends/LineGraph.js

@@ -9,6 +9,7 @@ import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { toast } from 'react-toastify'
 import { Annotations, annotationsLogic, AnnotationMarker } from 'lib/components/Annotations'
 import { useEscapeKey } from 'lib/hooks/useEscapeKey'
+import moment from 'moment'
 
 //--Chart Style Options--//
 // Chart.defaults.global.defaultFontFamily = "'PT Sans', sans-serif"
@@ -50,6 +51,7 @@ export function LineGraph({
     const [leftExtent, setLeftExtent] = useState(0)
     const [interval, setInterval] = useState(0)
     const [topExtent, setTopExtent] = useState(0)
+    const [annotationInRange, setInRange] = useState(false)
     const size = useWindowSize()
 
     const annotationsCondition =
@@ -66,11 +68,21 @@ export function LineGraph({
     // update boundaries and axis padding when user hovers with mouse or annotations load
     useEffect(() => {
         if (annotationsCondition && myLineChart.current) {
-            myLineChart.current.options.scales.xAxes[0].ticks.padding = annotationsList.length > 0 || focused ? 35 : 0
+            myLineChart.current.options.scales.xAxes[0].ticks.padding = annotationInRange || focused ? 35 : 0
             myLineChart.current.update()
             calculateBoundaries()
         }
-    }, [annotationsLoading, annotationsCondition, annotationsList])
+    }, [annotationsLoading, annotationsCondition, annotationsList, annotationInRange])
+
+    useEffect(() => {
+        if (annotationsCondition && datasets[0]?.days?.length > 0) {
+            const begin = moment(datasets[0].days[0])
+            const end = moment(datasets[0].days[datasets[0].days.length - 1]).add(2, 'days')
+            const checkBetween = (element) =>
+                moment(element.date_marker).isSameOrBefore(end) && moment(element.date_marker).isSameOrAfter(begin)
+            setInRange(annotationsList.some(checkBetween))
+        }
+    }, [datasets, annotationsList, annotationsCondition])
 
     // recalculate diff if interval type selection changes
     useEffect(() => {
@@ -238,7 +250,7 @@ export function LineGraph({
                                           min: 0,
                                           fontColor: axisLabelColor,
                                           precision: 0,
-                                          padding: annotationsLoading || annotationsList.length === 0 ? 0 : 35,
+                                          padding: annotationsLoading || !annotationInRange ? 0 : 35,
                                       },
                                   },
                               ],