[Lens] Manual Annotations (#126456)

* Add event annotation service structure

* adding annotation layer to lens. passing event annotation service

* simplify initial Dimensions

* add annotations to lens

* no datasource layer

* group the annotations into numerical icons

* color icons in tooltip, add the annotation icon, fix date interval bug

* display old time axis for annotations

* error in annotation dimension when date histogram is removed

* refactor: use the same methods for annotations and reference lines

* wip

* only check activeData for dataLayers

* added new icons for annotations

* refactor icons

* uniqueLabels

* unique Labels

* diff config from args

* change timestamp format

* added expression event_annotation_group

* names refactor

* ea service adding help descriptions

* rotate icon

* added tests

* fix button problem

* dnd problem

* dnd fix

* tests for dimension trigger

* tests for unique labels

* [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs'

* type

* add new button test

* remove noDatasource from config (only needed when initializing a layer or dimension in getSupportedLayers)

* addressing Joe's and Michael comments

* remove hexagon and square, address Stratoula's feedback

* stroke for icons & icon fill

* fix tests

* fix small things

* align the set with tsvb

* align IconSelect

* fix i18nrc

* Update src/plugins/event_annotation/public/event_annotation_service/index.tsx

Co-authored-by: Alexey Antonov <[email protected]>

* refactor empty button

* CR

* date cr

* remove DimensionEditorSection

* change to emptyShade for traingle fill

* Update x-pack/plugins/lens/public/app_plugin/app.scss

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Alexey Antonov <[email protected]>

.i18nrc.json

@@ -31,6 +31,7 @@
     "expressions": "src/plugins/expressions",
     "expressionShape": "src/plugins/expression_shape",
     "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
+    "eventAnnotation": "src/plugins/event_annotation",
     "fieldFormats": "src/plugins/field_formats",
     "flot": "packages/kbn-flot-charts/lib",
     "home": "src/plugins/home",
@@ -50,7 +51,10 @@
     "kibana-react": "src/plugins/kibana_react",
     "kibanaOverview": "src/plugins/kibana_overview",
     "lists": "packages/kbn-securitysolution-list-utils/src",
-    "management": ["src/legacy/core_plugins/management", "src/plugins/management"],
+    "management": [
+      "src/legacy/core_plugins/management",
+      "src/plugins/management"
+    ],
     "monaco": "packages/kbn-monaco/src",
     "navigation": "src/plugins/navigation",
     "newsfeed": "src/plugins/newsfeed",
@@ -62,8 +66,13 @@
     "sharedUX": "src/plugins/shared_ux",
     "sharedUXComponents": "packages/kbn-shared-ux-components/src",
     "statusPage": "src/legacy/core_plugins/status_page",
-    "telemetry": ["src/plugins/telemetry", "src/plugins/telemetry_management_section"],
-    "timelion": ["src/plugins/vis_types/timelion"],
+    "telemetry": [
+      "src/plugins/telemetry",
+      "src/plugins/telemetry_management_section"
+    ],
+    "timelion": [
+      "src/plugins/vis_types/timelion"
+    ],
     "uiActions": "src/plugins/ui_actions",
     "uiActionsExamples": "examples/ui_action_examples",
     "usageCollection": "src/plugins/usage_collection",
@@ -83,4 +92,4 @@
     "visualizations": "src/plugins/visualizations"
   },
   "translations": []
-}
+}

docs/developer/plugin-list.asciidoc

@@ -94,6 +94,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module.
 
 
+|{kib-repo}blob/{branch}/src/plugins/event_annotation/README.md[eventAnnotation]
+|The Event Annotation service contains expressions for event annotations
+
+
 |{kib-repo}blob/{branch}/src/plugins/expression_error/README.md[expressionError]
 |Expression Error plugin adds an error renderer to the expression plugin. The renderer will display the error image.
 

packages/kbn-optimizer/limits.yml

@@ -124,3 +124,4 @@ pageLoadAssetSize:
   sessionView: 77750
   cloudSecurityPosture: 19109
   visTypeGauge: 24113
