Merge branch 'implement/share-all-plugin-bundles' of github.com:spalg…

…er/kibana into implement/share-all-plugin-bundles

.github/CODEOWNERS

@@ -168,15 +168,15 @@
 /src/core/public/i18n/  @elastic/kibana-localization
 /packages/kbn-i18n/  @elastic/kibana-localization
 
-# Pulse
-/packages/kbn-analytics/ @elastic/pulse
-/src/plugins/kibana_usage_collection/ @elastic/pulse
-/src/plugins/newsfeed/ @elastic/pulse
-/src/plugins/telemetry/ @elastic/pulse
-/src/plugins/telemetry_collection_manager/ @elastic/pulse
-/src/plugins/telemetry_management_section/ @elastic/pulse
-/src/plugins/usage_collection/ @elastic/pulse
-/x-pack/plugins/telemetry_collection_xpack/ @elastic/pulse
+# Kibana Telemetry
+/packages/kbn-analytics/ @elastic/kibana-telemetry
+/src/plugins/kibana_usage_collection/ @elastic/kibana-telemetry
+/src/plugins/newsfeed/ @elastic/kibana-telemetry
+/src/plugins/telemetry/ @elastic/kibana-telemetry
+/src/plugins/telemetry_collection_manager/ @elastic/kibana-telemetry
+/src/plugins/telemetry_management_section/ @elastic/kibana-telemetry
+/src/plugins/usage_collection/ @elastic/kibana-telemetry
+/x-pack/plugins/telemetry_collection_xpack/ @elastic/kibana-telemetry
 
 # Kibana Alerting Services
 /x-pack/plugins/alerts/ @elastic/kibana-alerting-services

x-pack/plugins/apm/e2e/cypress/integration/snapshots.js

@@ -1,10 +1,10 @@
 module.exports = {
-  "APM": {
-    "Transaction duration charts": {
-      "1": "350 ms",
-      "2": "175 ms",
-      "3": "0 ms"
-    }
+  APM: {
+    'Transaction duration charts': {
+      '1': '350.0 ms',
+      '2': '175.0 ms',
+      '3': '0.0 ms',
+    },
   },
-  "__version": "4.5.0"
-}
+  __version: '4.5.0',
+};

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/List.test.js

@@ -40,7 +40,7 @@ describe('ServiceOverview -> List', () => {
     expect(renderedColumns[0]).toMatchSnapshot();
     expect(renderedColumns.slice(2)).toEqual([
       'python',
-      '92 ms',
+      '91.5 ms',
       '86.9 tpm',
       '12.6 err.',
     ]);

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx

@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import { ServiceListAPIResponse } from '../../../../../server/lib/services/get_services';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, truncate } from '../../../../style/variables';
-import { asDecimal, convertTo } from '../../../../utils/formatters';
+import { asDecimal, asMillisecondDuration } from '../../../../utils/formatters';
 import { ManagedTable } from '../../../shared/ManagedTable';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
 import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
@@ -81,11 +81,7 @@ export const SERVICE_COLUMNS = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (time: number) =>
-      convertTo({
-        unit: 'milliseconds',
-        microseconds: time,
-      }).formatted,
+    render: (time: number) => asMillisecondDuration(time),
   },
   {
     field: 'transactionsPerMinute',

x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ITransactionGroup } from '../../../../server/lib/transaction_groups/transform';
 import { fontSizes, truncate } from '../../../style/variables';
-import { convertTo } from '../../../utils/formatters';
+import { asMillisecondDuration } from '../../../utils/formatters';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../shared/Links/apm/TransactionDetailLink';
@@ -67,11 +67,7 @@ const traceListColumns: Array<ITableColumn<ITransactionGroup>> = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (time: number) =>
-      convertTo({
-        unit: 'milliseconds',
-        microseconds: time,
-      }).formatted,
+    render: (time: number) => asMillisecondDuration(time),
   },
   {
     field: 'transactionsPerMinute',

x-pack/plugins/apm/public/components/app/TransactionOverview/List/index.tsx

@@ -12,7 +12,7 @@ import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ITransactionGroup } from '../../../../../server/lib/transaction_groups/transform';
 import { fontFamilyCode, truncate } from '../../../../style/variables';
-import { asDecimal, convertTo } from '../../../../utils/formatters';
+import { asDecimal, asMillisecondDuration } from '../../../../utils/formatters';
 import { ImpactBar } from '../../../shared/ImpactBar';
 import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
@@ -29,12 +29,6 @@ interface Props {
   isLoading: boolean;
 }
 
