🌊 Streams: Convert legacy types in frontend (#208608)

This PR gets rid of the usage of the legacy "readdefinition" types in
the frontend except for the enrichment view, because @tonyghiani is
working on that in parallel.

I first looked into whether we can just use the existing
`IngestStreamGetResponse` type, but since it doesn't carry the name of
the stream, that is actually super annoying to use - passing the name as
a separate argument is pretty annoying and increases the risk of bugs.

Even though it's not fully "Elasticsearch"-y, I decided to add the
stream name to the `IngestStreamGetResponse` - this way the `stream`
property in the response is a regular `StreamDefinition`, so all the
functions that act on it can use it right away.

This simplifies the frontend code without hurting programmatic API
users.

Author: flash1293

x-pack/solutions/observability/packages/kbn-streams-schema/src/models/ingest/api.ts

@@ -19,8 +19,10 @@ import {
   WiredIngest,
   WiredStreamDefinition,
   unwiredIngestSchema,
+  unwiredStreamDefinitionSchema,
   unwiredStreamDefinitionSchemaBase,
   wiredIngestSchema,
+  wiredStreamDefinitionSchema,
   wiredStreamDefinitionSchemaBase,
 } from './base';
 import { ElasticsearchAsset, elasticsearchAssetSchema } from './common';
@@ -73,13 +75,13 @@ const ingestUpsertRequestSchema: z.Schema<IngestUpsertRequest> = z.union([
  * Stream get response
  */
 interface WiredStreamGetResponse extends StreamGetResponseBase {
-  stream: Omit<WiredStreamDefinition, 'name'>;
+  stream: WiredStreamDefinition;
   inherited_fields: InheritedFieldDefinition;
   effective_lifecycle: WiredIngestStreamEffectiveLifecycle;
 }
 
 interface UnwiredStreamGetResponse extends StreamGetResponseBase {
-  stream: Omit<UnwiredStreamDefinition, 'name'>;
+  stream: UnwiredStreamDefinition;
   elasticsearch_assets: ElasticsearchAsset[];
   data_stream_exists: boolean;
   effective_lifecycle: UnwiredIngestStreamEffectiveLifecycle;
@@ -123,7 +125,7 @@ const ingestStreamUpsertRequestSchema: z.Schema<IngestStreamUpsertRequest> = z.u
 const wiredStreamGetResponseSchema: z.Schema<WiredStreamGetResponse> = z.intersection(
   streamGetResponseSchemaBase,
   z.object({
-    stream: wiredStreamDefinitionSchemaBase,
+    stream: wiredStreamDefinitionSchema,
     inherited_fields: inheritedFieldDefinitionSchema,
     effective_lifecycle: wiredIngestStreamEffectiveLifecycleSchema,
   })
@@ -132,7 +134,7 @@ const wiredStreamGetResponseSchema: z.Schema<WiredStreamGetResponse> = z.interse
 const unwiredStreamGetResponseSchema: z.Schema<UnwiredStreamGetResponse> = z.intersection(
   streamGetResponseSchemaBase,
   z.object({
-    stream: unwiredStreamDefinitionSchemaBase,
+    stream: unwiredStreamDefinitionSchema,
     elasticsearch_assets: z.array(elasticsearchAssetSchema),
     data_stream_exists: z.boolean(),
     effective_lifecycle: unwiredIngestStreamEffectiveLifecycleSchema,

x-pack/solutions/observability/plugins/streams/server/routes/streams/crud/read_stream.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { omit } from 'lodash';
 import {
   IngestStreamGetResponse,
   InheritedFieldDefinition,
@@ -50,7 +49,7 @@ export async function readStream({
 
   if (isUnwiredStreamDefinition(streamDefinition)) {
     return {
-      stream: omit(streamDefinition, 'name'),
+      stream: streamDefinition,
       elasticsearch_assets: dataStream
         ? await getUnmanagedElasticsearchAssets({
             dataStream,
@@ -65,7 +64,7 @@ export async function readStream({
   }
 
   const body: WiredStreamGetResponse = {
-    stream: omit(streamDefinition, 'name'),
+    stream: streamDefinition,
     dashboards,
     effective_lifecycle: findInheritedLifecycle(streamDefinition, ancestors),
     inherited_fields: ancestors.reduce((acc, def) => {

x-pack/solutions/observability/plugins/streams_app/public/components/entity_detail_view/index.tsx

@@ -11,7 +11,7 @@ import { css } from '@emotion/css';
 import { ILM_LOCATOR_ID, IlmLocatorParams } from '@kbn/index-lifecycle-management-common-shared';
 import {
   IngestStreamEffectiveLifecycle,
-  ReadStreamDefinition,
+  IngestStreamGetResponse,
   isDslLifecycle,
   isErrorLifecycle,
   isIlmLifecycle,
@@ -44,7 +44,7 @@ export function EntityDetailViewWithoutParams({
     displayName?: string;
     id: string;
   };
-  definition?: ReadStreamDefinition;
+  definition?: IngestStreamGetResponse;
 }) {
   const router = useStreamsAppRouter();
   useStreamsAppBreadcrumbs(() => {

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_dashboards_view/index.tsx

@@ -6,21 +6,25 @@
  */
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSearchBar } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ReadStreamDefinition } from '@kbn/streams-schema';
 import React, { useMemo, useState } from 'react';
 import type { SanitizedDashboardAsset } from '@kbn/streams-plugin/server/routes/dashboards/route';
+import { IngestStreamGetResponse } from '@kbn/streams-schema';
 import { AddDashboardFlyout } from './add_dashboard_flyout';
 import { DashboardsTable } from './dashboard_table';
 import { useDashboardsApi } from '../../hooks/use_dashboards_api';
 import { useDashboardsFetch } from '../../hooks/use_dashboards_fetch';
 
-export function StreamDetailDashboardsView({ definition }: { definition?: ReadStreamDefinition }) {
+export function StreamDetailDashboardsView({
+  definition,
+}: {
+  definition?: IngestStreamGetResponse;
+}) {
   const [query, setQuery] = useState('');
 
   const [isAddDashboardFlyoutOpen, setIsAddDashboardFlyoutOpen] = useState(false);
 
-  const dashboardsFetch = useDashboardsFetch(definition?.name);
-  const { addDashboards, removeDashboards } = useDashboardsApi(definition?.name);
+  const dashboardsFetch = useDashboardsFetch(definition?.stream.name);
+  const { addDashboards, removeDashboards } = useDashboardsApi(definition?.stream.name);
 
   const [isUnlinkLoading, setIsUnlinkLoading] = useState(false);
   const linkedDashboards = useMemo(() => {
@@ -95,7 +99,7 @@ export function StreamDetailDashboardsView({ definition }: { definition?: ReadSt
         {definition && isAddDashboardFlyoutOpen ? (
           <AddDashboardFlyout
             linkedDashboards={linkedDashboards}
-            entityId={definition.name}
+            entityId={definition.stream.name}
             onAddDashboards={async (dashboards) => {
               await addDashboards(dashboards);
               await dashboardsFetch.refresh();

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_management/classic.tsx

@@ -4,9 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { UnwiredReadStreamDefinition } from '@kbn/streams-schema';
+import { UnwiredStreamGetResponse } from '@kbn/streams-schema';
 import { EuiCallOut, EuiFlexGroup, EuiListGroup, EuiText } from '@elastic/eui';
 import { useStreamsAppParams } from '../../hooks/use_streams_app_params';
 import { RedirectTo } from '../redirect_to';
@@ -24,13 +24,30 @@ export function ClassicStreamDetailManagement({
   definition,
   refreshDefinition,
 }: {
-  definition: UnwiredReadStreamDefinition;
+  definition: UnwiredStreamGetResponse;
   refreshDefinition: () => void;
 }) {
   const {
     path: { key, subtab },
   } = useStreamsAppParams('/{key}/management/{subtab}');
 
+  const legacyDefinition = useMemo(() => {
+    if (!definition) {
+      return undefined;
+    }
+    return {
+      dashboards: definition.dashboards,
+      elasticsearch_assets: definition.elasticsearch_assets,
+      inherited_fields: {},
+      effective_lifecycle: definition.effective_lifecycle,
+      name: definition.stream.name,
+      data_stream_exists: definition.data_stream_exists,
+      stream: {
+        ...definition.stream,
+      },
+    };
+  }, [definition]);
+
   const tabs: ManagementTabs = {
     overview: {
       content: <UnmanagedStreamOverview definition={definition} />,
@@ -43,7 +60,10 @@ export function ClassicStreamDetailManagement({
   if (definition.data_stream_exists) {
     tabs.enrich = {
       content: (
-        <StreamDetailEnrichment definition={definition} refreshDefinition={refreshDefinition} />
+        <StreamDetailEnrichment
+          definition={legacyDefinition}
+          refreshDefinition={refreshDefinition}
+        />
       ),
       label: i18n.translate('xpack.streams.streamDetailView.enrichmentTab', {
         defaultMessage: 'Extract field',
@@ -63,7 +83,7 @@ export function ClassicStreamDetailManagement({
   return <Wrapper tabs={tabs} streamId={key} subtab={subtab} />;
 }
 
-function UnmanagedStreamOverview({ definition }: { definition: UnwiredReadStreamDefinition }) {
+function UnmanagedStreamOverview({ definition }: { definition: UnwiredStreamGetResponse }) {
   const {
     core: {
       http: { basePath },

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_management/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React from 'react';
-import { isWiredReadStream, ReadStreamDefinition } from '@kbn/streams-schema';
+import { IngestStreamGetResponse, isWiredStreamGetResponse } from '@kbn/streams-schema';
 import { WiredStreamDetailManagement } from './wired';
 import { ClassicStreamDetailManagement } from './classic';
 
@@ -14,15 +14,15 @@ export function StreamDetailManagement({
   refreshDefinition,
   isLoadingDefinition,
 }: {
-  definition?: ReadStreamDefinition;
+  definition?: IngestStreamGetResponse;
   refreshDefinition: () => void;
   isLoadingDefinition: boolean;
 }) {
   if (!definition) {
     return null;
   }
 
-  if (isWiredReadStream(definition)) {
+  if (isWiredStreamGetResponse(definition)) {
     return (
       <WiredStreamDetailManagement
         definition={definition}

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_management/wired.tsx

@@ -4,9 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { WiredReadStreamDefinition } from '@kbn/streams-schema';
+import { WiredStreamGetResponse } from '@kbn/streams-schema';
 import { useStreamsAppParams } from '../../hooks/use_streams_app_params';
 import { RedirectTo } from '../redirect_to';
 import { StreamDetailRouting } from '../stream_detail_routing';
@@ -25,14 +25,30 @@ export function WiredStreamDetailManagement({
   refreshDefinition,
   isLoadingDefinition,
 }: {
-  definition?: WiredReadStreamDefinition;
+  definition?: WiredStreamGetResponse;
   refreshDefinition: () => void;
   isLoadingDefinition: boolean;
 }) {
   const {
     path: { key, subtab },
   } = useStreamsAppParams('/{key}/management/{subtab}');
 
+  const legacyDefinition = useMemo(() => {
+    if (!definition) {
+      return undefined;
+    }
+    return {
+      dashboards: definition.dashboards,
+      inherited_fields: definition.inherited_fields,
+      elasticsearch_assets: [],
+      effective_lifecycle: definition.effective_lifecycle,
+      name: definition.stream.name,
+      stream: {
+        ...definition.stream,
+      },
+    };
+  }, [definition]);
+
   const tabs = {
     route: {
       content: (
@@ -44,7 +60,10 @@ export function WiredStreamDetailManagement({
     },
     enrich: {
       content: (
-        <StreamDetailEnrichment definition={definition} refreshDefinition={refreshDefinition} />
+        <StreamDetailEnrichment
+          definition={legacyDefinition}
+          refreshDefinition={refreshDefinition}
+        />
       ),
       label: i18n.translate('xpack.streams.streamDetailView.enrichmentTab', {
         defaultMessage: 'Extract field',

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_overview/index.tsx

@@ -20,9 +20,8 @@ import moment from 'moment';
 import React, { useMemo } from 'react';
 import { css } from '@emotion/css';
 import {
-  ReadStreamDefinition,
-  isUnwiredReadStream,
-  isWiredReadStream,
+  IngestStreamGetResponse,
+  isUnWiredStreamGetResponse,
   isWiredStreamDefinition,
 } from '@kbn/streams-schema';
 import { useDateRange } from '@kbn/observability-utils-browser/hooks/use_date_range';
@@ -44,7 +43,7 @@ const formatNumber = (val: number) => {
   });
 };
 
-export function StreamDetailOverview({ definition }: { definition?: ReadStreamDefinition }) {
+export function StreamDetailOverview({ definition }: { definition?: IngestStreamGetResponse }) {
   const {
     dependencies: {
       start: {
@@ -131,14 +130,17 @@ export function StreamDetailOverview({ definition }: { definition?: ReadStreamDe
 
   const docCountFetch = useStreamsAppFetch(
     async ({ signal }) => {
-      if (!definition || (isUnwiredReadStream(definition) && !definition.data_stream_exists)) {
+      if (
+        !definition ||
+        (isUnWiredStreamGetResponse(definition) && !definition.data_stream_exists)
+      ) {
         return undefined;
       }
       return streamsRepositoryClient.fetch('GET /api/streams/{id}/_details', {
         signal,
         params: {
           path: {
-            id: definition.name as string,
+            id: definition.stream.name,
           },
           query: {
             start: String(start),
@@ -154,14 +156,14 @@ export function StreamDetailOverview({ definition }: { definition?: ReadStreamDe
   const [selectedTab, setSelectedTab] = React.useState<string | undefined>(undefined);
 
   const tabs = [
-    ...(definition && isWiredReadStream(definition)
+    ...(definition && isWiredStreamDefinition(definition.stream)
       ? [
           {
             id: 'streams',
             name: i18n.translate('xpack.streams.entityDetailOverview.tabs.streams', {
               defaultMessage: 'Streams',
             }),
-            content: <ChildStreamList stream={definition} />,
+            content: <ChildStreamList definition={definition} />,
           },
         ]
       : []),
@@ -170,7 +172,7 @@ export function StreamDetailOverview({ definition }: { definition?: ReadStreamDe
       name: i18n.translate('xpack.streams.entityDetailOverview.tabs.quicklinks', {
         defaultMessage: 'Quick Links',
       }),
-      content: <QuickLinks stream={definition} />,
+      content: <QuickLinks definition={definition} />,
     },
   ];
 
@@ -274,8 +276,8 @@ export function StreamDetailOverview({ definition }: { definition?: ReadStreamDe
 
 const EMPTY_DASHBOARD_LIST: SanitizedDashboardAsset[] = [];
 
-function QuickLinks({ stream }: { stream?: ReadStreamDefinition }) {
-  const dashboardsFetch = useDashboardsFetch(stream?.name);
+function QuickLinks({ definition }: { definition?: IngestStreamGetResponse }) {
+  const dashboardsFetch = useDashboardsFetch(definition?.stream.name);
 
   return (
     <DashboardsTable
@@ -285,7 +287,7 @@ function QuickLinks({ stream }: { stream?: ReadStreamDefinition }) {
   );
 }
 
-function ChildStreamList({ stream }: { stream?: ReadStreamDefinition }) {
+function ChildStreamList({ definition }: { definition?: IngestStreamGetResponse }) {
   const {
     dependencies: {
       start: {
@@ -305,15 +307,15 @@ function ChildStreamList({ stream }: { stream?: ReadStreamDefinition }) {
   );
 
   const childDefinitions = useMemo(() => {
-    if (!stream) {
+    if (!definition) {
       return [];
     }
     return streamsListFetch.value?.streams.filter(
-      (d) => isWiredStreamDefinition(d) && d.name.startsWith(stream.name as string)
+      (d) => isWiredStreamDefinition(d) && d.name.startsWith(definition.stream.name)
     );
-  }, [stream, streamsListFetch.value?.streams]);
+  }, [definition, streamsListFetch.value?.streams]);
 
-  if (stream && childDefinitions?.length === 1) {
+  if (definition && childDefinitions?.length === 1) {
     return (
       <EuiFlexItem grow>
         <EuiFlexGroup alignItems="center" justifyContent="center">
@@ -342,7 +344,7 @@ function ChildStreamList({ stream }: { stream?: ReadStreamDefinition }) {
                   iconType="plusInCircle"
                   href={router.link('/{key}/management/{subtab}', {
                     path: {
-                      key: stream?.name as string,
+                      key: definition?.stream.name,
                       subtab: 'route',
                     },
                   })}