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.

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

[Fleet] Adjust add integration flow #101714

Merged
Merged
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8f98077
Initial commit, very WIP
jloleysens Jun 8, 2021
e366d00
Merge branch 'master' into fleet/adjust-add-integrations-redirect
kibanamachine Jun 9, 2021
7802361
Merge branch 'master' into fleet/adjust-add-integrations-redirect
kibanamachine Jun 9, 2021
03fe7b1
remove unnecessary agent policy clear function
jloleysens Jun 9, 2021
af3172d
added # to path so that navigation is correctly handled
jloleysens Jun 9, 2021
8edb789
added logic to read the forward agent policy id
jloleysens Jun 9, 2021
e1708bf
remove inline select integration package from fleet add integration
jloleysens Jun 9, 2021
3a05899
updated toast notification
jloleysens Jun 9, 2021
96e51d9
Merge branch 'master' of github.com:elastic/kibana into fleet/adjust-…
jloleysens Jun 10, 2021
bc88a5f
using query parameter to pass policy id back to create policy package…
jloleysens Jun 10, 2021
b08fdd9
removed policyId from route path
jloleysens Jun 10, 2021
67edafe
fix type issue
jloleysens Jun 10, 2021
bdbce4d
updated the select agent field layout per the designs
jloleysens Jun 10, 2021
1c22dfd
simpified item rendering in combobox and fixed combobox z-index issue
jloleysens Jun 10, 2021
7021bfb
added comment
jloleysens Jun 10, 2021
6e64190
fix types and i18n
jloleysens Jun 10, 2021
91878bd
updated icon and removed unused i18n
jloleysens Jun 10, 2021
114444e
Merge branch 'master' into fleet/adjust-add-integrations-redirect
kibanamachine Jun 14, 2021
546a0fa
refactor to using styled components for cusomt z-index styling
jloleysens Jun 14, 2021
5001d92
attempt to fix integration test
jloleysens Jun 14, 2021
5d49fd4
added scroll functionality for dealing with fixed footers that might …
jloleysens Jun 14, 2021
e6cf34f
fix scroll direction!
jloleysens Jun 14, 2021
28f1f2a
attempting another scroll algorithm
jloleysens Jun 14, 2021
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
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@
* SOFTWARE.
*/

export function scrollIntoViewIfNecessary(target, fixedHeaderHeight) {
export function scrollIntoViewIfNecessary(target, fixedHeaderHeight, fixedFooterHeight) {
var rootScroller = document.scrollingElement || document.documentElement;
if (!rootScroller) {
throw new Error('Unable to find document.scrollingElement or document.documentElement');
@@ -63,4 +63,11 @@ export function scrollIntoViewIfNecessary(target, fixedHeaderHeight) {
if (additionalScrollNecessary > 0) {
rootScroller.scrollTop = rootScroller.scrollTop - additionalScrollNecessary;
}

if (fixedFooterHeight) {
var bottomOfVisibility = viewportHeight - fixedFooterHeight;
if (bottomOfVisibility < boundingRect.bottom) {
rootScroller.scrollTop = rootScroller.scrollTop + fixedFooterHeight;
}
}
}
Original file line number Diff line number Diff line change
@@ -692,11 +692,22 @@ export class WebElementWrapper {
* @nonstandard
* @return {Promise<void>}
*/
public async scrollIntoViewIfNecessary(topOffset?: number): Promise<void> {
public async scrollIntoViewIfNecessary(
topOffsetOrOptions?: number | { topOffset?: number; bottomOffset?: number }
): Promise<void> {
let topOffset: undefined | number;
let bottomOffset: undefined | number;
if (typeof topOffsetOrOptions === 'number') {
topOffset = topOffsetOrOptions;
} else {
topOffset = topOffsetOrOptions?.topOffset;
bottomOffset = topOffsetOrOptions?.bottomOffset;
}
await this.driver.executeScript(
scrollIntoViewIfNecessary,
this._webElement,
topOffset || this.fixedHeaderHeight
topOffset || this.fixedHeaderHeight,
bottomOffset
);
}

Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@

import type { ReactEventHandler } from 'react';
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useRouteMatch, useHistory } from 'react-router-dom';
import { useRouteMatch, useHistory, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@@ -49,7 +49,6 @@ import { CreatePackagePolicyPageLayout } from './components';
import type { CreatePackagePolicyFrom, PackagePolicyFormState } from './types';
import type { PackagePolicyValidationResults } from './services';
import { validatePackagePolicy, validationHasErrors } from './services';
import { StepSelectPackage } from './step_select_package';
import { StepSelectAgentPolicy } from './step_select_agent_policy';
import { StepConfigurePackagePolicy } from './step_configure_package';
import { StepDefinePackagePolicy } from './step_define_package_policy';
@@ -60,9 +59,15 @@ const StepsWithLessPadding = styled(EuiSteps)`
}
`;

const CustomEuiBottomBar = styled(EuiBottomBar)`
// Set a relatively _low_ z-index value here to account for EuiComboBox popover that might appear under the bottom bar
z-index: 50;
`;

interface AddToPolicyParams {
pkgkey: string;
integration?: string;
policyId?: string;
}

interface AddFromPolicyParams {
@@ -81,10 +86,14 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
const routeState = useIntraAppState<CreatePackagePolicyRouteState>();
const from: CreatePackagePolicyFrom = 'policyId' in params ? 'policy' : 'package';

const { search } = useLocation();
const queryParams = useMemo(() => new URLSearchParams(search), [search]);
const policyId = useMemo(() => queryParams.get('policyId') ?? undefined, [queryParams]);

// Agent policy and package info states
const [agentPolicy, setAgentPolicy] = useState<AgentPolicy>();
const [agentPolicy, setAgentPolicy] = useState<AgentPolicy | undefined>();
const [packageInfo, setPackageInfo] = useState<PackageInfo>();
const [isLoadingSecondStep, setIsLoadingSecondStep] = useState<boolean>(false);
const [isLoadingAgentPolicyStep, setIsLoadingAgentPolicyStep] = useState<boolean>(false);

// Retrieve agent count
const agentPolicyId = agentPolicy?.id;
@@ -286,6 +295,13 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
agentPolicyName: agentPolicy.name,
},
})
: (params as AddToPolicyParams)?.policyId && agentPolicy && agentCount === 0
? i18n.translate('xpack.fleet.createPackagePolicy.addAgentNextNotification', {
defaultMessage: `The policy has been updated. Add an agent to the '{agentPolicyName}' policy to deploy this policy.`,
values: {
agentPolicyName: agentPolicy.name,
},
})
: undefined,
'data-test-subj': 'packagePolicyCreateSuccessToast',
});
@@ -337,32 +353,20 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
<StepSelectAgentPolicy
pkgkey={(params as AddToPolicyParams).pkgkey}
updatePackageInfo={updatePackageInfo}
defaultAgentPolicyId={policyId}
agentPolicy={agentPolicy}
updateAgentPolicy={updateAgentPolicy}
setIsLoadingSecondStep={setIsLoadingSecondStep}
setIsLoadingSecondStep={setIsLoadingAgentPolicyStep}
/>
),
[params, updatePackageInfo, agentPolicy, updateAgentPolicy]
[params, updatePackageInfo, agentPolicy, updateAgentPolicy, policyId]
);

const ExtensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-create');

const stepSelectPackage = useMemo(
() => (
<StepSelectPackage
agentPolicyId={(params as AddFromPolicyParams).policyId}
updateAgentPolicy={updateAgentPolicy}
packageInfo={packageInfo}
updatePackageInfo={updatePackageInfo}
setIsLoadingSecondStep={setIsLoadingSecondStep}
/>
),
[params, updateAgentPolicy, packageInfo, updatePackageInfo]
);

const stepConfigurePackagePolicy = useMemo(
() =>
isLoadingSecondStep ? (
isLoadingAgentPolicyStep ? (
<Loading />
) : agentPolicy && packageInfo ? (
<>
@@ -399,7 +403,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
<div />
),
[
isLoadingSecondStep,
isLoadingAgentPolicyStep,
agentPolicy,
packageInfo,
packagePolicy,
@@ -413,27 +417,20 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
);

const steps: EuiStepProps[] = [
from === 'package'
? {
title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectAgentPolicyTitle', {
defaultMessage: 'Select an agent policy',
}),
children: stepSelectAgentPolicy,
}
: {
title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectPackageTitle', {
defaultMessage: 'Select an integration',
}),
children: stepSelectPackage,
},
{
title: i18n.translate('xpack.fleet.createPackagePolicy.stepConfigurePackagePolicyTitle', {
defaultMessage: 'Configure integration',
}),
status: !packageInfo || !agentPolicy || isLoadingSecondStep ? 'disabled' : undefined,
status: !packageInfo || !agentPolicy || isLoadingAgentPolicyStep ? 'disabled' : undefined,
'data-test-subj': 'dataCollectionSetupStep',
children: stepConfigurePackagePolicy,
},
{
title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectAgentPolicyTitle', {
defaultMessage: 'Apply to agent policy',
}),
children: stepSelectAgentPolicy,
},
];

return (
@@ -459,10 +456,10 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
)}
<StepsWithLessPadding steps={steps} />
<EuiSpacer size="l" />
<EuiBottomBar>
<CustomEuiBottomBar data-test-subj="integrationsBottomBar">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{!isLoadingSecondStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
{!isLoadingAgentPolicyStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
defaultMessage="Your integration policy has errors. Please fix them before saving."
@@ -504,7 +501,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
</CustomEuiBottomBar>
</CreatePackagePolicyPageLayout>
);
};
Loading