github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[SIEM] Fix styled-components bump in siem app (#51559) (#51762)

Browse source
This commit is contained in:
patrykkopycinski 2019-11-26 21:13:46 +01:00 • committed by GitHub
parent b76f8c00ab
commit ecec053f9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 181 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

184
x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
View file

@ -49,8 +49,7 @@ HeaderContainer.displayName = 'HeaderContainer';
// SIDE EFFECT: the following `createGlobalStyle` overrides the default styling
// of euiComboBoxOptionsList because it's implemented as a popover, so it's
// not selectable as a child of the styled component
// eslint-disable-next-line no-unused-expressions
createGlobalStyle`
const StatefulEditDataProviderGlobalStyle = createGlobalStyle`
.euiComboBoxOptionsList {
z-index: 9999;
}
@ -158,104 +157,107 @@ export const StatefulEditDataProvider = React.memo<Props>(
}, []);
return (
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.FIELD}>
<EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
<EuiComboBox
data-test-subj="field"
isClearable={false}
onChange={onFieldSelected}
options={getCategorizedFieldNames(browserFields)}
placeholder={i18n.FIELD_PLACEHOLDER}
selectedOptions={updatedField}
singleSelection={{ asPlainText: true }}
style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
<>
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.FIELD}>
<EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
<EuiComboBox
data-test-subj="field"
isClearable={false}
onChange={onFieldSelected}
options={getCategorizedFieldNames(browserFields)}
placeholder={i18n.FIELD_PLACEHOLDER}
selectedOptions={updatedField}
singleSelection={{ asPlainText: true }}
style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiComboBox
data-test-subj="operator"
isClearable={false}
onChange={onOperatorSelected}
options={operatorLabels}
placeholder={i18n.SELECT_AN_OPERATOR}
selectedOptions={updatedOperator}
singleSelection={{ asPlainText: true }}
style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>
{updatedOperator.length > 0 &&
updatedOperator[0].label !== i18n.EXISTS &&
updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiComboBox
data-test-subj="operator"
isClearable={false}
onChange={onOperatorSelected}
options={operatorLabels}
placeholder={i18n.SELECT_AN_OPERATOR}
selectedOptions={updatedOperator}
singleSelection={{ asPlainText: true }}
style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
<EuiFormRow label={i18n.VALUE_LABEL}>
<EuiFieldText
className={VALUE_INPUT_CLASS_NAME}
data-test-subj="value"
onChange={onValueChange}
placeholder={i18n.VALUE}
value={sanatizeValue(updatedValue)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
) : null}
<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>
{updatedOperator.length > 0 &&
updatedOperator[0].label !== i18n.EXISTS &&
updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.VALUE_LABEL}>
<EuiFieldText
className={VALUE_INPUT_CLASS_NAME}
data-test-subj="value"
onChange={onValueChange}
placeholder={i18n.VALUE}
value={sanatizeValue(updatedValue)}
/>
</EuiFormRow>
<EuiSpacer />
</EuiFlexItem>
) : null}
<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiButton
autoFocus
className={SAVE_CLASS_NAME}
color="primary"
data-test-subj="save"
fill={true}
isDisabled={
!selectionsAreValid({
browserFields,
selectedField: updatedField,
selectedOperator: updatedOperator,
})
}
onClick={() => {
onDataProviderEdited({
andProviderId,
excluded: getExcludedFromSelection(updatedOperator),
field: updatedField.length > 0 ? updatedField[0].label : '',
id: timelineId,
operator: getQueryOperatorFromSelection(updatedOperator),
providerId,
value: updatedValue,
});
}}
size="s"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiButton
autoFocus
className={SAVE_CLASS_NAME}
color="primary"
data-test-subj="save"
fill={true}
isDisabled={
!selectionsAreValid({
browserFields,
selectedField: updatedField,
selectedOperator: updatedOperator,
})
}
onClick={() => {
onDataProviderEdited({
andProviderId,
excluded: getExcludedFromSelection(updatedOperator),
field: updatedField.length > 0 ? updatedField[0].label : '',
id: timelineId,
operator: getQueryOperatorFromSelection(updatedOperator),
providerId,
value: updatedValue,
});
}}
size="s"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<StatefulEditDataProviderGlobalStyle />
</>
);
}
);

46
x-pack/legacy/plugins/siem/public/components/loading/index.tsx
View file

