Surface data streams in Index Management.

x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts

@@ -27,6 +27,14 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setLoadDataStreamsResponse = (response: HttpResponse = []) => {
+    server.respondWith('GET', `${API_BASE_PATH}/data_streams`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
   const setDeleteTemplateResponse = (response: HttpResponse = []) => {
     server.respondWith('POST', `${API_BASE_PATH}/delete-index-templates`, [
       200,
@@ -71,6 +79,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
   return {
     setLoadTemplatesResponse,
     setLoadIndicesResponse,
+    setLoadDataStreamsResponse,
     setDeleteTemplateResponse,
     setLoadTemplateResponse,
     setCreateTemplateResponse,

x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts

@@ -10,44 +10,4 @@ export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../..
 
 export { setupEnvironment, WithAppDependencies, services } from './setup_environment';
 
-export type TestSubjects =
-  | 'aliasesTab'
-  | 'appTitle'
-  | 'cell'
-  | 'closeDetailsButton'
-  | 'createTemplateButton'
-  | 'createLegacyTemplateButton'
-  | 'deleteSystemTemplateCallOut'
-  | 'deleteTemplateButton'
-  | 'deleteTemplatesConfirmation'
-  | 'documentationLink'
-  | 'emptyPrompt'
-  | 'manageTemplateButton'
-  | 'mappingsTab'
-  | 'noAliasesCallout'
-  | 'noMappingsCallout'
-  | 'noSettingsCallout'
-  | 'indicesList'
-  | 'indicesTab'
-  | 'indexTableIncludeHiddenIndicesToggle'
-  | 'indexTableIndexNameLink'
-  | 'reloadButton'
-  | 'reloadIndicesButton'
-  | 'row'
-  | 'sectionError'
-  | 'sectionLoading'
-  | 'settingsTab'
-  | 'summaryTab'
-  | 'summaryTitle'
-  | 'systemTemplatesSwitch'
-  | 'templateDetails'
-  | 'templateDetails.manageTemplateButton'
-  | 'templateDetails.sectionLoading'
-  | 'templateDetails.tab'
-  | 'templateDetails.title'
-  | 'templateList'
-  | 'templateTable'
-  | 'templatesTab'
-  | 'legacyTemplateTable'
-  | 'viewButton'
-  | 'filterList.filterItem';
+export { TestSubjects } from './test_subjects';

x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 type TestSubjects =
+  | 'aliasesTab'
+  | 'appTitle'
+  | 'cell'
+  | 'closeDetailsButton'
+  | 'createLegacyTemplateButton'
+  | 'createTemplateButton'
+  | 'dataStreamTable'
+  | 'dataStreamTable'
+  | 'deleteSystemTemplateCallOut'
+  | 'deleteTemplateButton'
+  | 'deleteTemplatesConfirmation'
+  | 'documentationLink'
+  | 'emptyPrompt'
+  | 'filterList.filterItem'
+  | 'indexTable'
+  | 'indexTableIncludeHiddenIndicesToggle'
+  | 'indexTableIndexNameLink'
+  | 'indicesList'
+  | 'indicesTab'
+  | 'legacyTemplateTable'
+  | 'manageTemplateButton'
+  | 'mappingsTab'
+  | 'noAliasesCallout'
+  | 'noMappingsCallout'
+  | 'noSettingsCallout'
+  | 'reloadButton'
+  | 'reloadIndicesButton'
+  | 'row'
+  | 'sectionError'
+  | 'sectionLoading'
+  | 'settingsTab'
+  | 'summaryTab'
+  | 'summaryTitle'
+  | 'systemTemplatesSwitch'
+  | 'templateDetails'
+  | 'templateDetails.manageTemplateButton'
+  | 'templateDetails.sectionLoading'
+  | 'templateDetails.tab'
+  | 'templateDetails.title'
+  | 'templateList'
+  | 'templatesTab'
+  | 'templateTable'
+  | 'viewButton';

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

@@ -0,0 +1,87 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+
+import {
+  registerTestBed,
+  TestBed,
+  TestBedConfig,
+  findTestSubject,
+} from '../../../../../test_utils';
+import { DataStream } from '../../../common';
+import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { WithAppDependencies, services, TestSubjects } from '../helpers';
+
+const testBedConfig: TestBedConfig = {
+  store: () => indexManagementStore(services as any),
+  memoryRouter: {
+    initialEntries: [`/indices`],
+    componentRoutePath: `/:section(indices|data_streams)`,
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
+
+export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
+  actions: {
+    goToDataStreamsList: () => void;
+    clickReloadButton: () => void;
+    clickIndicesAt: (index: number) => void;
+  };
+}
+
+export const setup = async (): Promise<DataStreamsTabTestBed> => {
+  const testBed = await initTestBed();
+
+  /**
+   * User Actions
+   */
+
+  const goToDataStreamsList = () => {
+    testBed.find('data_streamsTab').simulate('click');
+  };
+
+  const clickReloadButton = () => {
+    const { find } = testBed;
+    find('reloadButton').simulate('click');
+  };
+
+  const clickIndicesAt = async (index: number) => {
+    const { component, table, router } = testBed;
+    const { rows } = table.getMetaData('dataStreamTable');
+    const indicesLink = findTestSubject(rows[index].reactWrapper, 'indicesLink');
+
+    await act(async () => {
+      router.navigateTo(indicesLink.props().href!);
+    });
+
+    component.update();
+  };
+
+  return {
+    ...testBed,
+    actions: {
+      goToDataStreamsList,
+      clickReloadButton,
+      clickIndicesAt,
+    },
+  };
+};
+
+export const createDataStreamPayload = (name: string): DataStream => ({
+  name,
+  timeStampField: '@timestamp',
+  indices: [
+    {
+      name: 'indexName',
+      uuid: 'indexId',
+    },
+  ],
+  generation: 1,
+});

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

@@ -0,0 +1,126 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+
+import { API_BASE_PATH } from '../../../common/constants';
+import { setupEnvironment } from '../helpers';
+
+import { DataStreamsTabTestBed, setup, createDataStreamPayload } from './data_streams_tab.helpers';
+
+describe('Data Streams tab', () => {
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+  let testBed: DataStreamsTabTestBed;
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  beforeEach(async () => {
+    httpRequestsMockHelpers.setLoadIndicesResponse([
+      {
+        health: '',
+        status: '',
+        primary: '',
+        replica: '',
+        documents: '',
+        documents_deleted: '',
+        size: '',
+        primary_size: '',
+        name: 'data-stream-index',
+        data_stream: 'dataStream1',
+      },
+      {
+        health: 'green',
+        status: 'open',
+        primary: 1,
+        replica: 1,
+        documents: 10000,
+        documents_deleted: 100,
+        size: '156kb',
+        primary_size: '156kb',
+        name: 'non-data-stream-index',
+      },
+    ]);
+
+    await act(async () => {
+      testBed = await setup();
+    });
+  });
+
+  describe('when there are no data streams', () => {
+    beforeEach(async () => {
+      const { actions, component } = testBed;
+
+      httpRequestsMockHelpers.setLoadDataStreamsResponse([]);
+
+      await act(async () => {
+        actions.goToDataStreamsList();
+      });
+
+      component.update();
+    });
+
+    test('displays an empty prompt', async () => {
+      const { exists } = testBed;
+
+      expect(exists('sectionLoading')).toBe(false);
+      expect(exists('emptyPrompt')).toBe(true);
+    });
+  });
+
+  describe('when there are data streams', () => {
+    beforeEach(async () => {
+      const { actions, component } = testBed;
+
+      httpRequestsMockHelpers.setLoadDataStreamsResponse([
+        createDataStreamPayload('dataStream1'),
+        createDataStreamPayload('dataStream2'),
+      ]);
+
+      await act(async () => {
+        actions.goToDataStreamsList();
+      });
+
+      component.update();
+    });
+
+    test('lists them in the table', async () => {
+      const { table } = testBed;
+
+      const { tableCellsValues } = table.getMetaData('dataStreamTable');
+
+      expect(tableCellsValues).toEqual([
+        ['dataStream1', '1', '@timestamp', '1'],
+        ['dataStream2', '1', '@timestamp', '1'],
+      ]);
+    });
+
+    test('has a button to reload the data streams', async () => {
+      const { exists, actions } = testBed;
+      const totalRequests = server.requests.length;
+
+      expect(exists('reloadButton')).toBe(true);
+
+      await act(async () => {
+        actions.clickReloadButton();
+      });
+
+      expect(server.requests.length).toBe(totalRequests + 1);
+      expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
+    });
+
+    test('clicking the indices count navigates to the backing indices', async () => {
+      const { table, actions } = testBed;
+
+      await actions.clickIndicesAt(0);
+
+      expect(table.getMetaData('indexTable').tableCellsValues).toEqual([
+        ['', '', '', '', '', '', '', 'dataStream1'],
+      ]);
+    });
+  });
+});

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

@@ -6,27 +6,33 @@
 
 import { act } from 'react-dom/test-utils';
 
-import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
-import { IndexList } from '../../../public/application/sections/home/index_list'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import {
+  registerTestBed,
+  TestBed,
+  TestBedConfig,
+  findTestSubject,
+} from '../../../../../test_utils';
+import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { WithAppDependencies, services, TestSubjects } from '../helpers';
 
 const testBedConfig: TestBedConfig = {
   store: () => indexManagementStore(services as any),
   memoryRouter: {
     initialEntries: [`/indices?includeHiddenIndices=true`],
-    componentRoutePath: `/:section(indices|templates)`,
+    componentRoutePath: `/:section(indices|data_streams)`,
   },
   doMountAsync: true,
 };
 
-const initTestBed = registerTestBed(WithAppDependencies(IndexList), testBedConfig);
+const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
 
 export interface IndicesTestBed extends TestBed<TestSubjects> {
   actions: {
     selectIndexDetailsTab: (tab: 'settings' | 'mappings' | 'stats' | 'edit_settings') => void;
     getIncludeHiddenIndicesToggleStatus: () => boolean;
     clickIncludeHiddenIndicesToggle: () => void;
+    clickDataStreamAt: (index: number) => void;
   };
 }
 
@@ -59,12 +65,25 @@ export const setup = async (): Promise<IndicesTestBed> => {
     component.update();
   };
 
+  const clickDataStreamAt = async (index: number) => {
+    const { component, table, router } = testBed;
+    const { rows } = table.getMetaData('indexTable');
+    const dataStreamLink = findTestSubject(rows[index].reactWrapper, 'dataStreamLink');
+
+    await act(async () => {
+      router.navigateTo(dataStreamLink.props().href!);
+    });
+
+    component.update();
+  };
+
   return {
     ...testBed,
     actions: {
       selectIndexDetailsTab,
       getIncludeHiddenIndicesToggleStatus,
       clickIncludeHiddenIndicesToggle,
+      clickDataStreamAt,
     },
   };
 };