Skip to content

Commit

Permalink
Add ability to create agent config when selecting config to add integ…
Browse files Browse the repository at this point in the history 
…ration to
  • Loading branch information
@jen-huang
jen-huang committed Jul 9, 2020
1 parent d94be15 commit 966444e
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 89 deletions.
9 changes: 8 additions & 1 deletion ...ic/applications/ingest_manager/sections/agent_config/create_package_config_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/
import React, { useState, useEffect, useMemo, useCallback, ReactEventHandler } from 'react';
import { useRouteMatch, useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import {
Expand Down Expand Up @@ -46,6 +47,12 @@ import { StepConfigurePackage } from './step_configure_package';
import { StepDefinePackageConfig } from './step_define_package_config';
import { useIntraAppState } from '../../../hooks/use_intra_app_state';

const StepsWithLessPadding = styled(EuiSteps)`
.euiStep__content {
padding-bottom: ${(props) => props.theme.eui.paddingSizes.m};
}
`;

export const CreatePackageConfigPage: React.FunctionComponent = () => {
const {
notifications,
Expand Down Expand Up @@ -389,7 +396,7 @@ export const CreatePackageConfigPage: React.FunctionComponent = () => {
: agentConfig && (
<ConfigurationBreadcrumb configName={agentConfig.name} configId={agentConfig.id} />
)}
<EuiSteps steps={steps} />
<StepsWithLessPadding steps={steps} />
<EuiSpacer size="l" />
{/* TODO #64541 - Remove classes */}
<EuiBottomBar
Expand Down
222 changes: 137 additions & 85 deletions ...ns/ingest_manager/sections/agent_config/create_package_config_page/step_select_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,25 @@
import React, { useEffect, useState, Fragment } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFlexGroup, EuiFlexItem, EuiSelectable, EuiSpacer, EuiTextColor } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiSelectable,
EuiSpacer,
EuiTextColor,
EuiPortal,
EuiButtonEmpty,
} from '@elastic/eui';
import { Error } from '../../../components';
import { AgentConfig, PackageInfo, GetAgentConfigsResponseItem } from '../../../types';
import { isPackageLimited, doesAgentConfigAlreadyIncludePackage } from '../../../services';
import { useGetPackageInfoByKey, useGetAgentConfigs, sendGetOneAgentConfig } from '../../../hooks';
import {
useGetPackageInfoByKey,
useGetAgentConfigs,
sendGetOneAgentConfig,
useCapabilities,
} from '../../../hooks';
import { CreateAgentConfigFlyout } from '../list_page/components';

export const StepSelectConfig: React.FunctionComponent<{
pkgkey: string;
Expand All @@ -25,6 +39,12 @@ export const StepSelectConfig: React.FunctionComponent<{
);
const [selectedConfigError, setSelectedConfigError] = useState<Error>();

// Create new config flyout state
const hasWriteCapabilites = useCapabilities().write;
const [isCreateAgentConfigFlyoutOpen, setIsCreateAgentConfigFlyoutOpen] = useState<boolean>(
false
);

// Fetch package info
const {
data: packageInfoData,
Expand All @@ -38,6 +58,7 @@ export const StepSelectConfig: React.FunctionComponent<{
data: agentConfigsData,
error: agentConfigsError,
isLoading: isAgentConfigsLoading,
sendRequest: refreshAgentConfigs,
} = useGetAgentConfigs({
page: 1,
perPage: 1000,
Expand Down Expand Up @@ -116,94 +137,125 @@ export const StepSelectConfig: React.FunctionComponent<{
}

return (
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiSelectable
searchable
allowExclusions={false}
singleSelection={true}
isLoading={isAgentConfigsLoading || isPackageInfoLoading}
options={agentConfigs.map((agentConf) => {
const alreadyHasLimitedPackage =
(isLimitedPackage &&
packageInfoData &&
doesAgentConfigAlreadyIncludePackage(agentConf, packageInfoData.response.name)) ||
false;
return {
label: agentConf.name,
key: agentConf.id,
checked: selectedConfigId === agentConf.id ? 'on' : undefined,
disabled: alreadyHasLimitedPackage,
'data-test-subj': 'agentConfigItem',
};
})}
renderOption={(option) => (
<EuiFlexGroup>
<EuiFlexItem grow={false}>{option.label}</EuiFlexItem>
<EuiFlexItem>
<EuiTextColor color="subdued">
{agentConfigsById[option.key!].description}
</EuiTextColor>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.StepSelectConfig.agentConfigAgentsCountText"
defaultMessage="{count, plural, one {# agent} other {# agents}}"
values={{
count: agentConfigsById[option.key!].agents || 0,
}}
/>
</EuiTextColor>
</EuiFlexItem>
</EuiFlexGroup>
)}
listProps={{
bordered: true,
}}
searchProps={{
placeholder: i18n.translate(
'xpack.ingestManager.createPackageConfig.StepSelectConfig.filterAgentConfigsInputPlaceholder',
{
defaultMessage: 'Search for agent configurations',
<>
{isCreateAgentConfigFlyoutOpen ? (
<EuiPortal>
<CreateAgentConfigFlyout
onClose={(newAgentConfig?: AgentConfig) => {
setIsCreateAgentConfigFlyoutOpen(false);
refreshAgentConfigs();
if (newAgentConfig) {
setSelectedConfigId(newAgentConfig.id);
}
),
}}
height={180}
onChange={(options) => {
const selectedOption = options.find((option) => option.checked === 'on');
if (selectedOption) {
if (selectedOption.key !== selectedConfigId) {
setSelectedConfigId(selectedOption.key);
}}
/>
</EuiPortal>
) : null}
<EuiFlexGroup direction="column" gutterSize="m">
<EuiFlexItem>
<EuiSelectable
searchable
allowExclusions={false}
singleSelection={true}
isLoading={isAgentConfigsLoading || isPackageInfoLoading}
options={agentConfigs.map((agentConf) => {
const alreadyHasLimitedPackage =
(isLimitedPackage &&
packageInfoData &&
doesAgentConfigAlreadyIncludePackage(agentConf, packageInfoData.response.name)) ||
false;
return {
label: agentConf.name,
key: agentConf.id,
checked: selectedConfigId === agentConf.id ? 'on' : undefined,
disabled: alreadyHasLimitedPackage,
'data-test-subj': 'agentConfigItem',
};
})}
renderOption={(option) => (
<EuiFlexGroup>
<EuiFlexItem grow={false}>{option.label}</EuiFlexItem>
<EuiFlexItem>
<EuiTextColor color="subdued">
{agentConfigsById[option.key!].description}
</EuiTextColor>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.StepSelectConfig.agentConfigAgentsCountText"
defaultMessage="{count, plural, one {# agent} other {# agents}}"
values={{
count: agentConfigsById[option.key!].agents || 0,
}}
/>
</EuiTextColor>
</EuiFlexItem>
</EuiFlexGroup>
)}
listProps={{
bordered: true,
}}
searchProps={{
placeholder: i18n.translate(
'xpack.ingestManager.createPackageConfig.StepSelectConfig.filterAgentConfigsInputPlaceholder',
{
defaultMessage: 'Search for agent configurations',
}
),
}}
height={180}
onChange={(options) => {
const selectedOption = options.find((option) => option.checked === 'on');
if (selectedOption) {
if (selectedOption.key !== selectedConfigId) {
setSelectedConfigId(selectedOption.key);
}
} else {
setSelectedConfigId(undefined);
}
} else {
setSelectedConfigId(undefined);
}
}}
>
{(list, search) => (
<Fragment>
{search}
<EuiSpacer size="m" />
{list}
</Fragment>
)}
</EuiSelectable>
</EuiFlexItem>
{/* Display selected agent config error if there is one */}
{selectedConfigError ? (
}}
>
{(list, search) => (
<Fragment>
{search}
<EuiSpacer size="m" />
{list}
</Fragment>
)}
</EuiSelectable>
</EuiFlexItem>
{/* Display selected agent config error if there is one */}
{selectedConfigError ? (
<EuiFlexItem>
<Error
title={
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.StepSelectConfig.errorLoadingSelectedAgentConfigTitle"
defaultMessage="Error loading selected agent config"
/>
}
error={selectedConfigError}
/>
</EuiFlexItem>
) : null}
<EuiFlexItem>
<Error
title={
<div>
<EuiButtonEmpty
iconType="plusInCircle"
isDisabled={!hasWriteCapabilites}
onClick={() => setIsCreateAgentConfigFlyoutOpen(true)}
flush="left"
size="s"
>
<FormattedMessage
id="xpack.ingestManager.createPackageConfig.StepSelectConfig.errorLoadingSelectedAgentConfigTitle"
defaultMessage="Error loading selected agent config"
id="xpack.ingestManager.createPackageConfig.StepSelectConfig.addButton"
defaultMessage="New agent configuration"
/>
}
error={selectedConfigError}
/>
</EuiButtonEmpty>
</div>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFlexGroup>
</>
);
};
6 changes: 3 additions & 3 deletions .../applications/ingest_manager/sections/agent_config/list_page/components/create_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ import {
EuiButton,
EuiText,
} from '@elastic/eui';
import { NewAgentConfig } from '../../../../types';
import { NewAgentConfig, AgentConfig } from '../../../../types';
import { useCapabilities, useCore, sendCreateAgentConfig } from '../../../../hooks';
import { AgentConfigForm, agentConfigFormValidation } from '../../components';

interface Props {
onClose: () => void;
onClose: (createdAgentConfig?: AgentConfig) => void;
}

export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
Expand Down Expand Up @@ -113,7 +113,7 @@ export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({ onClos
}
)
);
onClose();
onClose(data.item);
} else {
notifications.toasts.addDanger(
error
Expand Down

0 comments on commit 966444e

Please sign in to comment.