@ -10,8 +10,7 @@ import { pure } from 'recompose';
import styled, { createGlobalStyle } from 'styled-components';
// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
// eslint-disable-next-line no-unused-expressions
createGlobalStyle`
const LoadingPanelGlobalStyle = createGlobalStyle`
.euiPanel-loading-hide-border {
border: none;
}
@ -41,27 +40,30 @@ export const LoadingPanel = pure<LoadingProps>(
position = 'relative',
zIndex = 'inherit',
}) => (
<LoadingStaticPanel
className="app-loading"
height={height}
width={width}
position={position}
zIndex={zIndex}
>
<LoadingStaticContentPanel>
<EuiPanel className={showBorder ? '' : 'euiPanel-loading-hide-border'}>
<EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
<SpinnerFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</SpinnerFlexItem>
<>
<LoadingStaticPanel
className="app-loading"
height={height}
width={width}
position={position}
zIndex={zIndex}
>
<LoadingStaticContentPanel>
<EuiPanel className={showBorder ? '' : 'euiPanel-loading-hide-border'}>
<EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
<SpinnerFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</SpinnerFlexItem>
<EuiFlexItem grow={false}>
<EuiText>{text}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</LoadingStaticContentPanel>
</LoadingStaticPanel>
<EuiFlexItem grow={false}>
<EuiText>{text}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</LoadingStaticContentPanel>
</LoadingStaticPanel>
<LoadingPanelGlobalStyle />
</>
)
);

16
x-pack/legacy/plugins/siem/public/components/page/index.tsx
View file

@ -15,9 +15,12 @@ import {
} from '@elastic/eui';
import styled, { createGlobalStyle } from 'styled-components';
// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
// eslint-disable-next-line no-unused-expressions
createGlobalStyle`
/*
SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
and `EuiPopover`, `EuiToolTip` global styles
*/
export const AppGlobalStyle = createGlobalStyle`
div.app-wrapper {
background-color: rgba(0,0,0,0);
}
@ -25,6 +28,13 @@ createGlobalStyle`
div.application {
background-color: rgba(0,0,0,0);
}
.euiPopover__panel.euiPopover__panel-isOpen {
z-index: 9900 !important;
}
.euiToolTip {
z-index: 9950 !important;
}
`;
export const DescriptionListStyled = styled(EuiDescriptionList)`

4
x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx
View file

@ -17,8 +17,7 @@ export const EVENTS_SELECT_WIDTH = 60; // px
// SIDE EFFECT: the following `createGlobalStyle` overrides
// the style of the select items
// eslint-disable-next-line
createGlobalStyle`
const EventsSelectGlobalStyle = createGlobalStyle`
.eventsSelectItem {
width: 100% !important;
@ -73,6 +72,7 @@ export const EventsSelect = pure<Props>(({ checkState, timelineId }) => {
/>
</PositionedCheckbox>
</CheckboxContainer>
<EventsSelectGlobalStyle />
</div>
);
});

2
x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.tsx
View file

@ -50,7 +50,7 @@ const HighlightedBackground = styled.span`
HighlightedBackground.displayName = 'HighlightedBackground';
const EmptyContainer = styled.div<{ showSmallMsg: boolean }>`
width: ${props => (props.showSmallMsg ? '60px' : 'auto')}
width: ${props => (props.showSmallMsg ? '60px' : 'auto')};
align-items: center;
display: flex;
flex-direction: row;

2
x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.tsx
View file

@ -46,7 +46,7 @@ interface Props {
const ROW_OF_DATA_PROVIDERS_HEIGHT = 43; // px
const PanelProviders = styled.div`
position: relative
position: relative;
display: flex;
flex-direction: row;
min-height: 100px;

39
x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx
View file