-const toMilliseconds = (time: number) =>
-  convertTo({
-    unit: 'milliseconds',
-    microseconds: time,
-  }).formatted;
-
 export function TransactionList({ items, isLoading }: Props) {
   const columns: Array<ITableColumn<ITransactionGroup>> = useMemo(
     () => [
@@ -74,7 +68,7 @@ export function TransactionList({ items, isLoading }: Props) {
         ),
         sortable: true,
         dataType: 'number',
-        render: (time: number) => toMilliseconds(time),
+        render: (time: number) => asMillisecondDuration(time),
       },
       {
         field: 'p95',
@@ -86,7 +80,7 @@ export function TransactionList({ items, isLoading }: Props) {
         ),
         sortable: true,
         dataType: 'number',
-        render: (time: number) => toMilliseconds(time),
+        render: (time: number) => asMillisecondDuration(time),
       },
       {
         field: 'transactionsPerMinute',

x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js

@@ -78,7 +78,7 @@ describe('Histogram', () => {
       const tooltips = wrapper.find('Tooltip');
 
       expect(tooltips.length).toBe(1);
-      expect(tooltips.prop('header')).toBe('811 - 927 ms');
+      expect(tooltips.prop('header')).toBe('811.1 - 926.9 ms');
       expect(tooltips.prop('tooltipPoints')).toEqual([
         { value: '49.0 occurrences' },
       ]);

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx

@@ -12,26 +12,32 @@ import { act } from '@testing-library/react-hooks';
 import { expectTextsInDocument } from '../../../../../utils/testHelpers';
 
 describe('ErrorMarker', () => {
-  const mark = {
+  const mark = ({
     id: 'agent',
     offset: 10000,
     type: 'errorMark',
     verticalLine: true,
     error: {
       trace: { id: '123' },
       transaction: { id: '456' },
-      error: { grouping_key: '123' },
+      error: {
+        grouping_key: '123',
+        log: {
+          message:
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+      },
       service: { name: 'bar' },
     },
     serviceColor: '#fff',
-  } as ErrorMark;
+  } as unknown) as ErrorMark;
 
   function openPopover(errorMark: ErrorMark) {
     const component = render(<ErrorMarker mark={errorMark} />);
     act(() => {
       fireEvent.click(component.getByTestId('popover'));
     });
-    expectTextsInDocument(component, ['10,000 μs']);
+    expectTextsInDocument(component, ['10.0 ms']);
     return component;
   }
   function getKueryDecoded(url: string) {
@@ -76,4 +82,34 @@ describe('ErrorMarker', () => {
     const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
     expect(getKueryDecoded(errorLink.hash)).toEqual('kuery=');
   });
+  it('truncates the error message text', () => {
+    const { trace, transaction, ...withoutTraceAndTransaction } = mark.error;
+    const newMark = {
+      ...mark,
+      error: withoutTraceAndTransaction,
+    } as ErrorMark;
+    const component = openPopover(newMark);
+    const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+    expect(errorLink.innerHTML).toHaveLength(241);
+  });
+
+  describe('when the error message is not longer than 240 characters', () => {
+    it('truncates the error message text', () => {
+      const newMark = ({
+        ...mark,
+        error: {
+          ...mark.error,
+          error: {
+            grouping_key: '123',
+            log: {
+              message: 'Blah.',
+            },
+          },
+        },
+      } as unknown) as ErrorMark;
+      const component = openPopover(newMark);
+      const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+      expect(errorLink.innerHTML).toHaveLength(5);
+    });
+  });
 });

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx

@@ -34,6 +34,7 @@ const TimeLegend = styled(Legend)`
 const ErrorLink = styled(ErrorDetailLink)`
   display: block;
   margin: ${px(units.half)} 0 ${px(units.half)} 0;
+  overflow-wrap: break-word;
 `;
 
 const Button = styled(Legend)`
@@ -42,6 +43,16 @@ const Button = styled(Legend)`
   align-items: flex-end;
 `;
 
+// We chose 240 characters because it fits most error messages and it's still easily readable on a screen.
+function truncateMessage(errorMessage?: string) {
+  const maxLength = 240;
+  if (typeof errorMessage === 'string' && errorMessage.length > maxLength) {
+    return errorMessage.substring(0, maxLength) + '…';
+  } else {
+    return errorMessage;
+  }
+}
+
 export const ErrorMarker: React.FC<Props> = ({ mark }) => {
   const { urlParams } = useUrlParams();
   const [isPopoverOpen, showPopover] = useState(false);
@@ -73,6 +84,10 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
     rangeTo,
   };
 
+  const errorMessage =
+    error.error.log?.message || error.error.exception?.[0]?.message;
+  const truncatedErrorMessage = truncateMessage(errorMessage);
+
   return (
     <EuiPopover
       id="popover"
@@ -99,8 +114,9 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
             serviceName={error.service.name}
             errorGroupId={error.error.grouping_key}
             query={query}
+            title={errorMessage}
           >
-            {error.error.log?.message || error.error.exception?.[0]?.message}
+            {truncatedErrorMessage}
           </ErrorLink>
         </EuiText>
       </Popover>

x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx

@@ -120,7 +120,7 @@ export class TransactionCharts extends Component<TransactionChartProps> {
           'xpack.apm.metrics.transactionChart.machineLearningTooltip',
           {
             defaultMessage:
-              'The stream around the average duration shows the expected bounds. An annotation is shown for anomaly scores >= 75.',
+              'The stream around the average duration shows the expected bounds. An annotation is shown for anomaly scores ≥ 75.',
           }
         )}
       />

x-pack/plugins/apm/public/selectors/__tests__/chartSelectors.test.ts

@@ -62,7 +62,7 @@ describe('chartSelectors', () => {
             { x: 0, y: 100 },
             { x: 1000, y: 200 },
           ],
-          legendValue: '0 ms',
+          legendValue: '200 μs',
           title: 'Avg.',
           type: 'linemark',
         },