+  eventAnnotation: 19334

src/plugins/event_annotation/README.md

@@ -0,0 +1,3 @@
+# Event Annotation service
+
+The Event Annotation service contains expressions for event annotations

src/plugins/event_annotation/common/event_annotation_group/index.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
+import { i18n } from '@kbn/i18n';
+import type { EventAnnotationOutput } from '../manual_event_annotation/types';
+
+export interface EventAnnotationGroupOutput {
+  type: 'event_annotation_group';
+  annotations: EventAnnotationOutput[];
+}
+
+export interface EventAnnotationGroupArgs {
+  annotations: EventAnnotationOutput[];
+}
+
+export function eventAnnotationGroup(): ExpressionFunctionDefinition<
+  'event_annotation_group',
+  null,
+  EventAnnotationGroupArgs,
+  EventAnnotationGroupOutput
+> {
+  return {
+    name: 'event_annotation_group',
+    aliases: [],
+    type: 'event_annotation_group',
+    inputTypes: ['null'],
+    help: i18n.translate('eventAnnotation.group.description', {
+      defaultMessage: 'Event annotation group',
+    }),
+    args: {
+      annotations: {
+        types: ['manual_event_annotation'],
+        help: i18n.translate('eventAnnotation.group.args.annotationConfigs', {
+          defaultMessage: 'Annotation configs',
+        }),
+        multi: true,
+      },
+    },
+    fn: (input, args) => {
+      return {
+        type: 'event_annotation_group',
+        annotations: args.annotations,
+      };
+    },
+  };
+}

src/plugins/event_annotation/common/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type { EventAnnotationArgs, EventAnnotationOutput } from './manual_event_annotation/types';
+export { manualEventAnnotation } from './manual_event_annotation';
+export { eventAnnotationGroup } from './event_annotation_group';
+export type { EventAnnotationGroupArgs } from './event_annotation_group';
+export type { EventAnnotationConfig } from './types';

src/plugins/event_annotation/common/manual_event_annotation/index.ts

@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
+import { i18n } from '@kbn/i18n';
+import type { EventAnnotationArgs, EventAnnotationOutput } from './types';
+export const manualEventAnnotation: ExpressionFunctionDefinition<
+  'manual_event_annotation',
+  null,
+  EventAnnotationArgs,
+  EventAnnotationOutput
+> = {
+  name: 'manual_event_annotation',
+  aliases: [],
+  type: 'manual_event_annotation',
+  help: i18n.translate('eventAnnotation.manualAnnotation.description', {
+    defaultMessage: `Configure manual annotation`,
+  }),
+  inputTypes: ['null'],
+  args: {
+    time: {
+      types: ['string'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.time', {
+        defaultMessage: `Timestamp for annotation`,
+      }),
+    },
+    label: {
+      types: ['string'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.label', {
+        defaultMessage: `The name of the annotation`,
+      }),
+    },
+    color: {
+      types: ['string'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.color', {
+        defaultMessage: 'The color of the line',
+      }),
+    },
+    lineStyle: {
+      types: ['string'],
+      options: ['solid', 'dotted', 'dashed'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.lineStyle', {
+        defaultMessage: 'The style of the annotation line',
+      }),
+    },
+    lineWidth: {
+      types: ['number'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.lineWidth', {
+        defaultMessage: 'The width of the annotation line',
+      }),
+    },
+    icon: {
+      types: ['string'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.icon', {
+        defaultMessage: 'An optional icon used for annotation lines',
+      }),
+    },
+    textVisibility: {
+      types: ['boolean'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.textVisibility', {
+        defaultMessage: 'Visibility of the label on the annotation line',
+      }),
+    },
+    isHidden: {
+      types: ['boolean'],
+      help: i18n.translate('eventAnnotation.manualAnnotation.args.isHidden', {
+        defaultMessage: `Switch to hide annotation`,
+      }),
+    },
+  },
+  fn: function fn(input: unknown, args: EventAnnotationArgs) {
+    return {
+      type: 'manual_event_annotation',
+      ...args,
+    };
+  },
+};

