Skip to content

Commit

Permalink
Merge branch 'main' into fix-timeshift-filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@kibanamachine
kibanamachine authored Nov 29, 2021
2 parents 37fcef7 + 2c41962 commit 71f7717
Show file tree
Hide file tree
Showing 29 changed files with 731 additions and 586 deletions.
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,12 +397,12 @@
"usng.js": "^0.4.5",
"utility-types": "^3.10.0",
"uuid": "3.3.2",
"vega": "^5.19.1",
"vega": "^5.21.0",
"vega-interpreter": "^1.0.4",
"vega-lite": "^5.0.0",
"vega-schema-url-parser": "^2.1.0",
"vega-lite": "^5.2.0",
"vega-schema-url-parser": "^2.2.0",
"vega-spec-injector": "^0.0.2",
"vega-tooltip": "^0.25.1",
"vega-tooltip": "^0.27.0",
"venn.js": "0.2.20",
"vinyl": "^2.2.0",
"vt-pbf": "^3.1.1",
Expand Down
38 changes: 31 additions & 7 deletions src/plugins/vis_types/vega/public/vega_inspector/vega_adapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,35 @@
* Side Public License, v 1.
*/

import { i18n } from '@kbn/i18n';

import { Observable, ReplaySubject, fromEventPattern, merge, timer } from 'rxjs';
import { map, switchMap, filter, debounce } from 'rxjs/operators';
import { View, Runtime, Spec } from 'vega';
import { i18n } from '@kbn/i18n';
import { Assign } from '@kbn/utility-types';
import type { View, Spec } from 'vega';
import type { Assign } from '@kbn/utility-types';

interface DebugValues {
view: View;
view: Assign<
{
_runtime: {
data: Record<
string,
{
values: {
value: Array<Record<string, unknown>>;
};
}
>;
signals: Record<
string,
{
value: unknown;
}
>;
};
},
View
>;
spec: Spec;
}

