Skip to content

Commit

Permalink
add new extension
Browse files Browse the repository at this point in the history
  • Loading branch information
@orouz
orouz committed Jan 29, 2023
1 parent 2a57862 commit 2499179
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 45 deletions.
26 changes: 25 additions & 1 deletion ...tions/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,11 +267,34 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
);

const extensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-create');
const replaceDefineStepView = useUIExtension(
packagePolicy.package?.name ?? '',
'package-policy-replace-define-step'
);

if (replaceDefineStepView && extensionView) {
// eslint-disable-next-line no-console
console.warn(
"'package-policy-create' is ignored when 'package-policy-replace-define-step' is defined"
);
}

const stepConfigurePackagePolicy = useMemo(
() =>
isPackageInfoLoading || !isInitialized ? (
<Loading />
) : replaceDefineStepView && packageInfo?.name ? (
<ExtensionWrapper>
<replaceDefineStepView.Component
agentPolicy={agentPolicy}
packageInfo={packageInfo}
newPolicy={packagePolicy}
onChange={handleExtensionViewOnChange}
validationResults={validationResults}
integrationInfo={integrationInfo}
isEditPage={false}
/>
</ExtensionWrapper>
) : packageInfo ? (
<>
<StepDefinePackagePolicy
Expand Down Expand Up @@ -317,9 +340,10 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
updatePackagePolicy,
validationResults,
formState,
integrationInfo?.name,
extensionView,
handleExtensionViewOnChange,
integrationInfo,
replaceDefineStepView,
]
);

