[Security Solution] Investigation guide - insights in markdown

x-pack/plugins/security_solution/cypress/e2e/timelines/notes_tab.cy.ts

@@ -13,6 +13,7 @@ import {
   NOTES_LINK,
   NOTES_TEXT,
   NOTES_TEXT_AREA,
+  MARKDOWN_INVESTIGATE_BUTTON,
 } from '../../screens/timeline';
 import { createTimeline } from '../../tasks/api_calls/timelines';
 
@@ -84,4 +85,11 @@ describe('Timeline notes tab', () => {
     cy.get(NOTES_LINK).last().should('have.text', `${text}(opens in a new tab or window)`);
     cy.get(NOTES_LINK).last().click();
   });
+
+  it('should render insight query from markdown', () => {
+    addNotesToTimeline(
+      `!{insight{"description":"2 top level OR providers, 1 nested AND","label":"test insight", "providers": [[{ "field": "event.id", "value": "kibana.alert.original_event.id", "type": "parameter" }], [{ "field": "event.category", "value": "network", "type": "literal" }, {"field": "process.pid", "value": "process.pid", "type": "parameter"}]]}}`
+    );
+    cy.get(MARKDOWN_INVESTIGATE_BUTTON).should('exist');
+  });
 });

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -90,6 +90,9 @@ export const NOTES_AUTHOR = '.euiCommentEvent__headerUsername';
 
 export const NOTES_LINK = '[data-test-subj="markdown-link"]';
 
