[Cases] Add Lens markdown plugin

x-pack/plugins/security_solution/kibana.json

@@ -20,6 +20,7 @@
   ],
   "optionalPlugins": [
     "encryptedSavedObjects",
+    "lens",
     "fleet",
     "ml",
     "newsfeed",

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts

@@ -13,13 +13,17 @@ import {
 } from '@elastic/eui';
 
 import * as timelineMarkdownPlugin from './timeline';
+import * as lensMarkdownPlugin from './lens';
 const uiPlugins: EuiMarkdownEditorUiPlugin[] = getDefaultEuiMarkdownUiPlugins();
 uiPlugins.push(timelineMarkdownPlugin.plugin);
+uiPlugins.push(lensMarkdownPlugin.plugin);
 export { uiPlugins };
 export const parsingPlugins = getDefaultEuiMarkdownParsingPlugins();
 export const processingPlugins = getDefaultEuiMarkdownProcessingPlugins();
 
 parsingPlugins.push(timelineMarkdownPlugin.parser);
+parsingPlugins.push(lensMarkdownPlugin.parser);
 
 // This line of code is TS-compatible and it will break if [1][1] change in the future.
 processingPlugins[1][1].components.timeline = timelineMarkdownPlugin.renderer;
+processingPlugins[1][1].components.lens = lensMarkdownPlugin.renderer;

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/lens/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const ID = 'lens';
+export const PREFIX = `[`;
+export const LENS_VISUALIZATION_HEIGHT = 200;

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/lens/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { plugin } from './plugin';
+import { LensParser } from './parser';
+import { LensMarkDownRenderer } from './processor';
+
+export { plugin, LensParser as parser, LensMarkDownRenderer as renderer };

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/lens/parser.ts

@@ -0,0 +1,76 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Plugin } from 'unified';
+import { RemarkTokenizer } from '@elastic/eui';
+
+export const LensParser: Plugin = function () {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.blockTokenizers;
+  const methods = Parser.prototype.blockMethods;
+
+  const tokenizeLens: RemarkTokenizer = function (eat, value, silent) {
+    if (value.startsWith('!{lens') === false) return false;
+
+    const nextChar = value[6];
+
+    if (nextChar !== '{' && nextChar !== '}') return false; // this isn't actually a lens
+
+    if (silent) {
+      return true;
+    }
+
+    // is there a configuration?
+    const hasConfiguration = nextChar === '{';
+
+    let match = '!{lens';
+    let configuration = {};
+
+    if (hasConfiguration) {
+      let configurationString = '';
+
+      let openObjects = 0;
+
+      for (let i = 6; i < value.length; i++) {
+        const char = value[i];
+        if (char === '{') {
+          openObjects++;
+          configurationString += char;
+        } else if (char === '}') {
+          openObjects--;
+          if (openObjects === -1) {
+            break;
+          }
+          configurationString += char;
+        } else {
+          configurationString += char;
+        }
+      }
+
+      match += configurationString;
+      try {
+        configuration = JSON.parse(configurationString);
+      } catch (e) {
+        const now = eat.now();
+        this.file.fail(`Unable to parse lens JSON configuration: ${e}`, {
+          line: now.line,
+          column: now.column + 6,
+        });
+      }
+    }
+
+    match += '}';
+
+    return eat(match)({
+      type: 'lens',
+      ...configuration,
+    });
+  };
+
+  tokenizers.lens = tokenizeLens;
+  methods.splice(methods.indexOf('text'), 0, 'lens');
+};

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/lens/plugin.tsx

