Skip to content

Commit

Permalink
add integration view
Browse files Browse the repository at this point in the history
  • Loading branch information
@angorayc
angorayc committed Nov 14, 2024
1 parent 6ac5ff3 commit ab1c241
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 89 deletions.
19 changes: 15 additions & 4 deletions ...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 @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useCallback, useEffect, useMemo, useState, Suspense } from 'react';
import React, { useCallback, useEffect, useMemo, useState, Suspense, forwardRef } from 'react';
import { useRouteMatch } from 'react-router-dom';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
Expand All @@ -20,6 +20,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiPortal,
EuiSpacer,
EuiSteps,
} from '@elastic/eui';
Expand Down Expand Up @@ -76,6 +77,8 @@ import { generateNewAgentPolicyWithDefaults } from '../../../../../../../common/

import { packageHasAtLeastOneSecret } from '../utils';

import { useIntegrationsStateContext } from '../../../../../integrations/hooks';

import { CreatePackagePolicySinglePageLayout, PostInstallAddAgentModal } from './components';
import { useDevToolsRequest, useOnSubmit, useSetupTechnology } from './hooks';
import { PostInstallCloudFormationModal } from './components/cloud_security_posture/post_install_cloud_formation_modal';
Expand Down Expand Up @@ -111,6 +114,9 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
} = useConfig();
const hasFleetAddAgentsPrivileges = useAuthz().fleet.addAgents;
const { params } = useRouteMatch<AddToPolicyParams>();
const { pkgkey: pkgKeyContext } = useIntegrationsStateContext();
const pkgkey = params.pkgkey || pkgKeyContext;

const fleetStatus = useFleetStatus();
const { docLinks } = useStartServices();
const spaceSettings = useSpaceSettingsContext();
Expand All @@ -130,7 +136,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
queryParamsPolicyId ? SelectedPolicyTab.EXISTING : SelectedPolicyTab.NEW
);

