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

Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 19, 2021 · 0a1af80 · 0a1af80
1 parent 55d1065
commit 0a1af80
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 8 deletions.
diff --git a/...k/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx b/...k/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
@@ -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} />

diff --git a/...lugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx b/...lugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
@@ -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} />

diff --git a/x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx b/x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx
@@ -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} />

diff --git a/x-pack/plugins/security_solution/public/network/pages/network.tsx b/x-pack/plugins/security_solution/public/network/pages/network.tsx
@@ -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} />