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] adjust policy onboarding view, check for Ingest permissions #70536

Merged
merged 22 commits into from
Jul 9, 2020
Merged

[SECURITY_SOLUTION] adjust policy onboarding view, check for Ingest permissions #70536

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
47eac9d
adjust policy onboarding view
kevinlog Jul 1, 2020
4bc6023
correct test subj
kevinlog Jul 2, 2020
d233ff7
fix tests
kevinlog Jul 2, 2020
3db51c2
Merge branch 'master' of github.com:kevinlog/kibana into task/onboard…
kevinlog Jul 2, 2020
e0f5209
re-enable tests
kevinlog Jul 2, 2020
fcc8cf2
add no permissions view
kevinlog Jul 2, 2020
4ea98d2
Merge branch 'master' into task/onboarding-ux-updates
elasticmachine Jul 6, 2020
33dd8fc
adjust onbording look
kevinlog Jul 6, 2020
f1df980
adjust text
kevinlog Jul 6, 2020
e49ecf9
Merge branch 'master' of github.com:kevinlog/kibana into task/onboard…
kevinlog Jul 7, 2020
44b402f
use ingest hook, add tests
kevinlog Jul 7, 2020
f9489e3
Merge branch 'master' into task/onboarding-ux-updates
elasticmachine Jul 7, 2020
b47a1b9
adjust text
kevinlog Jul 8, 2020
fa5f413
Merge branch 'task/onboarding-ux-updates' of github.com:kevinlog/kiba…
kevinlog Jul 8, 2020
d0e9e42
address comments
kevinlog Jul 8, 2020
c327fa3
Merge branch 'master' of github.com:kevinlog/kibana into task/onboard…
kevinlog Jul 9, 2020
4d7d081
beta badges
kevinlog Jul 9, 2020
bf532c1
fix test
kevinlog Jul 9, 2020
65a2248
Merge branch 'master' into task/onboarding-ux-updates
elasticmachine Jul 9, 2020
aa75c5e
Merge branch 'master' of github.com:kevinlog/kibana into task/onboard…
kevinlog Jul 9, 2020
133b471
Merge branch 'master' of github.com:kevinlog/kibana into task/onboard…
kevinlog Jul 9, 2020
7f8fb8d
correct timeline flyout
kevinlog Jul 9, 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
320 changes: 176 additions & 144 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 @@ -16,6 +16,7 @@ import {
EuiSelectable,
EuiSelectableMessage,
EuiSelectableProps,
EuiIcon,
EuiLoadingSpinner,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
Expand All @@ -35,71 +36,121 @@ const PolicyEmptyState = React.memo<{
onActionClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
actionDisabled?: boolean;
}>(({ loading, onActionClick, actionDisabled }) => {
const policySteps = useMemo(
() => [
{
title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepOneTitle', {
defaultMessage: 'Head over to Ingest Manager.',
}),
children: (
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.stepOne"
defaultMessage="Here, you’ll add the Elastic Endpoint Security Integration to your Agent Configuration."
/>
</EuiText>
),
},
{
title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepTwoTitle', {
defaultMessage: 'We’ll create a recommended security policy for you.',
}),
children: (
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.stepTwo"
defaultMessage="You can edit this policy in the “Policies” tab after you’ve added the Elastic Endpoint integration."
/>
</EuiText>
),
},
{
title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepThreeTitle', {
defaultMessage: 'Enroll your agents through Fleet.',
}),
children: (
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.stepThree"
defaultMessage="If you haven’t already, enroll your agents through Fleet using the same agent configuration."
/>
</EuiText>
),
},
],
[]
);

return (
<ManagementEmptyState
loading={loading}
onActionClick={onActionClick}
actionDisabled={actionDisabled}
dataTestSubj="emptyPolicyTable"
steps={policySteps}
headerComponent={
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.noPolicyPrompt"
defaultMessage="Looks like you're not using the Elastic Endpoint"
/>
}
bodyComponent={
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.noPolicyInstructions"
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."
/>
}
/>
<div data-test-subj="emptyPolicyTable">
{loading ? (
<EuiFlexGroup alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" className="essentialAnimation" />
</EuiFlexItem>
</EuiFlexGroup>
) : (
<EuiFlexGroup data-test-subj="policyOnboardingInstructions">
<EuiFlexItem>
<EuiText>
<h3>
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingTitle"
defaultMessage="Get started with Elastic Endpoint Security"
/>
</h3>
</EuiText>
<EuiSpacer size="xl" />
<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."
/>
</EuiText>
<EuiSpacer size="xl" />
<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."
Copy link
Contributor

@nnamdifrankie nnamdifrankie Jul 8, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll may be You will ?

/>
</EuiText>
<EuiSpacer size="xl" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ marginRight: '10px' }}>
<EuiIcon type="search" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginLeft: '0' }}>
<EuiText>
<h4>
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingHostTitle"
defaultMessage="Hosts"
/>
</h4>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingHostInfo"
defaultMessage="Hosts running the Elastic Endpoint"
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ marginRight: '10px' }}>
<EuiIcon type="tableDensityExpanded" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginLeft: '0' }}>
<EuiText>
<h4>
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingPolicyTitle"
defaultMessage="Policies"
/>
</h4>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.onboardingPolicyInfo"
defaultMessage="View and configure protections"
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xl" />
<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!"
/>
</EuiText>
<EuiSpacer size="xl" />
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
fill
iconType="plusInCircle"
onClick={onActionClick}
isDisabled={actionDisabled}
data-test-subj="onboardingStartButton"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.actionButtonText"
defaultMessage="Add Endpoint Security"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon type="logoSecurity" size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
)}
</div>
);
});

