Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SECURITY_SOLUTION] add onboarding logo #71471

Merged
merged 4 commits into from
Jul 13, 2020
Merged

[SECURITY_SOLUTION] add onboarding logo #71471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e42a05
add onboarding log
kevinlog Jul 13, 2020
3642880
update text
kevinlog Jul 13, 2020
9793123
styling adjustments
kevinlog Jul 13, 2020
8183f82
add docs link
kevinlog Jul 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 27 additions & 14 deletions x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,21 @@ import {
EuiSelectableProps,
EuiIcon,
EuiLoadingSpinner,
EuiLink,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import onboardingLogo from '../images/security_administration_onboarding.svg';

const TEXT_ALIGN_CENTER: CSSProperties = Object.freeze({
textAlign: 'center',
});

const MAX_SIZE_ONBOARDING_LOGO: CSSProperties = Object.freeze({
maxWidth: 550,
maxHeight: 420,
});

interface ManagementStep {
title: string;
children: JSX.Element;
Expand All @@ -45,7 +52,7 @@ const PolicyEmptyState = React.memo<{
</EuiFlexItem>
</EuiFlexGroup>
) : (
<EuiFlexGroup data-test-subj="policyOnboardingInstructions">
<EuiFlexGroup data-test-subj="policyOnboardingInstructions" alignItems="center">
<EuiFlexItem>
<EuiText>
<h3>
Expand All @@ -55,26 +62,26 @@ const PolicyEmptyState = React.memo<{
/>
</h3>
</EuiText>
<EuiSpacer size="xl" />
<EuiSpacer size="m" />
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingSectionOne"
defaultMessage="Elastic Endpoint Security gives you the power to keep your endpoints safe from attack, as well as unparalleled visibility into any threat in your environment."
defaultMessage="Elastic Endpoint Security protects your hosts with threat prevention, detection, and deep security data visibility."
/>
</EuiText>
<EuiSpacer size="xl" />
<EuiSpacer size="m" />
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingSectionTwo"
defaultMessage="You’ll be able to view and manage hosts in your environment running the Elastic Endpoint from this page."
defaultMessage="From this page, you’ll be able to view and manage the hosts in your environment running Elastic Endpoint Security."
/>
</EuiText>
<EuiSpacer size="xl" />
<EuiFlexGroup>
<EuiSpacer size="m" />
<EuiFlexGroup alignItems="center" style={{ maxWidth: '90%' }}>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ marginRight: '10px' }}>
<EuiIcon type="search" />
<EuiIcon type="grid" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginLeft: '0' }}>
<EuiText>
Expand All @@ -91,14 +98,14 @@ const PolicyEmptyState = React.memo<{
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingHostInfo"
defaultMessage="Hosts running the Elastic Endpoint"
defaultMessage="Hosts running Elastic Endpoint Security"
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ marginRight: '10px' }}>
<EuiIcon type="tableDensityExpanded" />
<EuiIcon type="controlsHorizontal" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginLeft: '0' }}>
<EuiText>
Expand All @@ -120,14 +127,20 @@ const PolicyEmptyState = React.memo<{
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xl" />
<EuiSpacer size="m" />
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingSectionThree"
defaultMessage="To get started, you’ll have to add the Elastic Endpoint integration to your Agents. Let’s do that now!"
defaultMessage="To get started, add the Elastic Endpoint Security integration to your Agents. For more information, "
/>
<EuiLink external href="https://www.elastic.co/guide/en/security/current/index.html">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingDocsLink"
defaultMessage="view the Security app documentation"
/>
</EuiLink>
</EuiText>
<EuiSpacer size="xl" />
<EuiSpacer size="l" />
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
Expand All @@ -146,7 +159,7 @@ const PolicyEmptyState = React.memo<{
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon type="logoSecurity" size="xl" />
<EuiIcon type={onboardingLogo} size="original" style={MAX_SIZE_ONBOARDING_LOGO} />
</EuiFlexItem>
</EuiFlexGroup>
)}
Expand Down
1 change: 1 addition & 0 deletions ...curity_solution/public/management/images/security_administration_onboarding.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ export const HostList = () => {
<p>
<FormattedMessage
id="xpack.securitySolution.hostList.pageSubTitle"
defaultMessage="Hosts running the Elastic Endpoint"
defaultMessage="Hosts running Elastic Endpoint Security"
/>
</p>
</EuiText>
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/overview/components/endpoint_notice/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const EndpointNotice = memo<{ onDismiss: () => void }>(({ onDismiss }) =>
<p>
<FormattedMessage
id="xpack.securitySolution.overview.endpointNotice.message"
defaultMessage="Elastic Endpoint Security gives you the power to keep your endpoints safe from attack, as well as unparalleled visibility into any threat in your environment."
defaultMessage="Protect your hosts with threat prevention, detection, and deep security data visibility."
/>
</p>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click*/}
Expand Down