github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

New extension point for multi step onboarding process. Also hides advanced options for endpoint package (#141748)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
David Sánchez 2022-09-27 15:53:29 +02:00 • committed by GitHub
parent ab00a75937
commit 5adfb8f070
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 128 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/fleet/dev_docs/fleet_ui_extensions.md
View file

@ -33,6 +33,12 @@ export class Plugin {
component: LazyEndpointPolicyCreateExtension,
});
registerExtension({
package: 'endpoint',
view: 'package-policy-create-multi-step',
component: LazyEndpointPolicyCreateMultiStepExtension,
});
registerExtension({
package: 'endpoint',
view: 'package-detail-custom',

79
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/add_integration.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useCallback, useState, useEffect } from 'react';
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiSpacer, EuiButtonEmpty, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { safeLoad } from 'js-yaml';
@ -19,9 +19,9 @@ import { isVerificationError } from '../../../../../../../../services';
import type { MultiPageStepLayoutProps } from '../../types';
import type { PackagePolicyFormState } from '../../../types';
import type { NewPackagePolicy } from '../../../../../../types';
import { sendCreatePackagePolicy, useStartServices } from '../../../../../../hooks';
import { sendCreatePackagePolicy, useStartServices, useUIExtension } from '../../../../../../hooks';
import type { RequestError } from '../../../../../../hooks';
import { Error } from '../../../../../../components';
import { Error, ExtensionWrapper } from '../../../../../../components';
import { sendGeneratePackagePolicy } from '../../hooks';
import { CreatePackagePolicyBottomBar, StandaloneModeWarningCallout } from '..';
import type { PackagePolicyValidationResults } from '../../../services';
@ -212,6 +212,55 @@ export const AddIntegrationPageStep: React.FC<MultiPageStepLayoutProps> = (props
getBasePolicy();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const extensionView = useUIExtension(packageInfo.name ?? '', 'package-policy-create-multi-step');
const addIntegrationExtensionView = useMemo(() => {
return (
extensionView && (
<ExtensionWrapper>
<extensionView.Component newPolicy={packagePolicy} />
</ExtensionWrapper>
)
);
}, [packagePolicy, extensionView]);
const content = useMemo(() => {
if (packageInfo.name !== 'endpoint') {
return (
<>
<EuiSpacer size={'l'} />
<StepConfigurePackagePolicy
packageInfo={packageInfo}
showOnlyIntegration={integrationInfo?.name}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
noTopRule={true}
/>
{validationResults && (
<ExpandableAdvancedSettings>
<StepDefinePackagePolicy
packageInfo={packageInfo}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
noAdvancedToggle={true}
/>
</ExpandableAdvancedSettings>
)}
</>
);
}
}, [
formState,
integrationInfo?.name,
packageInfo,
packagePolicy,
updatePackagePolicy,
validationResults,
]);
if (!agentPolicy) {
return (
<AddIntegrationError
@ -228,28 +277,8 @@ export const AddIntegrationPageStep: React.FC<MultiPageStepLayoutProps> = (props
return (
<>
{isManaged ? null : <StandaloneModeWarningCallout setIsManaged={setIsManaged} />}
<EuiSpacer size={'l'} />
<StepConfigurePackagePolicy
packageInfo={packageInfo}
showOnlyIntegration={integrationInfo?.name}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
noTopRule={true}
/>
{validationResults && (
<ExpandableAdvancedSettings>
<StepDefinePackagePolicy
packageInfo={packageInfo}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
noAdvancedToggle={true}
/>
</ExpandableAdvancedSettings>
)}
{content}
{addIntegrationExtensionView}
<NotObscuredByBottomBar />
<CreatePackagePolicyBottomBar
cancelClickHandler={isManaged ? onBack : () => setIsManaged(true)}

3
x-pack/plugins/fleet/public/index.ts
View file

@ -35,6 +35,9 @@ export type {
PackagePolicyCreateExtension,
PackagePolicyCreateExtensionComponent,
PackagePolicyCreateExtensionComponentProps,
PackagePolicyCreateMultiStepExtension,
PackagePolicyCreateMultiStepExtensionComponent,
PackagePolicyCreateMultiStepExtensionComponentProps,
PackagePolicyEditExtension,
PackagePolicyEditExtensionComponent,
PackagePolicyEditExtensionComponentProps,

22
x-pack/plugins/fleet/public/types/ui_extensions.ts
View file

@ -132,6 +132,25 @@ export interface PackagePolicyCreateExtension {
Component: LazyExoticComponent<PackagePolicyCreateExtensionComponent>;
}
/**
* UI Component Extension is used on the pages displaying the ability to Create a multi step
* Integration Policy
*/
export type PackagePolicyCreateMultiStepExtensionComponent =
ComponentType<PackagePolicyCreateMultiStepExtensionComponentProps>;
export interface PackagePolicyCreateMultiStepExtensionComponentProps {
/** The integration policy being created */
newPolicy: NewPackagePolicy;
}
/** Extension point registration contract for Integration Policy Create views in multi-step onboarding */
export interface PackagePolicyCreateMultiStepExtension {
package: string;
view: 'package-policy-create-multi-step';
Component: LazyExoticComponent<PackagePolicyCreateMultiStepExtensionComponent>;
}
/**
* UI Component Extension is used to display a Custom tab (and view) under a given Integration
*/
@ -178,4 +197,5 @@ export type UIExtensionPoint =
| PackagePolicyCreateExtension
| PackageAssetsExtension
| PackageGenericErrorsListExtension
| AgentEnrollmentFlyoutFinalStepExtension;
| AgentEnrollmentFlyoutFinalStepExtension
| PackagePolicyCreateMultiStepExtension;

18
x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx Normal file
View file

@ -0,0 +1,18 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { memo } from 'react';
import type { PackagePolicyCreateMultiStepExtensionComponentProps } from '@kbn/fleet-plugin/public';
/**
* TBD: A component to be displayed in multi step onboarding process.
*/
export const EndpointPolicyCreateMultiStepExtension =
memo<PackagePolicyCreateMultiStepExtensionComponentProps>(({ newPolicy }) => {
return <></>;
});
EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension';

19
x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/lazy_endpoint_policy_create_multi_step_extension.tsx Normal file
View file

@ -0,0 +1,19 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { lazy } from 'react';
import type { PackagePolicyCreateMultiStepExtensionComponent } from '@kbn/fleet-plugin/public';
export const LazyEndpointPolicyCreateMultiStepExtension =
lazy<PackagePolicyCreateMultiStepExtensionComponent>(async () => {
const { EndpointPolicyCreateMultiStepExtension } = await import(
'./endpoint_policy_create_multi_step_extension'
);
return {
default: EndpointPolicyCreateMultiStepExtension,
};
});

7
x-pack/plugins/security_solution/public/plugin.tsx
View file

@ -60,6 +60,7 @@ import { ExperimentalFeaturesService } from './common/experimental_features_serv
import { getLazyEndpointPolicyEditExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_policy_edit_extension';
import { LazyEndpointPolicyCreateExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_policy_create_extension';
import { LazyEndpointPolicyCreateMultiStepExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_policy_create_multi_step_extension';
import { getLazyEndpointPackageCustomExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_package_custom_extension';
import { getLazyEndpointPolicyResponseExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_policy_response_extension';
import { getLazyEndpointGenericErrorsListExtension } from './management/pages/policy/view/ingest_manager_integration/lazy_endpoint_generic_errors_list';
@ -246,6 +247,12 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
Component: LazyEndpointPolicyCreateExtension,
});
registerExtension({
package: 'endpoint',
view: 'package-policy-create-multi-step',
Component: LazyEndpointPolicyCreateMultiStepExtension,
});
registerExtension({
package: 'endpoint',
view: 'package-detail-custom',