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

[Security Solution] Responsive styling fixes (#131951)

Browse source
This commit is contained in:
Steph Milovic 2022-05-17 07:40:19 -06:00 • committed by GitHub
parent 1bb63f8b66
commit a8e8d35a8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 675 additions and 526 deletions
Download patch file Download diff file Expand all files Collapse all files

123
x-pack/plugins/security_solution/public/common/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap generated
View file

@ -12,19 +12,20 @@ exports[`Authentication Host Table Component rendering it renders the host authe
}
.c1 {
margin-bottom: 24px;
margin-bottom: 0;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.c1.toggle-expand .header-section-content {
height: 48px;
.c1.toggle-expand {
margin-bottom: 24px;
}
.c1.toggle-expand .header-section-titles {
margin-top: 16px;
.c1 .no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.c0 {
@ -64,83 +65,95 @@ exports[`Authentication Host Table Component rendering it renders the host authe
data-test-subj="header-section"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionColumn"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow header-section-content"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive header-section-titles"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--directionRow header-section-titles"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
aria-label="Open"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
data-test-subj="query-toggle-header"
title="Open"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowDown"
/>
</button>
</div>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--medium"
data-test-subj="header-section-title"
>
<span
class="eui-textBreakNormal"
>
Authentications
</span>
</h4>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
aria-label="Open"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
data-test-subj="query-toggle-header"
title="Open"
aria-label="Inspect"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall inspectButtonComponent"
data-test-subj="inspect-icon-button"
disabled=""
title="Inspect"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowDown"
data-euiicon-type="inspect"
/>
</button>
</div>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--medium"
data-test-subj="header-section-title"
>
<span
class="eui-textBreakNormal"
>
Authentications
</span>
</h4>
</div>
</div>
<div
class="c2 siemSubtitle"
>
<p
class="siemSubtitle__item siemSubtitle__item--text"
data-test-subj="header-panel-subtitle"
>
Showing: 0 users
</p>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
</div>
</div>
<div
class="euiFlexItem"
>
<div
class="c2 siemSubtitle"
>
<p
class="siemSubtitle__item siemSubtitle__item--text"
data-test-subj="header-panel-subtitle"
>
<button
aria-label="Inspect"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall inspectButtonComponent"
data-test-subj="inspect-icon-button"
disabled=""
title="Inspect"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="inspect"
/>
</button>
</div>
Showing: 0 users
</p>
</div>
</div>
</div>

123
x-pack/plugins/security_solution/public/common/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap generated
View file

@ -12,19 +12,20 @@ exports[`Authentication User Table Component rendering it renders the user authe
}
.c1 {
margin-bottom: 24px;
margin-bottom: 0;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.c1.toggle-expand .header-section-content {
height: 48px;
.c1.toggle-expand {
margin-bottom: 24px;
}
.c1.toggle-expand .header-section-titles {
margin-top: 16px;
.c1 .no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.c0 {
@ -64,83 +65,95 @@ exports[`Authentication User Table Component rendering it renders the user authe
data-test-subj="header-section"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionColumn"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow header-section-content"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive header-section-titles"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--directionRow header-section-titles"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
aria-label="Open"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
data-test-subj="query-toggle-header"
title="Open"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowDown"
/>
</button>
</div>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--medium"
data-test-subj="header-section-title"
>
<span
class="eui-textBreakNormal"
>
Authentications
</span>
</h4>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
aria-label="Open"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
data-test-subj="query-toggle-header"
title="Open"
aria-label="Inspect"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall inspectButtonComponent"
data-test-subj="inspect-icon-button"
disabled=""
title="Inspect"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowDown"
data-euiicon-type="inspect"
/>
</button>
</div>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--medium"
data-test-subj="header-section-title"
>
<span
class="eui-textBreakNormal"
>
Authentications
</span>
</h4>
</div>
</div>
<div
class="c2 siemSubtitle"
>
<p
class="siemSubtitle__item siemSubtitle__item--text"
data-test-subj="header-panel-subtitle"
>
Showing: 0 users
</p>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
</div>
</div>
<div
class="euiFlexItem"
>
<div
class="c2 siemSubtitle"
>
<p
class="siemSubtitle__item siemSubtitle__item--text"
data-test-subj="header-panel-subtitle"
>
<button
aria-label="Inspect"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall inspectButtonComponent"
data-test-subj="inspect-icon-button"
disabled=""
title="Inspect"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="inspect"
/>
</button>
</div>
Showing: 0 users
</p>
</div>
</div>
</div>

5
x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
View file

@ -18,7 +18,10 @@ const DraggableLegendContainer = styled.div<{ height: number }>`
height: ${({ height }) => `${height}px`};
overflow: auto;
scrollbar-width: thin;
width: 165px;
width: 100%;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
width: 165px;
}
&::-webkit-scrollbar {
height: ${({ theme }) => theme.eui.euiScrollBar};

2
x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
View file

@ -40,7 +40,7 @@ const DraggableLegendItemComponent: React.FC<{
return (
<EuiText size="xs">
<EuiFlexGroup alignItems="center" gutterSize="none">
<EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
{color != null && (
<EuiFlexItem grow={false}>
<EuiHealth data-test-subj="legend-color" color={color} />

60
x-pack/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap generated
View file

@ -7,46 +7,56 @@ exports[`HeaderSection it renders 1`] = `
data-test-subj="header-section"
>
<EuiFlexGroup
alignItems="center"
direction="row"
gutterSize="s"
direction="column"
gutterSize="xs"
responsive={false}
>
<EuiFlexItem
grow={true}
>
<EuiFlexItem>
<EuiFlexGroup
alignItems="center"
className="header-section-content"
direction="row"
gutterSize="s"
responsive={false}
>
<EuiFlexItem>
<EuiFlexItem
grow={true}
>
<EuiFlexGroup
className="header-section-titles"
gutterSize="none"
alignItems="center"
gutterSize="s"
responsive={false}
>
<EuiFlexItem>
<EuiTitle
size="m"
<EuiFlexGroup
className="header-section-titles"
gutterSize="none"
responsive={false}
>
<h4
data-test-subj="header-section-title"
>
<span
className="eui-textBreakNormal"
<EuiFlexItem>
<EuiTitle
size="m"
>
Test title
</span>
</h4>
</EuiTitle>
<h4
data-test-subj="header-section-title"
>
<span
className="eui-textBreakNormal"
>
Test title
</span>
</h4>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<Subtitle
data-test-subj="header-section-subtitle"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<Subtitle
data-test-subj="header-section-subtitle"
/>
</EuiFlexItem>
</EuiFlexGroup>
</Header>
`;

136
x-pack/plugins/security_solution/public/common/components/header_section/index.tsx
View file

@ -31,15 +31,12 @@ interface HeaderProps {
const Header = styled.header<HeaderProps>`
&.toggle-expand {
.header-section-content {
height: 48px;
}
margin-bottom: ${({ theme }) => theme.eui.euiSizeL};
}
${({ $hideSubtitle, theme }) =>
!$hideSubtitle &&
`.header-section-titles {
margin-top: ${theme.eui.paddingSizes.m};
}`}
.no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
${({ height }) =>
@ -47,7 +44,7 @@ const Header = styled.header<HeaderProps>`
css`
height: ${height}px;
`}
margin-bottom: ${({ height, theme }) => (height ? 0 : theme.eui.euiSizeL)};
margin-bottom: 0;
user-select: text;
${({ border }) =>
@ -117,76 +114,85 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
className={classNames}
$hideSubtitle={hideSubtitle}
>
<EuiFlexGroup
alignItems={stackHeader ? undefined : 'center'}
direction={stackHeader ? 'column' : 'row'}
gutterSize="s"
>
<EuiFlexItem grow={growLeftSplit}>
<EuiFlexGroup direction="column" responsive={false} gutterSize="xs">
<EuiFlexItem>
<EuiFlexGroup
alignItems="center"
responsive={false}
alignItems={stackHeader ? undefined : 'center'}
direction={stackHeader ? 'column' : 'row'}
gutterSize="s"
className="header-section-content"
>
<EuiFlexItem>
<EuiFlexGroup gutterSize={'none'} className="header-section-titles">
{toggleQuery && (
<EuiFlexItem grow={growLeftSplit} className={toggleStatus ? '' : 'no-margin'}>
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup
responsive={false}
gutterSize={'none'}
className="header-section-titles"
>
{toggleQuery && (
<EuiFlexItem grow={false}>
<EuiButtonIcon
data-test-subj="query-toggle-header"
aria-label={i18n.QUERY_BUTTON_TITLE(toggleStatus)}
color="text"
display="empty"
iconType={toggleStatus ? 'arrowDown' : 'arrowRight'}
onClick={toggle}
size="s"
title={i18n.QUERY_BUTTON_TITLE(toggleStatus)}
/>
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiTitle size={titleSize}>
<h4 data-test-subj="header-section-title">
<span className="eui-textBreakNormal">{title}</span>
{tooltip && (
<>
{' '}
<EuiIconTip
color="subdued"
content={tooltip}
size="l"
type="iInCircle"
/>
</>
)}
</h4>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{id && showInspectButton && toggleStatus && (
<EuiFlexItem grow={false}>
<EuiButtonIcon
data-test-subj="query-toggle-header"
aria-label={i18n.QUERY_BUTTON_TITLE(toggleStatus)}
color="text"
display="empty"
iconType={toggleStatus ? 'arrowDown' : 'arrowRight'}
onClick={toggle}
size="s"
title={i18n.QUERY_BUTTON_TITLE(toggleStatus)}
<InspectButton
isDisabled={isInspectDisabled}
queryId={id}
multiple={inspectMultiple}
title={title}
/>
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiTitle size={titleSize}>
<h4 data-test-subj="header-section-title">
<span className="eui-textBreakNormal">{title}</span>
{tooltip && (
<>
{' '}
<EuiIconTip color="subdued" content={tooltip} size="l" type="iInCircle" />
</>
)}
</h4>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
{!hideSubtitle && toggleStatus && (
<Subtitle data-test-subj="header-section-subtitle" items={subtitle} />
)}
{headerFilters && toggleStatus && (
<EuiFlexItem data-test-subj="header-section-filters" grow={false}>
{headerFilters}
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
{id && showInspectButton && toggleStatus && (
<EuiFlexItem grow={false}>
<InspectButton
isDisabled={isInspectDisabled}
queryId={id}
multiple={inspectMultiple}
title={title}
/>
</EuiFlexItem>
)}
{headerFilters && toggleStatus && (
<EuiFlexItem data-test-subj="header-section-filters" grow={false}>
{headerFilters}
{children && toggleStatus && (
<EuiFlexItem data-test-subj="header-section-supplements" grow={split ? true : false}>
{children}
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
{children && toggleStatus && (
<EuiFlexItem data-test-subj="header-section-supplements" grow={split ? true : false}>
{children}
{!hideSubtitle && toggleStatus && (
<EuiFlexItem>
<Subtitle data-test-subj="header-section-subtitle" items={subtitle} />
</EuiFlexItem>
)}
</EuiFlexGroup>

1
x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_host_table.tsx
View file

@ -79,7 +79,6 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
return (
<Panel loading={loading}>
<HeaderSection
height={!toggleStatus ? 40 : undefined}
subtitle={`${i18n.SHOWING}: ${pagination.totalItemCount.toLocaleString()} ${i18n.UNIT(
pagination.totalItemCount
)}`}

1
x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_network_table.tsx
View file

@ -79,7 +79,6 @@ const AnomaliesNetworkTableComponent: React.FC<AnomaliesNetworkTableProps> = ({
subtitle={`${i18n.SHOWING}: ${pagination.totalItemCount.toLocaleString()} ${i18n.UNIT(
pagination.totalItemCount
)}`}
height={!toggleStatus ? 40 : undefined}
title={i18n.ANOMALIES}
tooltip={i18n.TOOLTIP}
toggleQuery={toggleQuery}

1
x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_user_table.tsx
View file

@ -82,7 +82,6 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
return (
<Panel loading={loading} data-test-subj="user-anomalies-tab">
<HeaderSection
height={!toggleStatus ? 40 : undefined}
subtitle={`${i18n.SHOWING}: ${pagination.totalItemCount.toLocaleString()} ${i18n.UNIT(
pagination.totalItemCount
)}`}

1
x-pack/plugins/security_solution/public/common/components/paginated_table/index.tsx
View file

@ -273,7 +273,6 @@ const PaginatedTableComponent: FC<SiemTables> = ({
<InspectButtonContainer show={!loadingInitial}>
<Panel data-test-subj={`${dataTestSubj}-loading-${loading}`} loading={loading}>
<HeaderSection
height={!toggleStatus ? 40 : undefined}
toggleStatus={toggleStatus}
toggleQuery={toggleQuery}
headerFilters={headerFilters}

15
x-pack/plugins/security_solution/public/common/components/stat_items/index.tsx
View file

@ -39,7 +39,12 @@ import { HoverVisibilityContainer } from '../hover_visibility_container';
import { LensAttributes } from '../visualization_actions/types';
import * as i18n from '../../containers/query_toggle/translations';
import { UserskKpiStrategyResponse } from '../../../../common/search_strategy/security_solution/users';
const FlexGroup = styled(EuiFlexGroup)`
.no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
`;
const FlexItem = styled(EuiFlexItem)`
min-width: 0;
position: relative;
@ -256,9 +261,9 @@ export const StatItemsComponent = React.memo<StatItemsProps>(
return (
<FlexItem grow={grow} data-test-subj={`stat-${statKey}`}>
<EuiPanel hasBorder>
<EuiFlexGroup gutterSize={'none'}>
<EuiFlexItem>
<EuiFlexGroup gutterSize={'none'}>
<FlexGroup gutterSize={'none'}>
<EuiFlexItem className={toggleStatus ? '' : 'no-margin'}>
<EuiFlexGroup gutterSize={'none'} responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonIcon
aria-label={i18n.QUERY_BUTTON_TITLE(toggleStatus)}
@ -283,7 +288,7 @@ export const StatItemsComponent = React.memo<StatItemsProps>(
<InspectButton queryId={id} title={description} inspectIndex={index} />
</EuiFlexItem>
)}
</EuiFlexGroup>
</FlexGroup>
{loading && (
<EuiFlexGroup justifyContent="center" alignItems="center">
<EuiFlexItem grow={false}>

1
x-pack/plugins/security_solution/public/common/components/top_risk_score_contributors/index.tsx
View file

@ -83,7 +83,6 @@ const TopRiskScoreContributorsComponent: React.FC<TopRiskScoreContributorsProps>
<EuiFlexGroup gutterSize={'none'}>
<EuiFlexItem grow={1}>
<HeaderSection
height={!toggleStatus ? 40 : undefined}
title={i18n.TOP_RISK_SCORE_CONTRIBUTORS}
hideSubtitle
toggleQuery={toggleQuery}

1
x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx
View file

@ -113,7 +113,6 @@ export const AlertsCountPanel = memo<AlertsCountPanelProps>(
<InspectButtonContainer show={toggleStatus}>
<KpiPanel $toggleStatus={toggleStatus} hasBorder data-test-subj="alertsCountPanel">
<HeaderSection
height={!toggleStatus ? 30 : undefined}
id={uniqueQueryId}
title={i18n.COUNT_TABLE_TITLE}
titleSize="s"

1
x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx
View file

@ -295,7 +295,6 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
>
<HeaderSection
id={uniqueQueryId}
height={!toggleStatus ? 30 : undefined}
title={titleText}
titleSize={titleSize}
toggleStatus={toggleStatus}

2
x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx
View file

@ -36,7 +36,7 @@ interface StackedBySelectProps {
}
export const StackByComboBoxWrapper = styled.div`
width: 400px;
max-width: 400px;
`;
export const StackByComboBox: React.FC<StackedBySelectProps> = ({ selected, onSelect }) => {

5
x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx
View file

@ -37,7 +37,10 @@ const ID = 'alertsByCategoryOverview';
const DEFAULT_STACK_BY = 'event.module';
const StyledLinkButton = styled(EuiButton)`
margin-left: ${({ theme }) => theme.eui.paddingSizes.l};
margin-left: 0;
@media only screen and (min-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
margin-left: ${({ theme }) => theme.eui.paddingSizes.l};
}
`;
interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
filters: Filter[];

13
x-pack/plugins/security_solution/public/overview/components/event_counts/index.tsx
View file

@ -7,7 +7,6 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import type { DataViewBase, Filter, Query } from '@kbn/es-query';
import { getEsQueryConfig } from '@kbn/data-plugin/common';
@ -23,10 +22,6 @@ import {
filterNetworkExternalAlertData,
} from '../../../common/components/visualization_actions/utils';
const HorizontalSpacer = styled(EuiFlexItem)`
width: 24px;
`;
interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'setQuery'> {
filters: Filter[];
indexNames: string[];
@ -77,8 +72,8 @@ const EventCountsComponent: React.FC<Props> = ({
});
return (
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={true}>
<EuiFlexGroup direction="row">
<EuiFlexItem grow={1}>
<OverviewHost
endDate={to}
filterQuery={hostFilterQuery}
@ -88,9 +83,7 @@ const EventCountsComponent: React.FC<Props> = ({
/>
</EuiFlexItem>
<HorizontalSpacer grow={false} />
<EuiFlexItem grow={true}>
<EuiFlexItem grow={1}>
<OverviewNetwork
endDate={to}
filterQuery={networkFilterQuery}

5
x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx
View file

@ -66,7 +66,10 @@ const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
});
const StyledLinkButton = styled(EuiButton)`
margin-left: ${({ theme }) => theme.eui.paddingSizes.l};
margin-left: 0;
@media only screen and (min-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
margin-left: ${({ theme }) => theme.eui.paddingSizes.l};
}
`;
const EventsByDatasetComponent: React.FC<Props> = ({

53
x-pack/plugins/security_solution/public/overview/components/overview_host/index.tsx
View file

@ -6,7 +6,7 @@
*/
import { isEmpty } from 'lodash/fp';
import { EuiFlexItem, EuiPanel } from '@elastic/eui';
import { EuiPanel } from '@elastic/eui';
import numeral from '@elastic/numeral';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { useMemo, useCallback, useState, useEffect } from 'react';
@ -130,33 +130,30 @@ const OverviewHostComponent: React.FC<OverviewHostProps> = ({
);
return (
<EuiFlexItem>
<InspectButtonContainer show={toggleStatus}>
<EuiPanel hasBorder>
<HeaderSection
id={OverviewHostQueryId}
height={!toggleStatus ? 30 : undefined}
subtitle={subtitle}
toggleStatus={toggleStatus}
toggleQuery={toggleQuery}
title={title}
isInspectDisabled={filterQuery === undefined}
>
<>{hostPageButton}</>
</HeaderSection>
{toggleStatus && (
<OverviewHostStatsManage
loading={loading}
data={overviewHost}
setQuery={setQuery}
id={id}
inspect={inspect}
refetch={refetch}
/>
)}
</EuiPanel>
</InspectButtonContainer>
</EuiFlexItem>
<InspectButtonContainer show={toggleStatus}>
<EuiPanel hasBorder>
<HeaderSection
id={OverviewHostQueryId}
subtitle={subtitle}
toggleStatus={toggleStatus}
toggleQuery={toggleQuery}
title={title}
isInspectDisabled={filterQuery === undefined}
>
<>{hostPageButton}</>
</HeaderSection>
{toggleStatus && (
<OverviewHostStatsManage
loading={loading}
data={overviewHost}
setQuery={setQuery}
id={id}
inspect={inspect}
refetch={refetch}
/>
)}
</EuiPanel>
</InspectButtonContainer>
);
};

328
x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap generated
View file

@ -11,7 +11,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
arrowDisplay="left"
buttonContent={
<EuiFlexGroup
gutterSize="none"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -25,7 +25,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
grow={false}
>
<Memo(StatValueComponent)
@ -34,7 +34,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</EuiFlexItem>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
@ -48,6 +48,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatAuditd"
>
@ -67,19 +68,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-auditbeatAuditd"
grow={false}
>
<Memo(StatValueComponent)
count={73847}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={73847}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatFIM"
>
@ -99,19 +103,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-auditbeatFIM"
grow={false}
>
<Memo(StatValueComponent)
count={107307}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={107307}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatLogin"
>
@ -131,19 +138,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-auditbeatLogin"
grow={false}
>
<Memo(StatValueComponent)
count={60015}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={60015}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatPackage"
>
@ -163,19 +173,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-auditbeatPackage"
grow={false}
>
<Memo(StatValueComponent)
count={2003}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={2003}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatProcess"
>
@ -195,19 +208,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-auditbeatProcess"
grow={false}
>
<Memo(StatValueComponent)
count={1200}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={1200}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatUser"
>
@ -227,17 +243,19 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-auditbeatUser"
grow={false}
>
<Memo(StatValueComponent)
count={1979}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={1979}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>
@ -248,7 +266,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
arrowDisplay="left"
buttonContent={
<EuiFlexGroup
gutterSize="none"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -262,7 +280,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
grow={false}
>
<Memo(StatValueComponent)
@ -271,7 +289,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</EuiFlexItem>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
@ -285,6 +303,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameDns"
>
@ -304,19 +323,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameDns"
grow={false}
>
<Memo(StatValueComponent)
count={39123}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39123}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameFile"
>
@ -336,19 +358,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameFile"
grow={false}
>
<Memo(StatValueComponent)
count={39456}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39456}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameImageLoad"
>
@ -368,19 +393,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameImageLoad"
grow={false}
>
<Memo(StatValueComponent)
count={39789}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39789}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameNetwork"
>
@ -400,19 +428,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameNetwork"
grow={false}
>
<Memo(StatValueComponent)
count={39101112}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39101112}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameProcess"
>
@ -432,19 +463,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameProcess"
grow={false}
>
<Memo(StatValueComponent)
count={39131415}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39131415}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameRegistry"
>
@ -464,19 +498,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameRegistry"
grow={false}
>
<Memo(StatValueComponent)
count={39161718}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39161718}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="endgameSecurity"
>
@ -496,17 +533,19 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-endgameSecurity"
grow={false}
>
<Memo(StatValueComponent)
count={39202122}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={39202122}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>
@ -517,7 +556,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
arrowDisplay="left"
buttonContent={
<EuiFlexGroup
gutterSize="none"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -531,7 +570,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
grow={false}
>
<Memo(StatValueComponent)
@ -540,7 +579,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</EuiFlexItem>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
@ -554,6 +593,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="filebeatSystemModule"
>
@ -573,17 +613,19 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-filebeatSystemModule"
grow={false}
>
<Memo(StatValueComponent)
count={568}
isGroupStat={false}
isLoading={false}
max={568}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={568}
isGroupStat={false}
isLoading={false}
max={568}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>
@ -594,7 +636,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
arrowDisplay="left"
buttonContent={
<EuiFlexGroup
gutterSize="none"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -608,7 +650,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
grow={false}
>
<Memo(StatValueComponent)
@ -617,7 +659,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</EuiFlexItem>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
@ -631,6 +673,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="winlogbeatSecurity"
>
@ -650,19 +693,22 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-winlogbeatSecurity"
grow={false}
>
<Memo(StatValueComponent)
count={195929}
isGroupStat={false}
isLoading={false}
max={296999}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={195929}
isGroupStat={false}
isLoading={false}
max={296999}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="winlogbeatMWSysmonOperational"
>
@ -682,17 +728,19 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="host-stat-winlogbeatMWSysmonOperational"
grow={false}
>
<Memo(StatValueComponent)
count={101070}
isGroupStat={false}
isLoading={false}
max={296999}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={101070}
isGroupStat={false}
isLoading={false}
max={296999}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>

43
x-pack/plugins/security_solution/public/overview/components/overview_host_stats/index.tsx
View file

@ -245,8 +245,20 @@ const hostStatGroups: StatGroup[] = [
},
];
const Title = styled.div`
const MoveItLeftTitle = styled.div`
margin-left: 24px;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
max-width: 40px;
}
`;
const MoveItLeft = styled.div`
margin-left: 24px;
`;
const NoMarginTopFlexItem = styled(EuiFlexItem)`
@media only screen and (max-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
margin-top: -10px !important;
}
`;
const AccordionContent = styled.div`
@ -256,7 +268,6 @@ const AccordionContent = styled.div`
const OverviewHostStatsComponent: React.FC<OverviewHostProps> = ({ data, loading }) => {
const allHostStats = getOverviewHostStats(data);
const allHostStatsCount = allHostStats.reduce((total, stat) => total + stat.count, 0);
return (
<HostStatsContainer data-test-subj="overview-hosts-stats">
{hostStatGroups.map((statGroup, i) => {
@ -269,38 +280,40 @@ const OverviewHostStatsComponent: React.FC<OverviewHostProps> = ({ data, loading
<EuiAccordion
id={`host-stat-accordion-group${statGroup.groupId}`}
buttonContent={
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
<EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText>{statGroup.name}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<NoMarginTopFlexItem grow={false}>
<StatValue
count={statsForGroupCount}
isGroupStat={true}
isLoading={loading}
max={allHostStatsCount}
/>
</EuiFlexItem>
</NoMarginTopFlexItem>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
>
<AccordionContent>
{statsForGroup.map((stat) => (
<EuiFlexGroup key={stat.id} justifyContent="spaceBetween">
<EuiFlexGroup key={stat.id} gutterSize="s" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="s">
<Title>{stat.title}</Title>
<MoveItLeftTitle>{stat.title}</MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<EuiFlexItem data-test-subj={`host-stat-${stat.id}`} grow={false}>
<StatValue
count={stat.count}
isGroupStat={false}
isLoading={loading}
max={statsForGroupCount}
/>
</EuiFlexItem>
<NoMarginTopFlexItem data-test-subj={`host-stat-${stat.id}`} grow={false}>
<MoveItLeft>
<StatValue
count={stat.count}
isGroupStat={false}
isLoading={loading}
max={statsForGroupCount}
/>
</MoveItLeft>
</NoMarginTopFlexItem>
</EuiFlexGroup>
))}
</AccordionContent>

57
x-pack/plugins/security_solution/public/overview/components/overview_network/index.tsx
View file

@ -6,7 +6,7 @@
*/
import { isEmpty } from 'lodash/fp';
import { EuiFlexItem, EuiPanel } from '@elastic/eui';
import { EuiPanel } from '@elastic/eui';
import numeral from '@elastic/numeral';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { useMemo, useCallback, useState, useEffect } from 'react';
@ -135,35 +135,32 @@ const OverviewNetworkComponent: React.FC<OverviewNetworkProps> = ({
);
return (
<EuiFlexItem>
<InspectButtonContainer show={toggleStatus}>
<EuiPanel hasBorder data-test-subj="overview-network-query">
<>
<HeaderSection
id={OverviewNetworkQueryId}
height={!toggleStatus ? 30 : undefined}
subtitle={subtitle}
title={title}
toggleStatus={toggleStatus}
toggleQuery={toggleQuery}
isInspectDisabled={filterQuery === undefined}
>
{networkPageButton}
</HeaderSection>
{toggleStatus && (
<OverviewNetworkStatsManage
loading={loading}
data={overviewNetwork}
id={id}
inspect={inspect}
setQuery={setQuery}
refetch={refetch}
/>
)}
</>
</EuiPanel>
</InspectButtonContainer>
</EuiFlexItem>
<InspectButtonContainer show={toggleStatus}>
<EuiPanel hasBorder data-test-subj="overview-network-query">
<>
<HeaderSection
id={OverviewNetworkQueryId}
subtitle={subtitle}
title={title}
toggleStatus={toggleStatus}
toggleQuery={toggleQuery}
isInspectDisabled={filterQuery === undefined}
>
{networkPageButton}
</HeaderSection>
{toggleStatus && (
<OverviewNetworkStatsManage
loading={loading}
data={overviewNetwork}
id={id}
inspect={inspect}
setQuery={setQuery}
refetch={refetch}
/>
)}
</>
</EuiPanel>
</InspectButtonContainer>
);
};

174
x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap generated
View file

@ -12,6 +12,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
buttonContent={
<EuiFlexGroup
data-test-subj="network-stat-group-auditbeat"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -48,6 +49,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="auditbeatSocket"
>
@ -67,17 +69,19 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-auditbeatSocket"
grow={false}
>
<Memo(StatValueComponent)
count={12}
isGroupStat={false}
isLoading={false}
max={12}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={12}
isGroupStat={false}
isLoading={false}
max={12}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>
@ -89,6 +93,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
buttonContent={
<EuiFlexGroup
data-test-subj="network-stat-group-filebeat"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -125,6 +130,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="filebeatCisco"
>
@ -144,19 +150,22 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-filebeatCisco"
grow={false}
>
<Memo(StatValueComponent)
count={999}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={999}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="filebeatNetflow"
>
@ -176,19 +185,22 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-filebeatNetflow"
grow={false}
>
<Memo(StatValueComponent)
count={7777}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={7777}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="filebeatPanw"
>
@ -208,19 +220,22 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-filebeatPanw"
grow={false}
>
<Memo(StatValueComponent)
count={66}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={66}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="filebeatSuricata"
>
@ -240,19 +255,22 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-filebeatSuricata"
grow={false}
>
<Memo(StatValueComponent)
count={60015}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={60015}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="filebeatZeek"
>
@ -272,17 +290,19 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-filebeatZeek"
grow={false}
>
<Memo(StatValueComponent)
count={2003}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={2003}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>
@ -294,6 +314,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
buttonContent={
<EuiFlexGroup
data-test-subj="network-stat-group-packetbeat"
gutterSize="s"
justifyContent="spaceBetween"
>
<EuiFlexItem
@ -330,6 +351,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
>
<styled.div>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="packetbeatDNS"
>
@ -349,19 +371,22 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-packetbeatDNS"
grow={false}
>
<Memo(StatValueComponent)
count={10277307}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={10277307}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="packetbeatFlow"
>
@ -381,19 +406,22 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-packetbeatFlow"
grow={false}
>
<Memo(StatValueComponent)
count={16}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={16}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
key="packetbeatTLS"
>
@ -413,17 +441,19 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
</styled.div>
</EuiText>
</EuiFlexItem>
<EuiFlexItem
<Styled(EuiFlexItem)
data-test-subj="network-stat-packetbeatTLS"
grow={false}
>
<Memo(StatValueComponent)
count={3400000}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</EuiFlexItem>
<styled.div>
<Memo(StatValueComponent)
count={3400000}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</styled.div>
</Styled(EuiFlexItem)>
</EuiFlexGroup>
</styled.div>
</EuiAccordion>

38
x-pack/plugins/security_solution/public/overview/components/overview_network_stats/index.tsx
View file

@ -158,9 +158,20 @@ const NetworkStatsContainer = styled.div`
width: 100%;
}
`;
const Title = styled.div`
const MoveItLeftTitle = styled.div`
margin-left: 24px;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
max-width: 40px;
}
`;
const MoveItLeft = styled.div`
margin-left: 24px;
`;
const NoMarginTopFlexItem = styled(EuiFlexItem)`
@media only screen and (max-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
margin-top: -10px !important;
}
`;
const AccordionContent = styled.div`
@ -186,6 +197,7 @@ const OverviewNetworkStatsComponent: React.FC<OverviewNetworkProps> = ({ data, l
<EuiFlexGroup
data-test-subj={`network-stat-group-${statGroup.groupId}`}
justifyContent="spaceBetween"
gutterSize="s"
>
<EuiFlexItem grow={false}>
<EuiText>{statGroup.name}</EuiText>
@ -204,20 +216,22 @@ const OverviewNetworkStatsComponent: React.FC<OverviewNetworkProps> = ({ data, l
>
<AccordionContent>
{statsForGroup.map((stat) => (
<EuiFlexGroup key={stat.id} justifyContent="spaceBetween">
<EuiFlexGroup key={stat.id} gutterSize="s" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="s">
<Title>{stat.title}</Title>
<MoveItLeftTitle>{stat.title}</MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<EuiFlexItem data-test-subj={`network-stat-${stat.id}`} grow={false}>
<StatValue
count={stat.count}
isGroupStat={false}
isLoading={loading}
max={statsForGroupCount}
/>
</EuiFlexItem>
<NoMarginTopFlexItem data-test-subj={`network-stat-${stat.id}`} grow={false}>
<MoveItLeft>
<StatValue
count={stat.count}
isGroupStat={false}
isLoading={loading}
max={statsForGroupCount}
/>
</MoveItLeft>
</NoMarginTopFlexItem>
</EuiFlexGroup>
))}
</AccordionContent>

12
x-pack/plugins/security_solution/public/overview/components/stat_value.tsx
View file

@ -16,6 +16,9 @@ import { useUiSetting$ } from '../../common/lib/kibana';
const ProgressContainer = styled.div`
margin-left: 8px;
min-width: 100px;
@media only screen and (min-width: 1400px) {
min-width: 200px;
}
`;
const LoadingContent = styled(EuiLoadingContent)`
@ -40,7 +43,12 @@ const StatValueComponent: React.FC<{
}, [isLoading, isInitialLoading, setIsInitialLoading]);
return (
<EuiFlexGroup alignItems="center" gutterSize="none">
<EuiFlexGroup
alignItems="center"
gutterSize="none"
responsive={false}
justifyContent="spaceBetween"
>
<EuiFlexItem grow={false}>
{!isInitialLoading && (
<EuiText color={isGroupStat ? 'default' : 'subdued'} size={isGroupStat ? 'm' : 's'}>
@ -48,7 +56,7 @@ const StatValueComponent: React.FC<{
</EuiText>
)}
</EuiFlexItem>
<EuiFlexItem grow={true}>
<EuiFlexItem grow={false}>
<ProgressContainer>
{isLoading ? (
<LoadingContent data-test-subj="stat-value-loading-spinner" lines={1} />