mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[Security Solution][Lens] New trigger actions for chart legends and table cell actions (#146779)
## Summary Enable XY chart legends and Table cell actions to render dynamically registered "cell value" actions, scoped for Lens embeddables only. Security Solution actions were created to be displayed in the Lens visualizations rendered. closes https://github.com/elastic/kibana/issues/145708 ### New Trigger A new _uiActions_ trigger `CELL_VALUE_TRIGGER` has been created to register these actions. It is used in both _TableChart_ cell actions and _XyCharts_ legend actions to create additional action options. #### Table cell actions Actions registered and added to the `CELL_VALUE_TRIGGER` will be appended to the cell actions of the table. The action compatibility is checked for each column.  #### Chart legend actions The same for XyCharts legends. All actions registered and added to the `CELL_VALUE_TRIGGER` will be appended to the legend actions of the charts. The action compatibility is checked for each series accessor.  #### Filter for & Filter out actions: The XY and Table charts have the "Filter for & Filter out" actions hardcoded in the components code. They manually check the value is filterable before showing the actions, but the panel items and cell actions are added explicitly for them in the components. This logic has not changed in this PR, the actions added dynamically using `CELL_VALUE_TRIGGER` are just appended after the "Filter for & Filter out" options. However, "Filter for / Filter out" actions could also be integrated into this pattern, we would only have to register these actions to the `CELL_VALUE_TRIGGER` with the proper `order` value, and then remove all hardcoded logic in the components. ### Security Solution actions The actions that we have registered from Security Solutions ("Add to timeline" and "Copy to clipboard") will be displayed only when the embeddable is rendered inside Security Solution, this is ensured via the `isCompatible` actions method.  ### Security Solution Filter In/Out bug There was a CSS rule present in a global Security Solution context, affecting all the `EuiDataGrid` cell actions popovers:475e47ed99/x-pack/plugins/security_solution/public/common/components/page/index.tsx (L124-L130)The goal of this rule was to save some vertical space, by hiding the two auto-generated Filter In/Out actions (generally the first two cell actions), so we could show the horizontal Filter In/Out custom buttons added manually to the popover top header.  This CSS rule was causing a bug when rendering Table visualizations (they use `EuiDataGrid` as well), always hiding the two first cell actions in the popover. After discussing this topic with the team, and considering there is an ongoing task to unify the cell actions experience in Security and centralize the implementation (see: https://github.com/elastic/kibana/issues/144943), we decided to remove the problematic CSS rule and the custom horizontal Filter buttons, so the auto-generated Filter actions are displayed, this way all tables in Security (alerts, events, and also embedded table charts) will have a unified and consistent UX.  If the cell actions popover grows too much in the future we could apply a "More actions ..." footer option strategy. ## Testing The new actions will be displayed on any embedded Lens object rendered inside Security. A good place to test that is Cases, since we can attach Lens visualizations in the comments. However, Cases explicitly disables all the trigger actions passing `disableTriggers` to the Lens Embeddables.b80a23ee12/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx (L52)The easiest way to test different chart types and tables is to remove/comment the `disableTriggers` prop in the Cases processor component, and then go to a Case and attach different Lens visualizations. All actions should appear in the legends and table cell hover actions. ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>
This commit is contained in:
Sergi Massaneda
GitHub
parent
c3a8b26300
commit
d8318edbb6
53 changed files with 1663 additions and 274 deletions
|
|
@ -77,6 +77,8 @@ describe('PartitionVisComponent', function () {
|
|||
syncColors: false,
|
||||
fireEvent: jest.fn(),
|
||||
renderComplete: jest.fn(),
|
||||
interactive: true,
|
||||
columnCellValueActions: [],
|
||||
services: {
|
||||
data: dataPluginMock.createStartContract(),
|
||||
fieldFormats: fieldFormatsServiceMock.createStartContract(),
|
||||
|
|
@ -172,6 +174,16 @@ describe('PartitionVisComponent', function () {
|
|||
});
|
||||
});
|
||||
|
||||
it('should render legend actions when it is interactive', async () => {
|
||||
const component = shallow(<PartitionVisComponent {...wrapperProps} interactive={true} />);
|
||||
expect(component.find(Settings).prop('legendAction')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should not render legend actions when it is not interactive', async () => {
|
||||
const component = shallow(<PartitionVisComponent {...wrapperProps} interactive={false} />);
|
||||
expect(component.find(Settings).prop('legendAction')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('hides the legend if the legend toggle is clicked', async () => {
|
||||
const component = mountWithIntl(<PartitionVisComponent {...wrapperProps} />);
|
||||
await actWithTimeout(async () => {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ import {
|
|||
} from './partition_vis_component.styles';
|
||||
import { ChartTypes } from '../../common/types';
|
||||
import { filterOutConfig } from '../utils/filter_out_config';
|
||||
import { FilterEvent, StartDeps } from '../types';
|
||||
import { ColumnCellValueActions, FilterEvent, StartDeps } from '../types';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
|
@ -85,19 +85,23 @@ export interface PartitionVisComponentProps {
|
|||
uiState: PersistedState;
|
||||
fireEvent: IInterpreterRenderHandlers['event'];
|
||||
renderComplete: IInterpreterRenderHandlers['done'];
|
||||
interactive: boolean;
|
||||
chartsThemeService: ChartsPluginSetup['theme'];
|
||||
palettesRegistry: PaletteRegistry;
|
||||
services: Pick<StartDeps, 'data' | 'fieldFormats'>;
|
||||
syncColors: boolean;
|
||||
columnCellValueActions: ColumnCellValueActions;
|
||||
}
|
||||
|
||||
const PartitionVisComponent = (props: PartitionVisComponentProps) => {
|
||||
const {
|
||||
columnCellValueActions,
|
||||
visData: originalVisData,
|
||||
visParams: preVisParams,
|
||||
visType,
|
||||
services,
|
||||
syncColors,
|
||||
interactive,
|
||||
} = props;
|
||||
const visParams = useMemo(() => filterOutConfig(visType, preVisParams), [preVisParams, visType]);
|
||||
const chartTheme = props.chartsThemeService.useChartsTheme();
|
||||
|
|
@ -313,6 +317,32 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
|
|||
]
|
||||
);
|
||||
|
||||
const legendActions = useMemo(
|
||||
() =>
|
||||
interactive
|
||||
? getLegendActions(
|
||||
canFilter,
|
||||
getLegendActionEventData(visData),
|
||||
handleLegendAction,
|
||||
columnCellValueActions,
|
||||
visParams,
|
||||
visData,
|
||||
services.data.actions,
|
||||
services.fieldFormats
|
||||
)
|
||||
: undefined,
|
||||
[
|
||||
columnCellValueActions,
|
||||
getLegendActionEventData,
|
||||
handleLegendAction,
|
||||
interactive,
|
||||
services.data.actions,
|
||||
services.fieldFormats,
|
||||
visData,
|
||||
visParams,
|
||||
]
|
||||
);
|
||||
|
||||
const rescaleFactor = useMemo(() => {
|
||||
const overallSum = visData.rows.reduce((sum, row) => sum + row[metricColumn.id], 0);
|
||||
const slices = visData.rows.map((row) => row[metricColumn.id] / overallSum);
|
||||
|
|
@ -446,15 +476,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
|
|||
splitChartFormatter
|
||||
);
|
||||
}}
|
||||
legendAction={getLegendActions(
|
||||
canFilter,
|
||||
getLegendActionEventData(visData),
|
||||
handleLegendAction,
|
||||
visParams,
|
||||
visData,
|
||||
services.data.actions,
|
||||
services.fieldFormats
|
||||
)}
|
||||
legendAction={legendActions}
|
||||
theme={[
|
||||
// Chart background should be transparent for the usage at Canvas.
|
||||
{ background: { color: 'transparent' } },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
* 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 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
import { createMockPieParams, createMockVisData } from '../mocks';
|
||||
import { CellValueAction } from '../types';
|
||||
import { getColumnCellValueActions } from './partition_vis_renderer';
|
||||
|
||||
const visParams = createMockPieParams();
|
||||
const visData = createMockVisData();
|
||||
|
||||
const cellValueAction: CellValueAction = {
|
||||
displayName: 'Test',
|
||||
id: 'test',
|
||||
iconType: 'test-icon',
|
||||
execute: () => {},
|
||||
};
|
||||
|
||||
describe('getColumnCellValueActions', () => {
|
||||
it('should get column cellValue actions for each params bucket', async () => {
|
||||
const result = await getColumnCellValueActions(visParams, visData, async () => [
|
||||
cellValueAction,
|
||||
]);
|
||||
expect(result).toHaveLength(visParams.dimensions.buckets?.length ?? 0);
|
||||
});
|
||||
|
||||
it('should contain the cellValue actions', async () => {
|
||||
const result = await getColumnCellValueActions(visParams, visData, async () => [
|
||||
cellValueAction,
|
||||
cellValueAction,
|
||||
]);
|
||||
expect(result[0]).toEqual([cellValueAction, cellValueAction]);
|
||||
});
|
||||
|
||||
it('should return empty array if no buckets', async () => {
|
||||
const result = await getColumnCellValueActions(
|
||||
{ ...visParams, dimensions: { ...visParams.dimensions, buckets: undefined } },
|
||||
visData,
|
||||
async () => [cellValueAction]
|
||||
);
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
|
||||
it('should return empty array if getCompatibleCellValueActions not passed', async () => {
|
||||
const result = await getColumnCellValueActions(visParams, visData, undefined);
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
|
@ -11,14 +11,20 @@ import { render, unmountComponentAtNode } from 'react-dom';
|
|||
import { I18nProvider } from '@kbn/i18n-react';
|
||||
import { css } from '@emotion/react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/public';
|
||||
import type {
|
||||
Datatable,
|
||||
ExpressionRenderDefinition,
|
||||
IInterpreterRenderHandlers,
|
||||
} from '@kbn/expressions-plugin/public';
|
||||
import type { PersistedState } from '@kbn/visualizations-plugin/public';
|
||||
import { withSuspense } from '@kbn/presentation-util-plugin/public';
|
||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
||||
import { METRIC_TYPE } from '@kbn/analytics';
|
||||
import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
|
||||
import { VisTypePieDependencies } from '../plugin';
|
||||
import { PARTITION_VIS_RENDERER_NAME } from '../../common/constants';
|
||||
import { ChartTypes, RenderValue } from '../../common/types';
|
||||
import { CellValueAction, GetCompatibleCellValueActions } from '../types';
|
||||
import { ChartTypes, PartitionVisParams, RenderValue } from '../../common/types';
|
||||
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
|
||||
import { extractContainerType, extractVisualizationType } from '../../../common';
|
||||
|
||||
|
|
@ -42,6 +48,30 @@ const partitionVisRenderer = css({
|
|||
height: '100%',
|
||||
});
|
||||
|
||||
/**
|
||||
* Retrieves the compatible CELL_VALUE_TRIGGER actions indexed by column
|
||||
**/
|
||||
export const getColumnCellValueActions = async (
|
||||
visConfig: PartitionVisParams,
|
||||
visData: Datatable,
|
||||
getCompatibleCellValueActions?: IInterpreterRenderHandlers['getCompatibleCellValueActions']
|
||||
) => {
|
||||
if (!Array.isArray(visConfig.dimensions.buckets) || !getCompatibleCellValueActions) {
|
||||
return [];
|
||||
}
|
||||
return Promise.all(
|
||||
visConfig.dimensions.buckets.reduce<Array<Promise<CellValueAction[]>>>((acc, accessor) => {
|
||||
const columnMeta = getColumnByAccessor(accessor, visData.columns)?.meta;
|
||||
if (columnMeta) {
|
||||
acc.push(
|
||||
(getCompatibleCellValueActions as GetCompatibleCellValueActions)([{ columnMeta }])
|
||||
);
|
||||
}
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
};
|
||||
|
||||
export const getPartitionVisRenderer: (
|
||||
deps: VisTypePieDependencies
|
||||
) => ExpressionRenderDefinition<RenderValue> = ({ getStartDeps }) => ({
|
||||
|
|
@ -76,7 +106,10 @@ export const getPartitionVisRenderer: (
|
|||
handlers.done();
|
||||
};
|
||||
|
||||
const palettesRegistry = await plugins.charts.palettes.getPalettes();
|
||||
const [columnCellValueActions, palettesRegistry] = await Promise.all([
|
||||
getColumnCellValueActions(visConfig, visData, handlers.getCompatibleCellValueActions),
|
||||
plugins.charts.palettes.getPalettes(),
|
||||
]);
|
||||
|
||||
render(
|
||||
<I18nProvider>
|
||||
|
|
@ -90,9 +123,11 @@ export const getPartitionVisRenderer: (
|
|||
visType={visConfig.isDonut ? ChartTypes.DONUT : visType}
|
||||
renderComplete={renderComplete}
|
||||
fireEvent={handlers.event}
|
||||
interactive={handlers.isInteractive()}
|
||||
uiState={handlers.uiState as PersistedState}
|
||||
services={{ data: plugins.data, fieldFormats: plugins.fieldFormats }}
|
||||
syncColors={syncColors}
|
||||
columnCellValueActions={columnCellValueActions}
|
||||
/>
|
||||
</div>
|
||||
</KibanaThemeProvider>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
import type { ValueClickContext } from '@kbn/embeddable-plugin/public';
|
||||
import type { CellValueContext, ValueClickContext } from '@kbn/embeddable-plugin/public';
|
||||
import { ChartsPluginSetup, ChartsPluginStart } from '@kbn/charts-plugin/public';
|
||||
import {
|
||||
Plugin as ExpressionsPublicPlugin,
|
||||
|
|
@ -35,3 +35,16 @@ export interface FilterEvent {
|
|||
name: 'filter';
|
||||
data: ValueClickContext['data'];
|
||||
}
|
||||
|
||||
export interface CellValueAction {
|
||||
id: string;
|
||||
iconType: string;
|
||||
displayName: string;
|
||||
execute: (data: CellValueContext['data']) => void;
|
||||
}
|
||||
|
||||
export type ColumnCellValueActions = CellValueAction[][];
|
||||
|
||||
export type GetCompatibleCellValueActions = (
|
||||
data: CellValueContext['data']
|
||||
) => Promise<CellValueAction[]>;
|
||||
|
|
|
|||
|
|
@ -125,3 +125,7 @@ export const getFilterEventData = (
|
|||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
export const getSeriesValueColumnIndex = (value: string, visData: Datatable): number => {
|
||||
return visData.columns.findIndex(({ id }) => !!visData.rows.find((r) => r[id] === value));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ import { Datatable } from '@kbn/expressions-plugin/public';
|
|||
import { getFormatByAccessor, getAccessor } from '@kbn/visualizations-plugin/common/utils';
|
||||
import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
|
||||
import { PartitionVisParams } from '../../common/types';
|
||||
import { FilterEvent } from '../types';
|
||||
import { ColumnCellValueActions, FilterEvent } from '../types';
|
||||
import { getSeriesValueColumnIndex } from './filter_helpers';
|
||||
|
||||
export const getLegendActions = (
|
||||
canFilter: (
|
||||
|
|
@ -25,6 +26,7 @@ export const getLegendActions = (
|
|||
) => Promise<boolean>,
|
||||
getFilterEventData: (series: SeriesIdentifier) => FilterEvent | null,
|
||||
onFilter: (data: FilterEvent, negate?: any) => void,
|
||||
columnCellValueActions: ColumnCellValueActions,
|
||||
visParams: PartitionVisParams,
|
||||
visData: Datatable,
|
||||
actions: DataPublicPluginStart['actions'],
|
||||
|
|
@ -32,58 +34,87 @@ export const getLegendActions = (
|
|||
): LegendAction => {
|
||||
return ({ series: [pieSeries] }) => {
|
||||
const [popoverOpen, setPopoverOpen] = useState(false);
|
||||
const [isfilterable, setIsfilterable] = useState(true);
|
||||
const [isFilterable, setIsFilterable] = useState(true);
|
||||
const filterData = useMemo(() => getFilterEventData(pieSeries), [pieSeries]);
|
||||
const columnIndex = useMemo(
|
||||
() => getSeriesValueColumnIndex(pieSeries.key, visData),
|
||||
[pieSeries]
|
||||
);
|
||||
const [ref, onClose] = useLegendAction<HTMLDivElement>();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => setIsfilterable(await canFilter(filterData, actions)))();
|
||||
(async () => setIsFilterable(await canFilter(filterData, actions)))();
|
||||
}, [filterData]);
|
||||
|
||||
if (!isfilterable || !filterData) {
|
||||
if (columnIndex === -1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let formattedTitle = '';
|
||||
if (visParams.dimensions.buckets) {
|
||||
const accessor = visParams.dimensions.buckets.find(
|
||||
(bucket) => getAccessor(bucket) === filterData.data.data[0].column
|
||||
(bucket) => getAccessor(bucket) === columnIndex
|
||||
);
|
||||
formattedTitle =
|
||||
formatter
|
||||
.deserialize(accessor ? getFormatByAccessor(accessor, visData.columns) : undefined)
|
||||
.convert(pieSeries.key) ?? '';
|
||||
}
|
||||
|
||||
const title = formattedTitle || pieSeries.key;
|
||||
|
||||
const panelItems: EuiContextMenuPanelDescriptor['items'] = [];
|
||||
|
||||
if (isFilterable && filterData) {
|
||||
panelItems.push(
|
||||
{
|
||||
name: i18n.translate('expressionPartitionVis.legend.filterForValueButtonAriaLabel', {
|
||||
defaultMessage: 'Filter for value',
|
||||
}),
|
||||
'data-test-subj': `legend-${title}-filterIn`,
|
||||
icon: <EuiIcon type="plusInCircle" size="m" />,
|
||||
onClick: () => {
|
||||
setPopoverOpen(false);
|
||||
onFilter(filterData);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: i18n.translate('expressionPartitionVis.legend.filterOutValueButtonAriaLabel', {
|
||||
defaultMessage: 'Filter out value',
|
||||
}),
|
||||
'data-test-subj': `legend-${title}-filterOut`,
|
||||
icon: <EuiIcon type="minusInCircle" size="m" />,
|
||||
onClick: () => {
|
||||
setPopoverOpen(false);
|
||||
onFilter(filterData, true);
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (columnCellValueActions[columnIndex]) {
|
||||
const columnMeta = visData.columns[columnIndex].meta;
|
||||
columnCellValueActions[columnIndex].forEach((action) => {
|
||||
panelItems.push({
|
||||
name: action.displayName,
|
||||
'data-test-subj': `legend-${title}-${action.id}`,
|
||||
icon: <EuiIcon type={action.iconType} size="m" />,
|
||||
onClick: () => {
|
||||
action.execute([{ columnMeta, value: pieSeries.key }]);
|
||||
setPopoverOpen(false);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (panelItems.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const panels: EuiContextMenuPanelDescriptor[] = [
|
||||
{
|
||||
id: 'main',
|
||||
title: `${title}`,
|
||||
items: [
|
||||
{
|
||||
name: i18n.translate('expressionPartitionVis.legend.filterForValueButtonAriaLabel', {
|
||||
defaultMessage: 'Filter for value',
|
||||
}),
|
||||
'data-test-subj': `legend-${title}-filterIn`,
|
||||
icon: <EuiIcon type="plusInCircle" size="m" />,
|
||||
onClick: () => {
|
||||
setPopoverOpen(false);
|
||||
onFilter(filterData);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: i18n.translate('expressionPartitionVis.legend.filterOutValueButtonAriaLabel', {
|
||||
defaultMessage: 'Filter out value',
|
||||
}),
|
||||
'data-test-subj': `legend-${title}-filterOut`,
|
||||
icon: <EuiIcon type="minusInCircle" size="m" />,
|
||||
onClick: () => {
|
||||
setPopoverOpen(false);
|
||||
onFilter(filterData, true);
|
||||
},
|
||||
},
|
||||
],
|
||||
title,
|
||||
items: panelItems,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -15,11 +15,15 @@ import { ComponentType, ReactWrapper } from 'enzyme';
|
|||
import type { DataLayerConfig } from '../../common';
|
||||
import { LayerTypes } from '../../common/constants';
|
||||
import { getLegendAction } from './legend_action';
|
||||
import { LegendActionPopover } from './legend_action_popover';
|
||||
import { LegendActionPopover, LegendCellValueActions } from './legend_action_popover';
|
||||
import { mockPaletteOutput } from '../../common/__mocks__';
|
||||
import { FieldFormat } from '@kbn/field-formats-plugin/common';
|
||||
import { LayerFieldFormats } from '../helpers';
|
||||
|
||||
const legendCellValueActions: LegendCellValueActions = [
|
||||
{ id: 'action_1', displayName: 'Action 1', iconType: 'testIcon1', execute: () => {} },
|
||||
{ id: 'action_2', displayName: 'Action 2', iconType: 'testIcon2', execute: () => {} },
|
||||
];
|
||||
const table: Datatable = {
|
||||
type: 'datatable',
|
||||
rows: [
|
||||
|
|
@ -178,6 +182,7 @@ describe('getLegendAction', function () {
|
|||
const Component: ComponentType<LegendActionProps> = getLegendAction(
|
||||
[sampleLayer],
|
||||
jest.fn(),
|
||||
[legendCellValueActions],
|
||||
{
|
||||
first: {
|
||||
splitSeriesAccessors: {
|
||||
|
|
@ -251,15 +256,8 @@ describe('getLegendAction', function () {
|
|||
expect(wrapper.find(EuiPopover).prop('title')).toEqual(
|
||||
"Women's Accessories - Label B, filter options"
|
||||
);
|
||||
expect(wrapper.find(LegendActionPopover).prop('context')).toEqual({
|
||||
data: [
|
||||
{
|
||||
column: 1,
|
||||
row: 1,
|
||||
table,
|
||||
value: "Women's Accessories",
|
||||
},
|
||||
],
|
||||
});
|
||||
expect(wrapper.find(LegendActionPopover).prop('legendCellValueActions')).toEqual(
|
||||
legendCellValueActions.map((action) => ({ ...action, execute: expect.any(Function) }))
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@
|
|||
import React from 'react';
|
||||
import type { LegendAction, XYChartSeriesIdentifier } from '@elastic/charts';
|
||||
import { getAccessorByDimension } from '@kbn/visualizations-plugin/common/utils';
|
||||
import type { FilterEvent } from '../types';
|
||||
import { CellValueContext } from '@kbn/embeddable-plugin/public';
|
||||
import type { LayerCellValueActions, FilterEvent } from '../types';
|
||||
import type { CommonXYDataLayerConfig } from '../../common';
|
||||
import { LegendActionPopover } from './legend_action_popover';
|
||||
import { LegendActionPopover, LegendCellValueActions } from './legend_action_popover';
|
||||
import {
|
||||
DatatablesWithFormatInfo,
|
||||
getSeriesName,
|
||||
|
|
@ -23,6 +24,7 @@ import {
|
|||
export const getLegendAction = (
|
||||
dataLayers: CommonXYDataLayerConfig[],
|
||||
onFilter: (data: FilterEvent['data']) => void,
|
||||
layerCellValueActions: LayerCellValueActions,
|
||||
fieldFormats: LayersFieldFormats,
|
||||
formattedDatatables: DatatablesWithFormatInfo,
|
||||
titles: LayersAccessorsTitles,
|
||||
|
|
@ -50,30 +52,44 @@ export const getLegendAction = (
|
|||
|
||||
const { table } = layer;
|
||||
|
||||
const data: FilterEvent['data']['data'] = [];
|
||||
const filterActionData: FilterEvent['data']['data'] = [];
|
||||
const cellValueActionData: CellValueContext['data'] = [];
|
||||
|
||||
series.splitAccessors.forEach((value, accessor) => {
|
||||
const rowIndex = formattedDatatables[layer.layerId].table.rows.findIndex((row) => {
|
||||
return row[accessor] === value;
|
||||
});
|
||||
if (rowIndex !== -1) {
|
||||
data.push({
|
||||
const columnIndex = table.columns.findIndex((column) => column.id === accessor);
|
||||
|
||||
if (rowIndex >= 0 && columnIndex >= 0) {
|
||||
filterActionData.push({
|
||||
row: rowIndex,
|
||||
column: table.columns.findIndex((column) => column.id === accessor),
|
||||
column: columnIndex,
|
||||
value: table.rows[rowIndex][accessor],
|
||||
table,
|
||||
});
|
||||
|
||||
cellValueActionData.push({
|
||||
value: table.rows[rowIndex][accessor],
|
||||
columnMeta: table.columns[columnIndex].meta,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (data.length === 0) {
|
||||
if (filterActionData.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const context: FilterEvent['data'] = {
|
||||
data,
|
||||
const filterHandler = ({ negate }: { negate?: boolean } = {}) => {
|
||||
onFilter({ data: filterActionData, negate });
|
||||
};
|
||||
|
||||
const legendCellValueActions: LegendCellValueActions =
|
||||
layerCellValueActions[layerIndex]?.map((action) => ({
|
||||
...action,
|
||||
execute: () => action.execute(cellValueActionData),
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<LegendActionPopover
|
||||
label={
|
||||
|
|
@ -91,8 +107,8 @@ export const getLegendAction = (
|
|||
titles
|
||||
)?.toString() || ''
|
||||
}
|
||||
context={context}
|
||||
onFilter={onFilter}
|
||||
onFilter={filterHandler}
|
||||
legendCellValueActions={legendCellValueActions}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@ import React, { useState } from 'react';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
|
||||
import { useLegendAction } from '@elastic/charts';
|
||||
import type { FilterEvent } from '../types';
|
||||
import type { CellValueAction } from '../types';
|
||||
|
||||
export type LegendCellValueActions = Array<
|
||||
Omit<CellValueAction, 'execute'> & { execute: () => void }
|
||||
>;
|
||||
|
||||
export interface LegendActionPopoverProps {
|
||||
/**
|
||||
|
|
@ -20,20 +24,31 @@ export interface LegendActionPopoverProps {
|
|||
/**
|
||||
* Callback on filter value
|
||||
*/
|
||||
onFilter: (data: FilterEvent['data']) => void;
|
||||
onFilter: (param?: { negate?: boolean }) => void;
|
||||
/**
|
||||
* Determines the filter event data
|
||||
* Compatible actions to be added to the popover actions
|
||||
*/
|
||||
context: FilterEvent['data'];
|
||||
legendCellValueActions?: LegendCellValueActions;
|
||||
}
|
||||
|
||||
export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverProps> = ({
|
||||
label,
|
||||
onFilter,
|
||||
context,
|
||||
legendCellValueActions = [],
|
||||
}) => {
|
||||
const [popoverOpen, setPopoverOpen] = useState(false);
|
||||
const [ref, onClose] = useLegendAction<HTMLDivElement>();
|
||||
|
||||
const legendCellValueActionPanelItems = legendCellValueActions.map((action) => ({
|
||||
name: action.displayName,
|
||||
'data-test-subj': `legend-${label}-${action.id}`,
|
||||
icon: <EuiIcon type={action.iconType} size="m" />,
|
||||
onClick: () => {
|
||||
action.execute();
|
||||
setPopoverOpen(false);
|
||||
},
|
||||
}));
|
||||
|
||||
const panels: EuiContextMenuPanelDescriptor[] = [
|
||||
{
|
||||
id: 'main',
|
||||
|
|
@ -47,7 +62,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
|
|||
icon: <EuiIcon type="plusInCircle" size="m" />,
|
||||
onClick: () => {
|
||||
setPopoverOpen(false);
|
||||
onFilter(context);
|
||||
onFilter();
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -58,9 +73,10 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
|
|||
icon: <EuiIcon type="minusInCircle" size="m" />,
|
||||
onClick: () => {
|
||||
setPopoverOpen(false);
|
||||
onFilter({ ...context, negate: true });
|
||||
onFilter({ negate: true });
|
||||
},
|
||||
},
|
||||
...legendCellValueActionPanelItems,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -58,8 +58,10 @@ import { ExtendedDataLayerConfig, XYProps, AnnotationLayerConfigResult } from '.
|
|||
import { DataLayers } from './data_layers';
|
||||
import { SplitChart } from './split_chart';
|
||||
import { LegendSize } from '@kbn/visualizations-plugin/common';
|
||||
import type { LayerCellValueActions } from '../types';
|
||||
|
||||
const onClickValue = jest.fn();
|
||||
const layerCellValueActions: LayerCellValueActions = [];
|
||||
const onSelectRange = jest.fn();
|
||||
|
||||
describe('XYChart component', () => {
|
||||
|
|
@ -114,6 +116,7 @@ describe('XYChart component', () => {
|
|||
paletteService,
|
||||
minInterval: 50,
|
||||
onClickValue,
|
||||
layerCellValueActions,
|
||||
onSelectRange,
|
||||
syncColors: false,
|
||||
syncTooltips: false,
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ import {
|
|||
LegendSizeToPixels,
|
||||
} from '@kbn/visualizations-plugin/common/constants';
|
||||
import { PersistedState } from '@kbn/visualizations-plugin/public';
|
||||
import type { FilterEvent, BrushEvent, FormatFactory } from '../types';
|
||||
import type { FilterEvent, BrushEvent, FormatFactory, LayerCellValueActions } from '../types';
|
||||
import { isTimeChart } from '../../common/helpers';
|
||||
import type {
|
||||
CommonXYDataLayerConfig,
|
||||
|
|
@ -121,6 +121,7 @@ export type XYChartRenderProps = Omit<XYChartProps, 'canNavigateToLens'> & {
|
|||
minInterval: number | undefined;
|
||||
interactive?: boolean;
|
||||
onClickValue: (data: FilterEvent['data']) => void;
|
||||
layerCellValueActions: LayerCellValueActions;
|
||||
onSelectRange: (data: BrushEvent['data']) => void;
|
||||
renderMode: RenderMode;
|
||||
syncColors: boolean;
|
||||
|
|
@ -196,6 +197,7 @@ export function XYChart({
|
|||
paletteService,
|
||||
minInterval,
|
||||
onClickValue,
|
||||
layerCellValueActions,
|
||||
onSelectRange,
|
||||
interactive = true,
|
||||
syncColors,
|
||||
|
|
@ -828,6 +830,7 @@ export function XYChart({
|
|||
? getLegendAction(
|
||||
dataLayers,
|
||||
onClickValue,
|
||||
layerCellValueActions,
|
||||
fieldFormats,
|
||||
formattedDatatables,
|
||||
titles,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,10 @@ import { PersistedState } from '@kbn/visualizations-plugin/public';
|
|||
import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
|
||||
import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
|
||||
import { EventAnnotationServiceType } from '@kbn/event-annotation-plugin/public';
|
||||
import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common';
|
||||
import type {
|
||||
ExpressionRenderDefinition,
|
||||
IInterpreterRenderHandlers,
|
||||
} from '@kbn/expressions-plugin/common';
|
||||
import { FormatFactory } from '@kbn/field-formats-plugin/common';
|
||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
||||
import { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
|
||||
|
|
@ -26,8 +29,8 @@ import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
|
|||
|
||||
import type { getDataLayers } from '../helpers';
|
||||
import { LayerTypes, SeriesTypes } from '../../common/constants';
|
||||
import type { XYChartProps } from '../../common';
|
||||
import type { BrushEvent, FilterEvent } from '../types';
|
||||
import type { CommonXYDataLayerConfig, XYChartProps } from '../../common';
|
||||
import type { BrushEvent, FilterEvent, GetCompatibleCellValueActions } from '../types';
|
||||
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
|
||||
import { extractContainerType, extractVisualizationType } from '../../../common';
|
||||
|
||||
|
|
@ -157,6 +160,28 @@ const extractCounterEvents = (
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves the compatible CELL_VALUE_TRIGGER actions indexed by layer
|
||||
**/
|
||||
const getLayerCellValueActions = async (
|
||||
layers: CommonXYDataLayerConfig[],
|
||||
getCompatibleCellValueActions?: IInterpreterRenderHandlers['getCompatibleCellValueActions']
|
||||
) => {
|
||||
if (!layers || !getCompatibleCellValueActions) {
|
||||
return [];
|
||||
}
|
||||
return await Promise.all(
|
||||
layers.map((layer) => {
|
||||
const data =
|
||||
layer.splitAccessors?.map((accessor) => {
|
||||
const column = layer.table.columns.find(({ id }) => id === accessor);
|
||||
return { columnMeta: column?.meta };
|
||||
}) ?? [];
|
||||
return (getCompatibleCellValueActions as GetCompatibleCellValueActions)(data);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const getXyChartRenderer = ({
|
||||
getStartDeps,
|
||||
}: XyChartRendererDeps): ExpressionRenderDefinition<XYChartProps> => ({
|
||||
|
|
@ -184,6 +209,11 @@ export const getXyChartRenderer = ({
|
|||
handlers.event({ name: 'brush', data });
|
||||
};
|
||||
|
||||
const layerCellValueActions = await getLayerCellValueActions(
|
||||
getDataLayers(config.args.layers),
|
||||
handlers.getCompatibleCellValueActions as GetCompatibleCellValueActions | undefined
|
||||
);
|
||||
|
||||
const renderComplete = () => {
|
||||
const executionContext = handlers.getExecutionContext();
|
||||
const containerType = extractContainerType(executionContext);
|
||||
|
|
@ -231,6 +261,7 @@ export const getXyChartRenderer = ({
|
|||
minInterval={calculateMinInterval(deps.data.datatableUtilities, config)}
|
||||
interactive={handlers.isInteractive()}
|
||||
onClickValue={onClickValue}
|
||||
layerCellValueActions={layerCellValueActions}
|
||||
onSelectRange={onSelectRange}
|
||||
renderMode={handlers.getRenderMode()}
|
||||
syncColors={config.syncColors}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,11 @@ import { DataPublicPluginSetup } from '@kbn/data-plugin/public';
|
|||
import { FieldFormatsSetup } from '@kbn/field-formats-plugin/public';
|
||||
import { ChartsPluginSetup } from '@kbn/charts-plugin/public';
|
||||
import { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
|
||||
import type { RangeSelectContext, ValueClickContext } from '@kbn/embeddable-plugin/public';
|
||||
import type {
|
||||
CellValueContext,
|
||||
RangeSelectContext,
|
||||
ValueClickContext,
|
||||
} from '@kbn/embeddable-plugin/public';
|
||||
import { ExpressionsServiceStart, ExpressionsSetup } from '@kbn/expressions-plugin/public';
|
||||
|
||||
export interface SetupDeps {
|
||||
|
|
@ -114,3 +118,16 @@ export interface AccessorConfig {
|
|||
color?: string;
|
||||
palette?: string[] | Array<{ color: string; stop: number }>;
|
||||
}
|
||||
|
||||
export interface CellValueAction {
|
||||
id: string;
|
||||
iconType: string;
|
||||
displayName: string;
|
||||
execute: (data: CellValueContext['data']) => void;
|
||||
}
|
||||
|
||||
export type LayerCellValueActions = CellValueAction[][];
|
||||
|
||||
export type GetCompatibleCellValueActions = (
|
||||
data: CellValueContext['data']
|
||||
) => Promise<CellValueAction[]>;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
panelNotificationTrigger,
|
||||
selectRangeTrigger,
|
||||
valueClickTrigger,
|
||||
cellValueTrigger,
|
||||
} from './lib';
|
||||
|
||||
/**
|
||||
|
|
@ -25,4 +26,5 @@ export const bootstrap = (uiActions: UiActionsSetup) => {
|
|||
uiActions.registerTrigger(panelNotificationTrigger);
|
||||
uiActions.registerTrigger(selectRangeTrigger);
|
||||
uiActions.registerTrigger(valueClickTrigger);
|
||||
uiActions.registerTrigger(cellValueTrigger);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export type {
|
|||
EmbeddableInstanceConfiguration,
|
||||
EmbeddableOutput,
|
||||
ValueClickContext,
|
||||
CellValueContext,
|
||||
RangeSelectContext,
|
||||
IContainer,
|
||||
IEmbeddable,
|
||||
|
|
@ -68,6 +69,8 @@ export {
|
|||
PanelNotFoundError,
|
||||
SELECT_RANGE_TRIGGER,
|
||||
VALUE_CLICK_TRIGGER,
|
||||
CELL_VALUE_TRIGGER,
|
||||
cellValueTrigger,
|
||||
ViewMode,
|
||||
withEmbeddableSubscription,
|
||||
genericEmbeddableInputIsEqual,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { Datatable } from '@kbn/expressions-plugin/common';
|
||||
import { Datatable, DatatableColumnMeta } from '@kbn/expressions-plugin/common';
|
||||
import { Trigger, RowClickContext } from '@kbn/ui-actions-plugin/public';
|
||||
import { IEmbeddable } from '..';
|
||||
|
||||
|
|
@ -29,6 +29,15 @@ export interface ValueClickContext<T extends IEmbeddable = IEmbeddable> {
|
|||
};
|
||||
}
|
||||
|
||||
export interface CellValueContext<T extends IEmbeddable = IEmbeddable> {
|
||||
embeddable: T;
|
||||
data: Array<{
|
||||
value?: any;
|
||||
eventId?: string;
|
||||
columnMeta?: DatatableColumnMeta;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface RangeSelectContext<T extends IEmbeddable = IEmbeddable> {
|
||||
embeddable?: T;
|
||||
data: {
|
||||
|
|
@ -99,6 +108,17 @@ export const valueClickTrigger: Trigger = {
|
|||
}),
|
||||
};
|
||||
|
||||
export const CELL_VALUE_TRIGGER = 'CELL_VALUE_TRIGGER';
|
||||
export const cellValueTrigger: Trigger = {
|
||||
id: CELL_VALUE_TRIGGER,
|
||||
title: i18n.translate('embeddableApi.cellValueTrigger.title', {
|
||||
defaultMessage: 'Cell value',
|
||||
}),
|
||||
description: i18n.translate('embeddableApi.cellValueTrigger.description', {
|
||||
defaultMessage: 'Actions appear in the cell value options on the visualization',
|
||||
}),
|
||||
};
|
||||
|
||||
export const isValueClickTriggerContext = (
|
||||
context: ChartActionContext
|
||||
): context is ValueClickContext => context.data && 'data' in context.data;
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export interface IInterpreterRenderHandlers {
|
|||
update(params: IInterpreterRenderUpdateParams): void;
|
||||
event(event: IInterpreterRenderEvent): void;
|
||||
hasCompatibleActions?(event: IInterpreterRenderEvent): Promise<boolean>;
|
||||
getCompatibleCellValueActions?(data: object[]): Promise<unknown[]>;
|
||||
getRenderMode(): RenderMode;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export class ExpressionLoader {
|
|||
syncTooltips: params?.syncTooltips,
|
||||
syncCursor: params?.syncCursor,
|
||||
hasCompatibleActions: params?.hasCompatibleActions,
|
||||
getCompatibleCellValueActions: params?.getCompatibleCellValueActions,
|
||||
executionContext: params?.executionContext,
|
||||
});
|
||||
this.render$ = this.renderHandler.render$;
|
||||
|
|
|
|||
|
|
@ -143,6 +143,28 @@ describe('ExpressionRenderHandler', () => {
|
|||
});
|
||||
});
|
||||
|
||||
it('should pass through provided "getCompatibleCellValueActions" to the expression renderer', async () => {
|
||||
const getCompatibleCellValueActions = jest.fn();
|
||||
const cellValueActionsParameter = [{ value: 'testValue' }];
|
||||
(getRenderersRegistry as jest.Mock).mockReturnValueOnce({ get: () => true });
|
||||
(getRenderersRegistry as jest.Mock).mockReturnValueOnce({
|
||||
get: () => ({
|
||||
render: (domNode: HTMLElement, config: unknown, handlers: IInterpreterRenderHandlers) => {
|
||||
handlers.getCompatibleCellValueActions!(cellValueActionsParameter);
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const expressionRenderHandler = new ExpressionRenderHandler(element, {
|
||||
onRenderError: mockMockErrorRenderFunction,
|
||||
getCompatibleCellValueActions,
|
||||
});
|
||||
expect(getCompatibleCellValueActions).toHaveBeenCalledTimes(0);
|
||||
await expressionRenderHandler.render({ type: 'render', as: 'something' });
|
||||
expect(getCompatibleCellValueActions).toHaveBeenCalledTimes(1);
|
||||
expect(getCompatibleCellValueActions).toHaveBeenCalledWith(cellValueActionsParameter);
|
||||
});
|
||||
|
||||
it('sends a next observable once rendering is complete', () => {
|
||||
const expressionRenderHandler = new ExpressionRenderHandler(element);
|
||||
expect.assertions(1);
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export interface ExpressionRenderHandlerParams {
|
|||
syncTooltips?: boolean;
|
||||
interactive?: boolean;
|
||||
hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise<boolean>;
|
||||
getCompatibleCellValueActions?: (data: object[]) => Promise<unknown[]>;
|
||||
executionContext?: KibanaExecutionContext;
|
||||
}
|
||||
|
||||
|
|
@ -63,6 +64,7 @@ export class ExpressionRenderHandler {
|
|||
syncCursor,
|
||||
interactive,
|
||||
hasCompatibleActions = async () => false,
|
||||
getCompatibleCellValueActions = async () => [],
|
||||
executionContext,
|
||||
}: ExpressionRenderHandlerParams = {}
|
||||
) {
|
||||
|
|
@ -115,6 +117,7 @@ export class ExpressionRenderHandler {
|
|||
return interactive ?? true;
|
||||
},
|
||||
hasCompatibleActions,
|
||||
getCompatibleCellValueActions,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export interface IExpressionLoaderParams {
|
|||
syncCursor?: boolean;
|
||||
syncTooltips?: boolean;
|
||||
hasCompatibleActions?: ExpressionRenderHandlerParams['hasCompatibleActions'];
|
||||
getCompatibleCellValueActions?: ExpressionRenderHandlerParams['getCompatibleCellValueActions'];
|
||||
executionContext?: KibanaExecutionContext;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -52,8 +52,11 @@ import {
|
|||
ReferenceOrValueEmbeddable,
|
||||
SelfStyledEmbeddable,
|
||||
FilterableEmbeddable,
|
||||
cellValueTrigger,
|
||||
CELL_VALUE_TRIGGER,
|
||||
type CellValueContext,
|
||||
} from '@kbn/embeddable-plugin/public';
|
||||
import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
|
||||
import type { Action, UiActionsStart } from '@kbn/ui-actions-plugin/public';
|
||||
import type { DataViewsContract, DataView } from '@kbn/data-views-plugin/public';
|
||||
import type {
|
||||
Capabilities,
|
||||
|
|
@ -79,6 +82,7 @@ import {
|
|||
DatasourceMap,
|
||||
Datasource,
|
||||
IndexPatternMap,
|
||||
GetCompatibleCellValueActions,
|
||||
} from '../types';
|
||||
|
||||
import { getEditPath, DOC_TYPE } from '../../common';
|
||||
|
|
@ -732,6 +736,7 @@ export class Embeddable
|
|||
syncTooltips={input.syncTooltips}
|
||||
syncCursor={input.syncCursor}
|
||||
hasCompatibleActions={this.hasCompatibleActions}
|
||||
getCompatibleCellValueActions={this.getCompatibleCellValueActions}
|
||||
className={input.className}
|
||||
style={input.style}
|
||||
executionContext={this.getExecutionContext()}
|
||||
|
|
@ -779,6 +784,27 @@ export class Embeddable
|
|||
return false;
|
||||
};
|
||||
|
||||
private readonly getCompatibleCellValueActions: GetCompatibleCellValueActions = async (data) => {
|
||||
const { getTriggerCompatibleActions } = this.deps;
|
||||
if (getTriggerCompatibleActions) {
|
||||
const embeddable = this;
|
||||
const actions: Array<Action<CellValueContext>> = await getTriggerCompatibleActions(
|
||||
CELL_VALUE_TRIGGER,
|
||||
{ data, embeddable }
|
||||
);
|
||||
return actions
|
||||
.sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
|
||||
.map((action) => ({
|
||||
id: action.id,
|
||||
iconType: action.getIconType({ embeddable, data, trigger: cellValueTrigger })!,
|
||||
displayName: action.getDisplayName({ embeddable, data, trigger: cellValueTrigger }),
|
||||
execute: (cellData) =>
|
||||
action.execute({ embeddable, data: cellData, trigger: cellValueTrigger }),
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
/**
|
||||
* Combines the embeddable context with the saved object context, and replaces
|
||||
* any references to index patterns
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import { FormattedMessage } from '@kbn/i18n-react';
|
|||
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiIcon, EuiEmptyPrompt } from '@elastic/eui';
|
||||
import {
|
||||
ExpressionRendererEvent,
|
||||
ReactExpressionRendererType,
|
||||
ReactExpressionRendererProps,
|
||||
ReactExpressionRendererType,
|
||||
} from '@kbn/expressions-plugin/public';
|
||||
import type { KibanaExecutionContext } from '@kbn/core/public';
|
||||
import { ExecutionContextSearch } from '@kbn/data-plugin/public';
|
||||
|
|
@ -41,6 +41,7 @@ export interface ExpressionWrapperProps {
|
|||
syncTooltips?: boolean;
|
||||
syncCursor?: boolean;
|
||||
hasCompatibleActions?: ReactExpressionRendererProps['hasCompatibleActions'];
|
||||
getCompatibleCellValueActions?: ReactExpressionRendererProps['getCompatibleCellValueActions'];
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
canEdit: boolean;
|
||||
|
|
@ -116,6 +117,7 @@ export function ExpressionWrapper({
|
|||
syncTooltips,
|
||||
syncCursor,
|
||||
hasCompatibleActions,
|
||||
getCompatibleCellValueActions,
|
||||
style,
|
||||
className,
|
||||
errors,
|
||||
|
|
@ -168,6 +170,7 @@ export function ExpressionWrapper({
|
|||
}}
|
||||
onEvent={handleEvent}
|
||||
hasCompatibleActions={hasCompatibleActions}
|
||||
getCompatibleCellValueActions={getCompatibleCellValueActions}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@ export type { LensEmbeddableInput, LensSavedObjectAttributes, Embeddable } from
|
|||
export type { ChartInfo } from './chart_info_api';
|
||||
|
||||
export { layerTypes } from '../common/layer_types';
|
||||
export { LENS_EMBEDDABLE_TYPE } from '../common/constants';
|
||||
|
||||
export type { LensPublicStart, LensPublicSetup } from './plugin';
|
||||
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ import type { MutableRefObject } from 'react';
|
|||
import type { Filter, TimeRange } from '@kbn/es-query';
|
||||
import type {
|
||||
ExpressionAstExpression,
|
||||
ExpressionRendererEvent,
|
||||
IInterpreterRenderHandlers,
|
||||
Datatable,
|
||||
ExpressionRendererEvent,
|
||||
} from '@kbn/expressions-plugin/public';
|
||||
import type { Configuration, NavigateToLensContext } from '@kbn/visualizations-plugin/common';
|
||||
import { Adapters } from '@kbn/inspector-plugin/public';
|
||||
|
|
@ -35,6 +35,7 @@ import type { EuiButtonIconProps } from '@elastic/eui';
|
|||
import { SearchRequest } from '@kbn/data-plugin/public';
|
||||
import { estypes } from '@elastic/elasticsearch';
|
||||
import React from 'react';
|
||||
import { CellValueContext } from '@kbn/embeddable-plugin/public';
|
||||
import type { DraggingIdentifier, DragDropIdentifier, DragContextState } from './drag_drop';
|
||||
import type { DateRange, LayerType, SortingHint } from '../common';
|
||||
import type {
|
||||
|
|
@ -1335,7 +1336,7 @@ export function isLensEditEvent<T extends LensEditSupportedActions>(
|
|||
|
||||
export function isLensTableRowContextMenuClickEvent(
|
||||
event: ExpressionRendererEvent
|
||||
): event is BrushTriggerEvent {
|
||||
): event is LensTableRowContextMenuEvent {
|
||||
return event.name === 'tableRowContextMenuClick';
|
||||
}
|
||||
|
||||
|
|
@ -1376,3 +1377,14 @@ export type LensTopNavMenuEntryGenerator = (props: {
|
|||
initialContext?: VisualizeFieldContext | VisualizeEditorContext;
|
||||
currentDoc: Document | undefined;
|
||||
}) => undefined | TopNavMenuData;
|
||||
|
||||
export interface LensCellValueAction {
|
||||
id: string;
|
||||
iconType: string;
|
||||
displayName: string;
|
||||
execute: (data: CellValueContext['data']) => void;
|
||||
}
|
||||
|
||||
export type GetCompatibleCellValueActions = (
|
||||
data: CellValueContext['data']
|
||||
) => Promise<LensCellValueAction[]>;
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ exports[`DatatableComponent it renders actions column when there are row actions
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -141,6 +141,7 @@ exports[`DatatableComponent it renders actions column when there are row actions
|
|||
</div>,
|
||||
"displayAsText": "a",
|
||||
"id": "a",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -174,7 +175,7 @@ exports[`DatatableComponent it renders actions column when there are row actions
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -190,6 +191,7 @@ exports[`DatatableComponent it renders actions column when there are row actions
|
|||
</div>,
|
||||
"displayAsText": "b",
|
||||
"id": "b",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -223,7 +225,7 @@ exports[`DatatableComponent it renders actions column when there are row actions
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -239,6 +241,7 @@ exports[`DatatableComponent it renders actions column when there are row actions
|
|||
</div>,
|
||||
"displayAsText": "c",
|
||||
"id": "c",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -400,7 +403,7 @@ exports[`DatatableComponent it renders custom row height if set to another value
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -416,6 +419,7 @@ exports[`DatatableComponent it renders custom row height if set to another value
|
|||
</div>,
|
||||
"displayAsText": "a",
|
||||
"id": "a",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -449,7 +453,7 @@ exports[`DatatableComponent it renders custom row height if set to another value
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -465,6 +469,7 @@ exports[`DatatableComponent it renders custom row height if set to another value
|
|||
</div>,
|
||||
"displayAsText": "b",
|
||||
"id": "b",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -498,7 +503,7 @@ exports[`DatatableComponent it renders custom row height if set to another value
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -514,6 +519,7 @@ exports[`DatatableComponent it renders custom row height if set to another value
|
|||
</div>,
|
||||
"displayAsText": "c",
|
||||
"id": "c",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -668,7 +674,7 @@ exports[`DatatableComponent it renders the title and value 1`] = `
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -684,6 +690,7 @@ exports[`DatatableComponent it renders the title and value 1`] = `
|
|||
</div>,
|
||||
"displayAsText": "a",
|
||||
"id": "a",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -717,7 +724,7 @@ exports[`DatatableComponent it renders the title and value 1`] = `
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -733,6 +740,7 @@ exports[`DatatableComponent it renders the title and value 1`] = `
|
|||
</div>,
|
||||
"displayAsText": "b",
|
||||
"id": "b",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -766,7 +774,7 @@ exports[`DatatableComponent it renders the title and value 1`] = `
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -782,6 +790,7 @@ exports[`DatatableComponent it renders the title and value 1`] = `
|
|||
</div>,
|
||||
"displayAsText": "c",
|
||||
"id": "c",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -938,7 +947,7 @@ exports[`DatatableComponent it should render hide, reset, and sort actions on he
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -954,6 +963,7 @@ exports[`DatatableComponent it should render hide, reset, and sort actions on he
|
|||
</div>,
|
||||
"displayAsText": "a",
|
||||
"id": "a",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -987,7 +997,7 @@ exports[`DatatableComponent it should render hide, reset, and sort actions on he
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -1003,6 +1013,7 @@ exports[`DatatableComponent it should render hide, reset, and sort actions on he
|
|||
</div>,
|
||||
"displayAsText": "b",
|
||||
"id": "b",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
Object {
|
||||
"actions": Object {
|
||||
|
|
@ -1036,7 +1047,7 @@ exports[`DatatableComponent it should render hide, reset, and sort actions on he
|
|||
"label": "Sort descending",
|
||||
},
|
||||
},
|
||||
"cellActions": undefined,
|
||||
"cellActions": Array [],
|
||||
"display": <div
|
||||
css={
|
||||
Object {
|
||||
|
|
@ -1052,6 +1063,7 @@ exports[`DatatableComponent it should render hide, reset, and sort actions on he
|
|||
</div>,
|
||||
"displayAsText": "c",
|
||||
"id": "c",
|
||||
"visibleCellActions": 5,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
/*
|
||||
* 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 { EuiDataGridColumnCellAction, EuiDataGridColumnCellActionProps } from '@elastic/eui';
|
||||
import type { Datatable } from '@kbn/expressions-plugin/public';
|
||||
import { shallow } from 'enzyme';
|
||||
import { ReactNode } from 'react';
|
||||
import { FormatFactory } from '../../../../common/types';
|
||||
import type { LensCellValueAction } from '../../../types';
|
||||
import { createGridColumns } from './columns';
|
||||
|
||||
const table: Datatable = {
|
||||
type: 'datatable',
|
||||
columns: [
|
||||
{
|
||||
id: 'a',
|
||||
name: 'a',
|
||||
meta: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
],
|
||||
rows: [{ a: 123 }],
|
||||
};
|
||||
const visibleColumns = ['a'];
|
||||
const cellValueAction: LensCellValueAction = {
|
||||
displayName: 'Test',
|
||||
id: 'test',
|
||||
iconType: 'test-icon',
|
||||
execute: () => {},
|
||||
};
|
||||
|
||||
type CreateGridColumnsParams = Parameters<typeof createGridColumns>;
|
||||
const callCreateGridColumns = (
|
||||
params: Partial<{
|
||||
bucketColumns: CreateGridColumnsParams[0];
|
||||
table: CreateGridColumnsParams[1];
|
||||
handleFilterClick: CreateGridColumnsParams[2];
|
||||
handleTransposedColumnClick: CreateGridColumnsParams[3];
|
||||
isReadOnly: CreateGridColumnsParams[4];
|
||||
columnConfig: CreateGridColumnsParams[5];
|
||||
visibleColumns: CreateGridColumnsParams[6];
|
||||
formatFactory: CreateGridColumnsParams[7];
|
||||
onColumnResize: CreateGridColumnsParams[8];
|
||||
onColumnHide: CreateGridColumnsParams[9];
|
||||
alignments: CreateGridColumnsParams[10];
|
||||
headerRowHeight: CreateGridColumnsParams[11];
|
||||
headerRowLines: CreateGridColumnsParams[12];
|
||||
columnCellValueActions: CreateGridColumnsParams[13];
|
||||
closeCellPopover: CreateGridColumnsParams[14];
|
||||
columnFilterable: CreateGridColumnsParams[15];
|
||||
}> = {}
|
||||
) =>
|
||||
createGridColumns(
|
||||
params.bucketColumns ?? [],
|
||||
params.table ?? table,
|
||||
params.handleFilterClick,
|
||||
params.handleTransposedColumnClick,
|
||||
params.isReadOnly ?? false,
|
||||
params.columnConfig ?? { columns: [], sortingColumnId: undefined, sortingDirection: 'none' },
|
||||
params.visibleColumns ?? visibleColumns,
|
||||
params.formatFactory ?? (((x: unknown) => ({ convert: () => x })) as unknown as FormatFactory),
|
||||
params.onColumnResize ?? jest.fn(),
|
||||
params.onColumnHide ?? jest.fn(),
|
||||
params.alignments ?? {},
|
||||
params.headerRowHeight ?? 'auto',
|
||||
params.headerRowLines ?? 1,
|
||||
params.columnCellValueActions ?? [],
|
||||
params.closeCellPopover ?? jest.fn(),
|
||||
params.columnFilterable ?? []
|
||||
);
|
||||
|
||||
const renderCellAction = (
|
||||
cellActions: EuiDataGridColumnCellAction[] | undefined,
|
||||
index: number
|
||||
) => {
|
||||
if (!cellActions?.[index]) {
|
||||
return null;
|
||||
}
|
||||
const cellAction = (cellActions[index] as (props: EuiDataGridColumnCellActionProps) => ReactNode)(
|
||||
{
|
||||
rowIndex: 0,
|
||||
columnId: 'a',
|
||||
Component: () => <></>,
|
||||
} as unknown as EuiDataGridColumnCellActionProps
|
||||
);
|
||||
return shallow(<div>{cellAction}</div>);
|
||||
};
|
||||
|
||||
describe('getContentData', () => {
|
||||
describe('cellActions', () => {
|
||||
it('should include filter actions', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
handleFilterClick: () => {},
|
||||
columnFilterable: [true],
|
||||
});
|
||||
expect(cellActions).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should not include filter actions if column not filterable', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
handleFilterClick: () => {},
|
||||
columnFilterable: [false],
|
||||
});
|
||||
expect(cellActions).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should not include filter actions if no filter handler defined', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
columnFilterable: [true],
|
||||
});
|
||||
expect(cellActions).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should include cell value actions', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
columnCellValueActions: [[cellValueAction]],
|
||||
});
|
||||
expect(cellActions).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should include all actions', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
handleFilterClick: () => {},
|
||||
columnFilterable: [true],
|
||||
columnCellValueActions: [[cellValueAction]],
|
||||
});
|
||||
expect(cellActions).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should render filterFor as first action', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
handleFilterClick: () => {},
|
||||
columnFilterable: [true],
|
||||
columnCellValueActions: [[cellValueAction]],
|
||||
});
|
||||
const wrapper = renderCellAction(cellActions, 0);
|
||||
expect(wrapper?.find('Component').prop('data-test-subj')).toEqual('lensDatatableFilterFor');
|
||||
});
|
||||
|
||||
it('should render filterOut as second action', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
handleFilterClick: () => {},
|
||||
columnFilterable: [true],
|
||||
columnCellValueActions: [[cellValueAction]],
|
||||
});
|
||||
const wrapper = renderCellAction(cellActions, 1);
|
||||
expect(wrapper?.find('Component').prop('data-test-subj')).toEqual('lensDatatableFilterOut');
|
||||
});
|
||||
|
||||
it('should render cellValue actions at the end', () => {
|
||||
const [{ cellActions }] = callCreateGridColumns({
|
||||
handleFilterClick: () => {},
|
||||
columnFilterable: [true],
|
||||
columnCellValueActions: [[cellValueAction]],
|
||||
});
|
||||
const wrapper = renderCellAction(cellActions, 2);
|
||||
expect(wrapper?.find('Component').prop('data-test-subj')).toEqual(
|
||||
'lensDatatableCellAction-test'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -20,6 +20,7 @@ import type {
|
|||
} from '@kbn/expressions-plugin/common';
|
||||
import type { FormatFactory } from '../../../../common';
|
||||
import type { ColumnConfig } from '../../../../common/expressions';
|
||||
import { LensCellValueAction } from '../../../types';
|
||||
|
||||
export const createGridColumns = (
|
||||
bucketColumns: string[],
|
||||
|
|
@ -48,6 +49,7 @@ export const createGridColumns = (
|
|||
alignments: Record<string, 'left' | 'right' | 'center'>,
|
||||
headerRowHeight: 'auto' | 'single' | 'custom',
|
||||
headerRowLines: number,
|
||||
columnCellValueActions: LensCellValueAction[][] | undefined,
|
||||
closeCellPopover?: Function,
|
||||
columnFilterable?: boolean[]
|
||||
) => {
|
||||
|
|
@ -77,87 +79,115 @@ export const createGridColumns = (
|
|||
|
||||
const columnArgs = columnConfig.columns.find(({ columnId }) => columnId === field);
|
||||
|
||||
const cellActions =
|
||||
filterable && handleFilterClick && !columnArgs?.oneClickFilter
|
||||
? [
|
||||
({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
|
||||
const { rowValue, contentsIsDefined, cellContent } = getContentData({
|
||||
rowIndex,
|
||||
columnId,
|
||||
});
|
||||
const cellActions = [];
|
||||
if (filterable && handleFilterClick && !columnArgs?.oneClickFilter) {
|
||||
cellActions.push(
|
||||
({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
|
||||
const { rowValue, contentsIsDefined, cellContent } = getContentData({
|
||||
rowIndex,
|
||||
columnId,
|
||||
});
|
||||
|
||||
const filterForText = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterForValueText',
|
||||
{
|
||||
defaultMessage: 'Filter for value',
|
||||
}
|
||||
);
|
||||
const filterForAriaLabel = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterForValueAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Filter for value: {cellContent}',
|
||||
values: {
|
||||
cellContent,
|
||||
},
|
||||
}
|
||||
);
|
||||
const filterForText = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterForValueText',
|
||||
{
|
||||
defaultMessage: 'Filter for value',
|
||||
}
|
||||
);
|
||||
const filterForAriaLabel = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterForValueAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Filter for value: {cellContent}',
|
||||
values: {
|
||||
cellContent,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
contentsIsDefined && (
|
||||
<Component
|
||||
aria-label={filterForAriaLabel}
|
||||
data-test-subj="lensDatatableFilterFor"
|
||||
onClick={() => {
|
||||
handleFilterClick(field, rowValue, colIndex, rowIndex);
|
||||
closeCellPopover?.();
|
||||
}}
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{filterForText}
|
||||
</Component>
|
||||
)
|
||||
);
|
||||
},
|
||||
({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
|
||||
const { rowValue, contentsIsDefined, cellContent } = getContentData({
|
||||
rowIndex,
|
||||
columnId,
|
||||
});
|
||||
return (
|
||||
contentsIsDefined && (
|
||||
<Component
|
||||
aria-label={filterForAriaLabel}
|
||||
data-test-subj="lensDatatableFilterFor"
|
||||
onClick={() => {
|
||||
handleFilterClick(field, rowValue, colIndex, rowIndex);
|
||||
closeCellPopover?.();
|
||||
}}
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{filterForText}
|
||||
</Component>
|
||||
)
|
||||
);
|
||||
},
|
||||
({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
|
||||
const { rowValue, contentsIsDefined, cellContent } = getContentData({
|
||||
rowIndex,
|
||||
columnId,
|
||||
});
|
||||
|
||||
const filterOutText = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterOutValueText',
|
||||
{
|
||||
defaultMessage: 'Filter out value',
|
||||
}
|
||||
);
|
||||
const filterOutAriaLabel = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterOutValueAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Filter out value: {cellContent}',
|
||||
values: {
|
||||
cellContent,
|
||||
},
|
||||
}
|
||||
);
|
||||
const filterOutText = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterOutValueText',
|
||||
{
|
||||
defaultMessage: 'Filter out value',
|
||||
}
|
||||
);
|
||||
const filterOutAriaLabel = i18n.translate(
|
||||
'xpack.lens.table.tableCellFilter.filterOutValueAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Filter out value: {cellContent}',
|
||||
values: {
|
||||
cellContent,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
contentsIsDefined && (
|
||||
<Component
|
||||
data-test-subj="lensDatatableFilterOut"
|
||||
aria-label={filterOutAriaLabel}
|
||||
onClick={() => {
|
||||
handleFilterClick(field, rowValue, colIndex, rowIndex, true);
|
||||
closeCellPopover?.();
|
||||
}}
|
||||
iconType="minusInCircle"
|
||||
>
|
||||
{filterOutText}
|
||||
</Component>
|
||||
)
|
||||
);
|
||||
},
|
||||
]
|
||||
: undefined;
|
||||
return (
|
||||
contentsIsDefined && (
|
||||
<Component
|
||||
data-test-subj="lensDatatableFilterOut"
|
||||
aria-label={filterOutAriaLabel}
|
||||
onClick={() => {
|
||||
handleFilterClick(field, rowValue, colIndex, rowIndex, true);
|
||||
closeCellPopover?.();
|
||||
}}
|
||||
iconType="minusInCircle"
|
||||
>
|
||||
{filterOutText}
|
||||
</Component>
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Add all the column compatible cell actions
|
||||
const compatibleCellActions = columnCellValueActions?.[colIndex] ?? [];
|
||||
compatibleCellActions.forEach((action) => {
|
||||
cellActions.push(({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
|
||||
const rowValue = table.rows[rowIndex][columnId];
|
||||
const columnMeta = columnsReverseLookup[columnId].meta;
|
||||
const data = {
|
||||
value: rowValue,
|
||||
columnMeta,
|
||||
};
|
||||
return (
|
||||
rowValue != null && (
|
||||
<Component
|
||||
aria-label={action.displayName}
|
||||
data-test-subj={`lensDatatableCellAction-${action.id}`}
|
||||
onClick={() => {
|
||||
action.execute([data]);
|
||||
closeCellPopover?.();
|
||||
}}
|
||||
iconType={action.iconType}
|
||||
>
|
||||
{action.displayName}
|
||||
</Component>
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const isTransposed = Boolean(columnArgs?.originalColumnId);
|
||||
const initialWidth = columnArgs?.width;
|
||||
|
|
@ -235,6 +265,7 @@ export const createGridColumns = (
|
|||
const columnDefinition: EuiDataGridColumn = {
|
||||
id: field,
|
||||
cellActions,
|
||||
visibleCellActions: 5,
|
||||
display: <div css={columnStyle}>{name}</div>,
|
||||
displayAsText: name,
|
||||
actions: {
|
||||
|
|
|
|||
|
|
@ -202,6 +202,11 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
|
|||
[firstTableRef, onClickValue, isInteractive]
|
||||
);
|
||||
|
||||
const columnCellValueActions = useMemo(
|
||||
() => (isInteractive ? props.columnCellValueActions : undefined),
|
||||
[props.columnCellValueActions, isInteractive]
|
||||
);
|
||||
|
||||
const handleTransposedColumnClick = useMemo(
|
||||
() =>
|
||||
isInteractive
|
||||
|
|
@ -310,6 +315,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
|
|||
alignments,
|
||||
headerRowHeight,
|
||||
headerRowLines,
|
||||
columnCellValueActions,
|
||||
dataGridRef.current?.closeCellPopover,
|
||||
props.columnFilterable
|
||||
),
|
||||
|
|
@ -327,6 +333,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
|
|||
alignments,
|
||||
headerRowHeight,
|
||||
headerRowLines,
|
||||
columnCellValueActions,
|
||||
props.columnFilterable,
|
||||
]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@ import type { PaletteRegistry } from '@kbn/coloring';
|
|||
import { CustomPaletteState } from '@kbn/charts-plugin/public';
|
||||
import type { IAggType } from '@kbn/data-plugin/public';
|
||||
import type { Datatable, RenderMode } from '@kbn/expressions-plugin/common';
|
||||
import type { ILensInterpreterRenderHandlers, LensEditEvent } from '../../../types';
|
||||
import type {
|
||||
ILensInterpreterRenderHandlers,
|
||||
LensCellValueAction,
|
||||
LensEditEvent,
|
||||
} from '../../../types';
|
||||
import {
|
||||
LENS_EDIT_SORT_ACTION,
|
||||
LENS_EDIT_RESIZE_ACTION,
|
||||
|
|
@ -58,6 +62,11 @@ export type DatatableRenderProps = DatatableProps & {
|
|||
* ROW_CLICK_TRIGGER actions attached to it, otherwise false.
|
||||
*/
|
||||
rowHasRowClickTriggerActions?: boolean[];
|
||||
/**
|
||||
* Array of LensCellValueAction to be rendered on each column by id
|
||||
* uses CELL_VALUE_TRIGGER actions attached.
|
||||
*/
|
||||
columnCellValueActions?: LensCellValueAction[][];
|
||||
columnFilterable?: boolean[];
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,20 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import type { DatatableProps } from '../../../common/expressions';
|
||||
import { createMockExecutionContext } from '@kbn/expressions-plugin/common/mocks';
|
||||
import type { DatatableProps } from '../../../common/expressions';
|
||||
import type { FormatFactory } from '../../../common';
|
||||
import { getDatatable } from '../../../common/expressions';
|
||||
import { getColumnCellValueActions } from './expression';
|
||||
import type { Datatable } from '@kbn/expressions-plugin/common';
|
||||
import { LensCellValueAction } from '../../types';
|
||||
|
||||
const cellValueAction: LensCellValueAction = {
|
||||
displayName: 'Test',
|
||||
id: 'test',
|
||||
iconType: 'test-icon',
|
||||
execute: () => {},
|
||||
};
|
||||
function sampleArgs() {
|
||||
const indexPatternId = 'indexPatternId';
|
||||
const data: Datatable = {
|
||||
|
|
@ -93,4 +100,26 @@ describe('datatable_expression', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getColumnCellValueActions', () => {
|
||||
it('should return column cell value actions', async () => {
|
||||
const config = sampleArgs();
|
||||
const result = await getColumnCellValueActions(config, async () => [cellValueAction]);
|
||||
expect(result).toEqual([[cellValueAction], [cellValueAction], [cellValueAction]]);
|
||||
});
|
||||
|
||||
it('should return empty actions if no data passed', async () => {
|
||||
const result = await getColumnCellValueActions(
|
||||
{ data: null } as unknown as DatatableProps,
|
||||
async () => [cellValueAction]
|
||||
);
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
|
||||
it('should return empty actions if no getCompatibleCellValueActions handler passed', async () => {
|
||||
const config = sampleArgs();
|
||||
const result = await getColumnCellValueActions(config, undefined);
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,11 +21,15 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
|||
import { trackUiCounterEvents } from '../../lens_ui_telemetry';
|
||||
import { DatatableComponent } from './components/table_basic';
|
||||
|
||||
import type { ILensInterpreterRenderHandlers } from '../../types';
|
||||
import type {
|
||||
GetCompatibleCellValueActions,
|
||||
ILensInterpreterRenderHandlers,
|
||||
LensCellValueAction,
|
||||
} from '../../types';
|
||||
import type { FormatFactory } from '../../../common';
|
||||
import type { DatatableProps } from '../../../common/expressions';
|
||||
|
||||
async function columnsFilterable(table: Datatable, handlers: IInterpreterRenderHandlers) {
|
||||
async function getColumnsFilterable(table: Datatable, handlers: IInterpreterRenderHandlers) {
|
||||
if (!table.rows.length) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -49,6 +53,27 @@ async function columnsFilterable(table: Datatable, handlers: IInterpreterRenderH
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the compatible CELL_VALUE_TRIGGER actions indexed by column
|
||||
**/
|
||||
export async function getColumnCellValueActions(
|
||||
config: DatatableProps,
|
||||
getCompatibleCellValueActions?: ILensInterpreterRenderHandlers['getCompatibleCellValueActions']
|
||||
): Promise<LensCellValueAction[][]> {
|
||||
if (!config.data || !getCompatibleCellValueActions) {
|
||||
return [];
|
||||
}
|
||||
return Promise.all(
|
||||
config.data.columns.map(({ meta: columnMeta }) => {
|
||||
try {
|
||||
return (getCompatibleCellValueActions as GetCompatibleCellValueActions)([{ columnMeta }]);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
export const getDatatableRenderer = (dependencies: {
|
||||
formatFactory: FormatFactory;
|
||||
getType: Promise<(name: string) => IAggType>;
|
||||
|
|
@ -71,7 +96,7 @@ export const getDatatableRenderer = (dependencies: {
|
|||
handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
|
||||
|
||||
const resolvedGetType = await dependencies.getType;
|
||||
const { hasCompatibleActions, isInteractive } = handlers;
|
||||
const { hasCompatibleActions, isInteractive, getCompatibleCellValueActions } = handlers;
|
||||
|
||||
const renderComplete = () => {
|
||||
trackUiCounterEvents('table', handlers.getExecutionContext());
|
||||
|
|
@ -104,6 +129,11 @@ export const getDatatableRenderer = (dependencies: {
|
|||
}
|
||||
}
|
||||
|
||||
const [columnCellValueActions, columnsFilterable] = await Promise.all([
|
||||
getColumnCellValueActions(config, getCompatibleCellValueActions),
|
||||
getColumnsFilterable(config.data, handlers),
|
||||
]);
|
||||
|
||||
ReactDOM.render(
|
||||
<KibanaThemeProvider theme$={dependencies.theme.theme$}>
|
||||
<I18nProvider>
|
||||
|
|
@ -115,7 +145,8 @@ export const getDatatableRenderer = (dependencies: {
|
|||
paletteService={dependencies.paletteService}
|
||||
getType={resolvedGetType}
|
||||
rowHasRowClickTriggerActions={rowHasRowClickTriggerActions}
|
||||
columnFilterable={await columnsFilterable(config.data, handlers)}
|
||||
columnCellValueActions={columnCellValueActions}
|
||||
columnFilterable={columnsFilterable}
|
||||
interactive={isInteractive()}
|
||||
uiSettings={dependencies.uiSettings}
|
||||
renderComplete={renderComplete}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,227 @@
|
|||
/*
|
||||
* 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 type { CellValueContext, EmbeddableInput, IEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { LENS_EMBEDDABLE_TYPE } from '@kbn/lens-plugin/public';
|
||||
import type { SecurityAppStore } from '../../common/store/types';
|
||||
import { AddToTimelineAction } from './add_to_timeline_action';
|
||||
import { KibanaServices } from '../../common/lib/kibana';
|
||||
import { APP_UI_ID } from '../../../common/constants';
|
||||
import { Subject } from 'rxjs';
|
||||
import { TimelineId } from '../../../common/types';
|
||||
import { addProvider, showTimeline } from '../../timelines/store/timeline/actions';
|
||||
|
||||
jest.mock('../../common/lib/kibana');
|
||||
const currentAppId$ = new Subject<string | undefined>();
|
||||
KibanaServices.get().application.currentAppId$ = currentAppId$.asObservable();
|
||||
const mockWarningToast = jest.fn();
|
||||
KibanaServices.get().notifications.toasts.addWarning = mockWarningToast;
|
||||
|
||||
const mockDispatch = jest.fn();
|
||||
const store = {
|
||||
dispatch: mockDispatch,
|
||||
} as unknown as SecurityAppStore;
|
||||
|
||||
class MockEmbeddable {
|
||||
public type;
|
||||
constructor(type: string) {
|
||||
this.type = type;
|
||||
}
|
||||
getFilters() {}
|
||||
getQuery() {}
|
||||
}
|
||||
|
||||
const lensEmbeddable = new MockEmbeddable(LENS_EMBEDDABLE_TYPE) as unknown as IEmbeddable;
|
||||
|
||||
const columnMeta = {
|
||||
field: 'user.name',
|
||||
type: 'string' as const,
|
||||
source: 'esaggs',
|
||||
sourceParams: { indexPatternId: 'some-pattern-id' },
|
||||
};
|
||||
const value = 'the value';
|
||||
const eventId = 'event_1';
|
||||
const data: CellValueContext['data'] = [{ columnMeta, value, eventId }];
|
||||
|
||||
describe('AddToTimelineAction', () => {
|
||||
const addToTimelineAction = new AddToTimelineAction(store);
|
||||
|
||||
beforeEach(() => {
|
||||
currentAppId$.next(APP_UI_ID);
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should return display name', () => {
|
||||
expect(addToTimelineAction.getDisplayName()).toEqual('Add to timeline');
|
||||
});
|
||||
|
||||
it('should return icon type', () => {
|
||||
expect(addToTimelineAction.getIconType()).toEqual('timeline');
|
||||
});
|
||||
|
||||
describe('isCompatible', () => {
|
||||
it('should return false if error embeddable', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: new ErrorEmbeddable('some error', {} as EmbeddableInput),
|
||||
data,
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if not lens embeddable', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: new MockEmbeddable('not_lens') as unknown as IEmbeddable,
|
||||
data,
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data is empty', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data do not have column meta', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{}],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data column meta do not have field', async () => {
|
||||
const { field, ...testColumnMeta } = columnMeta;
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: testColumnMeta }],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data column meta field is blacklisted', async () => {
|
||||
const testColumnMeta = { ...columnMeta, field: 'signal.reason' };
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: testColumnMeta }],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data column meta field not filterable', async () => {
|
||||
let testColumnMeta = { ...columnMeta, source: '' };
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: testColumnMeta }],
|
||||
})
|
||||
).toEqual(false);
|
||||
|
||||
testColumnMeta = { ...columnMeta, sourceParams: { indexPatternId: '' } };
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: testColumnMeta }],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if not in Security', async () => {
|
||||
currentAppId$.next('not security');
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data,
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return true if everything is okay', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data,
|
||||
})
|
||||
).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('execute', () => {
|
||||
it('should execute normally', async () => {
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data,
|
||||
});
|
||||
expect(mockDispatch).toHaveBeenCalledTimes(2);
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: addProvider.type,
|
||||
payload: {
|
||||
id: TimelineId.active,
|
||||
providers: [
|
||||
{
|
||||
and: [],
|
||||
enabled: true,
|
||||
excluded: false,
|
||||
id: 'event-details-value-default-draggable-timeline-1-event_1-user_name-0-the value',
|
||||
kqlQuery: '',
|
||||
name: 'user.name',
|
||||
queryMatch: {
|
||||
field: 'user.name',
|
||||
operator: ':',
|
||||
value: 'the value',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: showTimeline.type,
|
||||
payload: {
|
||||
id: TimelineId.active,
|
||||
show: true,
|
||||
},
|
||||
});
|
||||
expect(mockWarningToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show warning if no provider added', async () => {
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [],
|
||||
});
|
||||
expect(mockDispatch).not.toHaveBeenCalled();
|
||||
expect(mockWarningToast).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show warning if no value in the data', async () => {
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta }],
|
||||
});
|
||||
expect(mockDispatch).not.toHaveBeenCalled();
|
||||
expect(mockWarningToast).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show warning if no field in the data column meta', async () => {
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: { ...columnMeta, field: undefined }, value }],
|
||||
});
|
||||
expect(mockDispatch).not.toHaveBeenCalled();
|
||||
expect(mockWarningToast).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
* 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 type { CellValueContext } from '@kbn/embeddable-plugin/public';
|
||||
import { isErrorEmbeddable, isFilterableEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { Action } from '@kbn/ui-actions-plugin/public';
|
||||
import { KibanaServices } from '../../common/lib/kibana';
|
||||
import type { SecurityAppStore } from '../../common/store/types';
|
||||
import { addProvider, showTimeline } from '../../timelines/store/timeline/actions';
|
||||
import type { DataProvider } from '../../../common/types';
|
||||
import { TimelineId } from '../../../common/types';
|
||||
import { createDataProviders } from './data_provider';
|
||||
import { fieldHasCellActions, isInSecurityApp, isLensEmbeddable } from '../utils';
|
||||
|
||||
export const ACTION_ID = 'addToTimeline';
|
||||
|
||||
function isDataColumnsFilterable(data?: CellValueContext['data']): boolean {
|
||||
return (
|
||||
!!data &&
|
||||
data.length > 0 &&
|
||||
data.every(
|
||||
({ columnMeta }) =>
|
||||
columnMeta &&
|
||||
fieldHasCellActions(columnMeta.field) &&
|
||||
columnMeta.source === 'esaggs' &&
|
||||
columnMeta.sourceParams?.indexPatternId
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export class AddToTimelineAction implements Action<CellValueContext> {
|
||||
public readonly type = ACTION_ID;
|
||||
public readonly id = ACTION_ID;
|
||||
public order = 1;
|
||||
|
||||
private icon = 'timeline';
|
||||
private toastsService;
|
||||
private store;
|
||||
private currentAppId: string | undefined;
|
||||
|
||||
constructor(store: SecurityAppStore) {
|
||||
this.store = store;
|
||||
const { application, notifications } = KibanaServices.get();
|
||||
this.toastsService = notifications.toasts;
|
||||
|
||||
application.currentAppId$.subscribe((currentAppId) => {
|
||||
this.currentAppId = currentAppId;
|
||||
});
|
||||
}
|
||||
|
||||
public getDisplayName() {
|
||||
return i18n.translate('xpack.securitySolution.actions.cellValue.addToTimeline.displayName', {
|
||||
defaultMessage: 'Add to timeline',
|
||||
});
|
||||
}
|
||||
|
||||
public getIconType() {
|
||||
return this.icon;
|
||||
}
|
||||
|
||||
public async isCompatible({ embeddable, data }: CellValueContext) {
|
||||
return (
|
||||
!isErrorEmbeddable(embeddable) &&
|
||||
isLensEmbeddable(embeddable) &&
|
||||
isFilterableEmbeddable(embeddable) &&
|
||||
isDataColumnsFilterable(data) &&
|
||||
isInSecurityApp(this.currentAppId)
|
||||
);
|
||||
}
|
||||
|
||||
public async execute({ data }: CellValueContext) {
|
||||
const dataProviders = data.reduce<DataProvider[]>((acc, { columnMeta, value, eventId }) => {
|
||||
const dataProvider = createDataProviders({
|
||||
contextId: TimelineId.active,
|
||||
fieldType: columnMeta?.type,
|
||||
values: value,
|
||||
field: columnMeta?.field,
|
||||
eventId,
|
||||
});
|
||||
if (dataProvider) {
|
||||
acc.push(...dataProvider);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
if (dataProviders.length > 0) {
|
||||
this.store.dispatch(addProvider({ id: TimelineId.active, providers: dataProviders }));
|
||||
this.store.dispatch(showTimeline({ id: TimelineId.active, show: true }));
|
||||
} else {
|
||||
this.toastsService.addWarning({
|
||||
title: i18n.translate(
|
||||
'xpack.securitySolution.actions.cellValue.addToTimeline.warningTitle',
|
||||
{ defaultMessage: 'Unable to add to timeline' }
|
||||
),
|
||||
text: i18n.translate(
|
||||
'xpack.securitySolution.actions.cellValue.addToTimeline.warningMessage',
|
||||
{ defaultMessage: 'Filter received is empty or cannot be added to timeline' }
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
/*
|
||||
* 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 { escapeDataProviderId } from '@kbn/securitysolution-t-grid';
|
||||
import { isArray, isString, isEmpty } from 'lodash/fp';
|
||||
import { INDICATOR_REFERENCE } from '../../../common/cti/constants';
|
||||
import type { DataProvider } from '../../../common/types';
|
||||
import { IS_OPERATOR } from '../../../common/types';
|
||||
import type { BrowserField } from '../../common/containers/source';
|
||||
import { IP_FIELD_TYPE } from '../../explore/network/components/ip';
|
||||
import { PORT_NAMES } from '../../explore/network/components/port/helpers';
|
||||
import { EVENT_DURATION_FIELD_NAME } from '../../timelines/components/duration';
|
||||
import { BYTES_FORMAT } from '../../timelines/components/timeline/body/renderers/bytes';
|
||||
import {
|
||||
GEO_FIELD_TYPE,
|
||||
MESSAGE_FIELD_NAME,
|
||||
HOST_NAME_FIELD_NAME,
|
||||
SIGNAL_RULE_NAME_FIELD_NAME,
|
||||
EVENT_MODULE_FIELD_NAME,
|
||||
SIGNAL_STATUS_FIELD_NAME,
|
||||
AGENT_STATUS_FIELD_NAME,
|
||||
RULE_REFERENCE_FIELD_NAME,
|
||||
REFERENCE_URL_FIELD_NAME,
|
||||
EVENT_URL_FIELD_NAME,
|
||||
} from '../../timelines/components/timeline/body/renderers/constants';
|
||||
|
||||
export const getDataProvider = (field: string, id: string, value: string): DataProvider => ({
|
||||
and: [],
|
||||
enabled: true,
|
||||
id: escapeDataProviderId(id),
|
||||
name: field,
|
||||
excluded: false,
|
||||
kqlQuery: '',
|
||||
queryMatch: {
|
||||
field,
|
||||
value,
|
||||
operator: IS_OPERATOR,
|
||||
},
|
||||
});
|
||||
|
||||
export interface CreateDataProviderParams {
|
||||
contextId?: string;
|
||||
eventId?: string;
|
||||
field?: string;
|
||||
fieldFormat?: string;
|
||||
fieldFromBrowserField?: BrowserField;
|
||||
fieldType?: string;
|
||||
isObjectArray?: boolean;
|
||||
linkValue?: string | null;
|
||||
values: string | string[] | null | undefined;
|
||||
}
|
||||
|
||||
export const createDataProviders = ({
|
||||
contextId,
|
||||
eventId,
|
||||
field,
|
||||
fieldFormat,
|
||||
fieldType,
|
||||
linkValue,
|
||||
values,
|
||||
}: CreateDataProviderParams) => {
|
||||
if (field == null || values === null || values === undefined) return null;
|
||||
const arrayValues = Array.isArray(values) ? values : [values];
|
||||
return arrayValues.reduce<DataProvider[]>((dataProviders, value, index) => {
|
||||
let id: string = '';
|
||||
const appendedUniqueId = `${contextId}-${eventId}-${field}-${index}-${value}`;
|
||||
|
||||
if (fieldType === GEO_FIELD_TYPE || field === MESSAGE_FIELD_NAME) {
|
||||
return dataProviders;
|
||||
} else if (fieldType === IP_FIELD_TYPE) {
|
||||
id = `formatted-ip-data-provider-${contextId}-${field}-${value}-${eventId}`;
|
||||
if (isString(value) && !isEmpty(value)) {
|
||||
let addresses = value;
|
||||
try {
|
||||
addresses = JSON.parse(value);
|
||||
} catch (_) {
|
||||
// Default to keeping the existing string value
|
||||
}
|
||||
if (isArray(addresses)) {
|
||||
addresses.forEach((ip) => dataProviders.push(getDataProvider(field, id, ip)));
|
||||
} else {
|
||||
dataProviders.push(getDataProvider(field, id, addresses));
|
||||
}
|
||||
return dataProviders;
|
||||
}
|
||||
} else if (PORT_NAMES.some((portName) => field === portName)) {
|
||||
id = `port-default-draggable-${appendedUniqueId}`;
|
||||
} else if (field === EVENT_DURATION_FIELD_NAME) {
|
||||
id = `duration-default-draggable-${appendedUniqueId}`;
|
||||
} else if (field === HOST_NAME_FIELD_NAME) {
|
||||
id = `event-details-value-default-draggable-${appendedUniqueId}`;
|
||||
} else if (fieldFormat === BYTES_FORMAT) {
|
||||
id = `bytes-default-draggable-${appendedUniqueId}`;
|
||||
} else if (field === SIGNAL_RULE_NAME_FIELD_NAME) {
|
||||
id = `event-details-value-default-draggable-${appendedUniqueId}-${linkValue}`;
|
||||
} else if (field === EVENT_MODULE_FIELD_NAME) {
|
||||
id = `event-details-value-default-draggable-${appendedUniqueId}-${value}`;
|
||||
} else if (field === SIGNAL_STATUS_FIELD_NAME) {
|
||||
id = `alert-details-value-default-draggable-${appendedUniqueId}`;
|
||||
} else if (field === AGENT_STATUS_FIELD_NAME) {
|
||||
id = `event-details-value-default-draggable-${appendedUniqueId}`;
|
||||
} else if (
|
||||
[
|
||||
RULE_REFERENCE_FIELD_NAME,
|
||||
REFERENCE_URL_FIELD_NAME,
|
||||
EVENT_URL_FIELD_NAME,
|
||||
INDICATOR_REFERENCE,
|
||||
].includes(field)
|
||||
) {
|
||||
id = `event-details-value-default-draggable-${appendedUniqueId}-${value}`;
|
||||
} else {
|
||||
id = `event-details-value-default-draggable-${appendedUniqueId}`;
|
||||
}
|
||||
dataProviders.push(getDataProvider(field, id, value));
|
||||
return dataProviders;
|
||||
}, []);
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
export { AddToTimelineAction } from './add_to_timeline_action';
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
/*
|
||||
* 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 type { CellValueContext, EmbeddableInput, IEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { LENS_EMBEDDABLE_TYPE } from '@kbn/lens-plugin/public';
|
||||
import { CopyToClipboardAction } from './copy_to_clipboard_action';
|
||||
import { KibanaServices } from '../../common/lib/kibana';
|
||||
import { APP_UI_ID } from '../../../common/constants';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
jest.mock('../../common/lib/kibana');
|
||||
const currentAppId$ = new Subject<string | undefined>();
|
||||
KibanaServices.get().application.currentAppId$ = currentAppId$.asObservable();
|
||||
const mockSuccessToast = jest.fn();
|
||||
KibanaServices.get().notifications.toasts.addSuccess = mockSuccessToast;
|
||||
|
||||
const mockCopy = jest.fn((text: string) => true);
|
||||
jest.mock('copy-to-clipboard', () => (text: string) => mockCopy(text));
|
||||
|
||||
class MockEmbeddable {
|
||||
public type;
|
||||
constructor(type: string) {
|
||||
this.type = type;
|
||||
}
|
||||
getFilters() {}
|
||||
getQuery() {}
|
||||
}
|
||||
|
||||
const lensEmbeddable = new MockEmbeddable(LENS_EMBEDDABLE_TYPE) as unknown as IEmbeddable;
|
||||
|
||||
const columnMeta = {
|
||||
field: 'user.name',
|
||||
type: 'string' as const,
|
||||
source: 'esaggs',
|
||||
sourceParams: { indexPatternId: 'some-pattern-id' },
|
||||
};
|
||||
const data: CellValueContext['data'] = [{ columnMeta, value: 'the value' }];
|
||||
|
||||
describe('CopyToClipboardAction', () => {
|
||||
const addToTimelineAction = new CopyToClipboardAction();
|
||||
|
||||
beforeEach(() => {
|
||||
currentAppId$.next(APP_UI_ID);
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should return display name', () => {
|
||||
expect(addToTimelineAction.getDisplayName()).toEqual('Copy to clipboard');
|
||||
});
|
||||
|
||||
it('should return icon type', () => {
|
||||
expect(addToTimelineAction.getIconType()).toEqual('copyClipboard');
|
||||
});
|
||||
|
||||
describe('isCompatible', () => {
|
||||
it('should return false if error embeddable', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: new ErrorEmbeddable('some error', {} as EmbeddableInput),
|
||||
data,
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if not lens embeddable', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: new MockEmbeddable('not_lens') as unknown as IEmbeddable,
|
||||
data,
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data is empty', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data do not have column meta', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{}],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data column meta do not have field', async () => {
|
||||
const { field, ...testColumnMeta } = columnMeta;
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: testColumnMeta }],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if data column meta field is blacklisted', async () => {
|
||||
const testColumnMeta = { ...columnMeta, field: 'signal.reason' };
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [{ columnMeta: testColumnMeta }],
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false if not in Security', async () => {
|
||||
currentAppId$.next('not security');
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data,
|
||||
})
|
||||
).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return true if everything is okay', async () => {
|
||||
expect(
|
||||
await addToTimelineAction.isCompatible({
|
||||
embeddable: lensEmbeddable,
|
||||
data,
|
||||
})
|
||||
).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('execute', () => {
|
||||
it('should execute normally', async () => {
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data,
|
||||
});
|
||||
expect(mockCopy).toHaveBeenCalledWith('user.name: "the value"');
|
||||
expect(mockSuccessToast).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should execute with multiple values', async () => {
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [
|
||||
...data,
|
||||
{ columnMeta: { ...columnMeta, field: 'host.name' }, value: 'host name value' },
|
||||
],
|
||||
});
|
||||
expect(mockCopy).toHaveBeenCalledWith(
|
||||
'user.name: "the value" | host.name: "host name value"'
|
||||
);
|
||||
expect(mockSuccessToast).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show warning if no provider added', async () => {
|
||||
mockCopy.mockReturnValue(false);
|
||||
await addToTimelineAction.execute({
|
||||
embeddable: lensEmbeddable,
|
||||
data: [],
|
||||
});
|
||||
expect(mockSuccessToast).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
* 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 type { CellValueContext } from '@kbn/embeddable-plugin/public';
|
||||
import { isErrorEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { Action } from '@kbn/ui-actions-plugin/public';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { KibanaServices } from '../../common/lib/kibana';
|
||||
import { fieldHasCellActions, isInSecurityApp, isLensEmbeddable } from '../utils';
|
||||
|
||||
export const ACTION_ID = 'copyToClipboard';
|
||||
|
||||
function isDataColumnsValid(data?: CellValueContext['data']): boolean {
|
||||
return (
|
||||
!!data &&
|
||||
data.length > 0 &&
|
||||
data.every(({ columnMeta }) => columnMeta && fieldHasCellActions(columnMeta.field))
|
||||
);
|
||||
}
|
||||
|
||||
export class CopyToClipboardAction implements Action<CellValueContext> {
|
||||
public readonly type = ACTION_ID;
|
||||
public readonly id = ACTION_ID;
|
||||
public order = 2;
|
||||
|
||||
private icon = 'copyClipboard';
|
||||
|
||||
private toastsService;
|
||||
private currentAppId: string | undefined;
|
||||
|
||||
constructor() {
|
||||
const { application, notifications } = KibanaServices.get();
|
||||
this.toastsService = notifications.toasts;
|
||||
|
||||
application.currentAppId$.subscribe((currentAppId) => {
|
||||
this.currentAppId = currentAppId;
|
||||
});
|
||||
}
|
||||
|
||||
public getDisplayName() {
|
||||
return i18n.translate('xpack.securitySolution.actions.cellValue.copyToClipboard.displayName', {
|
||||
defaultMessage: 'Copy to clipboard',
|
||||
});
|
||||
}
|
||||
|
||||
public getIconType() {
|
||||
return this.icon;
|
||||
}
|
||||
|
||||
public async isCompatible({ embeddable, data }: CellValueContext) {
|
||||
return (
|
||||
!isErrorEmbeddable(embeddable) &&
|
||||
isLensEmbeddable(embeddable) &&
|
||||
isDataColumnsValid(data) &&
|
||||
isInSecurityApp(this.currentAppId)
|
||||
);
|
||||
}
|
||||
|
||||
public async execute({ data }: CellValueContext) {
|
||||
const text = data
|
||||
.map(({ columnMeta, value }) => `${columnMeta?.field}${value != null ? `: "${value}"` : ''}`)
|
||||
.join(' | ');
|
||||
|
||||
const isSuccess = copy(text, { debug: true });
|
||||
|
||||
if (isSuccess) {
|
||||
this.toastsService.addSuccess({
|
||||
title: i18n.translate(
|
||||
'xpack.securitySolution.actions.cellValue.copyToClipboard.successMessage',
|
||||
{ defaultMessage: 'Copied to the clipboard' }
|
||||
),
|
||||
toastLifeTimeMs: 800,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
export { CopyToClipboardAction } from './copy_to_clipboard_action';
|
||||
8
x-pack/plugins/security_solution/public/actions/index.ts
Normal file
8
x-pack/plugins/security_solution/public/actions/index.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
export { registerActions } from './register';
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
preset: '@kbn/test',
|
||||
rootDir: '../../../../..',
|
||||
roots: ['<rootDir>/x-pack/plugins/security_solution/public/actions'],
|
||||
coverageDirectory:
|
||||
'<rootDir>/target/kibana-coverage/jest/x-pack/plugins/security_solution/public/actions',
|
||||
coverageReporters: ['text', 'html'],
|
||||
collectCoverageFrom: ['<rootDir>/x-pack/plugins/security_solution/public/actions/**/*.{ts,tsx}'],
|
||||
// See: https://github.com/elastic/kibana/issues/117255, the moduleNameMapper creates mocks to avoid memory leaks from kibana core.
|
||||
moduleNameMapper: {
|
||||
'core/server$': '<rootDir>/x-pack/plugins/security_solution/server/__mocks__/core.mock.ts',
|
||||
'task_manager/server$':
|
||||
'<rootDir>/x-pack/plugins/security_solution/server/__mocks__/task_manager.mock.ts',
|
||||
'alerting/server$': '<rootDir>/x-pack/plugins/security_solution/server/__mocks__/alert.mock.ts',
|
||||
'actions/server$': '<rootDir>/x-pack/plugins/security_solution/server/__mocks__/action.mock.ts',
|
||||
},
|
||||
};
|
||||
20
x-pack/plugins/security_solution/public/actions/register.ts
Normal file
20
x-pack/plugins/security_solution/public/actions/register.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/*
|
||||
* 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 { CELL_VALUE_TRIGGER } from '@kbn/embeddable-plugin/public';
|
||||
import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
|
||||
import type { SecurityAppStore } from '../common/store/types';
|
||||
import { AddToTimelineAction } from './add_to_timeline';
|
||||
import { CopyToClipboardAction } from './copy_to_clipboard';
|
||||
|
||||
export const registerActions = (uiActions: UiActionsStart, store: SecurityAppStore) => {
|
||||
const addToTimelineAction = new AddToTimelineAction(store);
|
||||
uiActions.addTriggerAction(CELL_VALUE_TRIGGER, addToTimelineAction);
|
||||
|
||||
const copyToClipboardAction = new CopyToClipboardAction();
|
||||
uiActions.addTriggerAction(CELL_VALUE_TRIGGER, copyToClipboardAction);
|
||||
};
|
||||
22
x-pack/plugins/security_solution/public/actions/utils.ts
Normal file
22
x-pack/plugins/security_solution/public/actions/utils.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/*
|
||||
* 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 type { IEmbeddable } from '@kbn/embeddable-plugin/public';
|
||||
import { LENS_EMBEDDABLE_TYPE, type Embeddable as LensEmbeddable } from '@kbn/lens-plugin/public';
|
||||
import { APP_UI_ID } from '../../common/constants';
|
||||
import { FIELDS_WITHOUT_CELL_ACTIONS } from '../common/lib/cell_actions/constants';
|
||||
|
||||
export const isInSecurityApp = (currentAppId?: string): boolean => {
|
||||
return !!currentAppId && currentAppId === APP_UI_ID;
|
||||
};
|
||||
|
||||
export const isLensEmbeddable = (embeddable: IEmbeddable): embeddable is LensEmbeddable => {
|
||||
return embeddable.type === LENS_EMBEDDABLE_TYPE;
|
||||
};
|
||||
|
||||
export const fieldHasCellActions = (field?: string): boolean => {
|
||||
return !!field && !FIELDS_WITHOUT_CELL_ACTIONS.includes(field);
|
||||
};
|
||||
|
|
@ -78,23 +78,10 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
|
|||
|
||||
${TIMELINE_OVERRIDES_CSS_STYLESHEET}
|
||||
|
||||
.euiDataGridRowCell .euiDataGridRowCell__expandActions .euiDataGridRowCell__actionButtonIcon {
|
||||
display: none;
|
||||
|
||||
&:first-child,
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:last-child {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
overrides the default styling of EuiDataGrid expand popover footer to
|
||||
make it a column of actions instead of the default actions row
|
||||
*/
|
||||
|
||||
.euiDataGridRowCell__popover {
|
||||
|
||||
max-width: 815px !important;
|
||||
|
|
@ -109,13 +96,11 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
&.euiPopover__panel[data-popover-open] {
|
||||
padding: 8px 0;
|
||||
min-width: 65px;
|
||||
}
|
||||
|
||||
|
||||
.euiPopoverFooter {
|
||||
border: 0;
|
||||
margin-top: 0 !important;
|
||||
|
|
@ -123,14 +108,6 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
|
|||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide EUI's 'Filter in' and 'Filter out' footer buttons - replaced with our own buttons
|
||||
.euiPopoverFooter:nth-child(2) {
|
||||
.euiFlexItem:first-child,
|
||||
.euiFlexItem:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* overrides default styling in angular code that was not theme-friendly */
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ describe('default cell actions', () => {
|
|||
initialWidth: 105,
|
||||
},
|
||||
]);
|
||||
|
||||
describe.each(columnHeadersToTest)('columns with a link action', (columnHeaders) => {
|
||||
test(`${columnHeaders.id ?? columnHeaders.type}`, () => {
|
||||
const columnsWithCellActions: EuiDataGridColumn[] = [columnHeaders].map((header) => {
|
||||
|
|
|
|||
|
|
@ -30,12 +30,4 @@ describe('ExpandedCellValueActions', () => {
|
|||
test('renders show topN button', () => {
|
||||
expect(wrapper.find('[data-test-subj="data-grid-expanded-show-top-n"]').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('renders filter in button', () => {
|
||||
expect(wrapper.find('EuiFlexItem').first().html()).toContain('Filter button');
|
||||
});
|
||||
|
||||
test('renders filter out button', () => {
|
||||
expect(wrapper.find('EuiFlexItem').last().html()).toContain('Filter out button');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { EuiButtonEmpty } from '@elastic/eui';
|
||||
import { noop } from 'lodash/fp';
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
|
@ -13,7 +13,6 @@ import type { Filter } from '@kbn/es-query';
|
|||
import type { ColumnHeaderOptions } from '../../../../common/types';
|
||||
import { allowTopN } from '../../components/drag_and_drop/helpers';
|
||||
import { ShowTopNButton } from '../../components/hover_actions/actions/show_top_n';
|
||||
import { useKibana } from '../kibana';
|
||||
import { SHOW_TOP_VALUES, HIDE_TOP_VALUES } from './translations';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -22,16 +21,10 @@ interface Props {
|
|||
scopeId: string;
|
||||
value: string[] | undefined;
|
||||
onFilterAdded?: () => void;
|
||||
closeCellPopover?: () => void;
|
||||
}
|
||||
|
||||
const StyledFlexGroup = styled(EuiFlexGroup)`
|
||||
border-top: 1px solid #d3dae6;
|
||||
const StyledContent = styled.div<{ $isDetails: boolean }>`
|
||||
border-bottom: 1px solid #d3dae6;
|
||||
margin-top: 2px;
|
||||
`;
|
||||
|
||||
export const StyledContent = styled.div<{ $isDetails: boolean }>`
|
||||
padding: ${({ $isDetails }) => ($isDetails ? '0 8px' : undefined)};
|
||||
`;
|
||||
|
||||
|
|
@ -41,14 +34,7 @@ const ExpandedCellValueActionsComponent: React.FC<Props> = ({
|
|||
onFilterAdded,
|
||||
scopeId,
|
||||
value,
|
||||
closeCellPopover,
|
||||
}) => {
|
||||
const {
|
||||
timelines,
|
||||
data: {
|
||||
query: { filterManager },
|
||||
},
|
||||
} = useKibana().services;
|
||||
const showButton = useMemo(
|
||||
() =>
|
||||
allowTopN({
|
||||
|
|
@ -90,34 +76,6 @@ const ExpandedCellValueActionsComponent: React.FC<Props> = ({
|
|||
/>
|
||||
) : null}
|
||||
</StyledContent>
|
||||
<StyledFlexGroup gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
{timelines.getHoverActions().getFilterForValueButton({
|
||||
Component: EuiButtonEmpty,
|
||||
field: field.id,
|
||||
filterManager,
|
||||
onFilterAdded,
|
||||
ownFocus: false,
|
||||
size: 's',
|
||||
showTooltip: false,
|
||||
value,
|
||||
onClick: closeCellPopover,
|
||||
})}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
{timelines.getHoverActions().getFilterOutValueButton({
|
||||
Component: EuiButtonEmpty,
|
||||
field: field.id,
|
||||
filterManager,
|
||||
onFilterAdded,
|
||||
ownFocus: false,
|
||||
size: 's',
|
||||
showTooltip: false,
|
||||
value,
|
||||
onClick: closeCellPopover,
|
||||
})}
|
||||
</EuiFlexItem>
|
||||
</StyledFlexGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,9 +23,17 @@ import { mockCasesContract } from '@kbn/cases-plugin/public/mocks';
|
|||
const mockStartServicesMock = createStartServicesMock();
|
||||
export const KibanaServices = {
|
||||
get: jest.fn(() => {
|
||||
const { http, uiSettings, notifications, data, unifiedSearch } = mockStartServicesMock;
|
||||
const { application, http, uiSettings, notifications, data, unifiedSearch } =
|
||||
mockStartServicesMock;
|
||||
|
||||
return { http, uiSettings, notifications, data, unifiedSearch };
|
||||
return {
|
||||
application,
|
||||
http,
|
||||
uiSettings,
|
||||
notifications,
|
||||
data,
|
||||
unifiedSearch,
|
||||
};
|
||||
}),
|
||||
getKibanaVersion: jest.fn(() => '8.0.0'),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
import type { CoreStart } from '@kbn/core/public';
|
||||
import type { StartPlugins } from '../../../types';
|
||||
|
||||
type GlobalServices = Pick<CoreStart, 'http' | 'uiSettings' | 'notifications'> &
|
||||
type GlobalServices = Pick<CoreStart, 'application' | 'http' | 'uiSettings' | 'notifications'> &
|
||||
Pick<StartPlugins, 'data' | 'unifiedSearch'>;
|
||||
|
||||
export class KibanaServices {
|
||||
|
|
@ -17,13 +17,14 @@ export class KibanaServices {
|
|||
|
||||
public static init({
|
||||
http,
|
||||
application,
|
||||
data,
|
||||
unifiedSearch,
|
||||
kibanaVersion,
|
||||
uiSettings,
|
||||
notifications,
|
||||
}: GlobalServices & { kibanaVersion: string }) {
|
||||
this.services = { data, http, uiSettings, unifiedSearch, notifications };
|
||||
this.services = { application, data, http, uiSettings, unifiedSearch, notifications };
|
||||
this.kibanaVersion = kibanaVersion;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import type { Dispatch, Action, Middleware, CombinedState } from 'redux';
|
||||
import type { Store, Dispatch, Action, Middleware, CombinedState } from 'redux';
|
||||
|
||||
import type { CoreStart } from '@kbn/core/public';
|
||||
import type { StartPlugins } from '../../types';
|
||||
|
|
@ -36,6 +36,11 @@ export type State = HostsPluginState &
|
|||
globalUrlParam: GlobalUrlParam;
|
||||
} & DataTableState;
|
||||
|
||||
/**
|
||||
* The Redux store type for the Security app.
|
||||
*/
|
||||
export type SecurityAppStore = Store<State, Action>;
|
||||
|
||||
/**
|
||||
* like redux's `MiddlewareAPI` but `getState` returns an `Immutable` version of
|
||||
* state and `dispatch` accepts `Immutable` versions of actions.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { Action, Store } from 'redux';
|
||||
import type { Subscription } from 'rxjs';
|
||||
import { Subject } from 'rxjs';
|
||||
import { combineLatestWith } from 'rxjs/operators';
|
||||
|
|
@ -58,11 +57,8 @@ import { getLazyEndpointGenericErrorsListExtension } from './management/pages/po
|
|||
import type { ExperimentalFeatures } from '../common/experimental_features';
|
||||
import { parseExperimentalConfigValue } from '../common/experimental_features';
|
||||
import { LazyEndpointCustomAssetsExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_custom_assets_extension';
|
||||
import type { State } from './common/store/types';
|
||||
/**
|
||||
* The Redux store type for the Security app.
|
||||
*/
|
||||
export type SecurityAppStore = Store<State, Action>;
|
||||
import type { SecurityAppStore } from './common/store/types';
|
||||
|
||||
export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, StartPlugins> {
|
||||
readonly kibanaVersion: string;
|
||||
private config: SecuritySolutionUiConfigType;
|
||||
|
|
@ -89,6 +85,7 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
|
|||
* See `store` method.
|
||||
*/
|
||||
private _store?: SecurityAppStore;
|
||||
private _actionsRegistered?: boolean = false;
|
||||
|
||||
public setup(
|
||||
core: CoreSetup<StartPluginsDependencies, PluginStart>,
|
||||
|
|
@ -162,12 +159,15 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
|
|||
|
||||
const [coreStart, startPlugins] = await core.getStartServices();
|
||||
const subPlugins = await this.startSubPlugins(this.storage, coreStart, startPlugins);
|
||||
const store = await this.store(coreStart, startPlugins, subPlugins);
|
||||
await this.registerActions(startPlugins, store);
|
||||
|
||||
const { renderApp } = await this.lazyApplicationDependencies();
|
||||
const { getSubPluginRoutesByCapabilities } = await this.lazyHelpersForRoutes();
|
||||
return renderApp({
|
||||
...params,
|
||||
services: await startServices(params),
|
||||
store: await this.store(coreStart, startPlugins, subPlugins),
|
||||
store,
|
||||
usageCollection: plugins.usageCollection,
|
||||
subPluginRoutes: getSubPluginRoutesByCapabilities(
|
||||
subPlugins,
|
||||
|
|
@ -336,6 +336,17 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
|
|||
);
|
||||
}
|
||||
|
||||
private lazyActions() {
|
||||
/**
|
||||
* The specially formatted comment in the `import` expression causes the corresponding webpack chunk to be named. This aids us in debugging chunk size issues.
|
||||
* See https://webpack.js.org/api/module-methods/#magic-comments
|
||||
*/
|
||||
return import(
|
||||
/* webpackChunkName: "actions" */
|
||||
'./actions'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Lazily instantiated subPlugins. This should be instantiated just once.
|
||||
*/
|
||||
|
|
@ -409,6 +420,14 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
|
|||
return this._store;
|
||||
}
|
||||
|
||||
private async registerActions({ uiActions }: StartPlugins, store: SecurityAppStore) {
|
||||
if (!this._actionsRegistered) {
|
||||
const { registerActions } = await this.lazyActions();
|
||||
registerActions(uiActions, store);
|
||||
this._actionsRegistered = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register deepLinks and appUpdater for all app links, to change deepLinks as needed when licensing changes.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { useGetMappedNonEcsValue } from '../body/data_driven_columns';
|
||||
import { columnRenderers } from '../body/renderers';
|
||||
|
|
@ -13,15 +14,16 @@ import { getColumnRenderer } from '../body/renderers/get_column_renderer';
|
|||
import type { CellValueElementProps } from '.';
|
||||
import { getLinkColumnDefinition } from '../../../../common/lib/cell_actions/helpers';
|
||||
import { FIELDS_WITHOUT_CELL_ACTIONS } from '../../../../common/lib/cell_actions/constants';
|
||||
import {
|
||||
ExpandedCellValueActions,
|
||||
StyledContent,
|
||||
} from '../../../../common/lib/cell_actions/expanded_cell_value_actions';
|
||||
import { ExpandedCellValueActions } from '../../../../common/lib/cell_actions/expanded_cell_value_actions';
|
||||
|
||||
const hasCellActions = (columnId?: string) => {
|
||||
return columnId && !FIELDS_WITHOUT_CELL_ACTIONS.includes(columnId);
|
||||
};
|
||||
|
||||
const StyledContent = styled.div<{ $isDetails: boolean }>`
|
||||
padding: ${({ $isDetails }) => ($isDetails ? '0 8px' : undefined)};
|
||||
`;
|
||||
|
||||
export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
|
||||
data,
|
||||
ecsData,
|
||||
|
|
@ -33,10 +35,8 @@ export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
|
|||
isTimeline,
|
||||
linkValues,
|
||||
rowRenderers,
|
||||
setCellProps,
|
||||
scopeId,
|
||||
truncate,
|
||||
closeCellPopover,
|
||||
enableActions = true,
|
||||
}) => {
|
||||
const asPlainText = useMemo(() => {
|
||||
|
|
@ -74,7 +74,6 @@ export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
|
|||
globalFilters={globalFilters}
|
||||
scopeId={scopeId}
|
||||
value={values}
|
||||
closeCellPopover={closeCellPopover}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue