Skip to content

Commit

Permalink
[Security Solution] Bugfix for inspect index pattern not aligned with…
Browse files Browse the repository at this point in the history 
… data view index pattern (elastic#125007)

(cherry picked from commit bad98b6)
  • Loading branch information
@stephmilovic @kibanamachine
stephmilovic authored and kibanamachine committed Feb 9, 2022
1 parent dc18a00 commit 11f8a75
Show file tree
Hide file tree
Showing 5 changed files with 283 additions and 153 deletions.
141 changes: 125 additions & 16 deletions x-pack/plugins/security_solution/public/common/components/inspect/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ import { UpdateQueryParams, upsertQuery } from '../../store/inputs/helpers';
import { InspectButton } from '.';
import { cloneDeep } from 'lodash/fp';

jest.mock('./modal', () => ({
ModalInspectQuery: jest.fn(() => <div data-test-subj="mocker-modal" />),
}));

describe('Inspect Button', () => {
const refetch = jest.fn();
const state: State = mockGlobalState;
Expand Down Expand Up @@ -103,6 +107,54 @@ describe('Inspect Button', () => {
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});

test('Button disabled when inspect == null', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = null;
myState.inputs = upsertQuery(myQuery);
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});

test('Button disabled when inspect.dsl.length == 0', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = {
dsl: [],
response: ['my response'],
};
myState.inputs = upsertQuery(myQuery);
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});

test('Button disabled when inspect.response.length == 0', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = {
dsl: ['my dsl'],
response: [],
};
myState.inputs = upsertQuery(myQuery);
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});
});

describe('Modal Inspect - happy path', () => {
Expand All @@ -127,46 +179,103 @@ describe('Inspect Button', () => {
wrapper.update();

expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
expect(wrapper.find('button[data-test-subj="modal-inspect-close"]').first().exists()).toBe(
true
);
expect(wrapper.find('[data-test-subj="mocker-modal"]').first().exists()).toBe(true);
});

test('Close Inspect Modal', () => {
test('Do not Open Inspect Modal if it is loading', () => {
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
expect(store.getState().inputs.global.queries[0].isInspected).toBe(false);
store.getState().inputs.global.queries[0].loading = true;
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');

wrapper.update();

wrapper.find('button[data-test-subj="modal-inspect-close"]').first().simulate('click');

wrapper.update();

expect(store.getState().inputs.global.queries[0].isInspected).toBe(false);
expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
expect(wrapper.find('button[data-test-subj="modal-inspect-close"]').first().exists()).toBe(
false
);
});
});

test('Do not Open Inspect Modal if it is loading', () => {
describe('Modal Inspect - show or hide', () => {
test('shows when request/response are complete and isInspected=true', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = {
dsl: ['a length'],
response: ['my response'],
};
myState.inputs = upsertQuery(myQuery);
myState.inputs.global.queries[0].isInspected = true;
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
store.getState().inputs.global.queries[0].loading = true;
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');

wrapper.update();
expect(wrapper.find('[data-test-subj="mocker-modal"]').first().exists()).toEqual(true);
});

expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
expect(wrapper.find('button[data-test-subj="modal-inspect-close"]').first().exists()).toBe(
false
test('hides when request/response are complete and isInspected=false', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = {
dsl: ['a length'],
response: ['my response'],
};
myState.inputs = upsertQuery(myQuery);
myState.inputs.global.queries[0].isInspected = false;
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);

expect(wrapper.find('[data-test-subj="mocker-modal"]').first().exists()).toEqual(false);
});

test('hides when request is empty and isInspected=true', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = {
dsl: [],
response: ['my response'],
};
myState.inputs = upsertQuery(myQuery);
myState.inputs.global.queries[0].isInspected = true;
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);

expect(wrapper.find('[data-test-subj="mocker-modal"]').first().exists()).toEqual(false);
});

test('hides when response is empty and isInspected=true', () => {
const myState = cloneDeep(state);
const myQuery = cloneDeep(newQuery);
myQuery.inspect = {
dsl: ['my dsl'],
response: [],
};
myState.inputs = upsertQuery(myQuery);
myState.inputs.global.queries[0].isInspected = true;
store = createStore(myState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
const wrapper = mount(
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);

expect(wrapper.find('[data-test-subj="mocker-modal"]').first().exists()).toEqual(false);
});
});
});
41 changes: 26 additions & 15 deletions x-pack/plugins/security_solution/public/common/components/inspect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
import { omit } from 'lodash/fp';
import React, { useCallback } from 'react';
import React, { useMemo, useCallback } from 'react';
import { connect, ConnectedProps } from 'react-redux';

import { inputsSelectors, State } from '../../store';
Expand Down Expand Up @@ -52,18 +52,17 @@ const InspectButtonComponent: React.FC<InspectButtonProps> = ({
compact = false,
inputId = 'global',
inspect,
inspectIndex = 0,
isDisabled,
isInspected,
loading,
inspectIndex = 0,
multiple = false, // If multiple = true we ignore the inspectIndex and pass all requests and responses to the inspect modal
onCloseInspect,
queryId = '',
selectedInspectIndex,
setIsInspected,
title = '',
}) => {
const isShowingModal = !loading && selectedInspectIndex === inspectIndex && isInspected;
const handleClick = useCallback(() => {
setIsInspected({
id: queryId,
Expand Down Expand Up @@ -105,6 +104,16 @@ const InspectButtonComponent: React.FC<InspectButtonProps> = ({
}
}

const isShowingModal = useMemo(
() => !loading && selectedInspectIndex === inspectIndex && isInspected,
[inspectIndex, isInspected, loading, selectedInspectIndex]
);

const isButtonDisabled = useMemo(
() => loading || isDisabled || request == null || response == null,
[isDisabled, loading, request, response]
);

return (
<>
{inputId === 'timeline' && !compact && (
Expand All @@ -115,7 +124,7 @@ const InspectButtonComponent: React.FC<InspectButtonProps> = ({
color="text"
iconSide="left"
iconType="inspect"
isDisabled={loading || isDisabled || false}
isDisabled={isButtonDisabled}
isLoading={loading}
onClick={handleClick}
>
Expand All @@ -129,21 +138,23 @@ const InspectButtonComponent: React.FC<InspectButtonProps> = ({
data-test-subj="inspect-icon-button"
iconSize="m"
iconType="inspect"
isDisabled={loading || isDisabled || false}
isDisabled={isButtonDisabled}
title={i18n.INSPECT}
onClick={handleClick}
/>
)}
<ModalInspectQuery
closeModal={handleCloseModal}
isShowing={isShowingModal}
request={request}
response={response}
additionalRequests={additionalRequests}
additionalResponses={additionalResponses}
title={title}
data-test-subj="inspect-modal"
/>
{isShowingModal && request !== null && response !== null && (
<ModalInspectQuery
additionalRequests={additionalRequests}
additionalResponses={additionalResponses}
closeModal={handleCloseModal}
data-test-subj="inspect-modal"
inputId={inputId}
request={request}
response={response}
title={title}
/>
)}
</>
);
};
Expand Down
Loading

0 comments on commit 11f8a75

Please sign in to comment.