Skip to content

Commit

Permalink
[ML] Display advanced mode toggle for the APM failed transactions tab…
Browse files Browse the repository at this point in the history 
…le (#114363) (#115073)

* Add new toggle

* [ML] Add tooltip for p value

* [ML] Add tooltip for p value

* Update tooltip

* Add callback, revert i18n, compressed

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com>
  • Loading branch information
@kibanamachine @qn895
kibanamachine and qn895 authored Oct 14, 2021
1 parent 3f4890b commit 6f57fcd
Showing 1 changed file with 88 additions and 33 deletions.
121 changes: 88 additions & 33 deletions x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
EuiBadge,
EuiToolTip,
RIGHT_ALIGNMENT,
EuiSwitch,
EuiIconTip,
} from '@elastic/eui';
import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
import type { Direction } from '@elastic/eui/src/services/sort/sort_direction';
Expand All @@ -44,7 +46,6 @@ import { useSearchStrategy } from '../../../hooks/use_search_strategy';

import { ImpactBar } from '../../shared/ImpactBar';
import { createHref, push } from '../../shared/Links/url_helpers';
import { Summary } from '../../shared/Summary';

import { CorrelationsTable } from './correlations_table';
import { FailedTransactionsCorrelationsHelpPopover } from './failed_transactions_correlations_help_popover';
Expand All @@ -59,6 +60,8 @@ import { CorrelationsLog } from './correlations_log';
import { CorrelationsEmptyStatePrompt } from './empty_state_prompt';
import { CrossClusterSearchCompatibilityWarning } from './cross_cluster_search_warning';
import { CorrelationsProgressControls } from './progress_controls';
import { useLocalStorage } from '../../../hooks/useLocalStorage';
import { useTheme } from '../../../hooks/use_theme';

export function FailedTransactionsCorrelations({
onFilter,
Expand Down Expand Up @@ -91,18 +94,53 @@ export function FailedTransactionsCorrelations({
selectedSignificantTerm ?? response.failedTransactionsCorrelations?.[0];

const history = useHistory();
const [showStats, setShowStats] = useLocalStorage(
'apmFailedTransactionsShowAdvancedStats',
false
);
const euiTheme = useTheme();

const toggleShowStats = useCallback(() => {
setShowStats(!showStats);
}, [setShowStats, showStats]);

const failedTransactionsCorrelationsColumns: Array<
EuiBasicTableColumn<FailedTransactionsCorrelation>
> = useMemo(() => {
const percentageColumns: Array<
EuiBasicTableColumn<FailedTransactionsCorrelation>
> = inspectEnabled
> = showStats
? [
{
width: '100px',
field: 'pValue',
name: 'p-value',
name: (
<EuiToolTip
content={i18n.translate(
'xpack.apm.correlations.failedTransactions.correlationsTable.pValueDescription',
{
defaultMessage:
'The chance of getting at least this amount of field name and value for failed transactions given its prevalence in successful transactions.',
}
)}
>
<>
{i18n.translate(
'xpack.apm.correlations.failedTransactions.correlationsTable.pValueLabel',
{
defaultMessage: 'p-value',
}
)}
<EuiIcon
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
/>
</>
</EuiToolTip>
),

render: (pValue: number) => pValue.toPrecision(3),
sortable: true,
},
Expand Down Expand Up @@ -182,7 +220,7 @@ export function FailedTransactionsCorrelations({
name: (
<>
{i18n.translate(
'xpack.apm.correlations.failedTransactions.correlationsTable.pValueLabel',
'xpack.apm.correlations.failedTransactions.correlationsTable.scoreLabel',
{
defaultMessage: 'Score',
}
Expand Down Expand Up @@ -315,7 +353,7 @@ export function FailedTransactionsCorrelations({
},
},
] as Array<EuiBasicTableColumn<FailedTransactionsCorrelation>>;
}, [history, onFilter, trackApmEvent, inspectEnabled]);
}, [history, onFilter, trackApmEvent, showStats]);

useEffect(() => {
if (isErrorMessage(progress.error)) {
Expand Down Expand Up @@ -367,9 +405,6 @@ export function FailedTransactionsCorrelations({
correlationTerms.length < 1 &&
(progressNormalized === 1 || !progress.isRunning);

const showSummaryBadge =
inspectEnabled && (progress.isRunning || correlationTerms.length > 0);

const transactionDistributionChartData: TransactionDistributionChartData[] =
[];

Expand Down Expand Up @@ -462,17 +497,51 @@ export function FailedTransactionsCorrelations({

<EuiSpacer size="s" />

<EuiTitle size="xs">
<span data-test-subj="apmFailedTransactionsCorrelationsTablePanelTitle">
{i18n.translate(
'xpack.apm.correlations.failedTransactions.tableTitle',
{
defaultMessage: 'Correlations',
}
)}
</span>
</EuiTitle>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiTitle size="xs">
<span data-test-subj="apmFailedTransactionsCorrelationsTablePanelTitle">
{i18n.translate(
'xpack.apm.correlations.failedTransactions.tableTitle',
{
defaultMessage: 'Correlations',
}
)}
</span>
</EuiTitle>
<EuiFlexItem
style={{
display: 'flex',
flexDirection: 'row',
paddingLeft: euiTheme.eui.paddingSizes.s,
}}
>
<EuiSwitch
label={i18n.translate(
'xpack.apm.correlations.latencyCorrelations.advancedStatisticsLabel',
{
defaultMessage: 'Advanced statistics',
}
)}
checked={showStats}
onChange={toggleShowStats}
compressed
/>
<EuiIconTip
size="m"
iconProps={{
style: { marginLeft: euiTheme.eui.paddingSizes.xs },
}}
content={i18n.translate(
'xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent',
{
defaultMessage:
'Enable additional statistical information for the correlation results.',
}
)}
type="questionInCircle"
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />

<CorrelationsProgressControls
Expand All @@ -490,20 +559,6 @@ export function FailedTransactionsCorrelations({
</>
)}

{showSummaryBadge && selectedTerm?.pValue && (
<>
<EuiSpacer size="m" />
<Summary
items={[
<EuiBadge color="hollow">
{`${selectedTerm.fieldName}: ${selectedTerm.fieldValue}`}
</EuiBadge>,
<>{`p-value: ${selectedTerm.pValue.toPrecision(3)}`}</>,
]}
/>
</>
)}

<EuiSpacer size="m" />

<div data-test-subj="apmCorrelationsTable">
Expand Down

0 comments on commit 6f57fcd

Please sign in to comment.