[Ingest] Data streams list page (#64134) (#64366)

* Clean up fleet setup request/response typings

* Add data stream model and list route, handler, and request/response types

* Initial pass at data streams list

* Table styling fixes

* Fix types, fix field names

* Change forEach to map

x-pack/plugins/ingest_manager/common/constants/routes.ts

@@ -5,9 +5,10 @@
  */
 // Base API paths
 export const API_ROOT = `/api/ingest_manager`;
+export const EPM_API_ROOT = `${API_ROOT}/epm`;
+export const DATA_STREAM_API_ROOT = `${API_ROOT}/data_streams`;
 export const DATASOURCE_API_ROOT = `${API_ROOT}/datasources`;
 export const AGENT_CONFIG_API_ROOT = `${API_ROOT}/agent_configs`;
-export const EPM_API_ROOT = `${API_ROOT}/epm`;
 export const FLEET_API_ROOT = `${API_ROOT}/fleet`;
 
 // EPM API routes
@@ -23,6 +24,11 @@ export const EPM_API_ROUTES = {
   CATEGORIES_PATTERN: `${EPM_API_ROOT}/categories`,
 };
 
+// Data stream API routes
+export const DATA_STREAM_API_ROUTES = {
+  LIST_PATTERN: `${DATA_STREAM_API_ROOT}`,
+};
+
 // Datasource API routes
 export const DATASOURCE_API_ROUTES = {
   LIST_PATTERN: `${DATASOURCE_API_ROOT}`,

x-pack/plugins/ingest_manager/common/services/routes.ts

@@ -8,6 +8,7 @@ import {
   EPM_API_ROUTES,
   DATASOURCE_API_ROUTES,
   AGENT_CONFIG_API_ROUTES,
+  DATA_STREAM_API_ROUTES,
   FLEET_SETUP_API_ROUTES,
   AGENT_API_ROUTES,
   ENROLLMENT_API_KEY_ROUTES,
@@ -88,6 +89,12 @@ export const agentConfigRouteService = {
   },
 };
 
+export const dataStreamRouteService = {
+  getListPath: () => {
+    return DATA_STREAM_API_ROUTES.LIST_PATTERN;
+  },
+};
+
 export const fleetSetupRouteService = {
   getFleetSetupPath: () => FLEET_SETUP_API_ROUTES.INFO_PATTERN,
   postFleetSetupPath: () => FLEET_SETUP_API_ROUTES.CREATE_PATTERN,

x-pack/plugins/ingest_manager/common/types/models/data_stream.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 interface DataStream {
+  index: string;
+  dataset: string;
+  namespace: string;
+  type: string;
+  package: string;
+  last_activity: string;
+  size_in_bytes: number;
+}

x-pack/plugins/ingest_manager/common/types/models/index.ts

@@ -7,6 +7,7 @@
 export * from './agent';
 export * from './agent_config';
 export * from './datasource';
+export * from './data_stream';
 export * from './output';
 export * from './epm';
 export * from './enrollment_api_key';

x-pack/plugins/ingest_manager/server/types/rest_spec/fleet_setup.ts → x-pack/plugins/ingest_manager/common/types/rest_spec/data_stream.ts

@@ -3,11 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { DataStream } from '../models';
 
-export const GetFleetSetupRequestSchema = {};
-
-export const CreateFleetSetupRequestSchema = {};
-
-export interface CreateFleetSetupResponse {
-  isInitialized: boolean;
+export interface GetDataStreamsResponse {
+  data_streams: DataStream[];
 }

x-pack/plugins/ingest_manager/common/types/rest_spec/fleet_setup.ts

@@ -4,16 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface GetFleetSetupRequest {}
-
-export interface CreateFleetSetupRequest {
-  body: {
-    fleet_enroll_username: string;
-    fleet_enroll_password: string;
-  };
-}
-
 export interface CreateFleetSetupResponse {
   isInitialized: boolean;
 }

x-pack/plugins/ingest_manager/common/types/rest_spec/index.ts

@@ -5,6 +5,7 @@
  */
 export * from './common';
 export * from './datasource';
+export * from './data_stream';
 export * from './agent';
 export * from './agent_config';
 export * from './fleet_setup';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/index.ts

@@ -12,6 +12,7 @@ export const EPM_LIST_INSTALLED_PACKAGES_PATH = `${EPM_PATH}/installed`;
 export const EPM_DETAIL_VIEW_PATH = `${EPM_PATH}/detail/:pkgkey/:panel?`;
 export const AGENT_CONFIG_PATH = '/configs';
 export const AGENT_CONFIG_DETAILS_PATH = `${AGENT_CONFIG_PATH}/`;
+export const DATA_STREAM_PATH = '/data-streams';
 export const FLEET_PATH = '/fleet';
 export const FLEET_AGENTS_PATH = `${FLEET_PATH}/agents`;
 export const FLEET_AGENT_DETAIL_PATH = `${FLEET_AGENTS_PATH}/`;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/data_stream.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { useRequest } from './use_request';
+import { dataStreamRouteService } from '../../services';
+import { GetDataStreamsResponse } from '../../types';
+
+export const useGetDataStreams = () => {
+  return useRequest<GetDataStreamsResponse>({
+    path: dataStreamRouteService.getListPath(),
+    method: 'get',
+  });
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/index.ts

@@ -6,6 +6,7 @@
 export { setHttpClient, sendRequest, useRequest } from './use_request';
 export * from './agent_config';
 export * from './datasource';
+export * from './data_stream';
 export * from './agents';
 export * from './enrollment_api_keys';
 export * from './epm';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.tsx

@@ -16,10 +16,10 @@ import {
   IngestManagerConfigType,
   IngestManagerStartDeps,
 } from '../../plugin';
-import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from './constants';
+import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH, DATA_STREAM_PATH } from './constants';
 import { DefaultLayout, WithoutHeaderLayout } from './layouts';
 import { Loading, Error } from './components';
-import { IngestManagerOverview, EPMApp, AgentConfigApp, FleetApp } from './sections';
+import { IngestManagerOverview, EPMApp, AgentConfigApp, FleetApp, DataStreamApp } from './sections';
 import { CoreContext, DepsContext, ConfigContext, setHttpClient, useConfig } from './hooks';
 import { PackageInstallProvider } from './sections/epm/hooks';
 import { sendSetup } from './hooks/use_request/setup';
@@ -98,6 +98,11 @@ const IngestManagerRoutes = ({ ...rest }) => {
               <AgentConfigApp />
             </DefaultLayout>
           </Route>
+          <Route path={DATA_STREAM_PATH}>
+            <DefaultLayout section="data_stream">
+              <DataStreamApp />
+            </DefaultLayout>
+          </Route>
           <ProtectedRoute path={FLEET_PATH} isAllowed={fleet.enabled}>
             <DefaultLayout section="fleet">
               <FleetApp />

x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx

@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { Section } from '../sections';
 import { AlphaMessaging } from '../components';
 import { useLink, useConfig } from '../hooks';
-import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../constants';
+import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH, DATA_STREAM_PATH } from '../constants';
 
 interface Props {
   section?: Section;
@@ -76,6 +76,12 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({ section, childre
                   defaultMessage="Fleet"
                 />
               </EuiTab>
+              <EuiTab isSelected={section === 'data_stream'} href={useLink(DATA_STREAM_PATH)}>
+                <FormattedMessage
+                  id="xpack.ingestManager.appNavigation.dataStreamsLinkText"
+                  defaultMessage="Data streams"
+                />
+              </EuiTab>
             </EuiTabs>
           </EuiFlexItem>
         </EuiFlexGroup>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx

@@ -191,7 +191,6 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
           defaultMessage: 'Name',
         }),
         width: '20%',
-        // FIXME: use version once available - see: https://github.com/elastic/kibana/issues/56750
         render: (name: string, agentConfig: AgentConfig) => (
           <EuiFlexGroup gutterSize="s" alignItems="baseline" style={{ minWidth: 0 }}>
             <EuiFlexItem grow={false} style={NO_WRAP_TRUNCATE_STYLE}>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import { DataStreamListPage } from './list_page';
+
+export const DataStreamApp: React.FunctionComponent = () => {
+  return (
+    <Router>
+      <Switch>
+        <Route path="/data-streams">
+          <DataStreamListPage />
+        </Route>
+      </Switch>
+    </Router>
+  );
+};