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.

Sign up for GitHub

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 23 commits into from
Jun 15, 2021
Merged

[Fleet] Adjust add integration flow #101714

Show file tree
Hide file tree
Changes from 17 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
55 changes: 24 additions & 31 deletions ...leet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand All @@ -63,6 +62,7 @@ const StepsWithLessPadding = styled(EuiSteps)`
interface AddToPolicyParams {
pkgkey: string;
integration?: string;
policyId?: string;
}

interface AddFromPolicyParams {
Expand All @@ -81,8 +81,12 @@ 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);

Expand Down Expand Up @@ -286,6 +290,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',
});
Expand Down Expand Up @@ -337,29 +348,17 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
<StepSelectAgentPolicy
pkgkey={(params as AddToPolicyParams).pkgkey}
updatePackageInfo={updatePackageInfo}
defaultAgentPolicyId={policyId}
agentPolicy={agentPolicy}
updateAgentPolicy={updateAgentPolicy}
setIsLoadingSecondStep={setIsLoadingSecondStep}
/>
),
[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 ? (
Expand Down Expand Up @@ -413,19 +412,6 @@ 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',
Expand All @@ -434,6 +420,12 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
'data-test-subj': 'dataCollectionSetupStep',
children: stepConfigurePackagePolicy,
},
{
title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectAgentPolicyTitle', {
defaultMessage: 'Apply to agent policy',
}),
children: stepSelectAgentPolicy,
},
];

return (
Expand All @@ -459,7 +451,8 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
)}
<StepsWithLessPadding steps={steps} />
<EuiSpacer size="l" />
<EuiBottomBar>
{/* Note: we set a relatively _low_ zIndex value here to account for EuiComboBox popover that might appear under the bottom bar */}
<EuiBottomBar style={{ zIndex: 50 }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we use styled instead of this inline style?

<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{!isLoadingSecondStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
Expand Down
190 changes: 91 additions & 99 deletions ...tions/fleet/sections/agent_policy/create_package_policy_page/step_select_agent_policy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiComboBox,
EuiTextColor,
EuiPortal,
EuiFormRow,
EuiDescribedFormGroup,
EuiTitle,
EuiText,
EuiLink,
} from '@elastic/eui';

Expand All @@ -32,38 +34,32 @@ import {
} from '../../../hooks';
import { CreateAgentPolicyFlyout } from '../list_page/components';

const AgentPolicyWrapper = styled(EuiFormRow)`
const AgentPolicyFormRow = styled(EuiFormRow)`
.euiFormRow__label {
width: 100%;
}
`;

// Custom styling for drop down list items due to:
// 1) the max-width and overflow properties is added to prevent long agent policy
// names/descriptions from overflowing the flex items
// 2) max-width is built from the grow property on the flex items because the value
// changes based on if Fleet is enabled/setup or not
const AgentPolicyNameColumn = styled(EuiFlexItem)`
max-width: ${(props) => `${((props.grow as number) / 9) * 100}%`};
overflow: hidden;
`;
const AgentPolicyDescriptionColumn = styled(EuiFlexItem)`
max-width: ${(props) => `${((props.grow as number) / 9) * 100}%`};
overflow: hidden;
`;

