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>