Expand All @@ -38,8 +59,11 @@ const vegaAdapterValueLabel = i18n.translate('visTypeVega.inspector.vegaAdapter.
/** Get Runtime Scope for Vega View
* @link https://vega.github.io/vega/docs/api/debugging/#scope
**/
const getVegaRuntimeScope = (debugValues: DebugValues) =>
(debugValues.view as any)._runtime as Runtime;
const getVegaRuntimeScope = (debugValues: DebugValues) => {
const { data, signals } = debugValues.view._runtime ?? {};

return { data, signals };
};

const serializeColumns = (item: Record<string, unknown>, columns: string[]) => {
const nonSerializableFieldLabel = '(..)';
Expand Down Expand Up @@ -69,7 +93,7 @@ export class VegaAdapter {
const runtimeScope = getVegaRuntimeScope(debugValues);

return Object.keys(runtimeScope.data || []).reduce((acc: InspectDataSets[], key) => {
const value = runtimeScope.data[key].values.value;
const { value } = runtimeScope.data[key].values;

if (value && value[0]) {
const columns = Object.keys(value[0]);
Expand Down
25 changes: 25 additions & 0 deletions x-pack/plugins/apm/public/components/app/correlations/chart_title_tool_tip.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* 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 React from 'react';
import { EuiIconTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

export function ChartTitleToolTip() {
return (
<EuiIconTip
content={i18n.translate(
'xpack.apm.correlations.latencyCorrelations.titleHelp',
{
defaultMessage:
'The chart uses logarithmic scales on both axes to avoid outliers distorting it',
}
)}
position="right"
/>
);
}
175 changes: 56 additions & 119 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 @@ -18,7 +18,6 @@ import {
EuiTitle,
EuiBetaBadge,
EuiBadge,
EuiText,
EuiToolTip,
EuiSwitch,
EuiIconTip,
Expand All @@ -27,13 +26,11 @@ import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_tabl
import type { Direction } from '@elastic/eui/src/services/sort/sort_direction';

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';

import { useUiTracker } from '../../../../../observability/public';

import { asPercent } from '../../../../common/utils/formatters';
import { FailedTransactionsCorrelation } from '../../../../common/correlations/failed_transactions_correlations/types';
import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../common/correlations/constants';
import { FieldStats } from '../../../../common/correlations/field_stats_types';

import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
Expand All @@ -48,26 +45,24 @@ import { CorrelationsTable } from './correlations_table';
import { FailedTransactionsCorrelationsHelpPopover } from './failed_transactions_correlations_help_popover';
import { getFailedTransactionsCorrelationImpactLabel } from './utils/get_failed_transactions_correlation_impact_label';
import { getOverallHistogram } from './utils/get_overall_histogram';
import {
TransactionDistributionChart,
TransactionDistributionChartData,
} from '../../shared/charts/transaction_distribution_chart';
import { TransactionDistributionChart } from '../../shared/charts/transaction_distribution_chart';
import { CorrelationsEmptyStatePrompt } from './empty_state_prompt';
import { CrossClusterSearchCompatibilityWarning } from './cross_cluster_search_warning';
import { CorrelationsProgressControls } from './progress_controls';
import { useTransactionColors } from './use_transaction_colors';
import { CorrelationsContextPopover } from './context_popover';
import { OnAddFilter } from './context_popover/top_values';

import { useFailedTransactionsCorrelations } from './use_failed_transactions_correlations';
import { getTransactionDistributionChartData } from './get_transaction_distribution_chart_data';
import { ChartTitleToolTip } from './chart_title_tool_tip';
import { MIN_TAB_TITLE_HEIGHT } from '../transaction_details/distribution';

export function FailedTransactionsCorrelations({
onFilter,
}: {
onFilter: () => void;
}) {
const euiTheme = useTheme();
const transactionColors = useTransactionColors();

const {
core: { notifications },
Expand Down Expand Up @@ -427,133 +422,75 @@ export function FailedTransactionsCorrelations({
correlationTerms.length < 1 &&
(progress.loaded === 1 || !progress.isRunning);

const transactionDistributionChartData: TransactionDistributionChartData[] =
[];

if (Array.isArray(overallHistogram)) {
transactionDistributionChartData.push({
id: i18n.translate(
'xpack.apm.transactionDistribution.chart.allTransactionsLabel',
{ defaultMessage: 'All transactions' }
),
histogram: overallHistogram,
});
}

if (Array.isArray(response.errorHistogram)) {
transactionDistributionChartData.push({
id: i18n.translate(
'xpack.apm.transactionDistribution.chart.failedTransactionsLabel',
{ defaultMessage: 'Failed transactions' }
),
histogram: response.errorHistogram,
});
}

if (selectedTerm && Array.isArray(selectedTerm.histogram)) {
transactionDistributionChartData.push({
id: `${selectedTerm.fieldName}:${selectedTerm.fieldValue}`,
histogram: selectedTerm.histogram,
});
}
const transactionDistributionChartData = getTransactionDistributionChartData({
euiTheme,
allTransactionsHistogram: overallHistogram,
failedTransactionsHistogram: response.errorHistogram,
selectedTerm,
});

return (
<div data-test-subj="apmFailedTransactionsCorrelationsTabContent">
<EuiFlexItem style={{ flexDirection: 'row', alignItems: 'center' }}>
<EuiFlexGroup direction="row" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiTitle
size="xs"
data-test-subj="apmFailedTransactionsCorrelationsTabTitle"
>
<h5 data-test-subj="apmFailedTransactionsCorrelationsChartTitle">
{i18n.translate(
'xpack.apm.correlations.failedTransactions.panelTitle',
{
defaultMessage: 'Failed transactions latency distribution',
}
)}
</h5>
</EuiTitle>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate(
'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaLabel',
{
defaultMessage: 'Beta',
}
)}
title={i18n.translate(
'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaTitle',
{
defaultMessage: 'Failed transaction correlations',
}
)}
tooltipContent={i18n.translate(
'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaDescription',
<EuiFlexGroup
style={{ minHeight: MIN_TAB_TITLE_HEIGHT }}
alignItems="center"
gutterSize="s"
>
<EuiFlexItem grow={false}>
<EuiTitle
size="xs"
data-test-subj="apmFailedTransactionsCorrelationsTabTitle"
>
<h5 data-test-subj="apmFailedTransactionsCorrelationsChartTitle">
{i18n.translate(
'xpack.apm.correlations.failedTransactions.panelTitle',
{
defaultMessage:
'Failed transaction correlations is not GA. Please help us by reporting any bugs.',
defaultMessage: 'Failed transactions latency distribution',
}
)}
/>
</EuiFlexItem>
</EuiFlexGroup>
</h5>
</EuiTitle>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate(
'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaLabel',
{
defaultMessage: 'Beta',
}
)}
title={i18n.translate(
'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaTitle',
{
defaultMessage: 'Failed transaction correlations',
}
)}
tooltipContent={i18n.translate(
'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaDescription',
{
defaultMessage:
'Failed transaction correlations is not GA. Please help us by reporting any bugs.',
}
)}
/>
</EuiFlexItem>

<EuiFlexItem>
<ChartTitleToolTip />
</EuiFlexItem>

<EuiFlexItem grow={false}>
<FailedTransactionsCorrelationsHelpPopover />
</EuiFlexItem>
</EuiFlexItem>

{selectedTerm && (
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartDescription"
defaultMessage="Log-log plot for latency (x) by transactions (y) with overlapping bands for {br}{allTransactions}, {failedTransactions} and {focusTransaction}."
values={{
br: <br />,
allTransactions: (
<span style={{ color: transactionColors.ALL_TRANSACTIONS }}>
<FormattedMessage
id="xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartAllTransactions"
defaultMessage="all transactions"
/>
</span>
),
failedTransactions: (
<span
style={{ color: transactionColors.ALL_FAILED_TRANSACTIONS }}
>
<FormattedMessage
id="xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartFailedTransactions"
defaultMessage="failed transactions"
/>
</span>
),
focusTransaction: (
<span style={{ color: transactionColors.FOCUS_TRANSACTION }}>
{selectedTerm?.fieldName}:{selectedTerm?.fieldValue}
</span>
),
}}
/>
</EuiText>
)}
</EuiFlexGroup>

<EuiSpacer size="s" />

<TransactionDistributionChart
markerPercentile={DEFAULT_PERCENTILE_THRESHOLD}
markerValue={response.percentileThresholdValue ?? 0}
data={transactionDistributionChartData}
hasData={hasData}
palette={[
transactionColors.ALL_TRANSACTIONS,
transactionColors.ALL_FAILED_TRANSACTIONS,
transactionColors.FOCUS_TRANSACTION,
]}
status={status}
/>

Expand Down
Loading

0 comments on commit 71f7717

Please sign in to comment.