src/plugins/event_annotation/common/manual_event_annotation/types.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { StyleProps } from '../types';
+
+export type EventAnnotationArgs = {
+  time: string;
+} & StyleProps;
+
+export type EventAnnotationOutput = EventAnnotationArgs & { type: 'manual_event_annotation' };

src/plugins/event_annotation/common/types.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type LineStyle = 'solid' | 'dashed' | 'dotted';
+export type AnnotationType = 'manual';
+export type KeyType = 'point_in_time';
+
+export interface StyleProps {
+  label: string;
+  color?: string;
+  icon?: string;
+  lineWidth?: number;
+  lineStyle?: LineStyle;
+  textVisibility?: boolean;
+  isHidden?: boolean;
+}
+
+export type EventAnnotationConfig = {
+  id: string;
+  key: {
+    type: KeyType;
+    timestamp: string;
+  };
+} & StyleProps;

src/plugins/event_annotation/jest.config.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/event_annotation'],
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/src/plugins/event_annotation',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/src/plugins/event_annotation/{common,public,server}/**/*.{ts,tsx}',
+  ],
+};

src/plugins/event_annotation/kibana.json

@@ -0,0 +1,17 @@
+{
+  "id": "eventAnnotation",
+  "version": "kibana",
+  "server": true,
+  "ui": true,
+  "description": "The Event Annotation service contains expressions for event annotations",
+  "extraPublicDirs": [
+    "common"
+  ],
+  "requiredPlugins": [
+    "expressions"
+  ],
+  "owner": {
+    "name": "Vis Editors",
+    "githubTeam": "kibana-vis-editors"
+  }
+}

src/plugins/event_annotation/public/event_annotation_service/README.md

@@ -0,0 +1,3 @@
+# Event Annotation service
+
+The Event Annotation service contains expressions for event annotations

src/plugins/event_annotation/public/event_annotation_service/helpers.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { euiLightVars } from '@kbn/ui-theme';
+export const defaultAnnotationColor = euiLightVars.euiColorAccent;

src/plugins/event_annotation/public/event_annotation_service/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EventAnnotationServiceType } from './types';
+
+export class EventAnnotationService {
+  private eventAnnotationService?: EventAnnotationServiceType;
+  public async getService() {
+    if (!this.eventAnnotationService) {
+      const { getEventAnnotationService } = await import('./service');
+      this.eventAnnotationService = getEventAnnotationService();
+    }
+    return this.eventAnnotationService;
+  }
+}

src/plugins/event_annotation/public/event_annotation_service/service.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EventAnnotationServiceType } from './types';
+import { defaultAnnotationColor } from './helpers';
+
+export function hasIcon(icon: string | undefined): icon is string {
+  return icon != null && icon !== 'empty';
+}
+
+export function getEventAnnotationService(): EventAnnotationServiceType {
+  return {
+    toExpression: ({
+      label,
+      isHidden,
+      color,
+      lineStyle,
+      lineWidth,
+      icon,
+      textVisibility,
+      time,
+    }) => {
+      return {
+        type: 'expression',
+        chain: [
+          {
+            type: 'function',
+            function: 'manual_event_annotation',
+            arguments: {
+              time: [time],
+              label: [label],
+              color: [color || defaultAnnotationColor],
+              lineWidth: [lineWidth || 1],
+              lineStyle: [lineStyle || 'solid'],
+              icon: hasIcon(icon) ? [icon] : ['triangle'],
+              textVisibility: [textVisibility || false],
+              isHidden: [Boolean(isHidden)],
+            },
+          },
+        ],
+      };
+    },
+  };
+}

src/plugins/event_annotation/public/event_annotation_service/types.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ExpressionAstExpression } from '../../../expressions/common/ast';
+import { EventAnnotationArgs } from '../../common';
+
+export interface EventAnnotationServiceType {
+  toExpression: (props: EventAnnotationArgs) => ExpressionAstExpression;
+}