Skip to content

Commit

Permalink
[SIEM] Fix eslint errors from jsx-no-bind #1 (elastic#52856)
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrykkopycinski
patrykkopycinski authored Dec 17, 2019
1 parent 4a95aef commit 022e6c4
Show file tree
Hide file tree
Showing 39 changed files with 760 additions and 556 deletions.
39 changes: 22 additions & 17 deletions x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import { EuiSuperSelect } from '@elastic/eui';
import React from 'react';
import React, { useCallback } from 'react';
import { ActionCreator } from 'typescript-fsa';

import { FlowDirection, FlowTarget } from '../../graphql/types';
Expand Down Expand Up @@ -65,22 +65,27 @@ export const FlowTargetSelect = React.memo<FlowTargetSelectProps>(
selectedTarget,
displayTextOverride = [],
updateFlowTargetAction,
}) => (
<EuiSuperSelect
options={
selectedDirection
? toggleTargetOptions(id, displayTextOverride).filter(option =>
option.directions.includes(selectedDirection)
)
: toggleTargetOptions(id, displayTextOverride)
}
valueOfSelected={selectedTarget}
onChange={(newFlowTarget: FlowTarget) =>
onChangeTarget(newFlowTarget, updateFlowTargetAction)
}
isLoading={isLoading}
/>
)
}) => {
const handleChange = useCallback(
(newFlowTarget: FlowTarget) => onChangeTarget(newFlowTarget, updateFlowTargetAction),
[updateFlowTargetAction]
);

return (
<EuiSuperSelect
options={
selectedDirection
? toggleTargetOptions(id, displayTextOverride).filter(option =>
option.directions.includes(selectedDirection)
)
: toggleTargetOptions(id, displayTextOverride)
}
valueOfSelected={selectedTarget}
onChange={handleChange}
isLoading={isLoading}
/>
);
}
);

FlowTargetSelect.displayName = 'FlowTargetSelect';
131 changes: 65 additions & 66 deletions x-pack/legacy/plugins/siem/public/components/inspect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
import { getOr } from 'lodash/fp';
import React from 'react';
import React, { useCallback } from 'react';
import { connect } from 'react-redux';
import { ActionCreator } from 'typescript-fsa';
import styled from 'styled-components';
Expand Down Expand Up @@ -72,72 +72,71 @@ const InspectButtonComponent = React.memo<InspectButtonProps>(
setIsInspected,
show,
title = '',
}: InspectButtonProps) => (
<InspectContainer
data-test-subj={`${show ? 'opaque' : 'transparent'}-inspect-container`}
showInspect={show}
>
{inputId === 'timeline' && !compact && (
<EuiButtonEmpty
aria-label={i18n.INSPECT}
data-test-subj="inspect-empty-button"
color="text"
iconSide="left"
iconType="inspect"
isDisabled={loading || isDisabled}
isLoading={loading}
onClick={() => {
setIsInspected({
id: queryId,
inputId,
isInspected: true,
selectedInspectIndex: inspectIndex,
});
}}
>
{i18n.INSPECT}
</EuiButtonEmpty>
)}
{(inputId === 'global' || compact) && (
<EuiButtonIcon
aria-label={i18n.INSPECT}
data-test-subj="inspect-icon-button"
iconSize="m"
iconType="inspect"
isDisabled={loading || isDisabled}
title={i18n.INSPECT}
onClick={() => {
setIsInspected({
id: queryId,
inputId,
isInspected: true,
selectedInspectIndex: inspectIndex,
});
}}
/>
)}
<ModalInspectQuery
closeModal={() => {
if (onCloseInspect != null) {
onCloseInspect();
}: InspectButtonProps) => {
const handleClick = useCallback(() => {
setIsInspected({
id: queryId,
inputId,
isInspected: true,
selectedInspectIndex: inspectIndex,
});
}, [setIsInspected, queryId, inputId, inspectIndex]);

const handleCloseModal = useCallback(() => {
if (onCloseInspect != null) {
onCloseInspect();
}
setIsInspected({
id: queryId,
inputId,
isInspected: false,
selectedInspectIndex: inspectIndex,
});
}, [onCloseInspect, setIsInspected, queryId, inputId, inspectIndex]);

return (
<InspectContainer
data-test-subj={`${show ? 'opaque' : 'transparent'}-inspect-container`}
showInspect={show}
>
{inputId === 'timeline' && !compact && (
<EuiButtonEmpty
aria-label={i18n.INSPECT}
data-test-subj="inspect-empty-button"
color="text"
iconSide="left"
iconType="inspect"
isDisabled={loading || isDisabled}
isLoading={loading}
onClick={handleClick}
>
{i18n.INSPECT}
</EuiButtonEmpty>
)}
{(inputId === 'global' || compact) && (
<EuiButtonIcon
aria-label={i18n.INSPECT}
data-test-subj="inspect-icon-button"
iconSize="m"
iconType="inspect"
isDisabled={loading || isDisabled}
title={i18n.INSPECT}
onClick={handleClick}
/>
)}
<ModalInspectQuery
closeModal={handleCloseModal}
isShowing={!loading && selectedInspectIndex === inspectIndex && isInspected}
request={inspect != null && inspect.dsl.length > 0 ? inspect.dsl[inspectIndex] : null}
response={
inspect != null && inspect.response.length > 0 ? inspect.response[inspectIndex] : null
}
setIsInspected({
id: queryId,
inputId,
isInspected: false,
selectedInspectIndex: inspectIndex,
});
}}
isShowing={!loading && selectedInspectIndex === inspectIndex && isInspected}
request={inspect != null && inspect.dsl.length > 0 ? inspect.dsl[inspectIndex] : null}
response={
inspect != null && inspect.response.length > 0 ? inspect.response[inspectIndex] : null
}
title={title}
data-test-subj="inspect-modal"
/>
</InspectContainer>
)
title={title}
data-test-subj="inspect-modal"
/>
</InspectContainer>
);
}
);

