Merge branch 'main' into renovate/main-@elasticcharts

Author: markov00

packages/shared-ux/error_boundary/lib/telemetry_events.ts

@@ -24,11 +24,25 @@ export const reactFatalErrorSchema = {
       optional: false as const,
     },
   },
+  component_stack: {
+    type: 'text' as const,
+    _meta: {
+      description: 'Stack trace React component tree',
+      optional: false as const,
+    },
+  },
   error_message: {
     type: 'keyword' as const,
     _meta: {
       description: 'Message from the error',
       optional: false as const,
     },
   },
+  error_stack: {
+    type: 'text' as const,
+    _meta: {
+      description: 'Stack trace from the error object',
+      optional: false as const,
+    },
+  },
 };

packages/shared-ux/error_boundary/src/services/error_boundary_services.test.tsx

@@ -34,7 +34,9 @@ describe('<KibanaErrorBoundaryProvider>', () => {
 
     expect(reportEventSpy).toBeCalledWith('fatal-error-react', {
       component_name: 'BadComponent',
+      component_stack: expect.any(String),
       error_message: 'Error: This is an error to show the test user!',
+      error_stack: expect.any(String),
     });
   });
 
@@ -61,7 +63,9 @@ describe('<KibanaErrorBoundaryProvider>', () => {
     expect(reportEventSpy2).not.toBeCalled();
     expect(reportEventSpy1).toBeCalledWith('fatal-error-react', {
       component_name: 'BadComponent',
+      component_stack: expect.any(String),
       error_message: 'Error: This is an error to show the test user!',
+      error_stack: expect.any(String),
     });
   });
 });

packages/shared-ux/error_boundary/src/services/error_service.test.ts

