[Streams 🌊] Make management view the main page for individual stream

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

@@ -44771,7 +44771,6 @@
     "xpack.streams.streamDetailSchemaEditorUnmapSuccessToast": "Le champ {field} a bien été démappé",
     "xpack.streams.streamDetailView.dashboardsTab": "Tableaux de bord",
     "xpack.streams.streamDetailView.dataStream": "Flux de données",
-    "xpack.streams.streamDetailView.enrichmentTab": "Extraire le champ",
     "xpack.streams.streamDetailView.indexTemplate": "Modèle d'index",
     "xpack.streams.streamDetailView.ingestPipeline": "Pipeline d'ingestion",
     "xpack.streams.streamDetailView.managementTab.bottomBar.cancel": "Annuler les modifications",

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

@@ -44727,7 +44727,6 @@
     "xpack.streams.streamDetailSchemaEditorUnmapSuccessToast": "{field}は正常にマッピング解除されました",
     "xpack.streams.streamDetailView.dashboardsTab": "ダッシュボード",
     "xpack.streams.streamDetailView.dataStream": "データストリーム",
-    "xpack.streams.streamDetailView.enrichmentTab": "フィールドを抽出",
     "xpack.streams.streamDetailView.indexTemplate": "インデックステンプレート",
     "xpack.streams.streamDetailView.ingestPipeline": "パイプラインを投入",
     "xpack.streams.streamDetailView.managementTab.bottomBar.cancel": "変更をキャンセル",

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

@@ -44812,7 +44812,6 @@
     "xpack.streams.streamDetailSchemaEditorUnmapSuccessToast": "已成功对 {field} 取消映射",
     "xpack.streams.streamDetailView.dashboardsTab": "仪表板",
     "xpack.streams.streamDetailView.dataStream": "数据流",
-    "xpack.streams.streamDetailView.enrichmentTab": "提取字段",
     "xpack.streams.streamDetailView.indexTemplate": "索引模板",
     "xpack.streams.streamDetailView.ingestPipeline": "采集管道",
     "xpack.streams.streamDetailView.managementTab.bottomBar.cancel": "取消更改",

x-pack/platform/plugins/shared/streams_app/.storybook/get_mock_streams_app_context.tsx

@@ -24,6 +24,7 @@ import type { StreamsPluginStart } from '@kbn/streams-plugin/public';
 import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { DiscoverSharedPublicStart } from '@kbn/discover-shared-plugin/public';
 import { ObservabilityAIAssistantPublicStart } from '@kbn/observability-ai-assistant-plugin/public';
+import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
 import type { StreamsAppKibanaContext } from '../public/hooks/use_kibana';
 import { StreamsTelemetryService } from '../public/telemetry/service';
 
