Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Fix UI inconsistencies in APM Failed transaction correlations #109187

Merged
merged 24 commits into from
Aug 23, 2021
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
8dade28
[ML] Fix UI inconsistencies, add sorting
qn895 Aug 18, 2021
eb5ba19
[ML] Fix columns for latency sortable
qn895 Aug 19, 2021
420e183
[ML] Fix columns for latency sortable
qn895 Aug 19, 2021
6f9ffa1
[ML] Rename log -> correlations_log.tsx, update help texts
qn895 Aug 19, 2021
bdd7143
[ML] Remove event.outcome as candidate for failed transaction correla…
qn895 Aug 19, 2021
4a5be20
[ML] Shrink the score column
qn895 Aug 19, 2021
cf9284c
[ML] Add colored badge for high, medium, low thresholds
qn895 Aug 19, 2021
be26575
[ML] Comment on hard coded height
qn895 Aug 19, 2021
84a0514
[ML] Sort by normalized
qn895 Aug 19, 2021
3e34c5a
[ML] Fix latency encoding
qn895 Aug 19, 2021
1d0a6f5
[ML] Add functional tests
qn895 Aug 19, 2021
8300462
[ML] Update jest tests
qn895 Aug 19, 2021
1497d3d
[ML] Fix license text, test subj
qn895 Aug 19, 2021
85caf98
[ML] Remove unused color constant
qn895 Aug 19, 2021
8e52377
Merge remote-tracking branch 'upstream/master' into ml-fix-apm-transa…
qn895 Aug 20, 2021
82d5457
[ML] Update correlations_log, add more tests for asAbsoluteDateTime, …
qn895 Aug 20, 2021
4ab3871
[ML] Only show the p-value hover on inspect mode
qn895 Aug 20, 2021
0b66643
[ML] Add new error rate columns
qn895 Aug 20, 2021
5999243
Merge remote-tracking branch 'upstream/master' into ml-fix-apm-transa…
qn895 Aug 20, 2021
6403616
[ML] Add new error rate columns
qn895 Aug 20, 2021
e683e57
[ML] Add api integration test for failed transaction ss
qn895 Aug 20, 2021
7d52366
[ML] Fix api tests
qn895 Aug 22, 2021
e4c0d3a
Merge remote-tracking branch 'upstream/master' into ml-fix-apm-transa…
qn895 Aug 22, 2021
909e203
fix api test names
walterra Aug 23, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ export interface FailedTransactionsCorrelationValue {
pValue: number | null;
fieldName: string;
fieldValue: string;
normalizedScore: number;
failurePercentage: number;
successPercentage: number;
}

export type FailureCorrelationImpactThreshold = typeof FAILED_TRANSACTIONS_IMPACT_THRESHOLD[keyof typeof FAILED_TRANSACTIONS_IMPACT_THRESHOLD];
Expand Down
28 changes: 28 additions & 0 deletions x-pack/plugins/apm/common/utils/formatters/datetime.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,34 @@ describe('date time formatters', () => {
'Dec 1, 2019, 13:00:00.000 (UTC+1)'
);
});

it('milliseconds', () => {
moment.tz.setDefault('Europe/Copenhagen');
expect(asAbsoluteDateTime(1559390400000, 'milliseconds')).toBe(
'Jun 1, 2019, 14:00:00.000 (UTC+2)'
);
});

it('seconds', () => {
moment.tz.setDefault('Europe/Copenhagen');
expect(asAbsoluteDateTime(1559390400000, 'seconds')).toBe(
'Jun 1, 2019, 14:00:00 (UTC+2)'
);
});

it('minutes', () => {
moment.tz.setDefault('Europe/Copenhagen');
expect(asAbsoluteDateTime(1559390400000, 'minutes')).toBe(
'Jun 1, 2019, 14:00 (UTC+2)'
);
});