const { pkgName, pkgVersion } = splitPkgKey(params.pkgkey);
const { pkgName, pkgVersion } = splitPkgKey(pkgkey);
// Fetch package info
const {
data: packageInfoData,
Expand Down Expand Up @@ -230,7 +236,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({

const { cancelClickHandler, cancelUrl } = useCancelAddPackagePolicy({
from,
pkgkey: params.pkgkey,
pkgkey,
agentPolicyId: agentPolicyIds[0],
});
useEffect(() => {
Expand Down Expand Up @@ -602,7 +608,12 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
<StepsWithLessPadding steps={steps} />
<EuiSpacer size="xl" />
<EuiSpacer size="xl" />
<CustomEuiBottomBar data-test-subj="integrationsBottomBar">
{/* Only show render button bar in portal when enableRouts is false*/}
<CustomEuiBottomBar
data-test-subj="integrationsBottomBar"
usePortal={false}
position="sticky"
>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{packageInfo && (formState === 'INVALID' || hasAgentPolicyError) ? (
Expand Down
2 changes: 1 addition & 1 deletion ...plications/integrations/sections/epm/screens/detail/components/add_integration_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface AddIntegrationButtonProps {
userCanInstallPackages?: boolean;
missingSecurityConfiguration: boolean;
packageName: string;
href: string;
href: string | undefined;
onClick: Function;
}

Expand Down
7 changes: 2 additions & 5 deletions ...plications/integrations/sections/epm/screens/detail/hooks/use_is_first_time_agent_user.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* 2.0.
*/

import type { FleetAuthz } from '../../../../../../../../common';
import {
FLEET_SERVER_PACKAGE,
LEGACY_PACKAGE_POLICY_SAVED_OBJECT_TYPE,
Expand All @@ -17,10 +16,8 @@ interface UseIsFirstTimeAgentUserResponse {
isLoading?: boolean;
}

export const useIsFirstTimeAgentUserQuery = (
authzContext?: FleetAuthz
): UseIsFirstTimeAgentUserResponse => {
const authz = useAuthz() ?? authzContext;
export const useIsFirstTimeAgentUserQuery = (): UseIsFirstTimeAgentUserResponse => {
const authz = useAuthz();
const {
data: packagePolicies,
isLoading: areAgentPoliciesLoading,
Expand Down
149 changes: 80 additions & 69 deletions x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,13 @@ function Breadcrumbs({ packageTitle }: { packageTitle: string }) {
return null;
}

export function Detail({ routesEnabled = true }: { routesEnabled?: boolean }) {
export function Detail({
routesEnabled = true,
onAddElasticDefendClicked,
}: {
routesEnabled?: boolean;
onAddElasticDefendClicked?: () => void;
}) {
const { getId: getAgentPolicyId } = useAgentPolicyContext();
const {
getFromIntegrations,
Expand Down Expand Up @@ -260,7 +266,7 @@ export function Detail({ routesEnabled = true }: { routesEnabled?: boolean }) {
}, [packageInfoLatestPrereleaseData?.item.version]);

const { isFirstTimeAgentUser = false, isLoading: firstTimeUserLoading } =
useIsFirstTimeAgentUserQuery(authz);
useIsFirstTimeAgentUserQuery();
const isGuidedOnboardingActive = useIsGuidedOnboardingActive(pkgName);

// Refresh package info when status change
Expand Down Expand Up @@ -403,66 +409,70 @@ export function Detail({ routesEnabled = true }: { routesEnabled?: boolean }) {
[integrationInfo, isLoading, packageInfo, href, queryParams]
);

const handleAddIntegrationPolicyClick = useCallback<ReactEventHandler>(
(ev) => {
ev.preventDefault();
// The object below, given to `createHref` is explicitly accessing keys of `location` in order
// to ensure that dependencies to this `useCallback` is set correctly (because `location` is mutable)
const currentPath = history.createHref({
pathname,
search,
hash,
});

const defaultNavigateOptions: InstallPkgRouteOptions = getInstallPkgRouteOptions({
agentPolicyId: agentPolicyIdFromContext,
currentPath,
integration,
isCloud,
isExperimentalAddIntegrationPageEnabled,
isFirstTimeAgentUser,
isGuidedOnboardingActive,
pkgkey,
});

/** Users from Security Solution onboarding page will have onboardingLink and onboardingAppId in the query params
** to redirect back to the onboarding page after adding an integration
*/
const navigateOptions: InstallPkgRouteOptions =
onboardingAppId && onboardingLink
? [
defaultNavigateOptions[0],
{
...defaultNavigateOptions[1],
state: {
...(defaultNavigateOptions[1]?.state ?? {}),
onCancelNavigateTo: [onboardingAppId, { path: onboardingLink }],
onCancelUrl: onboardingLink,
onSaveNavigateTo: [onboardingAppId, { path: onboardingLink }],
},
},
]
: defaultNavigateOptions;

services.application.navigateToApp(...navigateOptions);
},
[
agentPolicyIdFromContext,
hash,
history,
integration,
isCloud,
isExperimentalAddIntegrationPageEnabled,
isFirstTimeAgentUser,
isGuidedOnboardingActive,
onboardingAppId,
onboardingLink,
pathname,
pkgkey,
search,
services.application,
]
);
// const handleAddIntegrationPolicyClick = useCallback<ReactEventHandler>(
// (ev) => {
// ev.preventDefault();
// // The object below, given to `createHref` is explicitly accessing keys of `location` in order
// // to ensure that dependencies to this `useCallback` is set correctly (because `location` is mutable)
// const currentPath = history.createHref({
// pathname,
// search,
// hash,
// });

// const defaultNavigateOptions: InstallPkgRouteOptions = getInstallPkgRouteOptions({
// agentPolicyId: agentPolicyIdFromContext,
// currentPath,
// integration,
// isCloud,
// isExperimentalAddIntegrationPageEnabled,
// isFirstTimeAgentUser,
// isGuidedOnboardingActive,
// pkgkey,
// });

// /** Users from Security Solution onboarding page will have onboardingLink and onboardingAppId in the query params
// ** to redirect back to the onboarding page after adding an integration
// */
// const navigateOptions: InstallPkgRouteOptions =
// onboardingAppId && onboardingLink
// ? [
// defaultNavigateOptions[0],
// {
// ...defaultNavigateOptions[1],
// state: {
// ...(defaultNavigateOptions[1]?.state ?? {}),
// onCancelNavigateTo: [onboardingAppId, { path: onboardingLink }],
// onCancelUrl: onboardingLink,
// onSaveNavigateTo: [onboardingAppId, { path: onboardingLink }],
// },
// },
// ]
// : defaultNavigateOptions;

// services.application.navigateToApp(...navigateOptions);
// },
// [
// agentPolicyIdFromContext,
// hash,
// history,
// integration,
// isCloud,
// isExperimentalAddIntegrationPageEnabled,
// isFirstTimeAgentUser,
// isGuidedOnboardingActive,
// onboardingAppId,
// onboardingLink,
// pathname,
// pkgkey,
// search,
// services.application,
// ]
// );

const handleAddIntegrationPolicyClick = useCallback<ReactEventHandler>(() => {
!routesEnabled && onAddElasticDefendClicked?.();
}, [routesEnabled, onAddElasticDefendClicked]);

const showVersionSelect = useMemo(
() =>
Expand Down Expand Up @@ -566,13 +576,14 @@ export function Detail({ routesEnabled = true }: { routesEnabled?: boolean }) {
>
<AddIntegrationButton
userCanInstallPackages={userCanInstallPackages}
href={getHref('add_integration_to_policy', {
pkgkey,
...(integration ? { integration } : {}),
...(agentPolicyIdFromContext
? { agentPolicyId: agentPolicyIdFromContext }
: {}),
})}
// show href only when routsEnabled is true
// href={getHref('add_integration_to_policy', {
// pkgkey,
// ...(integration ? { integration } : {}),
// ...(agentPolicyIdFromContext
// ? { agentPolicyId: agentPolicyIdFromContext }
// : {}),
// })}
missingSecurityConfiguration={missingSecurityConfiguration}
packageName={integrationInfo?.title || packageInfo.title}
onClick={handleAddIntegrationPolicyClick}
Expand Down
4 changes: 4 additions & 0 deletions x-pack/plugins/fleet/public/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,7 @@ export const FleetStatusProvider = () => {
export const UIExtensionsContextProvider = () => {
return import('./hooks/use_ui_extension');
};

export const CreatePackagePolicyPage = () => {
return import('./applications/fleet/sections/agent_policy/create_package_policy_page');
};
40 changes: 30 additions & 10 deletions ...c/onboarding/components/onboarding_body/cards/integrations/integration_card_grid_tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,16 @@ const UIExtensionsContextProvider = lazy(async () => ({
.then((pkg) => pkg.UIExtensionsContextProvider),
}));

const CreatePackagePolicyPage = lazy(async () => ({
default: await import('@kbn/fleet-plugin/public')
.then((module) => module.CreatePackagePolicyPage())
.then((pkg) => pkg.CreatePackagePolicyPage),
}));

export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGridTabsProps>(
({ installedIntegrationsCount, isAgentRequired, useAvailablePackages }) => {
const { spaceId } = useOnboardingContext();
const startServices = useKibana().services;
const { state: routerState } = useLocation();
const scrollElement = useRef<HTMLDivElement>(null);
const [toggleIdSelected, setSelectedTabIdToStorage] = useStoredIntegrationTabId(
spaceId,
Expand All @@ -117,9 +122,19 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
);

const [isModalVisible, setIsModalVisible] = useState(false);

const closeModal = () => setIsModalVisible(false);
const showModal = () => setIsModalVisible(true);
const [modalView, setModalView] = useState<'overview' | 'configure-integration' | 'add-agent'>(
'overview'
);
const onAddElasticDefendClicked = useCallback(() => {
setModalView('configure-integration');
}, []);
const closeModal = useCallback(() => {
setIsModalVisible(false);
setModalView('overview');
}, []);
const showModal = useCallback(() => setIsModalVisible(true), []);
const ref = useRef<HTMLDivElement | null>(null);
let bottomBar;
const modalTitleId = useGeneratedHtmlId();
const {
filteredCards,
Expand All @@ -133,7 +148,7 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
});

const selectedTab = useMemo(() => INTEGRATION_TABS_BY_ID[toggleIdSelected], [toggleIdSelected]);

console.log('=ref===', ref);
const onSearchTermChanged = useCallback(
(searchQuery: string) => {
setSearchTerm(searchQuery);
Expand Down Expand Up @@ -172,7 +187,6 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
setSelectedSubCategory,
toggleIdSelected,
]);
console.log('routerState---', routerState);
const list: IntegrationCardItem[] = useIntegrationCardList({
integrationsList: filteredCards,
featuredCardIds: selectedTab.featuredCardIds,
Expand Down Expand Up @@ -262,15 +276,21 @@ export const IntegrationsCardGridTabsComponent = React.memo<IntegrationsCardGrid
`}
maxWidth="90%"
>
<EuiModalHeader>
<EuiModalHeaderTitle id={modalTitleId}>Modal title</EuiModalHeaderTitle>
</EuiModalHeader>
{modalView !== 'overview' && (
<EuiModalHeader>"Step indicator placeholder"</EuiModalHeader>
)}
<EuiModalBody>
<UIExtensionsContextProvider values={{}}>
<FleetStatusProvider>
<PackageInstallProvider startServices={startServices}>
<IntegrationsStateContextProvider>
<Detail routesEnabled={false} />
{modalView === 'overview' && (
<Detail
routesEnabled={false}
onAddElasticDefendClicked={onAddElasticDefendClicked}
/>
)}
{modalView === 'configure-integration' && <CreatePackagePolicyPage />}
</IntegrationsStateContextProvider>
</PackageInstallProvider>
</FleetStatusProvider>
Expand Down

0 comments on commit ab1c241

Please sign in to comment.