Skip to content

[Fleet] Remove stream toggle when an input only has a single stream #219287

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

Merged
Supplementing merged 9 commits into from
Apr 29, 2025
Merged

[Fleet] Remove stream toggle when an input only has a single stream #219287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2956555
updated stream toggles to only show nested when more than one stream …
Supplementing Apr 25, 2025
e7ec04e
Merge branch 'main' into enhancement-remove-single-stream-toggle
elasticmachine Apr 25, 2025
cbb52d1
added description under top level toggle when only one item
Supplementing Apr 28, 2025
e347602
updated conditional
Supplementing Apr 28, 2025
59c2df6
updated tests
Supplementing Apr 28, 2025
2c8936f
Merge branch 'enhancement-remove-single-stream-toggle' of https://git…
Supplementing Apr 28, 2025
d43a2ca
Merge branch 'main' into enhancement-remove-single-stream-toggle
elasticmachine Apr 28, 2025
f505545
updated to use a const for check, added test case for single toggle r…
Supplementing Apr 29, 2025
8e1d01d
Merge branch 'enhancement-remove-single-stream-toggle' of https://git…
Supplementing Apr 29, 2025
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
164 changes: 163 additions & 1 deletion ...reate_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,107 @@ describe('PackagePolicyInputPanel', () => {
],
},
},
// Duplicated items to make sure they show up in the UI as we now only show multiple switches/descriptions when theres more than one input
{
input: 'logfile',
title: 'Sample logs hidden in agentless (duplicated)',
template_path: 'stream.yml.hbs',
vars: [
{
name: 'paths',
type: 'text',
title: 'Paths',
multi: false,
default: ['/var/log/*.log'],
required: false,
show_user: true,
hide_in_deployment_modes: ['agentless'],
},
],
description: 'Collect sample logs - hidden in agentless',
data_stream: {
title: 'Default data stream',
release: 'ga',
type: 'logs',
package: 'agentless_test_package',
dataset: 'agentless_test_package.default_data_stream',
path: 'default_data_stream',
elasticsearch: {
'ingest_pipeline.name': 'default',
},
ingest_pipeline: 'default',
streams: [
{
input: 'logfile',
title: 'Sample logs hidden in agentless',
template_path: 'stream.yml.hbs',
vars: [
{
name: 'paths',
type: 'text',
title: 'Paths',
multi: false,
default: ['/var/log/*.log'],
required: false,
show_user: true,
hide_in_deployment_modes: ['agentless'],
},
],
description: 'Collect sample logs - hidden in agentless',
},
],
},
},
{
input: 'logfile',
title: 'Sample logs on Agentless (duplicated)',
template_path: 'stream.yml.hbs',
vars: [
{
name: 'paths',
type: 'text',
title: 'Paths',
multi: true,
default: ['/var/log/*.log'],
required: false,
show_user: true,
hide_in_deployment_modes: ['default'],
},
],
description: 'Collect sample logs on Agentless only',
data_stream: {
title: 'Logs Stream on Agentless',
release: 'ga',
type: 'logs',
package: 'agentless_test_package',
dataset: 'agentless_test_package.logs_stream',
path: 'logs_stream',
elasticsearch: {
'ingest_pipeline.name': 'default',
},
ingest_pipeline: 'default',
streams: [
{
input: 'logfile',
title: 'Sample logs on Agentless',
template_path: 'stream.yml.hbs',
vars: [
{
name: 'paths',
type: 'text',
title: 'Paths',
multi: true,
default: ['/var/log/*.log'],
required: false,
show_user: true,
hide_in_deployment_modes: ['default'],
},
],
description: 'Collect sample logs on Agentless only',
},
],
},
},
];
const mockUpdatePackagePolicyInput = jest.fn().mockImplementation((val: any) => {
return undefined;
Expand Down Expand Up @@ -424,6 +525,18 @@ describe('PackagePolicyInputPanel', () => {
).toBeInTheDocument();
});
});
it('should not render multiple toggles when theres only one stream', async () => {
// Only send one input and then it should not be rendered, only the top level switch should render
render(mockPackageInfo, mockPackageInputStreams.slice(0, 1));
await waitFor(async () => {
expect(
await renderResult.findByTestId('PackagePolicy.InputStreamConfig.Switch')
).toBeInTheDocument();
expect(
await renderResult.queryByText('Sample logs hidden in agentless')
).not.toBeInTheDocument();
});
});