Expand Down
122 changes: 79 additions & 43 deletions .../fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React, { useState, useEffect, useCallback, useMemo, memo } from 'react';
import { omit } from 'lodash';
import { useRouteMatch } from 'react-router-dom';
import { useParams, useRouteMatch } from 'react-router-dom';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import {
Expand Down Expand Up @@ -42,7 +42,7 @@ import {
} from '../../../components';
import { ConfirmDeployAgentPolicyModal } from '../components';
import { CreatePackagePolicySinglePageLayout } from '../create_package_policy_page/single_page_layout/components';
import type { EditPackagePolicyFrom } from '../create_package_policy_page/types';
import type { AddToPolicyParams, EditPackagePolicyFrom } from '../create_package_policy_page/types';
import {
StepConfigurePackagePolicy,
StepDefinePackagePolicy,
Expand Down Expand Up @@ -86,6 +86,7 @@ export const EditPackagePolicyForm = memo<{
forceUpgrade?: boolean;
from?: EditPackagePolicyFrom;
}>(({ packagePolicyId, forceUpgrade = false, from = 'edit' }) => {
const params = useParams<AddToPolicyParams>();
const { application, notifications } = useStartServices();
const {
agents: { enabled: isFleetEnabled },
Expand Down Expand Up @@ -116,6 +117,14 @@ export const EditPackagePolicyForm = memo<{
forceUpgrade,
});

const integrationInfo = useMemo(
() =>
packageInfo?.policy_templates?.find(
(policyTemplate) => policyTemplate.name === params.integration
),
[packageInfo?.policy_templates, params]
);

const canWriteIntegrationPolicies = useAuthz().integrations.writeIntegrationPolicies;

const policyId = agentPolicy?.id ?? '';
Expand Down Expand Up @@ -240,6 +249,10 @@ export const EditPackagePolicyForm = memo<{
};

const extensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-edit');
const replaceDefineStepView = useUIExtension(
packagePolicy.package?.name ?? '',
'package-policy-replace-define-step'
);
const extensionTabsView = useUIExtension(
packagePolicy.package?.name ?? '',
'package-policy-edit-tabs'
Expand Down Expand Up @@ -274,55 +287,76 @@ export const EditPackagePolicyForm = memo<{
: [],
};

if (replaceDefineStepView && extensionView) {
// eslint-disable-next-line no-console
console.warn(
"'package-policy-edit' is ignored when 'package-policy-replace-define-step' is defined"
);
}

const configurePackage = useMemo(
() =>
agentPolicy && packageInfo ? (
<>
{selectedTab === 0 && (
<StepDefinePackagePolicy
replaceDefineStepView && originalPackagePolicy ? (
<ExtensionWrapper>
<replaceDefineStepView.Component
agentPolicy={agentPolicy}
packageInfo={packageInfo}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
isEditPage={true}
/>
)}

{/* Only show the out-of-box configuration step if a UI extension is NOT registered */}
{!extensionView && selectedTab === 0 && (
<StepConfigurePackagePolicy
packageInfo={packageInfo}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
policy={originalPackagePolicy}
newPolicy={packagePolicy}
onChange={handleExtensionViewOnChange}
validationResults={validationResults}
integrationInfo={integrationInfo}
isEditPage={true}
/>
)}

{extensionView &&
packagePolicy.policy_id &&
packagePolicy.package?.name &&
originalPackagePolicy && (
<ExtensionWrapper>
{selectedTab > 0 && tabsViews ? (
React.createElement(tabsViews[selectedTab - 1].Component, {
policy: originalPackagePolicy,
newPolicy: packagePolicy,
onChange: handleExtensionViewOnChange,
})
) : (
<extensionView.Component
policy={originalPackagePolicy}
newPolicy={packagePolicy}
onChange={handleExtensionViewOnChange}
/>
)}
</ExtensionWrapper>
</ExtensionWrapper>
) : (
<>
{selectedTab === 0 && (
<StepDefinePackagePolicy
agentPolicy={agentPolicy}
packageInfo={packageInfo}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
isEditPage={true}
/>
)}
</>
{/* Only show the out-of-box configuration step if a UI extension is NOT registered */}
{!extensionView && selectedTab === 0 && (
<StepConfigurePackagePolicy
packageInfo={packageInfo}
packagePolicy={packagePolicy}
updatePackagePolicy={updatePackagePolicy}
validationResults={validationResults!}
submitAttempted={formState === 'INVALID'}
isEditPage={true}
/>
)}

{extensionView &&
packagePolicy.policy_id &&
packagePolicy.package?.name &&
originalPackagePolicy && (
<ExtensionWrapper>
{selectedTab > 0 && tabsViews ? (
React.createElement(tabsViews[selectedTab - 1].Component, {
policy: originalPackagePolicy,
newPolicy: packagePolicy,
onChange: handleExtensionViewOnChange,
})
) : (
<extensionView.Component
policy={originalPackagePolicy}
newPolicy={packagePolicy}
onChange={handleExtensionViewOnChange}
/>
)}
</ExtensionWrapper>
)}
</>
)
) : null,
[
agentPolicy,
Expand All @@ -336,6 +370,8 @@ export const EditPackagePolicyForm = memo<{
handleExtensionViewOnChange,
selectedTab,
tabsViews,
integrationInfo,
replaceDefineStepView,
]
);

Expand Down
35 changes: 34 additions & 1 deletion x-pack/plugins/fleet/public/types/ui_extensions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,16 @@ import type { ComponentType, LazyExoticComponent } from 'react';

import type { FleetServerAgentComponentUnit } from '../../common/types/models/agent';

import type { Agent, NewPackagePolicy, PackageInfo, PackagePolicy } from '.';
import type { PackagePolicyValidationResults } from '../services';

import type {
Agent,
AgentPolicy,
NewPackagePolicy,
PackageInfo,
PackagePolicy,
RegistryPolicyTemplate,
} from '.';

/** Register a Fleet UI extension */
export type UIExtensionRegistrationCallback = (extensionPoint: UIExtensionPoint) => void;
Expand All @@ -20,6 +29,23 @@ export interface UIExtensionsStorage {
[key: string]: Partial<Record<UIExtensionPoint['view'], UIExtensionPoint>>;
}

/**
* UI Component Extension is used to replace the Define Step on
* the pages displaying the ability to edit/create an Integration Policy
*/
export type PackagePolicyReplaceDefineStepExtensionComponent =
ComponentType<PackagePolicyReplaceDefineStepExtensionComponentProps>;

export type PackagePolicyReplaceDefineStepExtensionComponentProps = (
| (PackagePolicyEditExtensionComponentProps & { isEditPage: true })
| (PackagePolicyCreateExtensionComponentProps & { isEditPage: false })
) & {
validationResults?: PackagePolicyValidationResults;
agentPolicy?: AgentPolicy;
packageInfo: PackageInfo;
integrationInfo?: RegistryPolicyTemplate;
};

/**
* UI Component Extension is used on the pages displaying the ability to edit an
* Integration Policy
Expand Down Expand Up @@ -73,6 +99,12 @@ export interface PackageGenericErrorsListProps {
packageErrors: FleetServerAgentComponentUnit[];
}

export interface PackagePolicyReplaceDefineStepExtension {
package: string;
view: 'package-policy-replace-define-step';
Component: LazyExoticComponent<PackagePolicyReplaceDefineStepExtensionComponent>;
}

/** Extension point registration contract for Integration Policy Edit views */
export interface PackagePolicyEditExtension {
package: string;
Expand Down Expand Up @@ -184,6 +216,7 @@ export interface AgentEnrollmentFlyoutFinalStepExtension {

/** Fleet UI Extension Point */
export type UIExtensionPoint =
| PackagePolicyReplaceDefineStepExtension
| PackagePolicyEditExtension
| PackagePolicyResponseExtension
| PackagePolicyEditTabsExtension
Expand Down

0 comments on commit 2499179

Please sign in to comment.