@@ -20,15 +20,15 @@ describe('KibanaErrorBoundary Error Service', () => {
 
   it('decorates fatal error object', () => {
     const testFatal = new Error('This is an unrecognized and fatal error');
-    const serviceError = service.registerError(testFatal, {});
+    const serviceError = service.registerError(testFatal, { componentStack: '' });
 
     expect(serviceError.isFatal).toBe(true);
   });
 
   it('decorates recoverable error object', () => {
     const testRecoverable = new Error('Could not load chunk blah blah');
     testRecoverable.name = 'ChunkLoadError';
-    const serviceError = service.registerError(testRecoverable, {});
+    const serviceError = service.registerError(testRecoverable, { componentStack: '' });
 
     expect(serviceError.isFatal).toBe(false);
   });
@@ -88,9 +88,36 @@ describe('KibanaErrorBoundary Error Service', () => {
     service.registerError(testFatal, errorInfo);
 
     expect(mockDeps.analytics.reportEvent).toHaveBeenCalledTimes(1);
-    expect(mockDeps.analytics.reportEvent).toHaveBeenCalledWith('fatal-error-react', {
+    expect(mockDeps.analytics.reportEvent.mock.calls[0][0]).toBe('fatal-error-react');
+    expect(mockDeps.analytics.reportEvent.mock.calls[0][1]).toMatchObject({
       component_name: 'OutrageousMaker',
       error_message: 'Error: This is an outrageous and fatal error',
     });
   });
+
+  it('captures component stack trace and error stack trace for telemetry', () => {
+    jest.resetAllMocks();
+    const testFatal = new Error('This is an outrageous and fatal error');
+
+    const errorInfo = {
+      componentStack: `
+    at OutrageousMaker (http://localhost:9001/main.iframe.bundle.js:11616:73)
+    `,
+    };
+
+    service.registerError(testFatal, errorInfo);
+
+    expect(mockDeps.analytics.reportEvent).toHaveBeenCalledTimes(1);
+    expect(mockDeps.analytics.reportEvent.mock.calls[0][0]).toBe('fatal-error-react');
+    expect(
+      String(mockDeps.analytics.reportEvent.mock.calls[0][1].component_stack).includes(
+        'at OutrageousMaker'
+      )
+    ).toBe(true);
+    expect(
+      String(mockDeps.analytics.reportEvent.mock.calls[0][1].error_stack).startsWith(
+        'Error: This is an outrageous and fatal error'
+      )
+    ).toBe(true);
+  });
 });

packages/shared-ux/error_boundary/src/services/error_service.ts

@@ -15,7 +15,7 @@ const MATCH_CHUNK_LOADERROR = /ChunkLoadError/;
 
 interface ErrorServiceError {
   error: Error;
-  errorInfo?: Partial<React.ErrorInfo> | null;
+  errorInfo?: React.ErrorInfo;
   name: string | null;
   isFatal: boolean;
 }
@@ -48,7 +48,7 @@ export class KibanaErrorService {
   /**
    * Derive the name of the component that threw the error
    */
-  private getErrorComponentName(errorInfo: Partial<React.ErrorInfo> | null) {
+  private getErrorComponentName(errorInfo?: React.ErrorInfo) {
     let errorComponentName: string | null = null;
     const stackLines = errorInfo?.componentStack?.split('\n');
     const errorIndicator = /^    at (\S+).*/;
@@ -75,18 +75,28 @@ export class KibanaErrorService {
   /**
    * Creates a decorated error object
    */
-  public registerError(
-    error: Error,
-    errorInfo: Partial<React.ErrorInfo> | null
-  ): ErrorServiceError {
+  public registerError(error: Error, errorInfo?: React.ErrorInfo): ErrorServiceError {
     const isFatal = this.getIsFatal(error);
     const name = this.getErrorComponentName(errorInfo);
 
     try {
-      if (isFatal) {
-        this.analytics?.reportEvent(REACT_FATAL_ERROR_EVENT_TYPE, {
+      if (isFatal && this.analytics) {
+        let componentStack = '';
+        let errorStack = '';
+
+        if (errorInfo && errorInfo.componentStack) {
+          componentStack = errorInfo.componentStack;
+        }
+
+        if (error instanceof Error && typeof error.stack === 'string') {
+          errorStack = error.stack;
+        }
+
+        this.analytics.reportEvent(REACT_FATAL_ERROR_EVENT_TYPE, {
           component_name: name,
+          component_stack: componentStack,
           error_message: error.toString(),
+          error_stack: errorStack,
         });
       }
     } catch (e) {

packages/shared-ux/error_boundary/src/ui/error_boundary.test.tsx

@@ -87,9 +87,33 @@ describe('<KibanaErrorBoundary>', () => {
     );
     (await findByTestId('clickForErrorBtn')).click();
 
-    expect(mockDeps.analytics.reportEvent).toHaveBeenCalledWith('fatal-error-react', {
+    expect(mockDeps.analytics.reportEvent.mock.calls[0][0]).toBe('fatal-error-react');
+    expect(mockDeps.analytics.reportEvent.mock.calls[0][1]).toMatchObject({
       component_name: 'BadComponent',
       error_message: 'Error: This is an error to show the test user!',
     });
   });
+
+  it('captures component and error stack traces in telemetry', async () => {
+    const mockDeps = {
+      analytics: { reportEvent: jest.fn() },
+    };
+    services.errorService = new KibanaErrorService(mockDeps);
+
+    const { findByTestId } = render(
+      <Template>
+        <BadComponent />
+      </Template>
+    );
+    (await findByTestId('clickForErrorBtn')).click();
+
+    expect(
+      mockDeps.analytics.reportEvent.mock.calls[0][1].component_stack.includes('at BadComponent')
+    ).toBe(true);
+    expect(
+      mockDeps.analytics.reportEvent.mock.calls[0][1].error_stack.startsWith(
+        'Error: This is an error to show the test user!'
+      )
+    ).toBe(true);
+  });
 });

packages/shared-ux/error_boundary/src/ui/error_boundary.tsx

@@ -41,7 +41,7 @@ class ErrorBoundaryInternal extends React.Component<
     };
   }
 
-  componentDidCatch(error: Error, errorInfo: Partial<React.ErrorInfo>) {
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     const { name, isFatal } = this.props.services.errorService.registerError(error, errorInfo);
     this.setState(() => {
       return { error, errorInfo, componentName: name, isFatal };

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx

@@ -5,15 +5,19 @@
  * 2.0.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiPageSection, EuiSpacer, EuiPageHeader } from '@elastic/eui';
 
+import { useRedirectPath } from '../../../../hooks/redirect_path';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 import { ComponentTemplateDeserialized } from '../../shared_imports';
 import { useComponentTemplatesContext } from '../../component_templates_context';
 import { ComponentTemplateForm } from '../component_template_form';
+import { useStepFromQueryString } from '../use_step_from_query_string';
+import { useDatastreamsRollover } from '../component_template_datastreams_rollover/use_datastreams_rollover';
+import { MANAGED_BY_FLEET } from '../../constants';
 
 interface Props {
   /**
@@ -28,8 +32,35 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
 }) => {
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [saveError, setSaveError] = useState<any>(null);
+  const redirectTo = useRedirectPath(history);
+
+  const { activeStep: defaultActiveStep, updateStep } = useStepFromQueryString(history);
+
+  const locationSearchParams = useMemo(() => {
+    return new URLSearchParams(history.location.search);
+  }, [history.location.search]);
+
+  const defaultValue = useMemo(() => {
+    if (sourceComponentTemplate) {
+      return sourceComponentTemplate;
+    }
+
+    const name = locationSearchParams.get('name') ?? '';
+    const managedBy = locationSearchParams.get('managed_by');
+
+    return {
+      name,
+      template: {},
+      _meta: managedBy ? { managed_by: managedBy } : {},
+      _kbnMeta: {
+        usedBy: [],
+        isManaged: false,
+      },
+    };
+  }, [locationSearchParams, sourceComponentTemplate]);
 
   const { api } = useComponentTemplatesContext();
+  const { showDatastreamRolloverModal } = useDatastreamsRollover();
 
   const onSave = async (componentTemplate: ComponentTemplateDeserialized) => {
     const { name } = componentTemplate;
@@ -45,10 +76,11 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
       setSaveError(error);
       return;
     }
+    if (componentTemplate._meta?.managed_by === MANAGED_BY_FLEET) {
+      await showDatastreamRolloverModal(componentTemplate.name);
+    }
 
-    history.push({
-      pathname: encodeURI(`/component_templates/${encodeURIComponent(name)}`),
-    });
+    redirectTo(encodeURI(`/component_templates/${encodeURIComponent(name)}`));
   };
 
   const clearSaveError = () => {
@@ -88,7 +120,9 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
       <EuiSpacer size="l" />
 
       <ComponentTemplateForm
-        defaultValue={sourceComponentTemplate}
+        defaultActiveWizardSection={defaultActiveStep}
+        onStepChange={updateStep}
+        defaultValue={defaultValue}
         onSave={onSave}
         isSaving={isSaving}
         saveError={saveError}

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/mappings_datastreams_rollover_modal.tsx renamed to x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_datastreams_rollover/mappings_datastreams_rollover_modal.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+
+import { useComponentTemplatesContext } from '../../component_templates_context';
+
+import { useDatastreamsRollover } from './use_datastreams_rollover';
+
+jest.mock('../../component_templates_context');
+
+describe('useStepFromQueryString', () => {
+  beforeEach(() => {
+    jest.mocked(useComponentTemplatesContext).mockReturnValue({
+      api: {
+        getComponentTemplateDatastreams: jest.fn(),
+        postDataStreamMappingsFromTemplate: jest.fn(),
+      },
+      overlays: { openModal: jest.fn() } as any,
+    } as any);
+  });
+  it('should do nothing if there no impacted data_streams', async () => {
+    jest
+      .mocked(useComponentTemplatesContext().api.getComponentTemplateDatastreams)
+      .mockResolvedValue({ data: { data_streams: [] }, error: undefined });
+
+    const {
+      result: {
+        current: { showDatastreamRolloverModal },
+      },
+    } = renderHook(() => useDatastreamsRollover());
+
+    await showDatastreamRolloverModal('logs-test.data@custom');
+  });
+
+  it('should try to update mappings if there is impacted data_streams', async () => {
+    const { api, overlays } = jest.mocked(useComponentTemplatesContext());
+
+    api.getComponentTemplateDatastreams.mockResolvedValue({
+      data: { data_streams: ['logs-test.data-default'] },
+      error: undefined,
+    });
+
+    api.postDataStreamMappingsFromTemplate.mockResolvedValue({
+      error: undefined,
+      data: { data_streams: [] },
+    });
+
+    jest
+      .mocked(useComponentTemplatesContext().overlays.openModal)
+      .mockReturnValue({ onClose: jest.fn() } as any);
+
+    const {
+      result: {
+        current: { showDatastreamRolloverModal },
+      },
+    } = renderHook(() => useDatastreamsRollover());
+
+    await showDatastreamRolloverModal('logs-test.data@custom');
+
+    expect(api.postDataStreamMappingsFromTemplate).toBeCalledTimes(1);
+    expect(overlays.openModal).not.toBeCalled();
+  });
+
+  it('should show datastream rollover modal if there is an error when updating mappings', async () => {
+    const { api, overlays } = jest.mocked(useComponentTemplatesContext());
+
+    api.getComponentTemplateDatastreams.mockResolvedValue({
+      data: { data_streams: ['logs-test.data-default'] },
+      error: undefined,
+    });
+
+    api.postDataStreamMappingsFromTemplate.mockResolvedValue({
+      error: new Error('test'),
+      data: { data_streams: [] },
+    });
+
+    jest
+      .mocked(useComponentTemplatesContext().overlays.openModal)
+      .mockReturnValue({ onClose: jest.fn() } as any);
+
+    const {
+      result: {
+        current: { showDatastreamRolloverModal },
+      },
+    } = renderHook(() => useDatastreamsRollover());
+
+    await showDatastreamRolloverModal('logs-test.data@custom');
+    expect(overlays.openModal).toBeCalled();
+  });
+});