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

Jump to bottom

[SECURITY SOLUTION][INGEST] UX update for ingest manager edit/create datasource for endpoint #70079

Merged
merged 3 commits into from
Jun 27, 2020
Merged

[SECURITY SOLUTION][INGEST] UX update for ingest manager edit/create datasource for endpoint #70079

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e55c41
UX update for ingest manager edit/create datasource for endpoint
parkiino Jun 26, 2020
6bd2f89
remove link from within button
parkiino Jun 26, 2020
327caee
remove unnecessary import
parkiino Jun 26, 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
70 changes: 49 additions & 21 deletions ...n/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

import React, { memo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
import { EuiCallOut, EuiText, EuiTitle, EuiButton, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app';
import {
Expand All @@ -28,36 +29,63 @@ export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent
}

return (
<EuiEmptyPrompt
data-test-subj={`endpointDatasourceConfig_${from === 'edit' ? 'edit' : 'create'}`}
body={
<EuiText>
<>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.securitySolution.endpoint.ingestManager.policyConfiguration"
defaultMessage="Policy Configuration"
/>
</h4>
</EuiTitle>
<EuiSpacer size="m" />
<EuiCallOut
data-test-subj={`endpointDatasourceConfig_${from === 'edit' ? 'edit' : 'create'}`}
iconType="iInCircle"
title={i18n.translate(
'xpack.securitySolution.endpoint.ingestManager.policyConfiguration.calloutTitle',
{
defaultMessage: 'Manage Policy configuration in the Security app',
}
)}
>
<EuiText size="s">
<p>
{from === 'edit' ? (
<LinkToApp
data-test-subj="editLinkToPolicyDetails"
appId="securitySolution:management"
appPath={policyUrl}
// Cannot use formalUrl here since the code is called in Ingest, which does not use redux
href={`${services.application.getUrlForApp(
'securitySolution:management'
)}${policyUrl}`}
>
<>
<FormattedMessage
id="xpack.securitySolution.endpoint.ingestManager.editDatasource.stepConfigure"
defaultMessage="View and configure Security Policy"
id="xpack.securitySolution.endpoint.ingestManager.editDatasource.endpointConfiguration"
defaultMessage="You can make changes to the Policy Configuration in the Security app. Fleet will deploy changes to your agents whenever your Policy changes."
/>
</LinkToApp>
<EuiSpacer />
<EuiButton>
Copy link
Contributor

Choose a reason for hiding this comment

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

This does not seem right - to have a Button with a link inside of it.

LinkToApp is actually an extension of EuiLink and that Eui component support a type property - just use that and set it to button??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

:O wait you're right!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

i don't think the EuiButton styling shows up if you change the type to button tho. I guess I was trying to avoid restyling the link into a button.

<LinkToApp
data-test-subj="editLinkToPolicyDetails"
appId="securitySolution:management"
className="editLinkToPolicyDetails"
appPath={policyUrl}
// Cannot use formalUrl here since the code is called in Ingest, which does not use redux
href={`${services.application.getUrlForApp(
'securitySolution:management'
)}${policyUrl}`}
>
<FormattedMessage
id="xpack.securitySolution.endpoint.ingestManager.editDatasource.configurePolicyLink"
defaultMessage="Configure Policy"
/>
</LinkToApp>
</EuiButton>
</>
) : (
<FormattedMessage
id="xpack.securitySolution.endpoint.ingestManager.createDatasource.stepConfigure"
defaultMessage="The recommended Security Policy has been associated with this data source. The Security Policy can be edited in the Security application once your data source has been saved."
id="xpack.securitySolution.endpoint.ingestManager.createDatasource.endpointConfiguration"
defaultMessage="Any agents that use this agent configuration will use a basic policy. You can make changes to this policy in the Security app, and Fleet will deploy those changes to your agents."
/>
)}
</p>
</EuiText>
}
/>
</EuiCallOut>
</>
);
}
);
Expand Down