Streams landing page improvements

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -45385,7 +45385,6 @@
     "xpack.streams.streamDetailView.welcomeImage": "Image de bienvenue pour l'application de flux",
     "xpack.streams.streamsAppDeepLinkTitle": "Flux",
     "xpack.streams.streamsAppLinkTitle": "Flux",
-    "xpack.streams.streamsListViewPageHeaderTitle": "Flux",
     "xpack.streams.streamsTable.collapseAll": "Tout réduire",
     "xpack.streams.streamsTable.expandAll": "Tout développer",
     "xpack.streams.streamsTable.management": "Gestion",
@@ -49221,4 +49220,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "Ce champ est requis.",
     "xpack.watcher.watcherDescription": "Détectez les modifications survenant dans vos données en créant, gérant et monitorant des alertes."
   }
-}
+}

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -45350,7 +45350,6 @@
     "xpack.streams.streamDetailView.welcomeImage": "ストリームアプリのウェルカム画像",
     "xpack.streams.streamsAppDeepLinkTitle": "ストリーム",
     "xpack.streams.streamsAppLinkTitle": "ストリーム",
-    "xpack.streams.streamsListViewPageHeaderTitle": "ストリーム",
     "xpack.streams.streamsTable.collapseAll": "すべて縮小",
     "xpack.streams.streamsTable.expandAll": "すべて拡張",
     "xpack.streams.streamsTable.management": "管理",
@@ -49184,4 +49183,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -45422,7 +45422,6 @@
     "xpack.streams.streamDetailView.welcomeImage": "流应用的欢迎图像",
     "xpack.streams.streamsAppDeepLinkTitle": "流计数",
     "xpack.streams.streamsAppLinkTitle": "流计数",
-    "xpack.streams.streamsListViewPageHeaderTitle": "流计数",
     "xpack.streams.streamsTable.collapseAll": "折叠全部",
     "xpack.streams.streamsTable.expandAll": "展开全部",
     "xpack.streams.streamsTable.management": "管理",
@@ -49260,4 +49259,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}

x-pack/platform/plugins/shared/streams/server/routes/internal/streams/crud/route.ts

@@ -8,7 +8,45 @@
 import { SearchTotalHits } from '@elastic/elasticsearch/lib/api/types';
 import { StreamDefinition, isGroupStreamDefinition } from '@kbn/streams-schema';
 import { z } from '@kbn/zod';
+import { estypes } from '@elastic/elasticsearch';
+import { UnwiredIngestStreamEffectiveLifecycle } from '@kbn/streams-schema';
 import { createServerRoute } from '../../../create_server_route';
