Skip to content

Commit

Permalink
center max-width, use margin 0 auto
Browse files Browse the repository at this point in the history
  • Loading branch information
@parkiino
parkiino committed Feb 22, 2021
1 parent eeab8d0 commit 0e523d5
Showing 1 changed file with 78 additions and 64 deletions.
142 changes: 78 additions & 64 deletions x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
* 2.0.
*/

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import React, { useCallback, useEffect, useMemo, useState, useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import {
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -33,7 +33,6 @@ import {
} from '../store/policy_details/selectors';
import { useKibana, toMountPoint } from '../../../../../../../../src/plugins/kibana_react/public';
import { AgentsSummary } from './agents_summary';
import { VerticalDivider } from './vertical_divider';
import { useToasts } from '../../../../common/lib/kibana';
import { AppAction } from '../../../../common/store/actions';
import { SpyRoute } from '../../../../common/utils/route/spy_routes';
Expand All @@ -47,15 +46,23 @@ import { WrapperPage } from '../../../../common/components/wrapper_page';
import { HeaderPage } from '../../../../common/components/header_page';
import { PolicyDetailsForm } from './policy_details_form';

const wideSideMargin = '130px';
const PolicyDetailsHeader = styled(HeaderPage)`
margin: 0;
padding: ${(props) => props.theme.eui.paddingSizes.l} ${wideSideMargin};
const maxFormWidth = '770px';
const PolicyDetailsHeader = styled.div`
padding: ${(props) => props.theme.eui.paddingSizes.xl} 0;
background-color: #fafbfd;
border-bottom: 1px solid #d3dae6;
.siemHeaderPage {
max-width: ${maxFormWidth};
margin: 0 auto;
}
`;

const PolicyDetailsFormDiv = styled.div`
background-color: ${(props) => props.theme.eui.euiHeaderBackgroundColor};
padding: ${(props) => props.theme.eui.paddingSizes.l} ${wideSideMargin};
padding: ${(props) => props.theme.eui.paddingSizes.l} 0;
max-width: ${maxFormWidth};
flex: 1;
align-self: center;
`;

export const PolicyDetails = React.memo(() => {
Expand All @@ -81,6 +88,7 @@ export const PolicyDetails = React.memo(() => {
const [routeState, setRouteState] = useState<PolicyDetailsRouteState>();
const policyName = policyItem?.name ?? '';
const hostListRouterPath = getEndpointListPath({ name: 'endpointList' });
const theme = useContext(ThemeContext);

// Handle showing update statuses
useEffect(() => {
Expand Down Expand Up @@ -165,16 +173,12 @@ export const PolicyDetails = React.memo(() => {
}

const headerRightContent = (
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<AgentsSummary
total={policyAgentStatusSummary?.total ?? 0}
online={policyAgentStatusSummary?.online ?? 0}
offline={policyAgentStatusSummary?.offline ?? 0}
error={policyAgentStatusSummary?.error ?? 0}
/>
</EuiFlexItem>
</EuiFlexGroup>
<AgentsSummary
total={policyAgentStatusSummary?.total ?? 0}
online={policyAgentStatusSummary?.online ?? 0}
offline={policyAgentStatusSummary?.offline ?? 0}
error={policyAgentStatusSummary?.error ?? 0}
/>
);

return (
Expand All @@ -186,58 +190,68 @@ export const PolicyDetails = React.memo(() => {
onConfirm={handleSaveConfirmation}
/>
)}
<WrapperPage noTimeline data-test-subj="policyDetailsPage" noPadding>
<PolicyDetailsHeader
border
hideSourcerer={true}
title={policyItem.name}
backOptions={{
text: i18n.translate('xpack.securitySolution.endpoint.policy.details.backToListTitle', {
defaultMessage: 'Back to endpoint hosts',
}),
href: formatUrl(hostListRouterPath),
pageId: SecurityPageName.administration,
dataTestSubj: 'policyDetailsBackLink',
}}
>
{headerRightContent}
<WrapperPage
noTimeline
data-test-subj="policyDetailsPage"
noPadding
style={{ 'background-color': theme.eui.euiHeaderBackgroundColor }}
className="policyDetailsPage"
>
<PolicyDetailsHeader>
<HeaderPage
hideSourcerer={true}
title={policyItem.name}
backOptions={{
text: i18n.translate(
'xpack.securitySolution.endpoint.policy.details.backToListTitle',
{
defaultMessage: 'Back to endpoint hosts',
}
),
href: formatUrl(hostListRouterPath),
pageId: SecurityPageName.administration,
dataTestSubj: 'policyDetailsBackLink',
}}
>
{headerRightContent}
</HeaderPage>
</PolicyDetailsHeader>

<PolicyDetailsFormDiv>
<PolicyDetailsForm />
</PolicyDetailsFormDiv>
<EuiBottomBar paddingSize="s">
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="ghost"
onClick={handleCancelOnClick}
data-test-subj="policyDetailsCancelButton"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policy.details.cancel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill={true}
color="text"
iconType="save"
data-test-subj="policyDetailsSaveButton"
onClick={handleSaveOnClick}
isLoading={isPolicyLoading}
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policy.details.save"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
<EuiSpacer size="xxl" />
</WrapperPage>
<EuiBottomBar paddingSize="s">
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="ghost"
onClick={handleCancelOnClick}
data-test-subj="policyDetailsCancelButton"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policy.details.cancel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill={true}
iconType="save"
data-test-subj="policyDetailsSaveButton"
onClick={handleSaveOnClick}
isLoading={isPolicyLoading}
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policy.details.save"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>

<SpyRoute pageName={SecurityPageName.administration} />
</>
Expand Down

0 comments on commit 0e523d5

Please sign in to comment.