@@ -70,6 +71,7 @@ export function getMockStreamsAppContext(): StreamsAppKibanaContext {
         share: {} as unknown as SharePublicStart,
         navigation: {} as unknown as NavigationPublicStart,
         savedObjectsTagging: {} as unknown as SavedObjectTaggingPluginStart,
+        fieldFormats: fieldFormatsServiceMock.createStartContract(),
         fieldsMetadata: fieldsMetadataPluginPublicMock.createStartContract(),
         licensing: {} as unknown as LicensingPluginStart,
         indexManagement: {} as unknown as IndexManagementPluginStart,

x-pack/platform/plugins/shared/streams_app/kibana.jsonc

@@ -16,6 +16,7 @@
       "dataViews",
       "discover",
       "discoverShared",
+      "fieldFormats",
       "fieldsMetadata",
       "licensing",
       "indexManagement",

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

@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import React, { useMemo, useState } from 'react';
 import { IngestStreamLifecycle, Streams, isIlmLifecycle, isRoot } from '@kbn/streams-schema';
 import { PolicyFromES } from '@kbn/index-lifecycle-management-common-shared';
 import { i18n } from '@kbn/i18n';
 import { useAbortController } from '@kbn/react-hooks';
+import { css } from '@emotion/react';
 import { useKibana } from '../../../hooks/use_kibana';
 import { EditLifecycleModal, LifecycleEditAction } from './modal';
 import { RetentionSummary } from './summary';
@@ -149,7 +150,7 @@ export function StreamDetailLifecycle({
   };
 
   return (
-    <>
+    <EuiFlexGroup gutterSize="m" direction="column">
       <EditLifecycleModal
         action={openEditModal}
         definition={definition}
@@ -158,51 +159,50 @@ export function StreamDetailLifecycle({
         getIlmPolicies={getIlmPolicies}
         updateInProgress={updateInProgress}
       />
-
-      <EuiPanel grow={false} hasShadow={false} hasBorder paddingSize="s">
-        <EuiFlexGroup gutterSize="m">
-          <EuiFlexItem grow={1}>
-            <RetentionSummary definition={definition} />
+      <EuiFlexGroup gutterSize="m" css={flexRowCss}>
+        <EuiPanel grow={false} hasShadow={false} hasBorder paddingSize="m">
+          <RetentionSummary
+            definition={definition}
+            isLoadingStats={isLoadingStats}
+            stats={stats}
+            statsError={statsError}
+          />
+        </EuiPanel>
+        <EuiPanel grow hasShadow={false} hasBorder paddingSize="m">
+          <RetentionMetadata
+            definition={definition}
+            lifecycleActions={lifecycleActions}
+            openEditModal={(action) => setOpenEditModal(action)}
+            isLoadingStats={isLoadingStats}
+            stats={stats}
+            statsError={statsError}
+          />
+        </EuiPanel>
+      </EuiFlexGroup>
+      <EuiFlexGroup gutterSize="m" css={flexRowCss}>
+        {definition.privileges.monitor && (
+          <EuiFlexItem grow={2}>
+            <EuiPanel hasShadow={false} hasBorder paddingSize="m">
+              <IngestionRate
+                definition={definition}
+                isLoadingStats={isLoadingStats}
+                stats={stats}
+              />
+            </EuiPanel>
           </EuiFlexItem>
-
-          <EuiFlexItem grow={4}>
-            <RetentionMetadata
-              definition={definition}
-              lifecycleActions={lifecycleActions}
-              openEditModal={(action) => setOpenEditModal(action)}
-              isLoadingStats={isLoadingStats}
-              stats={stats}
-              statsError={statsError}
-            />
+        )}
+        {definition.privileges.lifecycle && isIlmLifecycle(definition.effective_lifecycle) ? (
+          <EuiFlexItem grow={3}>
+            <EuiPanel hasShadow={false} hasBorder paddingSize="m">
+              <IlmSummary definition={definition} lifecycle={definition.effective_lifecycle} />
+            </EuiPanel>
           </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
-
-      <EuiSpacer size="m" />
-
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup gutterSize="m">
-          {definition.privileges.monitor && (
-            <EuiFlexItem grow={2}>
-              <EuiPanel grow={true} hasShadow={false} hasBorder paddingSize="s">
-                <IngestionRate
-                  definition={definition}
-                  isLoadingStats={isLoadingStats}
-                  stats={stats}
-                />
-              </EuiPanel>
-            </EuiFlexItem>
-          )}
-
-          {definition.privileges.lifecycle && isIlmLifecycle(definition.effective_lifecycle) ? (
-            <EuiFlexItem grow={3}>
-              <EuiPanel grow={true} hasShadow={false} hasBorder paddingSize="s">
-                <IlmSummary definition={definition} lifecycle={definition.effective_lifecycle} />
-              </EuiPanel>
-            </EuiFlexItem>
-          ) : null}
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </>
+        ) : null}
+      </EuiFlexGroup>
+    </EuiFlexGroup>
   );
 }
+
+const flexRowCss = css`
+  flex-grow: 0;
+`;

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_lifecycle/metadata.tsx

@@ -16,7 +16,7 @@ import React, { ReactNode } from 'react';
 import { useBoolean } from '@kbn/react-hooks';
 import {
   EuiBadge,
-  EuiButton,
+  EuiButtonEmpty,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
@@ -25,13 +25,15 @@ import {
   EuiIconTip,
   EuiLink,
   EuiLoadingSpinner,
-  EuiPanel,
   EuiPopover,
   EuiText,
   EuiToolTip,
-  formatNumber,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
+import { css } from '@emotion/react';
+import { useKibana } from '../../../hooks/use_kibana';
 import { LifecycleEditAction } from './modal';
 import { IlmLink } from './ilm_link';
 import { useStreamsAppRouter } from '../../../hooks/use_streams_app_router';
@@ -54,8 +56,12 @@ export function RetentionMetadata({
   isLoadingStats: boolean;
   statsError?: Error;
 }) {
-  const [isMenuOpen, { toggle: toggleMenu, off: closeMenu }] = useBoolean(false);
+  const { euiTheme } = useEuiTheme();
   const router = useStreamsAppRouter();
+  const [isMenuOpen, { toggle: toggleMenu, off: closeMenu }] = useBoolean(false);
+
+  const dateFormatter = useDateFormatter();
+
   const lifecycle = definition.effective_lifecycle;
 
   const contextualMenu =
@@ -74,17 +80,20 @@ export function RetentionMetadata({
                 : undefined
             }
           >
-            <EuiButton
+            <EuiButtonEmpty
               data-test-subj="streamsAppRetentionMetadataEditDataRetentionButton"
               size="s"
-              fullWidth
               onClick={toggleMenu}
               disabled={!definition.privileges.lifecycle}
+              iconType="pencil"
+              css={css`
+                margin-bottom: -${euiTheme.size.s};
+              `}
             >
               {i18n.translate('xpack.streams.entityDetailViewWithoutParams.editDataRetention', {
                 defaultMessage: 'Edit data retention',
               })}
-            </EuiButton>
+            </EuiButtonEmpty>
           </EuiToolTip>
         }
         isOpen={isMenuOpen}
@@ -147,13 +156,13 @@ export function RetentionMetadata({
   );
 
   return (
-    <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s">
+    <>
       <MetadataRow
         metadata={i18n.translate('xpack.streams.streamDetailLifecycle.retentionPeriodLabel', {
           defaultMessage: 'Retention period',
         })}
         value={
-          <EuiFlexGroup responsive={false}>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiBadge color={isDisabledLifecycle(lifecycle) ? 'default' : 'accent'}>
                 {isDslLifecycle(lifecycle)
@@ -167,9 +176,9 @@ export function RetentionMetadata({
                     })}
               </EuiBadge>
             </EuiFlexItem>
+            {contextualMenu}
           </EuiFlexGroup>
         }
-        button={contextualMenu}
         dataTestSubj="streamsAppRetentionMetadataRetentionPeriod"
       />
       <EuiHorizontalRule margin="s" />
@@ -186,65 +195,63 @@ export function RetentionMetadata({
       />
       <EuiHorizontalRule margin="s" />
       <MetadataRow
-        metadata={i18n.translate('xpack.streams.streamDetailLifecycle.ingestionRate', {
-          defaultMessage: 'Ingestion',
-        })}
-        tip={i18n.translate('xpack.streams.streamDetailLifecycle.ingestionRateDetails', {
-          defaultMessage:
-            'Approximate average (stream total size divided by the number of days since creation).',
+        metadata={i18n.translate('xpack.streams.streamDetailLifecycle.lastUupdated', {
+          defaultMessage: 'Last updated',
         })}
         value={
           <PrivilegesWarningIconWrapper
             hasPrivileges={definition.privileges.monitor}
-            title="ingestionRate"
+            title="lastUpdated"
           >
             {statsError ? (
               '-'
             ) : isLoadingStats || !stats ? (
               <EuiLoadingSpinner size="s" />
-            ) : stats.bytesPerDay ? (
-              formatIngestionRate(stats.bytesPerDay)
             ) : (
-              '-'
+              dateFormatter.convert(stats.lastActivity)
             )}
           </PrivilegesWarningIconWrapper>
         }
       />
       <EuiHorizontalRule margin="s" />
       <MetadataRow
-        metadata={i18n.translate('xpack.streams.streamDetailLifecycle.totalDocs', {
-          defaultMessage: 'Total doc count',
+        metadata={i18n.translate('xpack.streams.streamDetailLifecycle.ingestionRate', {
+          defaultMessage: 'Ingestion',
+        })}
+        tip={i18n.translate('xpack.streams.streamDetailLifecycle.ingestionRateDetails', {
+          defaultMessage:
+            'Approximate average (stream total size divided by the number of days since creation).',
         })}
         value={
           <PrivilegesWarningIconWrapper
             hasPrivileges={definition.privileges.monitor}
-            title="totalDocCount"
+            title="ingestionRate"
           >
             {statsError ? (
               '-'
             ) : isLoadingStats || !stats ? (
               <EuiLoadingSpinner size="s" />
+            ) : stats.bytesPerDay ? (
+              formatIngestionRate(stats.bytesPerDay)
             ) : (
-              formatNumber(stats.totalDocs, '0,0')
+              '-'
             )}
           </PrivilegesWarningIconWrapper>
         }
       />
-    </EuiPanel>
+    </>
   );
 }
 
 function MetadataRow({
   metadata,
   value,
   tip,
-  button,
   dataTestSubj,
 }: {
   metadata: string;
   value: ReactNode;
   tip?: string;
-  button?: ReactNode;
   dataTestSubj?: string;
 }) {
   return (
@@ -267,8 +274,13 @@ function MetadataRow({
           ) : null}
         </EuiFlexGroup>
       </EuiFlexItem>
-      <EuiFlexItem grow={4}>{value}</EuiFlexItem>
-      <EuiFlexItem grow={1}>{button}</EuiFlexItem>
+      <EuiFlexItem grow={5}>{value}</EuiFlexItem>
     </EuiFlexGroup>
   );
 }
+
+const useDateFormatter = () => {
+  const { fieldFormats } = useKibana().dependencies.start;
+
+  return fieldFormats.getDefaultInstance(KBN_FIELD_TYPES.DATE, [ES_FIELD_TYPES.DATE]);
+};