Depanel fleet setup pages (#105502)

Improves the layout of the fleet onboarding pages.
This commit is contained in:
Dave Snider 2021-07-14 12:05:30 -04:00 committed by GitHub
parent 41bd4b287d
commit a9627ab394
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 61 deletions

View file

@ -8,7 +8,6 @@
import React, { useEffect } from 'react';
import {
EuiButton,
EuiPanel,
EuiLink,
EuiEmptyPrompt,
EuiFlexItem,
@ -39,62 +38,54 @@ export const CloudInstructions: React.FC<{ deploymentUrl: string }> = ({ deploym
return (
<>
<EuiPanel
paddingSize="none"
grow={false}
hasShadow={false}
hasBorder={true}
className="eui-textCenter"
>
<EuiEmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.cloudSetupTitle"
defaultMessage="Enable APM & Fleet"
/>
</h2>
}
body={
<EuiEmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.cloudSetupText"
defaultMessage="A Fleet Server is required before you can enroll agents with Fleet. You can add one to your deployment by enabling APM & Fleet. For more information see the {link}"
values={{
link: (
<EuiLink
href={docLinks.links.fleet.fleetServerAddFleetServer}
target="_blank"
external
>
<FormattedMessage
id="xpack.fleet.settings.userGuideLink"
defaultMessage="Fleet User Guide"
/>
</EuiLink>
),
}}
id="xpack.fleet.fleetServerSetup.cloudSetupTitle"
defaultMessage="Enable APM & Fleet"
/>
}
actions={
<>
<EuiButton
iconSide="right"
iconType="popout"
fill
isLoading={false}
type="submit"
href={`${deploymentUrl}/edit`}
target="_blank"
>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.cloudDeploymentLink"
defaultMessage="Edit deployment"
/>
</EuiButton>
</>
}
/>
</EuiPanel>
</h2>
}
body={
<FormattedMessage
id="xpack.fleet.fleetServerSetup.cloudSetupText"
defaultMessage="A Fleet Server is required before you can enroll agents with Fleet. You can add one to your deployment by enabling APM & Fleet. For more information see the {link}"
values={{
link: (
<EuiLink
href={docLinks.links.fleet.fleetServerAddFleetServer}
target="_blank"
external
>
<FormattedMessage
id="xpack.fleet.settings.userGuideLink"
defaultMessage="Fleet User Guide"
/>
</EuiLink>
),
}}
/>
}
actions={
<>
<EuiButton
iconSide="right"
iconType="popout"
fill
isLoading={false}
type="submit"
href={`${deploymentUrl}/edit`}
target="_blank"
>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.cloudDeploymentLink"
defaultMessage="Edit deployment"
/>
</EuiButton>
</>
}
/>
<EuiSpacer size="m" />
<EuiFlexItem>
<EuiFlexGroup justifyContent="center" gutterSize="s">

View file

@ -10,7 +10,6 @@ import {
EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiText,
EuiLink,
@ -737,9 +736,8 @@ export const OnPremInstructions: React.FC = () => {
}, [notifications.toasts]);
return (
<EuiPanel paddingSize="l" grow={false} hasShadow={false} hasBorder={true}>
<EuiSpacer size="s" />
<EuiText className="eui-textCenter">
<>
<EuiText>
<h2>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.setupTitle"
@ -788,6 +786,6 @@ export const OnPremInstructions: React.FC = () => {
: CompleteStep(),
]}
/>
</EuiPanel>
</>
);
};

View file

@ -21,7 +21,6 @@ const FlexItemWithMinWidth = styled(EuiFlexItem)`
const ContentWrapper = styled(EuiFlexGroup)`
height: 100%;
margin: 0 auto;
max-width: 800px;
`;
export const FleetServerRequirementPage = () => {