diff --git a/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx index c497ce434180b..d73ed9d58e526 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx @@ -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'; @@ -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'; @@ -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, @@ -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 > = useMemo(() => { const percentageColumns: Array< EuiBasicTableColumn - > = inspectEnabled + > = showStats ? [ { width: '100px', field: 'pValue', - name: 'p-value', + name: ( + + <> + {i18n.translate( + 'xpack.apm.correlations.failedTransactions.correlationsTable.pValueLabel', + { + defaultMessage: 'p-value', + } + )} + + + + ), + render: (pValue: number) => pValue.toPrecision(3), sortable: true, }, @@ -182,7 +220,7 @@ export function FailedTransactionsCorrelations({ name: ( <> {i18n.translate( - 'xpack.apm.correlations.failedTransactions.correlationsTable.pValueLabel', + 'xpack.apm.correlations.failedTransactions.correlationsTable.scoreLabel', { defaultMessage: 'Score', } @@ -315,7 +353,7 @@ export function FailedTransactionsCorrelations({ }, }, ] as Array>; - }, [history, onFilter, trackApmEvent, inspectEnabled]); + }, [history, onFilter, trackApmEvent, showStats]); useEffect(() => { if (isErrorMessage(progress.error)) { @@ -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[] = []; @@ -462,17 +497,51 @@ export function FailedTransactionsCorrelations({ - - - {i18n.translate( - 'xpack.apm.correlations.failedTransactions.tableTitle', - { - defaultMessage: 'Correlations', - } - )} - - - + + + + {i18n.translate( + 'xpack.apm.correlations.failedTransactions.tableTitle', + { + defaultMessage: 'Correlations', + } + )} + + + + + + + )} - {showSummaryBadge && selectedTerm?.pValue && ( - <> - - - {`${selectedTerm.fieldName}: ${selectedTerm.fieldValue}`} - , - <>{`p-value: ${selectedTerm.pValue.toPrecision(3)}`}, - ]} - /> - - )} -