+export const MARKDOWN_INVESTIGATE_BUTTON =
+  '[data-test-subj="insight-investigate-in-timeline-button"]';
+
 export const OPEN_TIMELINE_ICON = '[data-test-subj="open-timeline-button"]';
 
 export const OPEN_TIMELINE_MODAL = '[data-test-subj="open-timeline-modal"]';

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -161,7 +161,11 @@ export const addNotesToTimeline = (notes: string) => {
       .then(($el) => {
         const notesCount = parseInt($el.text(), 10);
 
-        cy.get(NOTES_TEXT_AREA).type(notes);
+        cy.get(NOTES_TEXT_AREA).type(notes, {
+          parseSpecialCharSequences: false,
+          delay: 0,
+          force: true,
+        });
         cy.get(ADD_NOTE_BUTTON).trigger('click');
         cy.get(`${NOTES_TAB_BUTTON} .euiBadge`).should('have.text', `${notesCount + 1}`);
       });

x-pack/plugins/security_solution/public/common/components/event_details/table/investigate_in_timeline_button.tsx

@@ -5,13 +5,14 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
 import type { Filter } from '@kbn/es-query';
 import { useDispatch } from 'react-redux';
 
 import { sourcererSelectors } from '../../../store';
 import { InputsModelId } from '../../../store/inputs/constants';
+import type { TimeRange } from '../../../store/inputs/model';
 import { inputsActions } from '../../../store/inputs';
 import { updateProviders, setFilters } from '../../../../timelines/store/timeline/actions';
 import { sourcererActions } from '../../../store/actions';
@@ -26,7 +27,10 @@ export const InvestigateInTimelineButton: React.FunctionComponent<{
   asEmptyButton: boolean;
   dataProviders: DataProvider[] | null;
   filters?: Filter[] | null;
-}> = ({ asEmptyButton, children, dataProviders, filters, ...rest }) => {
+  timeRange?: TimeRange;
+  keepDataView?: boolean;
+  isDisabled?: boolean;
+}> = ({ asEmptyButton, children, dataProviders, filters, timeRange, keepDataView, ...rest }) => {
   const dispatch = useDispatch();
 
   const getDataViewsSelector = useMemo(
@@ -37,15 +41,24 @@ export const InvestigateInTimelineButton: React.FunctionComponent<{
     getDataViewsSelector(state)
   );
 
+  const hasTemplateProviders =
+    dataProviders && dataProviders.find((provider) => provider.type === 'template');
+
   const clearTimeline = useCreateTimeline({
     timelineId: TimelineId.active,
-    timelineType: TimelineType.default,
+    timelineType: hasTemplateProviders ? TimelineType.template : TimelineType.default,
   });
 
-  const configureAndOpenTimeline = React.useCallback(() => {
+  const configureAndOpenTimeline = useCallback(() => {
     if (dataProviders || filters) {
       // Reset the current timeline
-      clearTimeline();
+      if (timeRange) {
+        clearTimeline({
+          timeRange,
+        });
+      } else {
+        clearTimeline();
+      }
       if (dataProviders) {
         // Update the timeline's providers to match the current prevalence field query
         dispatch(
@@ -66,17 +79,28 @@ export const InvestigateInTimelineButton: React.FunctionComponent<{
       }
       // Only show detection alerts
       // (This is required so the timeline event count matches the prevalence count)
-      dispatch(
-        sourcererActions.setSelectedDataView({
-          id: SourcererScopeName.timeline,
-          selectedDataViewId: defaultDataView.id,
-          selectedPatterns: [signalIndexName || ''],
-        })
-      );
+      if (!keepDataView) {
+        dispatch(
+          sourcererActions.setSelectedDataView({
+            id: SourcererScopeName.timeline,
+            selectedDataViewId: defaultDataView.id,
+            selectedPatterns: [signalIndexName || ''],
+          })
+        );
+      }
       // Unlock the time range from the global time range
       dispatch(inputsActions.removeLinkTo([InputsModelId.timeline, InputsModelId.global]));
     }
-  }, [dataProviders, clearTimeline, dispatch, defaultDataView.id, signalIndexName, filters]);
+  }, [
+    dataProviders,
+    clearTimeline,
+    dispatch,
+    defaultDataView.id,
+    signalIndexName,
+    filters,
+    timeRange,
+    keepDataView,
+  ]);
 
   return asEmptyButton ? (
     <EuiButtonEmpty

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

@@ -13,6 +13,7 @@ import {
 
 import * as timelineMarkdownPlugin from './timeline';
 import * as osqueryMarkdownPlugin from './osquery';
+import * as insightMarkdownPlugin from './insight';
 
 export const { uiPlugins, parsingPlugins, processingPlugins } = {
   uiPlugins: getDefaultEuiMarkdownUiPlugins(),
@@ -23,9 +24,11 @@ export const { uiPlugins, parsingPlugins, processingPlugins } = {
 uiPlugins.push(timelineMarkdownPlugin.plugin);
 uiPlugins.push(osqueryMarkdownPlugin.plugin);
 
+parsingPlugins.push(insightMarkdownPlugin.parser);
 parsingPlugins.push(timelineMarkdownPlugin.parser);
 parsingPlugins.push(osqueryMarkdownPlugin.parser);
 
 // This line of code is TS-compatible and it will break if [1][1] change in the future.
+processingPlugins[1][1].components.insight = insightMarkdownPlugin.renderer;
 processingPlugins[1][1].components.timeline = timelineMarkdownPlugin.renderer;
 processingPlugins[1][1].components.osquery = osqueryMarkdownPlugin.renderer;

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

@@ -0,0 +1,146 @@
+/*
+ * 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 type { Plugin } from 'unified';
+import React, { useContext, useMemo } from 'react';
+import type { RemarkTokenizer } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useAppToasts } from '../../../../hooks/use_app_toasts';
+import { useInsightQuery } from './use_insight_query';
+import { useInsightDataProviders } from './use_insight_data_providers';
+import { BasicAlertDataContext } from '../../../event_details/investigation_guide_view';
+import { InvestigateInTimelineButton } from '../../../event_details/table/investigate_in_timeline_button';
+import type { AbsoluteTimeRange } from '../../../../store/inputs/model';
+
+interface InsightComponentProps {
+  label?: string;
+  description?: string;
+  providers?: string;
+}
+
+export const parser: Plugin = function () {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.inlineTokenizers;
+  const methods = Parser.prototype.inlineMethods;
+  const insightPrefix = '!{insight';
+
+  const tokenizeInsight: RemarkTokenizer = function (eat, value, silent) {
+    if (value.startsWith(insightPrefix) === false) {
+      return false;
+    }
+
+    const nextChar = value[insightPrefix.length];
+    if (nextChar !== '{' && nextChar !== '}') return false;
+    if (silent) {
+      return true;
+    }
+
+    // is there a configuration?
+    const hasConfiguration = nextChar === '{';
+
+    let configuration: InsightComponentProps = {};
+    if (hasConfiguration) {
+      let configurationString = '';
+      let openObjects = 0;
+
+      for (let i = insightPrefix.length; 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;
+        }
+      }
+
+      try {
+        configuration = JSON.parse(configurationString);
+        return eat(value)({
+          type: 'insight',
+          ...configuration,
+          providers: JSON.stringify(configuration.providers),
+        });
+      } catch (err) {
+        const now = eat.now();
+        this.file.fail(
+          i18n.translate('xpack.securitySolution.markdownEditor.plugins.insightConfigError', {
+            values: { err },
+            defaultMessage: 'Unable to parse insight JSON configuration: {err}',
+          }),
+          {
+            line: now.line,
+            column: now.column + insightPrefix.length,
+          }
+        );
+      }
+    }
+    return false;
+  };
+  tokenizeInsight.locator = (value: string, fromIndex: number) => {
+    return value.indexOf(insightPrefix, fromIndex);
+  };
+  tokenizers.insight = tokenizeInsight;
+  methods.splice(methods.indexOf('text'), 0, 'insight');
+};
+
+// receives the configuration from the parser and renders
+const InsightComponent = ({ label, description, providers }: InsightComponentProps) => {
+  const { addError } = useAppToasts();
+  let parsedProviders = [];
+  try {
+    if (providers !== undefined) {
+      parsedProviders = JSON.parse(providers);
+    }
+  } catch (err) {
+    addError(err, {
+      title: i18n.translate('xpack.securitySolution.markdownEditor.plugins.insightProviderError', {
+        defaultMessage: 'Unable to parse insight provider configuration',
+      }),
+    });
+  }
+  const { data: alertData } = useContext(BasicAlertDataContext);
+  const dataProviders = useInsightDataProviders({
+    providers: parsedProviders,
+    alertData,
+  });
+  const { totalCount, isQueryLoading, oldestTimestamp, hasError } = useInsightQuery({
+    dataProviders,
+  });
+  const timerange: AbsoluteTimeRange = useMemo(() => {
+    return {
+      kind: 'absolute',
+      from: oldestTimestamp ?? '',
+      to: new Date().toISOString(),
+    };
+  }, [oldestTimestamp]);
+  if (isQueryLoading) {
+    return <EuiLoadingSpinner size="l" />;
+  } else {
+    return (
+      <InvestigateInTimelineButton
+        asEmptyButton={false}
+        isDisabled={hasError}
+        dataProviders={dataProviders}
+        timeRange={timerange}
+        keepDataView={true}
+        data-test-subj="insight-investigate-in-timeline-button"
+      >
+        <EuiIcon type="timeline" />
+        {` ${label} (${totalCount}) - ${description}`}
+      </InvestigateInTimelineButton>
+    );
+  }
+};
+
+export { InsightComponent as renderer };