export const StepSelectAgentPolicy: React.FunctionComponent<{
pkgkey: string;
updatePackageInfo: (packageInfo: PackageInfo | undefined) => void;
defaultAgentPolicyId?: string;
agentPolicy: AgentPolicy | undefined;
updateAgentPolicy: (agentPolicy: AgentPolicy | undefined) => void;
setIsLoadingSecondStep: (isLoading: boolean) => void;
}> = ({ pkgkey, updatePackageInfo, agentPolicy, updateAgentPolicy, setIsLoadingSecondStep }) => {
}> = ({
pkgkey,
updatePackageInfo,
agentPolicy,
updateAgentPolicy,
setIsLoadingSecondStep,
defaultAgentPolicyId,
}) => {
const { isReady: isFleetReady } = useFleetStatus();

// Selected agent policy state
const [selectedPolicyId, setSelectedPolicyId] = useState<string | undefined>(
agentPolicy ? agentPolicy.id : undefined
agentPolicy?.id ?? defaultAgentPolicyId
);
const [selectedAgentPolicyError, setSelectedAgentPolicyError] = useState<Error>();

Expand Down Expand Up @@ -223,95 +219,91 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
) : null}
<EuiFlexGroup direction="column" gutterSize="m">
<EuiFlexItem>
<AgentPolicyWrapper
fullWidth={true}
label={
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem>
<EuiDescribedFormGroup
title={
<EuiTitle size="xs">
<h3>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyLabel"
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyFormGroupTitle"
defaultMessage="Agent policy"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<div>
<EuiLink
disabled={!hasWriteCapabilites}
onClick={() => setIsCreateAgentPolicyFlyoutOpen(true)}
>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.addButton"
defaultMessage="Create agent policy"
/>
</EuiLink>
</div>
</EuiFlexItem>
</EuiFlexGroup>
</h3>
</EuiTitle>
}
helpText={
isFleetReady && selectedPolicyId ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText"
defaultMessage="{count, plural, one {# agent} other {# agents}} are enrolled with the selected agent policy."
values={{
count: agentPoliciesById[selectedPolicyId]?.agents ?? 0,
}}
/>
) : null
description={
<EuiText color="subdued" size="s">
<p>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyFormGroupDescription"
defaultMessage="Agent policies are used to manage a group of integrations across a set of agents"
/>
</p>
</EuiText>
}
>
<EuiComboBox
placeholder={i18n.translate(
'xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyPlaceholderText',
{
defaultMessage: 'Select an agent policy to add this integration to',
}
)}
singleSelection={{ asPlainText: true }}
isClearable={false}
<AgentPolicyFormRow
fullWidth={true}
isLoading={isAgentPoliciesLoading || isPackageInfoLoading}
options={agentPolicyOptions}
renderOption={(option: EuiComboBoxOptionOption<string>) => {
return (
<EuiFlexGroup>
<AgentPolicyNameColumn grow={2}>
<span className="eui-textTruncate">{option.label}</span>
</AgentPolicyNameColumn>
<AgentPolicyDescriptionColumn grow={isFleetReady ? 5 : 7}>
<EuiTextColor className="eui-textTruncate" color="subdued">
{agentPoliciesById[option.value!].description}
</EuiTextColor>
</AgentPolicyDescriptionColumn>
{isFleetReady ? (
<EuiFlexItem grow={2} className="eui-textRight">
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsCountText"
defaultMessage="{count, plural, one {# agent} other {# agents}} enrolled"
values={{
count: agentPoliciesById[option.value!]?.agents ?? 0,
}}
/>
</EuiTextColor>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
);
}}
selectedOptions={selectedAgentPolicyOption ? [selectedAgentPolicyOption] : []}
onChange={(options) => {
const selectedOption = options[0] || undefined;
if (selectedOption) {
if (selectedOption.value !== selectedPolicyId) {
setSelectedPolicyId(selectedOption.value);
label={
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyLabel"
defaultMessage="Agent policy"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<div>
<EuiLink
disabled={!hasWriteCapabilites}
onClick={() => setIsCreateAgentPolicyFlyoutOpen(true)}
>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.addButton"
defaultMessage="Create agent policy"
/>
</EuiLink>
</div>
</EuiFlexItem>
</EuiFlexGroup>
}
helpText={
isFleetReady && selectedPolicyId ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText"
defaultMessage="{count, plural, one {# agent is} other {# agents are}} enrolled with the selected agent policy."
values={{
count: agentPoliciesById[selectedPolicyId]?.agents ?? 0,
}}
/>
) : null
}
>
<EuiComboBox
placeholder={i18n.translate(
'xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyPlaceholderText',
{
defaultMessage: 'Select an agent policy to add this integration to',
}
} else {
setSelectedPolicyId(undefined);
}
}}
/>
</AgentPolicyWrapper>
)}
singleSelection={{ asPlainText: true }}
isClearable={false}
fullWidth={true}
isLoading={isAgentPoliciesLoading || isPackageInfoLoading}
options={agentPolicyOptions}
selectedOptions={selectedAgentPolicyOption ? [selectedAgentPolicyOption] : []}
onChange={(options) => {
const selectedOption = options[0] || undefined;
if (selectedOption) {
if (selectedOption.value !== selectedPolicyId) {
setSelectedPolicyId(selectedOption.value);
}
} else {
setSelectedPolicyId(undefined);
}
}}
/>
</AgentPolicyFormRow>
</EuiDescribedFormGroup>
</EuiFlexItem>
{/* Display selected agent policy error if there is one */}
{selectedAgentPolicyError ? (
Expand Down
Loading