Skip to content

Commit

Permalink
PR comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrykkopycinski
patrykkopycinski committed Oct 12, 2020
1 parent d99d673 commit 0edc73b
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 83 deletions.
17 changes: 13 additions & 4 deletions x-pack/plugins/security_solution/public/app/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useRef } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';

import { TimelineId } from '../../../common/types/timeline';
Expand Down Expand Up @@ -44,9 +44,18 @@ interface HomePageProps {
}

const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
const { application } = useKibana().services;
const { application, overlays } = useKibana().services;
const subPluginId = useRef<string>('');
const { ref, height = 0 } = useThrottledResizeObserver(300);
const banners$ = overlays.banners.get$();
const [headerFixed, setHeaderFixed] = useState<boolean>(true);
const mainPaddingTop = useMemo(() => (headerFixed ? height : 0), [headerFixed, height]);

useEffect(() => {
const subscription = banners$.subscribe((banners) => setHeaderFixed(!banners.length));
return () => subscription.unsubscribe();
}, [banners$]); // Only un/re-subscribe if the Observable changes

application.currentAppId$.subscribe((appId) => {
subPluginId.current = appId ?? '';
});
Expand All @@ -72,9 +81,9 @@ const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {

return (
<SecuritySolutionAppWrapper>
<HeaderGlobal ref={ref} />
<HeaderGlobal ref={ref} isFixed={headerFixed} />

<Main paddingTop={height} data-test-subj="pageContainer">
<Main paddingTop={mainPaddingTop} data-test-subj="pageContainer">
<DragDropContextWrapper browserFields={browserFields}>
<UseUrlState indexPattern={indexPattern} navTabs={navTabs} />
{indicesExist && showTimeline && (
Expand Down
139 changes: 71 additions & 68 deletions x-pack/plugins/security_solution/public/common/components/header_global/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ import { APP_ID, ADD_DATA_PATH, APP_DETECTIONS_PATH } from '../../../../common/c
import { useGlobalHeaderPortal } from '../../hooks/use_global_header_portal';
import { LinkAnchor } from '../links';

const Wrapper = styled.header`
${({ theme }) => `
const Wrapper = styled.header<{ $isFixed: boolean }>`
${({ theme, $isFixed }) => `
background: ${theme.eui.euiColorEmptyShade};
border-bottom: ${theme.eui.euiBorderThin};
width: 100%;
z-index: ${theme.eui.euiZNavigation};
position: fixed;
position: ${$isFixed ? 'fixed' : 'relative'};
`}
`;
Wrapper.displayName = 'Wrapper';
Expand Down Expand Up @@ -62,75 +62,78 @@ FlexGroup.displayName = 'FlexGroup';

interface HeaderGlobalProps {
hideDetectionEngine?: boolean;
isFixed?: boolean;
}
export const HeaderGlobal = React.memo(
forwardRef<HTMLDivElement, HeaderGlobalProps>(({ hideDetectionEngine = false }, ref) => {
const { globalHeaderPortalNode } = useGlobalHeaderPortal();
const { globalFullScreen } = useFullScreen();
const search = useGetUrlSearch(navTabs.overview);
const { application, http } = useKibana().services;
const { navigateToApp } = application;
const basePath = http.basePath.get();
const goToOverview = useCallback(
(ev) => {
ev.preventDefault();
navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, { path: search });
},
[navigateToApp, search]
);
return (
<Wrapper ref={ref} className="siemHeaderGlobal">
<WrapperContent $globalFullScreen={globalFullScreen}>
<FlexGroup
alignItems="center"
$hasSibling={globalHeaderPortalNode.hasChildNodes()}
justifyContent="spaceBetween"
wrap
>
<FlexItem>
<EuiFlexGroup alignItems="center" responsive={false}>
<FlexItem grow={false}>
<LinkAnchor onClick={goToOverview} href={getAppOverviewUrl(search)}>
<EuiIcon aria-label={i18n.SECURITY_SOLUTION} type="logoSecurity" size="l" />
</LinkAnchor>
</FlexItem>

<FlexItem component="nav">
<SiemNavigation
display="condensed"
navTabs={
hideDetectionEngine
? pickBy((_, key) => key !== SecurityPageName.detections, navTabs)
: navTabs
}
/>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
<FlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
{window.location.pathname.includes(APP_DETECTIONS_PATH) && (
forwardRef<HTMLDivElement, HeaderGlobalProps>(
({ hideDetectionEngine = false, isFixed = true }, ref) => {
const { globalHeaderPortalNode } = useGlobalHeaderPortal();
const { globalFullScreen } = useFullScreen();
const search = useGetUrlSearch(navTabs.overview);
const { application, http } = useKibana().services;
const { navigateToApp } = application;
const basePath = http.basePath.get();
const goToOverview = useCallback(
(ev) => {
ev.preventDefault();
navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, { path: search });
},
[navigateToApp, search]
);
return (
<Wrapper ref={ref} $isFixed={isFixed}>
<WrapperContent $globalFullScreen={globalFullScreen}>
<FlexGroup
alignItems="center"
$hasSibling={globalHeaderPortalNode.hasChildNodes()}
justifyContent="spaceBetween"
wrap
>
<FlexItem>
<EuiFlexGroup alignItems="center" responsive={false}>
<FlexItem grow={false}>
<MlPopover />
<LinkAnchor onClick={goToOverview} href={getAppOverviewUrl(search)}>
<EuiIcon aria-label={i18n.SECURITY_SOLUTION} type="logoSecurity" size="l" />
</LinkAnchor>
</FlexItem>

<FlexItem component="nav">
<SiemNavigation
display="condensed"
navTabs={
hideDetectionEngine
? pickBy((_, key) => key !== SecurityPageName.detections, navTabs)
: navTabs
}
/>
</FlexItem>
)}
</EuiFlexGroup>
</FlexItem>
<FlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
{window.location.pathname.includes(APP_DETECTIONS_PATH) && (
<FlexItem grow={false}>
<MlPopover />
</FlexItem>
)}

<FlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="add-data"
href={`${basePath}${ADD_DATA_PATH}`}
iconType="plusInCircle"
>
{i18n.BUTTON_ADD_DATA}
</EuiButtonEmpty>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
</FlexGroup>
<OutPortal node={globalHeaderPortalNode} />
</WrapperContent>
</Wrapper>
);
})
<FlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="add-data"
href={`${basePath}${ADD_DATA_PATH}`}
iconType="plusInCircle"
>
{i18n.BUTTON_ADD_DATA}
</EuiButtonEmpty>
</FlexItem>
</EuiFlexGroup>
</FlexItem>
</FlexGroup>
<OutPortal node={globalHeaderPortalNode} />
</WrapperContent>
</Wrapper>
);
}
)
);
HeaderGlobal.displayName = 'HeaderGlobal';
5 changes: 0 additions & 5 deletions x-pack/plugins/security_solution/public/common/components/page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
background-color: rgba(0,0,0,0);
}
// Hide global banners and display them manually inside WrapperPage
#globalBannerList {
display:none;
}
div.application {
background-color: rgba(0,0,0,0);
Expand Down
11 changes: 5 additions & 6 deletions x-pack/plugins/security_solution/public/common/components/wrapper_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,16 @@ const Wrapper = styled.div`
flex-direction: column;
flex: 1 1 auto;
}
`;

Wrapper.displayName = 'Wrapper';

.kbnGlobalBannerList {
const BannersWrapper = styled.div`
> div {
padding: 0 0 ${({ theme }) => `${theme.eui.paddingSizes.l}`} 0;
}
`;

Wrapper.displayName = 'Wrapper';

interface WrapperPageProps {
children: React.ReactNode;
restrictWidth?: boolean | number | string;
Expand All @@ -58,8 +60,6 @@ const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
noTimeline,
...otherProps
}) => {
const Banners = useKibana().services.overlays.banners.getComponent();

const { globalFullScreen, setGlobalFullScreen } = useFullScreen();
useEffect(() => {
setGlobalFullScreen(false); // exit full screen mode on page load
Expand All @@ -74,7 +74,6 @@ const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({

return (
<Wrapper className={classes} style={style} {...otherProps}>
{Banners}
{children}
<AppGlobalStyle />
</Wrapper>
Expand Down

0 comments on commit 0edc73b

Please sign in to comment.