@ -4,9 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiAvatar, EuiFlexItem, EuiIcon } from '@elastic/eui';
import React, { useState, useCallback } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import { Note } from '../../../lib/note';
import { InputsModelId } from '../../../store/inputs/constants';
@ -22,43 +20,6 @@ type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
type ToggleLock = ({ linkToId }: { linkToId: InputsModelId }) => void;
// SIDE EFFECT: the following `createGlobalStyle` overrides `EuiPopover`
// and `EuiToolTip` global styles:
// eslint-disable-next-line no-unused-expressions
createGlobalStyle`
.euiPopover__panel.euiPopover__panel-isOpen {
z-index: 9900 !important;
}
.euiToolTip {
z-index: 9950 !important;
}
`;
const Avatar = styled(EuiAvatar)`
margin-left: 5px;
`;
Avatar.displayName = 'Avatar';
const DescriptionPopoverMenuContainer = styled.div`
margin-top: 15px;
`;
DescriptionPopoverMenuContainer.displayName = 'DescriptionPopoverMenuContainer';
const SettingsIcon = styled(EuiIcon)`
margin-left: 4px;
cursor: pointer;
`;
SettingsIcon.displayName = 'SettingsIcon';
const HiddenFlexItem = styled(EuiFlexItem)`
display: none;
`;
HiddenFlexItem.displayName = 'HiddenFlexItem';
interface Props {
associateNote: AssociateNote;
createTimeline: CreateTimeline;

88
x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx
View file

@ -26,8 +26,7 @@ const searchOrFilterPopoverClassName = 'searchOrFilterPopover';
const searchOrFilterPopoverWidth = '352px';
// SIDE EFFECT: the following creates a global class selector
// eslint-disable-next-line no-unused-expressions
createGlobalStyle`
const SearchOrFilterGlobalStyle = createGlobalStyle`
.${timelineSelectModeItemsClassName} {
width: 350px !important;
}
@ -110,48 +109,51 @@ export const SearchOrFilter = pure<Props>(
updateKqlMode,
updateReduxTime,
}) => (
<SearchOrFilterContainer>
<EuiFlexGroup data-test-subj="timeline-search-or-filter" gutterSize="xs">
<ModeFlexItem grow={false}>
<EuiToolTip content={i18n.FILTER_OR_SEARCH_WITH_KQL}>
<EuiSuperSelect
data-test-subj="timeline-select-search-or-filter"
hasDividers={true}
itemLayoutAlign="top"
itemClassName={timelineSelectModeItemsClassName}
onChange={(mode: KqlMode) => updateKqlMode({ id: timelineId, kqlMode: mode })}
options={options}
popoverClassName={searchOrFilterPopoverClassName}
valueOfSelected={kqlMode}
<>
<SearchOrFilterContainer>
<EuiFlexGroup data-test-subj="timeline-search-or-filter" gutterSize="xs">
<ModeFlexItem grow={false}>
<EuiToolTip content={i18n.FILTER_OR_SEARCH_WITH_KQL}>
<EuiSuperSelect
data-test-subj="timeline-select-search-or-filter"
hasDividers={true}
itemLayoutAlign="top"
itemClassName={timelineSelectModeItemsClassName}
onChange={(mode: KqlMode) => updateKqlMode({ id: timelineId, kqlMode: mode })}
options={options}
popoverClassName={searchOrFilterPopoverClassName}
valueOfSelected={kqlMode}
/>
</EuiToolTip>
</ModeFlexItem>
<EuiFlexItem data-test-subj="timeline-search-or-filter-search-container">
<QueryBarTimeline
applyKqlFilterQuery={applyKqlFilterQuery}
browserFields={browserFields}
dataProviders={dataProviders}
filters={filters}
filterQuery={filterQuery}
filterQueryDraft={filterQueryDraft}
from={from}
fromStr={fromStr}
kqlMode={kqlMode}
indexPattern={indexPattern}
isRefreshPaused={isRefreshPaused}
refreshInterval={refreshInterval}
savedQueryId={savedQueryId}
setFilters={setFilters}
setKqlFilterQueryDraft={setKqlFilterQueryDraft}
setSavedQueryId={setSavedQueryId}
timelineId={timelineId}
to={to}
toStr={toStr}
updateReduxTime={updateReduxTime}
/>
</EuiToolTip>
</ModeFlexItem>
<EuiFlexItem data-test-subj="timeline-search-or-filter-search-container">
<QueryBarTimeline
applyKqlFilterQuery={applyKqlFilterQuery}
browserFields={browserFields}
dataProviders={dataProviders}
filters={filters}
filterQuery={filterQuery}
filterQueryDraft={filterQueryDraft}
from={from}
fromStr={fromStr}
kqlMode={kqlMode}
indexPattern={indexPattern}
isRefreshPaused={isRefreshPaused}
refreshInterval={refreshInterval}
savedQueryId={savedQueryId}
setFilters={setFilters}
setKqlFilterQueryDraft={setKqlFilterQueryDraft}
setSavedQueryId={setSavedQueryId}
timelineId={timelineId}
to={to}
toStr={toStr}
updateReduxTime={updateReduxTime}
/>
</EuiFlexItem>
</EuiFlexGroup>
</SearchOrFilterContainer>
</EuiFlexItem>
</EuiFlexGroup>
</SearchOrFilterContainer>
<SearchOrFilterGlobalStyle />
</>
)
);

2
x-pack/legacy/plugins/siem/public/components/wrapper_page/index.tsx
View file

@ -9,6 +9,7 @@ import React from 'react';
import styled, { css } from 'styled-components';
import { gutterTimeline } from '../../lib/helpers';
import { AppGlobalStyle } from '../page/index';
const Wrapper = styled.div`
${({ theme }) => css`
@ -54,6 +55,7 @@ export const WrapperPage = React.memo<WrapperPageProps>(
return (
<Wrapper className={classes} style={customStyle || style}>
{children}
<AppGlobalStyle />
</Wrapper>
);
}