maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Fix] Hide timeline and ML Popover when SIEM has no data (#55754)

Browse source 
* Hide ML Popover when SIEM index DNE

* Hide timeline when SIEM has no data

In cases where there's nothing to inspect (i.e. the user hasn't
populated data), we don't want to show them the mostly inert timeline.

* Update snapshot for header

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Ryland Herrick 2020-01-24 12:37:44 -06:00 committed by GitHub
parent 510587e431
commit 157ed3945b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
x-pack/legacy/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap generated
View file

@ -9,62 +9,11 @@ exports[`HeaderGlobal it renders 1`] = `
justifyContent="spaceBetween"
wrap={true}
>
<FlexItem>
<EuiFlexGroup
alignItems="center"
responsive={false}
>
<FlexItem
grow={false}
>
<EuiLink
href="#/link-to/overview"
>
<EuiIcon
aria-label="SIEM"
size="l"
type="securityAnalyticsApp"
/>
</EuiLink>
</FlexItem>
<FlexItem
component="nav"
>
<WithSource
sourceId="default"
>
<Component />
</WithSource>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
<FlexItem
grow={false}
<WithSource
sourceId="default"
>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
responsive={false}
wrap={true}
>
<FlexItem
grow={false}
>
<MlPopover />
</FlexItem>
<FlexItem
grow={false}
>
<EuiButtonEmpty
data-test-subj="add-data"
href="kibana#home/tutorial_directory/siem"
iconType="plusInCircle"
>
Add data
</EuiButtonEmpty>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
<Component />
</WithSource>
</EuiFlexGroup>
</Wrapper>
`;

96
x-pack/legacy/plugins/siem/public/components/header_global/index.tsx
View file

@ -39,55 +39,59 @@ interface HeaderGlobalProps {
export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine = false }) => (
<Wrapper className="siemHeaderGlobal">
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" wrap>
<FlexItem>
<EuiFlexGroup alignItems="center" responsive={false}>
<FlexItem grow={false}>
<EuiLink href={getOverviewUrl()}>
<EuiIcon aria-label={i18n.SIEM} type="securityAnalyticsApp" size="l" />
</EuiLink>
</FlexItem>
<WithSource sourceId="default">
{({ indicesExist }) => (
<>
<FlexItem>
<EuiFlexGroup alignItems="center" responsive={false}>
<FlexItem grow={false}>
<EuiLink href={getOverviewUrl()}>
<EuiIcon aria-label={i18n.SIEM} type="securityAnalyticsApp" size="l" />
</EuiLink>
</FlexItem>
<FlexItem component="nav">
<WithSource sourceId="default">
{({ indicesExist }) =>
indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
<SiemNavigation
display="condensed"
navTabs={
hideDetectionEngine
? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
: navTabs
}
/>
) : (
<SiemNavigation
display="condensed"
navTabs={pickBy((_, key) => key === SiemPageName.overview, navTabs)}
/>
)
}
</WithSource>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
<FlexItem component="nav">
{indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
<SiemNavigation
display="condensed"
navTabs={
hideDetectionEngine
? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
: navTabs
}
/>
) : (
<SiemNavigation
display="condensed"
navTabs={pickBy((_, key) => key === SiemPageName.overview, navTabs)}
/>
)}
</FlexItem>
</EuiFlexGroup>
</FlexItem>
<FlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
<FlexItem grow={false}>
<MlPopover />
</FlexItem>
<FlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
{indicesExistOrDataTemporarilyUnavailable(indicesExist) && (
<FlexItem grow={false}>
<MlPopover />
</FlexItem>
)}
<FlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="add-data"
href="kibana#home/tutorial_directory/siem"
iconType="plusInCircle"
>
{i18n.BUTTON_ADD_DATA}
</EuiButtonEmpty>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
<FlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="add-data"
href="kibana#home/tutorial_directory/siem"
iconType="plusInCircle"
>
{i18n.BUTTON_ADD_DATA}
</EuiButtonEmpty>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
</>
)}
</WithSource>
</EuiFlexGroup>
</Wrapper>
));

46
x-pack/legacy/plugins/siem/public/pages/home/index.tsx
View file

@ -19,7 +19,7 @@ import { MlNetworkConditionalContainer } from '../../components/ml/conditional_l
import { StatefulTimeline } from '../../components/timeline';
import { AutoSaveWarningMsg } from '../../components/timeline/auto_save_warning';
import { UseUrlState } from '../../components/url_state';
import { WithSource } from '../../containers/source';
import { WithSource, indicesExistOrDataTemporarilyUnavailable } from '../../containers/source';
import { SpyRoute } from '../../utils/route/spy_routes';
import { NotFoundPage } from '../404';
import { DetectionEngineContainer } from '../detection_engine';
@ -63,28 +63,32 @@ export const HomePage: React.FC = () => (
<main data-test-subj="pageContainer">
<WithSource sourceId="default">
{({ browserFields, indexPattern }) => (
{({ browserFields, indexPattern, indicesExist }) => (
<DragDropContextWrapper browserFields={browserFields}>
<UseUrlState indexPattern={indexPattern} navTabs={navTabs} />
<AutoSaveWarningMsg />
<Flyout
flyoutHeight={calculateFlyoutHeight({
globalHeaderSize: globalHeaderHeightPx,
windowHeight,
})}
headerHeight={flyoutHeaderHeight}
timelineId="timeline-1"
usersViewing={usersViewing}
>
<StatefulTimeline
flyoutHeaderHeight={flyoutHeaderHeight}
flyoutHeight={calculateFlyoutHeight({
globalHeaderSize: globalHeaderHeightPx,
windowHeight,
})}
id="timeline-1"
/>
</Flyout>
{indicesExistOrDataTemporarilyUnavailable(indicesExist) && (
<>
<AutoSaveWarningMsg />
<Flyout
flyoutHeight={calculateFlyoutHeight({
globalHeaderSize: globalHeaderHeightPx,
windowHeight,
})}
headerHeight={flyoutHeaderHeight}
timelineId="timeline-1"
usersViewing={usersViewing}
>
<StatefulTimeline
flyoutHeaderHeight={flyoutHeaderHeight}
flyoutHeight={calculateFlyoutHeight({
globalHeaderSize: globalHeaderHeightPx,
windowHeight,
})}
id="timeline-1"
/>
</Flyout>
</>
)}
<Switch>
<Redirect exact from="/" to={`/${SiemPageName.overview}`} />