feat(webapp): Annotations flot plugin

.github/workflows/cypress-tests.yml

@@ -37,10 +37,6 @@ jobs:
       - run: yarn install --frozen-lockfile
       - run: make --version
       - run: make -j e2e-build
-      - uses: actions/cache@v3
-        with:
-          path: bin/pyroscope
-          key: ${{ runner.os }}-pyroscope
       - name: Cypress run
         uses: cypress-io/github-action@v4
         with:

cypress/integration/webapp/annotations.ts

@@ -0,0 +1,51 @@
+describe('Annotations', () => {
+  it('add annotation flow works as expected', () => {
+    const basePath = Cypress.env('basePath') || '';
+    cy.intercept(`${basePath}**/labels*`).as('labels');
+    cy.intercept(`${basePath}**/label-values*`, {
+      fixture: 'appNames.json',
+    }).as('labelValues');
+    cy.intercept('**/render*', {
+      fixture: 'render.json',
+    }).as('render');
+
+    cy.visit('/');
+
+    cy.wait('@labels');
+    cy.wait('@labelValues');
+    cy.wait('@render');
+
+    cy.get('canvas.flot-overlay').click();
+
+    cy.get('li[role=menuitem]').contains('Add annotation').click();
+
+    const content = 'test';
+    let time;
+
+    cy.get('form#annotation-form')
+      .findByTestId('annotation_timestamp_input')
+      .invoke('val')
+      .then((sometext) => (time = sometext));
+
+    cy.get('form#annotation-form')
+      .findByTestId('annotation_content_input')
+      .type(content);
+
+    cy.get('button[form=annotation-form]').click();
+
+    cy.get('div[data-testid="annotation_mark_wrapper"]').click();
+
+    cy.get('form#annotation-form')
+      .findByTestId('annotation_content_input')
+      .should('have.value', content);
+
+    cy.get('form#annotation-form')
+      .findByTestId('annotation_timestamp_input')
+      .invoke('val')
+      .then((sometext2) => assert.isTrue(sometext2 === time));
+
+    cy.get('button[form=annotation-form]').contains('Close').click();
+
+    cy.get('form#annotation-form').should('not.exist');
+  });
+});

webapp/javascript/components/TimelineChart/AnnotationMark/index.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable default-case, consistent-return */
+import Color from 'color';
+import React, { useState } from 'react';
+import classNames from 'classnames/bind';
+import AnnotationInfo from '@webapp/pages/continuous/contextMenu/AnnotationInfo';
+import useTimeZone from '@webapp/hooks/timeZone.hook';
+
+import styles from './styles.module.scss';
+
+const cx = classNames.bind(styles);
+
+interface IAnnotationMarkProps {
+  type: 'message';
+  color: Color;
+  value: {
+    content: string;
+    timestamp: number;
+  };
+}
+
+const getIcon = (type: IAnnotationMarkProps['type']) => {
+  switch (type) {
+    case 'message':
+      return styles.message;
+  }
+};
+
+const AnnotationMark = ({ type, color, value }: IAnnotationMarkProps) => {
+  const { offset } = useTimeZone();
+  const [visible, setVisible] = useState(false);
+  const [target, setTarget] = useState<Element>();
+  const [hovered, setHovered] = useState(false);
+
+  const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
+    setTarget(e.target as Element);
+    setVisible(true);
+  };
+
+  const annotationInfoPopover = target ? (
+    <AnnotationInfo
+      popoverAnchorPoint={{ x: 0, y: 27 }}
+      container={target}
+      value={value}
+      timezone={offset === 0 ? 'utc' : 'browser'}
+      timestamp={value.timestamp}
+      isOpen={visible}
+      onClose={() => setVisible(false)}
+      popoverClassname={styles.form}
+    />
+  ) : null;
+
+  const onHoverStyle = {
+    backgroundColor: hovered ? color.darken(0.2).hex() : color.hex(),
+    zIndex: hovered ? 2 : 1,
+  };
+
+  return (
+    <>
+      <div
+        data-testid="annotation_mark_wrapper"
+        onClick={onClick}
+        style={onHoverStyle}
+        className={cx(styles.wrapper, getIcon(type))}
+        role="none"
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      />
+      {annotationInfoPopover}
+    </>
+  );
+};
+
+export default AnnotationMark;

webapp/javascript/components/TimelineChart/AnnotationMark/styles.module.scss

@@ -0,0 +1,23 @@
+.wrapper {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  left: -9px;
+  top: -7px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-size: 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.message {
+  background-image: url('../../../../images/comment.svg');
+}
+
+.form {
+  width: 180px;
+}