Skip to content

Commit

Permalink
[SECURITY SOLUTION][INGEST] UX update for ingest manager edit/create …
Browse files Browse the repository at this point in the history 
…datasource for endpoint (#70079) (#70213)

[security solution][ingest]UX update for ingest manager edit/create datasource for endpoint

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
@parkiino @elasticmachine
parkiino and elasticmachine authored Jun 29, 2020
1 parent 4b0182e commit 16ccf8e
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 30 deletions.
25 changes: 18 additions & 7 deletions x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,42 @@
*/

import React, { memo, MouseEventHandler } from 'react';
import { EuiLink, EuiLinkProps } from '@elastic/eui';
import { EuiLink, EuiLinkProps, EuiButton, EuiButtonProps } from '@elastic/eui';
import { useNavigateToAppEventHandler } from '../../hooks/endpoint/use_navigate_to_app_event_handler';

type LinkToAppProps = EuiLinkProps & {
type LinkToAppProps = (EuiLinkProps | EuiButtonProps) & {
/** the app id - normally the value of the `id` in that plugin's `kibana.json` */
appId: string;
/** Any app specific path (route) */
appPath?: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
appState?: any;
onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
/** Uses an EuiButton element for styling */
asButton?: boolean;
};

/**
* An `EuiLink` that will use Kibana's `.application.navigateToApp()` to redirect the user to the
* a given app without causing a full browser refresh
*/
export const LinkToApp = memo<LinkToAppProps>(
({ appId, appPath: path, appState: state, onClick, children, ...otherProps }) => {
({ appId, appPath: path, appState: state, onClick, asButton, children, ...otherProps }) => {
const handleOnClick = useNavigateToAppEventHandler(appId, { path, state, onClick });

return (
// eslint-disable-next-line @elastic/eui/href-or-on-click
<EuiLink {...otherProps} onClick={handleOnClick}>
{children}
</EuiLink>
<>
{asButton && asButton === true ? (
<EuiButton {...(otherProps as EuiButtonProps)} onClick={handleOnClick}>
{children}
</EuiButton>
) : (
// eslint-disable-next-line @elastic/eui/href-or-on-click
<EuiLink {...otherProps} onClick={handleOnClick}>
{children}
</EuiLink>
)}
</>
);
}
);
68 changes: 45 additions & 23 deletions ...n/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

import React, { memo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
import { EuiCallOut, EuiText, EuiTitle, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app';
import {
CustomConfigureDatasourceContent,
Expand All @@ -21,43 +21,65 @@ import { getPolicyDetailPath } from '../../../../common/routing';
*/
export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent>(
({ from, datasourceId }: CustomConfigureDatasourceProps) => {
const { services } = useKibana();
let policyUrl = '';
if (from === 'edit' && datasourceId) {
policyUrl = getPolicyDetailPath(datasourceId);
}

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 />
<LinkToApp
data-test-subj="editLinkToPolicyDetails"
asButton={true}
appId="securitySolution:management"
className="editLinkToPolicyDetails"
appPath={policyUrl}
// Cannot use formalUrl here since the code is called in Ingest, which does not use redux
>
<FormattedMessage
id="xpack.securitySolution.endpoint.ingestManager.editDatasource.configurePolicyLink"
defaultMessage="Configure Policy"
/>
</LinkToApp>
</>
) : (
<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

0 comments on commit 16ccf8e

Please sign in to comment.