From 6f57fcd1bb643680b42444080cf2edaaf160e7bb Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 14 Oct 2021 17:00:33 -0400 Subject: [PATCH] [ML] Display advanced mode toggle for the APM failed transactions table (#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> --- .../failed_transactions_correlations.tsx | 121 +++++++++++++----- 1 file changed, 88 insertions(+), 33 deletions(-) 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<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, }, @@ -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<EuiBasicTableColumn<FailedTransactionsCorrelation>>; - }, [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({ <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 @@ -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">