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

[Security_Solution][Resolver] Fix full screen graph (#88513)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Michael Olorunnisola 2021-01-19 15:19:57 -05:00 committed by GitHub
parent 55d1065c93
commit 0a1af80631
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
import styled from 'styled-components';
import { noop } from 'lodash/fp';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
@ -52,6 +53,15 @@ import { buildShowBuildingBlockFilter } from '../../components/alerts_table/defa
import { useSourcererScope } from '../../../common/containers/sourcerer';
import { SourcererScopeName } from '../../../common/store/sourcerer/model';
/**
* Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
*/
const StyledFullHeightContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1 1 auto;
`;
const DetectionEnginePageComponent = () => {
const dispatch = useDispatch();
const containerElement = useRef<HTMLDivElement | null>(null);
@ -183,7 +193,7 @@ const DetectionEnginePageComponent = () => {
{hasEncryptionKey != null && !hasEncryptionKey && <NoApiIntegrationKeyCallOut />}
<ReadOnlyAlertsCallOut />
{indicesExist ? (
<div onKeyDown={onKeyDown} ref={containerElement}>
<StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
<EuiWindowEvent event="resize" handler={noop} />
<FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
<SiemSearchBar id="global" indexPattern={indexPattern} />
@ -240,7 +250,7 @@ const DetectionEnginePageComponent = () => {
to={to}
/>
</WrapperPage>
</div>
</StyledFullHeightContainer>
) : (
<WrapperPage>
<DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />

14
x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
View file

@ -22,6 +22,7 @@ import { noop } from 'lodash/fp';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import {
useDeepEqualSelector,
@ -102,6 +103,15 @@ import * as ruleI18n from '../translations';
import * as i18n from './translations';
import { isTab } from '../../../../../common/components/accessibility/helpers';
/**
* Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
*/
const StyledFullHeightContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1 1 auto;
`;
enum RuleDetailTabs {
alerts = 'alerts',
failures = 'failures',
@ -460,7 +470,7 @@ const RuleDetailsPageComponent = () => {
<ReadOnlyAlertsCallOut />
<ReadOnlyRulesCallOut />
{indicesExist ? (
<div onKeyDown={onKeyDown} ref={containerElement}>
<StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
<EuiWindowEvent event="resize" handler={noop} />
<FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
<SiemSearchBar id="global" indexPattern={indexPattern} />
@ -618,7 +628,7 @@ const RuleDetailsPageComponent = () => {
)}
{ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
</WrapperPage>
</div>
</StyledFullHeightContainer>
) : (
<WrapperPage>
<DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />

14
x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
import styled from 'styled-components';
import { noop } from 'lodash/fp';
import React, { useCallback, useMemo, useRef } from 'react';
import { useDispatch } from 'react-redux';
@ -51,6 +52,15 @@ import { timelineDefaults } from '../../timelines/store/timeline/defaults';
import { useSourcererScope } from '../../common/containers/sourcerer';
import { useDeepEqualSelector, useShallowEqualSelector } from '../../common/hooks/use_selector';
/**
* Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
*/
const StyledFullHeightContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1 1 auto;
`;
const HostsComponent = () => {
const dispatch = useDispatch();
const containerElement = useRef<HTMLDivElement | null>(null);
@ -147,7 +157,7 @@ const HostsComponent = () => {
return (
<>
{indicesExist ? (
<div onKeyDown={onKeyDown} ref={containerElement}>
<StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
<EuiWindowEvent event="resize" handler={noop} />
<FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
<SiemSearchBar indexPattern={indexPattern} id="global" />
@ -197,7 +207,7 @@ const HostsComponent = () => {
type={hostsModel.HostsType.page}
/>
</WrapperPage>
</div>
</StyledFullHeightContainer>
) : (
<WrapperPage>
<HeaderPage border title={i18n.PAGE_TITLE} />

14
x-pack/plugins/security_solution/public/network/pages/network.tsx
View file

@ -9,6 +9,7 @@ import { noop } from 'lodash/fp';
import React, { useCallback, useMemo, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import { esQuery } from '../../../../../../src/plugins/data/public';
import { SecurityPageName } from '../../app/types';
@ -50,6 +51,15 @@ import { timelineDefaults } from '../../timelines/store/timeline/defaults';
import { useSourcererScope } from '../../common/containers/sourcerer';
import { useDeepEqualSelector, useShallowEqualSelector } from '../../common/hooks/use_selector';
/**
* Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
*/
const StyledFullHeightContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1 1 auto;
`;
const NetworkComponent = React.memo<NetworkComponentProps>(
({ networkPagePath, hasMlUserPermissions, capabilitiesFetched }) => {
const dispatch = useDispatch();
@ -138,7 +148,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
return (
<>
{indicesExist ? (
<div onKeyDown={onKeyDown} ref={containerElement}>
<StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
<EuiWindowEvent event="resize" handler={noop} />
<FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
<SiemSearchBar indexPattern={indexPattern} id="global" />
@ -207,7 +217,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
<NetworkRoutesLoading />
)}
</WrapperPage>
</div>
</StyledFullHeightContainer>
) : (
<WrapperPage>
<HeaderPage border title={i18n.PAGE_TITLE} />