+import { getDataStreamLifecycle } from '../../../../lib/streams/stream_crud';
+
+export interface ListStreamDetail {
+  stream: StreamDefinition;
+  effective_lifecycle: UnwiredIngestStreamEffectiveLifecycle;
+  data_stream: estypes.IndicesDataStream;
+}
+
+export const listStreamsRoute = createServerRoute({
+  endpoint: 'GET /internal/streams',
+  options: {
+    access: 'internal',
+  },
+  params: z.object({}),
+  handler: async ({ request, getScopedClients }): Promise<{ streams: ListStreamDetail[] }> => {
+    const { streamsClient, scopedClusterClient } = await getScopedClients({ request });
+    const streams = await streamsClient.listStreams();
+    const dataStreams = await scopedClusterClient.asCurrentUser.indices.getDataStream({
+      name: streams.map((stream) => stream.name),
+    });
+
+    const enrichedStreams = streams.reduce<ListStreamDetail[]>((acc, stream) => {
+      const match = dataStreams.data_streams.find((dataStream) => dataStream.name === stream.name);
+      if (match) {
+        acc.push({
+          stream,
+          effective_lifecycle: getDataStreamLifecycle(match),
+          data_stream: match,
+        });
+      }
+      return acc;
+    }, []);
+
+    return { streams: enrichedStreams };
+  },
+});
 
 export interface StreamDetailsResponse {
   details: {
@@ -103,6 +141,7 @@ export const resolveIndexRoute = createServerRoute({
 });
 
 export const internalCrudRoutes = {
+  ...listStreamsRoute,
   ...streamDetailRoute,
   ...resolveIndexRoute,
 };

x-pack/platform/plugins/shared/streams_app/public/components/app_root/index.tsx

@@ -19,6 +19,7 @@ import { streamsAppRouter } from '../../routes/config';
 import { StreamsAppStartDependencies } from '../../types';
 import { StreamsAppServices } from '../../services/types';
 import { HeaderMenuPortal } from '../header_menu';
+import { TimeFilterProvider } from '../../hooks/use_timefilter';
 
 export function AppRoot({
   coreStart,
@@ -47,12 +48,14 @@ export function AppRoot({
   return (
     <StreamsAppContextProvider context={context}>
       <RedirectAppLinks coreStart={coreStart}>
-        <RouterProvider history={history} router={streamsAppRouter}>
-          <BreadcrumbsContextProvider>
-            <RouteRenderer />
-          </BreadcrumbsContextProvider>
-          <StreamsAppHeaderActionMenu appMountParameters={appMountParameters} />
-        </RouterProvider>
+        <TimeFilterProvider timefilter={pluginsStart.data.query.timefilter.timefilter}>
+          <RouterProvider history={history} router={streamsAppRouter}>
+            <BreadcrumbsContextProvider>
+              <RouteRenderer />
+            </BreadcrumbsContextProvider>
+            <StreamsAppHeaderActionMenu appMountParameters={appMountParameters} />
+          </RouterProvider>
+        </TimeFilterProvider>
       </RedirectAppLinks>
     </StreamsAppContextProvider>
   );

x-pack/platform/plugins/shared/streams_app/public/components/esql_chart/controlled_esql_chart.tsx

@@ -19,6 +19,7 @@ import {
   niceTimeFormatter,
   LIGHT_THEME,
   DARK_THEME,
+  DomainRange,
 } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -62,14 +63,14 @@ export function ControlledEsqlChart<T extends string>({
   metricNames,
   chartType = 'line',
   height,
-  timerange,
+  xDomain: customXDomain,
 }: {
   id: string;
   result: AbortableAsyncState<UnparsedEsqlResponse>;
   metricNames: T[];
   chartType?: 'area' | 'bar' | 'line';
   height?: number;
-  timerange?: { start: number; end: number };
+  xDomain?: DomainRange;
 }) {
   const {
     core: { uiSettings },
@@ -102,14 +103,16 @@ export function ControlledEsqlChart<T extends string>({
   const xValues = allTimeseries.flatMap(({ data }) => data.map(({ x }) => x));
 
   // todo - pull in time range here
-  const min = timerange?.start ?? Math.min(...xValues);
-  const max = timerange?.end ?? Math.max(...xValues);
+  const min = customXDomain?.min ?? Math.min(...xValues);
+  const max = customXDomain?.max ?? Math.max(...xValues);
 
   const isEmpty = min === 0 && max === 0;
 
   const xFormatter = niceTimeFormatter([min, max]);
 
-  const xDomain = isEmpty ? { min: 0, max: 1 } : { min, max };
+  const xDomain: DomainRange = isEmpty
+    ? { min: 0, max: 1 }
+    : { min, max, minInterval: customXDomain?.minInterval };
 
   const yTickFormat = (value: number | null) => (value === null ? '' : String(value));
   const yLabelFormat = (label: string) => label;

x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_overview/components/stream_chart_panel.tsx

@@ -8,6 +8,7 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@e
 import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import type { DomainRange } from '@elastic/charts';
 
 import { AbortableAsyncState } from '@kbn/react-hooks';
 import type { UnparsedEsqlResponse } from '@kbn/traced-es-client';
@@ -16,16 +17,13 @@ import { ControlledEsqlChart } from '../../esql_chart/controlled_esql_chart';
 interface StreamChartPanelProps {
   histogramQueryFetch: AbortableAsyncState<UnparsedEsqlResponse | undefined>;
   discoverLink?: string;
-  timerange: {
-    start: number;
-    end: number;
-  };
+  xDomain?: DomainRange;
 }
 
 export function StreamChartPanel({
   histogramQueryFetch,
   discoverLink,
-  timerange,
+  xDomain,
 }: StreamChartPanelProps) {
   return (
     <EuiPanel hasShadow={false} hasBorder>
@@ -62,7 +60,7 @@ export function StreamChartPanel({
             id="entity_log_rate"
             metricNames={['metric']}
             chartType={'bar'}
-            timerange={timerange}
+            xDomain={xDomain}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_overview/stream_detail_overview.tsx

@@ -11,6 +11,7 @@ import { IngestStreamGetResponse, isWiredStreamDefinition } from '@kbn/streams-s
 import { ILM_LOCATOR_ID, IlmLocatorParams } from '@kbn/index-lifecycle-management-common-shared';
 
 import { computeInterval } from '@kbn/visualization-utils';
+import moment, { DurationInputArg1, DurationInputArg2 } from 'moment';
 import { useKibana } from '../../hooks/use_kibana';
 import { useStreamsAppFetch } from '../../hooks/use_streams_app_fetch';
 import { StreamsAppSearchBar } from '../streams_app_search_bar';
@@ -155,6 +156,8 @@ export function StreamDetailOverview({ definition }: { definition?: IngestStream
 
   const ilmLocator = share.url.locators.get<IlmLocatorParams>(ILM_LOCATOR_ID);
 
+  const [value, unit] = bucketSize.split(' ') as [DurationInputArg1, DurationInputArg2];
+
   return (
     <>
       <EuiFlexGroup direction="column">
@@ -210,7 +213,11 @@ export function StreamDetailOverview({ definition }: { definition?: IngestStream
               <StreamChartPanel
                 histogramQueryFetch={histogramQueryFetch}
                 discoverLink={discoverLink}
-                timerange={{ start, end }}
+                xDomain={{
+                  min: start,
+                  max: end,
+                  minInterval: moment.duration(value, unit).asMilliseconds(),
+                }}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/documents_column.tsx

@@ -0,0 +1,158 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiI18nNumber,
+  EuiSkeletonRectangle,
+  EuiDelayRender,
+} from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { css } from '@emotion/css';
+import {
+  BarSeries,
+  Chart,
+  ScaleType,
+  Settings,
+  LIGHT_THEME,
+  DARK_THEME,
+  niceTimeFormatter,
+  Tooltip,
+  TooltipStickTo,
+  type SettingsProps,
+} from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+import { useEuiTheme } from '@elastic/eui';
+import { useStreamsAppFetch } from '../../hooks/use_streams_app_fetch';
+import { useKibana } from '../../hooks/use_kibana';
+import { esqlResultToTimeseries } from '../../util/esql_result_to_timeseries';
+import { useTimeFilter } from '../../hooks/use_timefilter';
+
+export function DocumentsColumn({
+  indexPattern,
+  numDataPoints,
+}: {
+  indexPattern: string;
+  numDataPoints: number;
+}) {
+  const {
+    dependencies: {
+      start: {
+        streams: { streamsRepositoryClient },
+      },
+    },
+  } = useKibana();
+
+  const { absoluteTimeRange } = useTimeFilter();
+  const minInterval = Math.floor((absoluteTimeRange.end - absoluteTimeRange.start) / numDataPoints);
+
+  const histogramQueryFetch = useStreamsAppFetch(
+    async ({ signal }) => {
+      return streamsRepositoryClient.fetch('POST /internal/streams/esql', {
+        params: {
+          body: {
+            operationName: 'get_doc_count_for_stream',
+            query: `FROM ${indexPattern} | STATS doc_count = COUNT(*) BY @timestamp = BUCKET(@timestamp, ${minInterval} ms)`,
+            start: absoluteTimeRange.start,
+            end: absoluteTimeRange.end,
+          },
+        },
+        signal,
+      });
+    },
+    [streamsRepositoryClient, indexPattern, absoluteTimeRange, minInterval]
+  );
+
+  const allTimeseries = React.useMemo(
+    () =>
+      esqlResultToTimeseries({
+        result: histogramQueryFetch,
+        metricNames: ['doc_count'],
+      }),
+    [histogramQueryFetch]
+  );
+
+  const docCount = allTimeseries.reduce(
+    (acc, series) => acc + series.data.reduce((acc2, item) => acc2 + (item.doc_count || 0), 0),
+    0
+  );
+
+  const xFormatter = niceTimeFormatter([absoluteTimeRange.start, absoluteTimeRange.end]);
+
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="m"
+      className={css`
+        height: ${euiThemeVars.euiSizeXL};
+        white-space: nowrap;
+      `}
+    >
+      {histogramQueryFetch.loading ? (
+        <EuiDelayRender delay={300}>
+          <EuiFlexItem>
+            <EuiSkeletonRectangle isLoading width="100%" height={euiThemeVars.euiFontSizeS} />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiSkeletonRectangle isLoading width="100%" height={euiThemeVars.euiSizeL} />
+          </EuiFlexItem>
+        </EuiDelayRender>
+      ) : (
+        <>
+          <EuiFlexItem
+            className={css`
+              text-align: right;
+            `}
+          >
+            <EuiI18nNumber value={docCount} />
+          </EuiFlexItem>
+          <EuiFlexItem
+            className={css`
+              border-bottom: 1px solid ${euiThemeVars.euiColorLightestShade};
+            `}
+          >
+            <Chart size={{ width: '100%', height: euiThemeVars.euiSizeL }}>
+              <SettingsWithTheme
+                xDomain={{ min: absoluteTimeRange.start, max: absoluteTimeRange.end, minInterval }}
+                noResults={<div />}
+              />
+              <Tooltip
+                stickTo={TooltipStickTo.Middle}
+                headerFormatter={({ value }) => xFormatter(value)}
+              />
+              {allTimeseries.map((serie) => (
+                <BarSeries
+                  key={serie.id}
+                  id={serie.id}
+                  xScaleType={ScaleType.Time}
+                  yScaleType={ScaleType.Linear}
+                  xAccessor="x"
+                  yAccessors={['doc_count']}
+                  data={serie.data}
+                />
+              ))}
+            </Chart>
+          </EuiFlexItem>
+        </>
+      )}
+    </EuiFlexGroup>
+  );
+}
+
+function SettingsWithTheme(props: SettingsProps) {
+  const { colorMode } = useEuiTheme();
+  return (
+    <Settings
+      locale={i18n.getLocale()}
+      baseTheme={colorMode === 'LIGHT' ? LIGHT_THEME : DARK_THEME}
+      theme={{ background: { color: 'transparent' } }}
+      {...props}
+    />
+  );
+}