Added hidden filter to data streams tab (#85028)

* Added hidden filter to data streams tab

* Fix i18n import

* Fixed tests

* hidden ds pr feedback

* Added includeHidden query to data streams list

* Changed how badge group renders data streams badges

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts

@@ -19,7 +19,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
  goToDataStreamsList: () => void;
  clickEmptyPromptIndexTemplateLink: () => void;
  clickIncludeStatsSwitch: () => void;
- clickIncludeManagedSwitch: () => void;
+ toggleViewFilterAt: (index: number) => void;
  clickReloadButton: () => void;
  clickNameAt: (index: number) => void;
  clickIndicesAt: (index: number) => void;
@@ -82,9 +82,16 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
  find('includeStatsSwitch').simulate('click');
  };
 
- const clickIncludeManagedSwitch = () => {
- const { find } = testBed;
- find('includeManagedSwitch').simulate('click');
+ const toggleViewFilterAt = (index: number) => {
+ const { find, component } = testBed;
+ act(() => {
+ find('viewButton').simulate('click');
+ });
+ component.update();
+ act(() => {
+ find('filterItem').at(index).simulate('click');
+ });
+ component.update();
  };
 
  const clickReloadButton = () => {
@@ -197,7 +204,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
  goToDataStreamsList,
  clickEmptyPromptIndexTemplateLink,
  clickIncludeStatsSwitch,
- clickIncludeManagedSwitch,
+ toggleViewFilterAt,
  clickReloadButton,
  clickNameAt,
  clickIndicesAt,
@@ -235,6 +242,7 @@ export const createDataStreamPayload = (dataStream: Partial<DataStream>): DataSt
  privileges: {
  delete_index: true,
  },
+ hidden: false,
  ...dataStream,
 });
 

x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts

@@ -19,6 +19,8 @@ import {
  createNonDataStreamIndex,
 } from './data_streams_tab.helpers';
 