Expand All @@ -114,17 +165,17 @@ const EndpointsEmptyState = React.memo<{
() => [
{
title: i18n.translate('xpack.securitySolution.endpoint.endpointList.stepOneTitle', {
defaultMessage: 'Select a policy you created from the list below.',
defaultMessage: 'Select the policy you want to use to protect your hosts',
}),
children: (
<>
<EuiText color="subdued" size="xs">
<EuiText color="subdued" size="m" grow={false}>
<FormattedMessage
id="xpack.securitySolution.endpoint.endpointList.stepOne"
defaultMessage="These are existing policies."
defaultMessage="Existing policies are listed below. This can be changed later."
/>
</EuiText>
<EuiSpacer size="m" />
<EuiSpacer size="xxl" />
<EuiSelectable
options={selectionOptions}
singleSelection="always"
Expand Down Expand Up @@ -158,38 +209,54 @@ const EndpointsEmptyState = React.memo<{
{
title: i18n.translate('xpack.securitySolution.endpoint.endpointList.stepTwoTitle', {
defaultMessage:
'Head over to Ingest to deploy your Agent with Endpoint Security enabled.',
'Enroll your agents enabled with Endpoint Security through Ingest Manager',
}),
status: actionDisabled ? 'disabled' : '',
children: (
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.securitySolution.endpoint.endpointList.stepTwo"
defaultMessage="You'll be given a command in Ingest to get you started."
/>
</EuiText>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiText color="subdued" size="m" grow={false}>
<FormattedMessage
id="xpack.securitySolution.endpoint.endpointList.stepTwo"
defaultMessage="You’ll be provided with the necessary commands to get started."
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
onClick={onActionClick}
isDisabled={actionDisabled}
data-test-subj="onboardingStartButton"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.emptyCreateNewButton"
defaultMessage="Enroll Agent"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
),
},
],
[selectionOptions, handleSelectableOnChange, loading]
[selectionOptions, handleSelectableOnChange, loading, actionDisabled, onActionClick]
);

return (
<ManagementEmptyState
loading={loading}
onActionClick={onActionClick}
actionDisabled={actionDisabled}
dataTestSubj="emptyEndpointsTable"
steps={policySteps}
headerComponent={
<FormattedMessage
id="xpack.securitySolution.endpoint.endpointList.noEndpointsPrompt"
defaultMessage="You have a policy, but no Endpoints are deployed!"
defaultMessage="Enable Elastic Endpoint Security on your agents"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agents? Is something people are expected to know?

/>
}
bodyComponent={
<FormattedMessage
id="xpack.securitySolution.endpoint.endpointList.noEndpointsInstructions"
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="You’ve created your security policy. Now you need to enable the Elastic Endpoint Security capabilities on your agents following the steps below."
/>
}
/>
Expand All @@ -198,80 +265,45 @@ const EndpointsEmptyState = React.memo<{

const ManagementEmptyState = React.memo<{
loading: boolean;
onActionClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
actionDisabled?: boolean;
actionButton?: JSX.Element;
dataTestSubj: string;
steps?: ManagementStep[];
headerComponent: JSX.Element;
bodyComponent: JSX.Element;
}>(
({
loading,
onActionClick,
actionDisabled,
dataTestSubj,
steps,
actionButton,
headerComponent,
bodyComponent,
}) => {
return (
<div data-test-subj={dataTestSubj}>
{loading ? (
<EuiFlexGroup alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" className="essentialAnimation" />
</EuiFlexItem>
</EuiFlexGroup>
) : (
<>
<EuiSpacer size="xxl" />
<EuiTitle size="m">
<h2 style={TEXT_ALIGN_CENTER}>{headerComponent}</h2>
</EuiTitle>
<EuiSpacer size="xxl" />
<EuiText textAlign="center" color="subdued" size="s">
{bodyComponent}
</EuiText>
<EuiSpacer size="xxl" />
{steps && (
<EuiFlexGroup alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiSteps steps={steps} data-test-subj={'onboardingSteps'} />
</EuiFlexItem>
</EuiFlexGroup>
)}
}>(({ loading, dataTestSubj, steps, headerComponent, bodyComponent }) => {
return (
<div data-test-subj={dataTestSubj}>
{loading ? (
<EuiFlexGroup alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" className="essentialAnimation" />
</EuiFlexItem>
</EuiFlexGroup>
) : (
<>
<EuiSpacer size="xxl" />
<EuiTitle size="m">
<h2 style={TEXT_ALIGN_CENTER}>{headerComponent}</h2>
</EuiTitle>
<EuiSpacer size="xxl" />
<EuiText textAlign="center" color="subdued" size="m">
{bodyComponent}
</EuiText>
<EuiSpacer size="xxl" />
{steps && (
<EuiFlexGroup alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<>
{actionButton ? (
actionButton
) : (
<EuiButton
fill
onClick={onActionClick}
isDisabled={actionDisabled}
data-test-subj="onboardingStartButton"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.policyList.emptyCreateNewButton"
defaultMessage="Click here to get started"
/>
</EuiButton>
)}
</>
<EuiSteps steps={steps} data-test-subj={'onboardingSteps'} />
</EuiFlexItem>
</EuiFlexGroup>
</>
)}
</div>
);
}
);
)}
</>
)}
</div>
);
});

PolicyEmptyState.displayName = 'PolicyEmptyState';
EndpointsEmptyState.displayName = 'EndpointsEmptyState';
ManagementEmptyState.displayName = 'ManagementEmptyState';

export { PolicyEmptyState, EndpointsEmptyState, ManagementEmptyState };
export { PolicyEmptyState, EndpointsEmptyState };
Loading