🌊 Streams: Move datepicker into chart panel on overview page (elastic#217014)

This PR moves the datepicker on the overview page into the chart panel
to claim some additional vertical screen space and to make it clearer
what the stats on top of the page mean:

<img width="1016" alt="Screenshot 2025-04-03 at 14 58 27"
src="https://github.com/user-attachments/assets/b0100a3e-e9c4-419e-9803-45558b8a0fad"
/>

It also refactors the code a bit and reduces prop drilling in some
areas.

---------

Co-authored-by: kibanamachine <[email protected]>

Author: flash1293

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

@@ -7,18 +7,19 @@
 
 import React from 'react';
 import { EuiLink } from '@elastic/eui';
-import { IlmLocatorParams } from '@kbn/index-lifecycle-management-common-shared';
-import { LocatorPublic } from '@kbn/share-plugin/common';
+import { ILM_LOCATOR_ID, IlmLocatorParams } from '@kbn/index-lifecycle-management-common-shared';
 import { IngestStreamLifecycleILM } from '@kbn/streams-schema';
 import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../hooks/use_kibana';
 
-export function IlmLink({
-  ilmLocator,
-  lifecycle,
-}: {
-  ilmLocator?: LocatorPublic<IlmLocatorParams>;
-  lifecycle: IngestStreamLifecycleILM;
-}) {
+export function IlmLink({ lifecycle }: { lifecycle: IngestStreamLifecycleILM }) {
+  const {
+    dependencies: {
+      start: { share },
+    },
+  } = useKibana();
+
+  const ilmLocator = share.url.locators.get<IlmLocatorParams>(ILM_LOCATOR_ID);
   return (
     <EuiLink
       target="_blank"

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

@@ -28,8 +28,6 @@ import {
   formatNumber,
   useEuiTheme,
 } from '@elastic/eui';
-import { LocatorPublic } from '@kbn/share-plugin/common';
-import { IlmLocatorParams } from '@kbn/index-lifecycle-management-common-shared';
 import { useStreamsAppFetch } from '../../../hooks/use_streams_app_fetch';
 import { useKibana } from '../../../hooks/use_kibana';
 import { orderIlmPhases, parseDurationInSeconds } from './helpers';
@@ -39,11 +37,9 @@ import { useIlmPhasesColorAndDescription } from './hooks/use_ilm_phases_color_an
 export function IlmSummary({
   definition,
   lifecycle,
-  ilmLocator,
 }: {
   definition: IngestStreamGetResponse;
   lifecycle: IngestStreamLifecycleILM;
-  ilmLocator?: LocatorPublic<IlmLocatorParams>;
 }) {
   const {
     dependencies: {
@@ -104,7 +100,7 @@ export function IlmSummary({
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
-            <IlmLink lifecycle={lifecycle} ilmLocator={ilmLocator} />
+            <IlmLink lifecycle={lifecycle} />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>

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

@@ -16,11 +16,7 @@ import {
   isUnwiredStreamGetResponse,
   isWiredStreamGetResponse,
 } from '@kbn/streams-schema';
-import {
-  ILM_LOCATOR_ID,
-  IlmLocatorParams,
-  PolicyFromES,
-} from '@kbn/index-lifecycle-management-common-shared';
+import { PolicyFromES } from '@kbn/index-lifecycle-management-common-shared';
 import { i18n } from '@kbn/i18n';
 import { useAbortController } from '@kbn/react-hooks';
 import { useKibana } from '../../../hooks/use_kibana';
@@ -98,7 +94,6 @@ export function StreamDetailLifecycle({
     core: { http, notifications },
     dependencies: {
       start: {
-        share,
         streams: { streamsRepositoryClient },
       },
     },
@@ -122,8 +117,6 @@ export function StreamDetailLifecycle({
 
   const { signal } = useAbortController();
 
-  const ilmLocator = share.url.locators.get<IlmLocatorParams>(ILM_LOCATOR_ID);
-
   const getIlmPolicies = () =>
     http.get<PolicyFromES[]>('/api/index_lifecycle_management/policies', {
       signal,
@@ -177,7 +170,6 @@ export function StreamDetailLifecycle({
         updateLifecycle={updateLifecycle}
         getIlmPolicies={getIlmPolicies}
         updateInProgress={updateInProgress}
-        ilmLocator={ilmLocator}
       />
 
       <EuiPanel grow={false} hasShadow={false} hasBorder paddingSize="s">
@@ -190,7 +182,6 @@ export function StreamDetailLifecycle({
             <RetentionMetadata
               definition={definition}
               lifecycleActions={lifecycleActions}
-              ilmLocator={ilmLocator}
               openEditModal={(action) => setOpenEditModal(action)}
               isLoadingStats={isLoadingStats}
               stats={stats}
@@ -218,11 +209,7 @@ export function StreamDetailLifecycle({
           {isIlmLifecycle(definition.effective_lifecycle) ? (
             <EuiFlexItem grow={3}>
               <EuiPanel grow={true} hasShadow={false} hasBorder paddingSize="s">
-                <IlmSummary
-                  definition={definition}
-                  lifecycle={definition.effective_lifecycle}
-                  ilmLocator={ilmLocator}
-                />
+                <IlmSummary definition={definition} lifecycle={definition.effective_lifecycle} />
               </EuiPanel>
             </EuiFlexItem>
           ) : null}

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

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import { IlmLocatorParams } from '@kbn/index-lifecycle-management-common-shared';
-import { LocatorPublic } from '@kbn/share-plugin/common';
 import {
   IngestStreamGetResponse,
   isDisabledLifecycle,
@@ -42,15 +40,13 @@ import { formatIngestionRate } from './helpers/format_bytes';
 
 export function RetentionMetadata({
   definition,
-  ilmLocator,
   lifecycleActions,
   openEditModal,
   stats,
   isLoadingStats,
   statsError,
 }: {
   definition: IngestStreamGetResponse;
-  ilmLocator?: LocatorPublic<IlmLocatorParams>;
   lifecycleActions: Array<{ name: string; action: LifecycleEditAction }>;
   openEditModal: (action: LifecycleEditAction) => void;
   stats?: DataStreamStats;
@@ -99,7 +95,7 @@ export function RetentionMetadata({
 
   const ilmLink = isIlmLifecycle(lifecycle) ? (
     <EuiBadge color="hollow">
-      <IlmLink lifecycle={lifecycle} ilmLocator={ilmLocator} />
+      <IlmLink lifecycle={lifecycle} />
     </EuiBadge>
   ) : null;
 

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

@@ -7,11 +7,11 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  ILM_LOCATOR_ID,
   IlmLocatorParams,
   Phases,
   PolicyFromES,
 } from '@kbn/index-lifecycle-management-common-shared';
-import { LocatorPublic } from '@kbn/share-plugin/common';
 import {
   IngestStreamGetResponse,
   IngestStreamLifecycle,
@@ -55,6 +55,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { useBoolean } from '@kbn/react-hooks';
 import useToggle from 'react-use/lib/useToggle';
+import { useKibana } from '../../../hooks/use_kibana';
 import { rolloverCondition } from './helpers/rollover_condition';
 import { useStreamsAppRouter } from '../../../hooks/use_streams_app_router';
 import { useWiredStreams } from '../../../hooks/use_wired_streams';
@@ -69,7 +70,6 @@ interface ModalOptions {
   getIlmPolicies: () => Promise<PolicyFromES[]>;
   definition: IngestStreamGetResponse;
   updateInProgress: boolean;
-  ilmLocator?: LocatorPublic<IlmLocatorParams>;
 }
 
 export function EditLifecycleModal({
@@ -231,9 +231,15 @@ function IlmModal({
   updateLifecycle,
   updateInProgress,
   getIlmPolicies,
-  ilmLocator,
   definition,
 }: ModalOptions) {
+  const {
+    dependencies: {
+      start: { share },
+    },
+  } = useKibana();
+
+  const ilmLocator = share.url.locators.get<IlmLocatorParams>(ILM_LOCATOR_ID);
   const existingLifecycle = definition.stream.ingest.lifecycle;
   const [selectedPolicy, setSelectedPolicy] = useState(
     isIlmLifecycle(existingLifecycle) ? existingLifecycle.ilm.policy : undefined

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

@@ -171,6 +171,7 @@ export function ControlledEsqlChart<T extends string>({
         id="y-axis"
         ticks={3}
         position={Position.Left}
+        hide
         tickFormat={yTickFormat}
         labelFormat={yLabelFormat}
       />