Skip to content

Commit

Permalink
[ML] Remove duplicate action columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@qn895
qn895 committed Aug 13, 2021
1 parent 0633e88 commit 43d7a85
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 109 deletions.
104 changes: 2 additions & 102 deletions x-pack/plugins/apm/public/components/app/correlations/correlations_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,9 @@

import React, { useCallback, useMemo, useState } from 'react';
import { debounce } from 'lodash';
import {
EuiIcon,
EuiLink,
EuiBasicTable,
EuiBasicTableColumn,
} from '@elastic/eui';
import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useHistory } from 'react-router-dom';
import { FETCH_STATUS } from '../../../hooks/use_fetcher';
import { createHref, push } from '../../shared/Links/url_helpers';
import { useUiTracker } from '../../../../../observability/public';
import { useTheme } from '../../../hooks/use_theme';
import type { SelectedSignificantTerm } from '../../../../common/search_strategies/correlations/types';
Expand All @@ -42,7 +35,6 @@ export function CorrelationsTable<T extends SelectedSignificantTerm>({
significantTerms,
status,
setSelectedSignificantTerm,
onFilter,
columns,
selectedTerm,
}: Props<T>) {
Expand All @@ -56,7 +48,6 @@ export function CorrelationsTable<T extends SelectedSignificantTerm>({
),
[trackApmEvent]
);
const history = useHistory();

const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10);
Expand All @@ -83,98 +74,7 @@ export function CorrelationsTable<T extends SelectedSignificantTerm>({
setPageSize(size);
}, []);

const handleOnFilter = useCallback(() => (onFilter ? onFilter : () => {}), [
onFilter,
]);
const tableColumns: Array<EuiBasicTableColumn<T>> = columns
? [
...columns,
{
width: '100px',
actions: [
{
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.filterLabel',
{ defaultMessage: 'Filter' }
),
description: i18n.translate(
'xpack.apm.correlations.correlationsTable.filterDescription',
{ defaultMessage: 'Filter by value' }
),
icon: 'plusInCircle',
type: 'icon',
onClick: (term: T) => {
push(history, {
query: {
kuery: `${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
});
handleOnFilter();
trackApmEvent({ metric: 'correlations_term_include_filter' });
},
},
{
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.excludeLabel',
{ defaultMessage: 'Exclude' }
),
description: i18n.translate(
'xpack.apm.correlations.correlationsTable.excludeDescription',
{ defaultMessage: 'Filter out value' }
),
icon: 'minusInCircle',
type: 'icon',
onClick: (term: T) => {
push(history, {
query: {
kuery: `not ${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
});
handleOnFilter();
trackApmEvent({ metric: 'correlations_term_exclude_filter' });
},
},
],
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.actionsLabel',
{ defaultMessage: 'Filter' }
),
render: (_: any, term: T) => {
return (
<>
<EuiLink
href={createHref(history, {
query: {
kuery: `${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
})}
>
<EuiIcon type="magnifyWithPlus" />
</EuiLink>
&nbsp;/&nbsp;
<EuiLink
href={createHref(history, {
query: {
kuery: `not ${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
})}
>
<EuiIcon type="magnifyWithMinus" />
</EuiLink>
</>
);
},
},
]
: [];
const tableColumns: Array<EuiBasicTableColumn<T>> = columns ?? [];

return (
<EuiBasicTable
Expand Down
95 changes: 94 additions & 1 deletion x-pack/plugins/apm/public/components/app/correlations/ml_failure_correlations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,12 @@ import {
EuiSpacer,
EuiText,
EuiBadge,
EuiIcon,
EuiLink,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { useHistory } from 'react-router-dom';
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { CorrelationsTable } from './correlations_table';
Expand All @@ -40,6 +43,8 @@ import { isErrorMessage } from './utils/is_error_message';
import { Summary } from '../../shared/Summary';
import { FETCH_STATUS } from '../../../hooks/use_fetcher';
import { getFailureCorrelationImpactLabel } from './utils/get_failure_correlation_impact_label';
import { createHref, push } from '../../shared/Links/url_helpers';
import { useUiTracker } from '../../../../../observability/public';

interface Props {
onClose: () => void;
Expand All @@ -54,6 +59,7 @@ export function MlFailureCorrelations({ onClose }: Props) {
const {
core: { notifications, uiSettings },
} = useApmPluginContext();
const trackApmEvent = useUiTracker({ app: 'apm' });

const { serviceName, transactionType } = useApmServiceContext();
const { urlParams } = useUrlParams();
Expand Down Expand Up @@ -115,6 +121,9 @@ export function MlFailureCorrelations({ onClose }: Props) {
: undefined;
}, [selectedSignificantTerm, result]);

const history = useHistory();
const handleOnFilter = onClose;

const errorCorrelationsColumns: Array<
EuiBasicTableColumn<ErrorCorrelationValue>
> = useMemo(
Expand Down Expand Up @@ -170,8 +179,92 @@ export function MlFailureCorrelations({ onClose }: Props) {
),
render: (fieldValue: string) => String(fieldValue).slice(0, 50),
},
{
width: '100px',
actions: [
{
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.filterLabel',
{ defaultMessage: 'Filter' }
),
description: i18n.translate(
'xpack.apm.correlations.correlationsTable.filterDescription',
{ defaultMessage: 'Filter by value' }
),
icon: 'plusInCircle',
type: 'icon',
onClick: (term: ErrorCorrelationValue) => {
push(history, {
query: {
kuery: `${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
});
handleOnFilter();
trackApmEvent({ metric: 'correlations_term_include_filter' });
},
},
{
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.excludeLabel',
{ defaultMessage: 'Exclude' }
),
description: i18n.translate(
'xpack.apm.correlations.correlationsTable.excludeDescription',
{ defaultMessage: 'Filter out value' }
),
icon: 'minusInCircle',
type: 'icon',
onClick: (term: ErrorCorrelationValue) => {
push(history, {
query: {
kuery: `not ${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
});
handleOnFilter();
trackApmEvent({ metric: 'correlations_term_exclude_filter' });
},
},
],
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.actionsLabel',
{ defaultMessage: 'Filter' }
),
render: (_: any, term: ErrorCorrelationValue) => {
return (
<>
<EuiLink
href={createHref(history, {
query: {
kuery: `${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
})}
>
<EuiIcon type="magnifyWithPlus" />
</EuiLink>
&nbsp;/&nbsp;
<EuiLink
href={createHref(history, {
query: {
kuery: `not ${term.fieldName}:"${encodeURIComponent(
term.fieldValue
)}"`,
},
})}
>
<EuiIcon type="magnifyWithMinus" />
</EuiLink>
</>
);
},
},
],
[]
[handleOnFilter, history, trackApmEvent]
);

useEffect(() => {
Expand Down
6 changes: 0 additions & 6 deletions ...apm/public/components/app/correlations/utils/get_failure_correlation_impact_label.test.ts
View file

This file was deleted.

0 comments on commit 43d7a85

Please sign in to comment.