Surface data stream stats, index template, and ILM policy in the UI (#75107) (#75713)

* Add Index Management README and quick testing steps for data streams.
* Surface data stream health in Data Streams tab (table and detail panel).
  - Extract out DataHealth component for use in both Data Streams and Indices tabs.
  - Refactor detail panel to use data structure & algo to build component.
  - Refactor detail panel to use i18n.translate instead of FormattedMessage.
* Render index template name and index lifecycle policy name in the detail panel.
* Render storage size and max timestamp information in table and detail panel.
  - Add 'Include stats' switch.
  - Add humanizeTimeStamp service, localized to data streams.

Author: cjcenizal

docs/developer/architecture/code-exploration.asciidoc

@@ -426,9 +426,9 @@ You can test that the Frozen badge, phase filtering, and lifecycle information i
 Index Management by running this series of requests in Console:
 
 
-- {kib-repo}blob/{branch}/x-pack/plugins/index_management[indexManagement]
+- {kib-repo}blob/{branch}/x-pack/plugins/index_management/README.md[indexManagement]
 
-WARNING: Missing README.
+Create a data stream using Console and you'll be able to view it in the UI:
 
 
 - {kib-repo}blob/{branch}/x-pack/plugins/infra/README.md[infra]

x-pack/plugins/index_management/README.md

@@ -0,0 +1,22 @@
+# Index Management UI
+
+## Data streams tab
+
+### Quick steps for testing
+
+Create a data stream using Console and you'll be able to view it in the UI:
+
+```
+# Configure template for creating a data stream
+PUT _index_template/ds
+{
+  "index_patterns": ["ds"],
+  "data_stream": {}
+}
+
+# Add a document to the data stream
+POST ds/_doc
+{
+  "@timestamp": "2020-01-27"
+}
+```

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

@@ -20,6 +20,7 @@ export type TestSubjects =
   | 'documentationLink'
   | 'emptyPrompt'
   | 'filterList.filterItem'
+  | 'includeStatsSwitch'
   | 'indexTable'
   | 'indexTableIncludeHiddenIndicesToggle'
   | 'indexTableIndexNameLink'
@@ -28,16 +29,17 @@ export type TestSubjects =
   | 'legacyTemplateTable'
   | 'manageTemplateButton'
   | 'mappingsTabContent'
-  | 'previewTabContent'
   | 'noAliasesCallout'
   | 'noMappingsCallout'
   | 'noSettingsCallout'
+  | 'previewTabContent'
   | 'reloadButton'
   | 'reloadIndicesButton'
   | 'row'
   | 'sectionError'
   | 'sectionLoading'
   | 'settingsTabContent'
+  | 'simulateTemplatePreview'
   | 'summaryTab'
   | 'summaryTitle'
   | 'systemTemplatesSwitch'
@@ -49,5 +51,4 @@ export type TestSubjects =
   | 'templateList'
   | 'templatesTab'
   | 'templateTable'
-  | 'viewButton'
-  | 'simulateTemplatePreview';
+  | 'viewButton';

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

@@ -22,6 +22,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   actions: {
     goToDataStreamsList: () => void;
     clickEmptyPromptIndexTemplateLink: () => void;
+    clickIncludeStatsSwitch: () => void;
     clickReloadButton: () => void;
     clickNameAt: (index: number) => void;
     clickIndicesAt: (index: number) => void;
@@ -74,6 +75,11 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     component.update();
   };
 
+  const clickIncludeStatsSwitch = () => {
+    const { find } = testBed;
+    find('includeStatsSwitch').simulate('click');
+  };
+
   const clickReloadButton = () => {
     const { find } = testBed;
     find('reloadButton').simulate('click');
@@ -149,6 +155,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     actions: {
       goToDataStreamsList,
       clickEmptyPromptIndexTemplateLink,
+      clickIncludeStatsSwitch,
       clickReloadButton,
       clickNameAt,
       clickIndicesAt,
@@ -174,4 +181,8 @@ export const createDataStreamPayload = (name: string): DataStream => ({
     },
   ],
   generation: 1,
+  health: 'green',
+  indexTemplateName: 'indexTemplate',
+  storageSize: '1b',
+  maxTimeStamp: 420,
 });

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

@@ -78,7 +78,13 @@ describe('Data Streams tab', () => {
 
   describe('when there are data streams', () => {
     beforeEach(async () => {
-      httpRequestsMockHelpers.setLoadIndicesResponse([
+      const {
+        setLoadIndicesResponse,
+        setLoadDataStreamsResponse,
+        setLoadDataStreamResponse,
+      } = httpRequestsMockHelpers;
+
+      setLoadIndicesResponse([
         {
           health: '',
           status: '',
@@ -105,20 +111,16 @@ describe('Data Streams tab', () => {
       ]);
 
       const dataStreamForDetailPanel = createDataStreamPayload('dataStream1');
-
-      httpRequestsMockHelpers.setLoadDataStreamsResponse([
+      setLoadDataStreamsResponse([
         dataStreamForDetailPanel,
         createDataStreamPayload('dataStream2'),
       ]);
-
-      httpRequestsMockHelpers.setLoadDataStreamResponse(dataStreamForDetailPanel);
+      setLoadDataStreamResponse(dataStreamForDetailPanel);
 
       testBed = await setup();
-
       await act(async () => {
         testBed.actions.goToDataStreamsList();
       });
-
       testBed.component.update();
     });
 
@@ -127,8 +129,8 @@ describe('Data Streams tab', () => {
       const { tableCellsValues } = table.getMetaData('dataStreamTable');
 
       expect(tableCellsValues).toEqual([
-        ['', 'dataStream1', '1', 'Delete'],
-        ['', 'dataStream2', '1', 'Delete'],
+        ['', 'dataStream1', 'green', '1', 'Delete'],
+        ['', 'dataStream2', 'green', '1', 'Delete'],
       ]);
     });
 
@@ -146,6 +148,30 @@ describe('Data Streams tab', () => {
       expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
     });
 
+    test('has a switch that will reload the data streams with additional stats when clicked', async () => {
+      const { exists, actions, table, component } = testBed;
+      const totalRequests = server.requests.length;
+
+      expect(exists('includeStatsSwitch')).toBe(true);
+
+      // Changing the switch will automatically reload the data streams.
+      await act(async () => {
+        actions.clickIncludeStatsSwitch();
+      });
+      component.update();
+
+      // A request is sent, but sinon isn't capturing the query parameters for some reason.
+      expect(server.requests.length).toBe(totalRequests + 1);
+      expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
+
+      // The table renders with the stats columns though.
+      const { tableCellsValues } = table.getMetaData('dataStreamTable');
+      expect(tableCellsValues).toEqual([
+        ['', 'dataStream1', 'green', 'December 31st, 1969 7:00:00 PM', '1b', '1', 'Delete'],
+        ['', 'dataStream2', 'green', 'December 31st, 1969 7:00:00 PM', '1b', '1', 'Delete'],
+      ]);
+    });
+
     test('clicking the indices count navigates to the backing indices', async () => {
       const { table, actions } = testBed;
       await actions.clickIndicesAt(0);

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

@@ -4,10 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DataStream, DataStreamFromEs } from '../types';
+import { DataStream, DataStreamFromEs, Health } from '../types';
 
 export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataStream {
-  const { name, timestamp_field: timeStampField, indices, generation } = dataStreamFromEs;
+  const {
+    name,
+    timestamp_field: timeStampField,
+    indices,
+    generation,
+    status,
+    template,
+    ilm_policy: ilmPolicyName,
+    store_size: storageSize,
+    maximum_timestamp: maxTimeStamp,
+  } = dataStreamFromEs;
 
   return {
     name,
@@ -20,6 +30,11 @@ export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataS
       })
     ),
     generation,
+    health: status.toLowerCase() as Health, // ES typically returns status in all-caps
+    indexTemplateName: template,
+    ilmPolicyName,
+    storageSize,
+    maxTimeStamp,
   };
 }
 

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

@@ -10,23 +10,37 @@ interface TimestampFieldFromEs {
 
 type TimestampField = TimestampFieldFromEs;
 
+export type HealthFromEs = 'GREEN' | 'YELLOW' | 'RED';
+
 export interface DataStreamFromEs {
   name: string;
   timestamp_field: TimestampFieldFromEs;
   indices: DataStreamIndexFromEs[];
   generation: number;
+  status: HealthFromEs;
+  template: string;
+  ilm_policy?: string;
+  store_size?: string;
+  maximum_timestamp?: number;
 }
 
 export interface DataStreamIndexFromEs {
   index_name: string;
   index_uuid: string;
 }
 
+export type Health = 'green' | 'yellow' | 'red';
+
 export interface DataStream {
   name: string;
   timeStampField: TimestampField;
   indices: DataStreamIndex[];
   generation: number;
+  health: Health;
+  indexTemplateName: string;
+  ilmPolicyName?: string;
+  storageSize?: string;
+  maxTimeStamp?: number;
 }
 
 export interface DataStreamIndex {

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

@@ -12,6 +12,6 @@ export * from './mappings';
 
 export * from './templates';
 
-export { DataStreamFromEs, DataStream, DataStreamIndex } from './data_streams';
+export { DataStreamFromEs, Health, DataStream, DataStreamIndex } from './data_streams';
 
 export * from './component_templates';

x-pack/plugins/index_management/public/application/services/health_to_color.ts renamed to x-pack/plugins/index_management/public/application/components/data_health.tsx

@@ -4,7 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const healthToColor = (health: 'green' | 'yellow' | 'red') => {
+import React from 'react';
+import { EuiHealth } from '@elastic/eui';
+import { Health } from '../../../common/types';
+
+interface Props {
+  health: Health;
+}
+
+const healthToColor = (health: Health) => {
   switch (health) {
     case 'green':
       return 'success';
@@ -14,3 +22,7 @@ export const healthToColor = (health: 'green' | 'yellow' | 'red') => {
       return 'danger';
   }
 };
+
+export const DataHealth: React.FunctionComponent<Props> = ({ health }) => (
+  <EuiHealth color={healthToColor(health)}>{health}</EuiHealth>
+);

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

@@ -10,6 +10,7 @@ export { NoMatch } from './no_match';
 export { PageErrorForbidden } from './page_error';
 export { TemplateDeleteModal } from './template_delete_modal';
 export { TemplateForm } from './template_form';
+export { DataHealth } from './data_health';
 export * from './mappings_editor';
 export * from './component_templates';
 export * from './index_templates';