InspectButtonComponent.displayName = 'InspectButtonComponent';
Expand Down
11 changes: 7 additions & 4 deletions x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { ScaleType } from '@elastic/charts';

import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
Expand Down Expand Up @@ -54,14 +54,17 @@ export const MatrixHistogram = ({
if (totalCount >= 0 && loadingInitial) {
setLoadingInitial(false);
}
}, [loading]);
}, [loading, loadingInitial, totalCount]);

const handleOnMouseEnter = useCallback(() => setShowInspect(true), []);
const handleOnMouseLeave = useCallback(() => setShowInspect(false), []);

return (
<Panel
data-test-subj={`${dataKey}Panel`}
loading={loading}
onMouseEnter={() => setShowInspect(true)}
onMouseLeave={() => setShowInspect(false)}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
>
<HeaderSection
id={id}
Expand Down
74 changes: 39 additions & 35 deletions x-pack/legacy/plugins/siem/public/components/ml/score/draggable_score.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,41 +20,45 @@ export const DraggableScoreComponent = ({
id: string;
index?: number;
score: Anomaly;
}): JSX.Element => (
<DraggableWrapper
key={`draggable-score-draggable-wrapper-${id}`}
dataProvider={{
and: [],
enabled: true,
id,
name: score.entityName,
excluded: false,
kqlQuery: '',
queryMatch: {
field: score.entityName,
value: score.entityValue,
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>
snapshot.isDragging ? (
<DragEffects>
<Provider dataProvider={dataProvider} />
</DragEffects>
) : (
<>
{index !== 0 && (
<>
{','}
<Spacer />
</>
)}
{getScoreString(score.severity)}
</>
)
}
/>
);
}): JSX.Element => {
const scoreString = getScoreString(score.severity);

return (
<DraggableWrapper
key={`draggable-score-draggable-wrapper-${id}`}
dataProvider={{
and: [],
enabled: true,
id,
name: score.entityName,
excluded: false,
kqlQuery: '',
queryMatch: {
field: score.entityName,
value: score.entityValue,
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>
snapshot.isDragging ? (
<DragEffects>
<Provider dataProvider={dataProvider} />
</DragEffects>
) : (
<>
{index !== 0 && (
<>
{','}
<Spacer />
</>
)}
{scoreString}
</>
)
}
/>
);
};

DraggableScoreComponent.displayName = 'DraggableScoreComponent';

Expand Down
31 changes: 20 additions & 11 deletions ...egacy/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
import React, { Dispatch, SetStateAction, useEffect, useState, useCallback } from 'react';

import {
EuiFilterButton,
Expand Down Expand Up @@ -40,7 +40,22 @@ export const JobsTableFiltersComponent = ({ siemJobs, onFilterChanged }: JobsTab
// Propagate filter changes to parent
useEffect(() => {
onFilterChanged({ filterQuery, showCustomJobs, showElasticJobs, selectedGroups });
}, [filterQuery, selectedGroups.sort().join(), showCustomJobs, showElasticJobs]);
}, [filterQuery, selectedGroups, showCustomJobs, showElasticJobs, onFilterChanged]);

const handleChange = useCallback(
(query: EuiSearchBarQuery) => setFilterQuery(query.queryText.trim()),
[setFilterQuery]
);

const handleElasticJobsClick = useCallback(() => {
setShowElasticJobs(!showElasticJobs);
setShowCustomJobs(false);
}, [setShowElasticJobs, showElasticJobs, setShowCustomJobs]);

const handleCustomJobsClick = useCallback(() => {
setShowCustomJobs(!showCustomJobs);
setShowElasticJobs(false);
}, [setShowElasticJobs, showCustomJobs, setShowCustomJobs]);

return (
<EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
Expand All @@ -51,7 +66,7 @@ export const JobsTableFiltersComponent = ({ siemJobs, onFilterChanged }: JobsTab
placeholder: i18n.FILTER_PLACEHOLDER,
incremental: true,
}}
onChange={(query: EuiSearchBarQuery) => setFilterQuery(query.queryText.trim())}
onChange={handleChange}
/>
</EuiFlexItem>

Expand All @@ -65,21 +80,15 @@ export const JobsTableFiltersComponent = ({ siemJobs, onFilterChanged }: JobsTab
<EuiFilterGroup>
<EuiFilterButton
hasActiveFilters={showElasticJobs}
onClick={() => {
setShowElasticJobs(!showElasticJobs);
setShowCustomJobs(false);
}}
onClick={handleElasticJobsClick}
data-test-subj="show-elastic-jobs-filter-button"
withNext
>
{i18n.SHOW_ELASTIC_JOBS}
</EuiFilterButton>
<EuiFilterButton
hasActiveFilters={showCustomJobs}
onClick={() => {
setShowCustomJobs(!showCustomJobs);
setShowElasticJobs(false);
}}
onClick={handleCustomJobsClick}
data-test-subj="show-custom-jobs-filter-button"
>
{i18n.SHOW_CUSTOM_JOBS}
Expand Down
Loading

0 comments on commit 022e6c4

Please sign in to comment.