@@ -0,0 +1,205 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiComboBox,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiMarkdownEditorUiPlugin,
+  EuiCodeBlock,
+  EuiSpacer,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiFormRow,
+  EuiDatePicker,
+  EuiDatePickerRange,
+} from '@elastic/eui';
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import moment, { Moment } from 'moment';
+
+import { TypedLensByValueInput } from '../../../../../../../lens/public';
+import { useKibana } from '../../../../lib/kibana';
+import { LensMarkDownRenderer } from './processor';
+import { ID } from './constants';
+import * as i18n from './translations';
+
+const ModalContainer = styled.div`
+  width: ${({ theme }) => theme.eui.euiBreakpoints.m};
+`;
+
+interface LensEditorProps {
+  id?: string | null;
+  title?: string | null;
+  startDate?: Moment | null;
+  endDate?: Moment | null;
+  onClosePopover: () => void;
+  onInsert: (markdown: string, config: { block: boolean }) => void;
+}
+
+const LensEditorComponent: React.FC<LensEditorProps> = ({
+  id,
+  title,
+  startDate: defaultStartDate,
+  endDate: defaultEndDate,
+  onClosePopover,
+  onInsert,
+}) => {
+  const soClient = useKibana().services.savedObjects.client;
+  const [lensOptions, setLensOptions] = useState<Array<{ label: string; value: string }>>([]);
+  const [selectedOptions, setSelectedOptions] = useState<Array<{ label: string; value: string }>>(
+    id && title ? [{ value: id, label: title }] : []
+  );
+  const [lensSavedObjectId, setLensSavedObjectId] = useState<string | null>(id ?? null);
+  const [startDate, setStartDate] = useState<Moment | null>(
+    defaultStartDate ? moment(defaultStartDate) : moment().subtract(7, 'd')
+  );
+  const [endDate, setEndDate] = useState<Moment | null>(
+    defaultEndDate ? moment(defaultEndDate) : moment()
+  );
+
+  useEffect(() => {
+    const fetchLensSavedObjects = async () => {
+      const { savedObjects } = await soClient.find<TypedLensByValueInput['attributes']>({
+        type: 'lens',
+        perPage: 1000,
+      });
+      const options = savedObjects.map((lensSO) => ({
+        label: lensSO.attributes.title,
+        value: lensSO.id,
+      }));
+
+      setLensOptions(options);
+    };
+    fetchLensSavedObjects();
+  }, [soClient]);
+
+  const handleChange = useCallback((options) => {
+    setSelectedOptions(options);
+    setLensSavedObjectId(options[0] ? options[0].value : null);
+  }, []);
+
+  const handleLensDateChange = useCallback((data) => {
+    if (data.range?.length === 2) {
+      setStartDate(moment(data.range[0]));
+      setEndDate(moment(data.range[1]));
+    }
+  }, []);
+
+  const handleAdd = useCallback(() => {
+    if (lensSavedObjectId && selectedOptions[0]) {
+      onInsert(
+        `!{lens${JSON.stringify({
+          id: lensSavedObjectId,
+          startDate,
+          endDate,
+          title: selectedOptions[0].label,
+        })}}`,
+        {
+          block: true,
+        }
+      );
+    }
+  }, [lensSavedObjectId, selectedOptions, onInsert, startDate, endDate]);
+
+  return (
+    <ModalContainer>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          {id && title ? 'Edit Lens visualization' : 'Add Lens visualization'}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFormRow label="Title">
+              <EuiComboBox
+                placeholder="Select a single option"
+                singleSelection={{ asPlainText: true }}
+                options={lensOptions}
+                selectedOptions={selectedOptions}
+                onChange={handleChange}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow label="Date range">
+              <EuiDatePickerRange
+                startDateControl={
+                  <EuiDatePicker
+                    selected={startDate}
+                    onChange={setStartDate}
+                    startDate={startDate}
+                    endDate={endDate}
+                    isInvalid={startDate && endDate ? startDate > endDate : false}
+                    aria-label="Start date"
+                    showTimeSelect
+                  />
+                }
+                endDateControl={
+                  <EuiDatePicker
+                    selected={endDate}
+                    onChange={setEndDate}
+                    startDate={startDate}
+                    endDate={endDate}
+                    isInvalid={startDate && endDate ? startDate > endDate : false}
+                    aria-label="End date"
+                    showTimeSelect
+                  />
+                }
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+        <LensMarkDownRenderer
+          id={lensSavedObjectId}
+          startDate={startDate?.format()}
+          endDate={endDate?.format()}
+          onBrushEnd={handleLensDateChange}
+        />
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={onClosePopover}>{'Cancel'}</EuiButtonEmpty>
+        <EuiButton onClick={handleAdd} fill disabled={!lensSavedObjectId}>
+          {'Add to a Case'}
+        </EuiButton>
+      </EuiModalFooter>
+    </ModalContainer>
+  );
+};
+
+const LensEditor = React.memo(LensEditorComponent);
+
+export const plugin: EuiMarkdownEditorUiPlugin = {
+  name: ID,
+  button: {
+    label: i18n.INSERT_LENS,
+    iconType: 'lensApp',
+  },
+  helpText: (
+    <EuiCodeBlock language="md" paddingSize="s" fontSize="l">
+      {'[title](url)'}
+    </EuiCodeBlock>
+  ),
+  editor: function editor({ node, onSave, onCancel }) {
+    return (
+      <LensEditor
+        id={node?.id}
+        startDate={node?.startDate}
+        endDate={node?.endDate}
+        title={node?.title}
+        onClosePopover={onCancel}
+        onInsert={onSave}
+      />
+    );
+  },
+};