+const nonBreakingSpace = ' ';
+
 describe('Data Streams tab', () => {
  const { server, httpRequestsMockHelpers } = setupEnvironment();
  let testBed: DataStreamsTabTestBed;
@@ -82,6 +84,25 @@ describe('Data Streams tab', () => {
  // Assert against the text because the href won't be available, due to dependency upon our core mock.
  expect(findEmptyPromptIndexTemplateLink().text()).toBe('Fleet');
  });
+
+ test('when hidden data streams are filtered by default, the table is rendered empty', async () => {
+ const hiddenDataStream = createDataStreamPayload({
+ name: 'hidden-data-stream',
+ hidden: true,
+ });
+ httpRequestsMockHelpers.setLoadDataStreamsResponse([hiddenDataStream]);
+
+ testBed = await setup({
+ plugins: {},
+ });
+
+ await act(async () => {
+ testBed.actions.goToDataStreamsList();
+ });
+
+ testBed.component.update();
+ expect(testBed.find('dataStreamTable').text()).toContain('No data streams found');
+ });
  });
 
  describe('when there are data streams', () => {
@@ -397,7 +418,6 @@ describe('Data Streams tab', () => {
  });
 
  describe('managed data streams', () => {
- const nonBreakingSpace = ' ';
  beforeEach(async () => {
  const managedDataStream = createDataStreamPayload({
  name: 'managed-data-stream',
@@ -429,24 +449,49 @@ describe('Data Streams tab', () => {
  ]);
  });
 
- test('turning off "Include managed" switch hides managed data streams', async () => {
- const { exists, actions, component, table } = testBed;
+ test('turning off "managed" filter hides managed data streams', async () => {
+ const { actions, table } = testBed;
  let { tableCellsValues } = table.getMetaData('dataStreamTable');
 
  expect(tableCellsValues).toEqual([
  ['', `managed-data-stream${nonBreakingSpace}Managed`, 'green', '1', 'Delete'],
  ['', 'non-managed-data-stream', 'green', '1', 'Delete'],
  ]);
 
- expect(exists('includeManagedSwitch')).toBe(true);
+ actions.toggleViewFilterAt(0);
+
+ ({ tableCellsValues } = table.getMetaData('dataStreamTable'));
+ expect(tableCellsValues).toEqual([['', 'non-managed-data-stream', 'green', '1', 'Delete']]);
+ });
+ });
+
+ describe('hidden data streams', () => {
+ beforeEach(async () => {
+ const hiddenDataStream = createDataStreamPayload({
+ name: 'hidden-data-stream',
+ hidden: true,
+ });
+ httpRequestsMockHelpers.setLoadDataStreamsResponse([hiddenDataStream]);
 
+ testBed = await setup({
+ history: createMemoryHistory(),
+ });
  await act(async () => {
- actions.clickIncludeManagedSwitch();
+ testBed.actions.goToDataStreamsList();
  });
- component.update();
+ testBed.component.update();
+ });
 
- ({ tableCellsValues } = table.getMetaData('dataStreamTable'));
- expect(tableCellsValues).toEqual([['', 'non-managed-data-stream', 'green', '1', 'Delete']]);
+ test('show hidden data streams when filter is toggled', () => {
+ const { table, actions } = testBed;
+
+ actions.toggleViewFilterAt(1);
+
+ const { tableCellsValues } = table.getMetaData('dataStreamTable');
+
+ expect(tableCellsValues).toEqual([
+ ['', `hidden-data-stream${nonBreakingSpace}Hidden`, 'green', '1', 'Delete'],
+ ]);
  });
  });
 

x-pack/plugins/index_management/common/lib/data_stream_serialization.ts

@@ -19,6 +19,7 @@ export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataS
  maximum_timestamp: maxTimeStamp,
  _meta,
  privileges,
+ hidden,
  } = dataStreamFromEs;
 
  return {
@@ -39,6 +40,7 @@ export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataS
  maxTimeStamp,
  _meta,
  privileges,
+ hidden,
  };
 }
 

x-pack/plugins/index_management/common/types/data_streams.ts

@@ -38,6 +38,7 @@ export interface DataStreamFromEs {
  store_size?: string;
  maximum_timestamp?: number;
  privileges: PrivilegesFromEs;
+ hidden: boolean;
 }
 
 export interface DataStreamIndexFromEs {
@@ -59,6 +60,7 @@ export interface DataStream {
  maxTimeStamp?: number;
  _meta?: Meta;
  privileges: Privileges;
+ hidden: boolean;
 }
 
 export interface DataStreamIndex {

x-pack/plugins/index_management/public/application/lib/data_streams.tsx

@@ -6,10 +6,34 @@
 
 import { DataStream } from '../../../common';
 
-export const isManagedByIngestManager = (dataStream: DataStream): boolean => {
+export const isFleetManaged = (dataStream: DataStream): boolean => {
+ // TODO check if the wording will change to 'fleet'
  return Boolean(dataStream._meta?.managed && dataStream._meta?.managed_by === 'ingest-manager');
 };
 
-export const filterDataStreams = (dataStreams: DataStream[]): DataStream[] => {
- return dataStreams.filter((dataStream: DataStream) => !isManagedByIngestManager(dataStream));
+export const filterDataStreams = (
+ dataStreams: DataStream[],
+ visibleTypes: string[]
+): DataStream[] => {
+ return dataStreams.filter((dataStream: DataStream) => {
+ // include all data streams that are neither hidden nor managed
+ if (!dataStream.hidden && !isFleetManaged(dataStream)) {
+ return true;
+ }
+ if (dataStream.hidden && visibleTypes.includes('hidden')) {
+ return true;
+ }
+ return isFleetManaged(dataStream) && visibleTypes.includes('managed');
+ });
+};
+
+export const isSelectedDataStreamHidden = (
+ dataStreams: DataStream[],
+ selectedDataStreamName?: string
+): boolean => {
+ return (
+ !!selectedDataStreamName &&
+ !!dataStreams.find((dataStream: DataStream) => dataStream.name === selectedDataStreamName)
+ ?.hidden
+ );
 };

x-pack/plugins/index_management/public/application/sections/home/components/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { FilterListButton, Filters } from './filter_list_button';

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_badges.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiBadge, EuiBadgeGroup } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { DataStream } from '../../../../../common';
+import { isFleetManaged } from '../../../lib/data_streams';
+
+interface Props {
+ dataStream: DataStream;
+}
+
+export const DataStreamsBadges: React.FunctionComponent<Props> = ({ dataStream }) => {
+ const badges = [];
+ if (isFleetManaged(dataStream)) {
+ badges.push(
+ <EuiBadge color="hollow">
+ <FormattedMessage
+ id="xpack.idxMgmt.dataStreamList.table.managedDataStreamBadge"
+ defaultMessage="Managed"
+ />
+ </EuiBadge>
+ );
+ }
+ if (dataStream.hidden) {
+ badges.push(
+ <EuiBadge color="hollow">
+ <FormattedMessage
+ id="xpack.idxMgmt.dataStreamList.table.hiddenDataStreamBadge"
+ defaultMessage="Hidden"
+ />
+ </EuiBadge>
+ );
+ }
+ return badges.length > 0 ? (
+ <>
+ &nbsp;
+ <EuiBadgeGroup>{badges}</EuiBadgeGroup>
+ </>
+ ) : null;
+};

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx

@@ -32,6 +32,7 @@ import { useUrlGenerator } from '../../../../services/use_url_generator';
 import { getIndexListUri, getTemplateDetailsLink } from '../../../../services/routing';
 import { ILM_PAGES_POLICY_EDIT, ILM_URL_GENERATOR_ID } from '../../../../constants';
 import { useAppContext } from '../../../../app_context';
+import { DataStreamsBadges } from '../data_stream_badges';
 
 interface DetailsListProps {
  details: Array<{
@@ -269,6 +270,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
  <EuiTitle size="m">
  <h2 id="dataStreamDetailPanelTitle" data-test-subj="dataStreamDetailPanelTitle">
  {dataStreamName}
+ {dataStream && <DataStreamsBadges dataStream={dataStream} />}
  </h2>
  </EuiTitle>
  </EuiFlyoutHeader>