it('hours', () => {
moment.tz.setDefault('Europe/Copenhagen');
expect(asAbsoluteDateTime(1559390400000, 'hours')).toBe(
'Jun 1, 2019, 14 (UTC+2)'
);
});
});
describe('getDateDifference', () => {
it('milliseconds', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*
* 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 { EuiAccordion, EuiCode, EuiPanel } from '@elastic/eui';
import React from 'react';
import { i18n } from '@kbn/i18n';
import { asAbsoluteDateTime } from '../../../../common/utils/formatters';

interface Props {
logMessages: string[];
}
export function CorrelationsLog({ logMessages }: Props) {
return (
<EuiAccordion
id="apmCorrelationsLogAccordion"
buttonContent={i18n.translate('xpack.apm.correlations.logButtonContent', {
defaultMessage: 'Log',
})}
>
<EuiPanel color="subdued">
{logMessages.map((logMessage, i) => {
const [timestamp, message] = logMessage.split(': ');
return (
<p key={i}>
<small>
<EuiCode>{asAbsoluteDateTime(timestamp)}</EuiCode> {message}
</small>
</p>
);
})}
</EuiPanel>
</EuiAccordion>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ import React, { useCallback, useMemo, useState } from 'react';
import { debounce } from 'lodash';
import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
import type { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
import { FETCH_STATUS } from '../../../hooks/use_fetcher';
import { useUiTracker } from '../../../../../observability/public';
import { useTheme } from '../../../hooks/use_theme';
import { CorrelationsTerm } from '../../../../common/search_strategies/failure_correlations/types';
import type { CorrelationsTerm } from '../../../../common/search_strategies/failure_correlations/types';

const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];

Expand All @@ -29,6 +31,8 @@ interface Props<T> {
selectedTerm?: { fieldName: string; fieldValue: string };
onFilter?: () => void;
columns: Array<EuiBasicTableColumn<T>>;
onTableChange: (c: Criteria<T>) => void;
sorting?: EuiTableSortingType<T>;
}

export function CorrelationsTable<T extends CorrelationsTerm>({
Expand All @@ -37,6 +41,8 @@ export function CorrelationsTable<T extends CorrelationsTerm>({
setSelectedSignificantTerm,
columns,
selectedTerm,
onTableChange,
sorting,
}: Props<T>) {
const euiTheme = useTheme();
const trackApmEvent = useUiTracker({ app: 'apm' });
Expand Down Expand Up @@ -67,12 +73,17 @@ export function CorrelationsTable<T extends CorrelationsTerm>({
};
}, [pageIndex, pageSize, significantTerms]);

const onTableChange = useCallback(({ page }) => {
const { index, size } = page;
const onChange = useCallback(
(tableSettings) => {
const { index, size } = tableSettings.page;

setPageIndex(index);
setPageSize(size);
}, []);
setPageIndex(index);
setPageSize(size);

onTableChange(tableSettings);
},
[onTableChange]
);

return (
<EuiBasicTable
Expand Down Expand Up @@ -100,7 +111,8 @@ export function CorrelationsTable<T extends CorrelationsTerm>({
};
}}
pagination={pagination}
onChange={onTableChange}
onChange={onChange}
sorting={sorting}
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
* 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 { EuiCallOut } from '@elastic/eui';
import React from 'react';
import { i18n } from '@kbn/i18n';

export function CrossClusterSearchCompatibilityWarning({
version,
}: {
version: string;
}) {
return (
<EuiCallOut
title={i18n.translate('xpack.apm.correlations.ccsWarningCalloutTitle', {
defaultMessage: 'Cross-cluster search compatibility',
})}
color="warning"
>
<p>
{i18n.translate('xpack.apm.correlations.ccsWarningCalloutBody', {
defaultMessage:
'Data for the correlation analysis could not be fully retrieved. This feature is supported only for {version} and later versions.',
values: { version },
})}
</p>
</EuiCallOut>
);
}
Original file line number Diff line number Diff line change
@@ -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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
import React from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

export function CorrelationsEmptyStatePrompt() {
return (
<>
<EuiSpacer size="m" />
<EuiEmptyPrompt
iconType="minusInCircle"
title={
<EuiText size="s">
<h2>
{i18n.translate('xpack.apm.correlations.noCorrelationsTitle', {
defaultMessage: 'No significant correlations',
})}
</h2>
</EuiText>
}
body={
<>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.apm.correlations.noCorrelationsTextLine1"
defaultMessage="Correlations will only be identified if they have significant impact."
/>
</p>
<p>
<FormattedMessage
id="xpack.apm.correlations.noCorrelationsTextLine2"
defaultMessage="Try selecting another time range or remove any added filter."
/>
</p>
</EuiText>
</>
}
/>
</>
);
}
Loading