it('should render inputs when hide_in_deployment_modes is not present', async () => {
const packageInputStreams: RegistryStreamWithDataStream[] = [
Expand Down Expand Up @@ -475,6 +588,55 @@ describe('PackagePolicyInputPanel', () => {
],
},
},
// Duplicated items to make sure they show up in the UI as we now only show multiple switches/descriptions when theres more than one input
{
input: 'logfile',
title: 'Sample logs (duplicated)',
template_path: 'stream.yml.hbs',
vars: [
{
name: 'paths',
type: 'text',
title: 'Paths',
multi: false,
default: ['/var/log/*.log'],
required: false,
show_user: true,
},
],
description: 'Collect sample logs (duplicated)',
data_stream: {
title: 'Default data stream',
release: 'ga',
type: 'logs',
package: 'agentless_test_package',
dataset: 'agentless_test_package.default_data_stream',
path: 'default_data_stream',
elasticsearch: {
'ingest_pipeline.name': 'default',
},
ingest_pipeline: 'default',
streams: [
{
input: 'logfile',
title: 'Sample logs',
template_path: 'stream.yml.hbs',
vars: [
{
name: 'paths',
type: 'text',
title: 'Paths',
multi: false,
default: ['/var/log/*.log'],
required: false,
show_user: true,
},
],
description: 'Collect sample log - hidden in agentless',
},
],
},
},
];
const packageInfo = {
...mockPackageInfo,
Expand Down Expand Up @@ -520,7 +682,7 @@ describe('PackagePolicyInputPanel', () => {
).toBeInTheDocument();
});
await waitFor(async () => {
expect(await renderResult.findByText('Sample logs')).toBeInTheDocument();
expect(await renderResult.queryByText('Sample logs')).toBeInTheDocument();
});
await waitFor(async () => {
expect(await renderResult.findByText('Collect sample logs')).toBeInTheDocument();
Expand Down
14 changes: 13 additions & 1 deletion ...icy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import React, { useState, Fragment, memo, useMemo, useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import styled from 'styled-components';
import { FormattedMessage } from '@kbn/i18n-react';
import {
Expand Down Expand Up @@ -94,7 +95,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
}) => {
const defaultDataStreamId = useDataStreamId();
const { isAgentlessEnabled } = useAgentless();

const showTopLevelDescription = packagePolicyInput.streams.length === 1;
// Showing streams toggle state
const [isShowingStreams, setIsShowingStreams] = useState<boolean>(() =>
shouldShowStreamsByDefault(
Expand Down Expand Up @@ -196,7 +197,17 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
}
}}
/>
<EuiSpacer size="s" />
{/* show the description under the top level toggle if theres only one stream */}
{showTopLevelDescription && (
<EuiText size="s" color="subdued">
<ReactMarkdown>
{String(inputStreams[0].packageInputStream.description)}
</ReactMarkdown>
</EuiText>
)}
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" alignItems="center">
{hasErrors ? (
Expand Down Expand Up @@ -259,6 +270,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
data-test-subj="PackagePolicy.InputStreamConfig"
packageInfo={packageInfo}
packageInputStream={packageInputStream}
totalStreams={inputStreams.length}
packagePolicyInputStream={packagePolicyInputStream!}
updatePackagePolicyInputStream={(
updatedStream: Partial<PackagePolicyInputStream>
Expand Down
10 changes: 7 additions & 3 deletions ...cy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ interface Props {
inputStreamValidationResults: PackagePolicyConfigValidationResults;
forceShowErrors?: boolean;
isEditPage?: boolean;
totalStreams?: number;
}

export const PackagePolicyInputStreamConfig = memo<Props>(
Expand All @@ -76,6 +77,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
inputStreamValidationResults,
forceShowErrors,
isEditPage,
totalStreams,
}) => {
const config = useConfig();
const isExperimentalDataStreamSettingsEnabled =
Expand All @@ -92,7 +94,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
!!packagePolicyInputStream.id &&
packagePolicyInputStream.id === defaultDataStreamId;
const isPackagePolicyEdit = !!packagePolicyId;

const shouldShowStreamsToggles = totalStreams ? totalStreams > 1 : true;
const customDatasetVar = packagePolicyInputStream.vars?.[DATASET_VAR_NAME];
const customDatasetVarValue = customDatasetVar?.value?.dataset || customDatasetVar?.value;

Expand Down Expand Up @@ -182,7 +184,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
alignItems="flexStart"
justifyContent="spaceBetween"
>
{packageInfo.type !== 'input' && (
{packageInfo.type !== 'input' && shouldShowStreamsToggles && (
<EuiFlexItem grow={false}>
<EuiSwitch
data-test-subj="streamOptions.switch"
Expand All @@ -209,7 +211,9 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
</EuiFlexItem>
) : null}
</EuiFlexGroup>
{packageInfo.type !== 'input' && packageInputStream.description ? (
{packageInfo.type !== 'input' &&
packageInputStream.description &&
shouldShowStreamsToggles ? (
Comment thread
Supplementing marked this conversation as resolved.
<>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
Expand Down
Loading