Fix workflow execution history is limited to 10 previous executions (elastic#238623)

## Summary

closes elastic/security-team#14160

Problem: we showed only last 10 executions in Execution Tab.


https://github.com/user-attachments/assets/cbf5ca2b-076c-45cd-9ccc-af7b3dd0b0f0

Solution:

* Increase default limit from 10 to 20
* Added endless scrolling pagination to load more executions if required



https://github.com/user-attachments/assets/1806d385-4d9c-4eab-bbb3-2f58d0ca560a



### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

Author: VladimirFilonov

src/platform/plugins/shared/workflows_management/public/entities/workflows/model/use_workflow_executions.ts

@@ -7,40 +7,156 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import type { ExecutionStatus, ExecutionType, WorkflowExecutionListDto } from '@kbn/workflows';
-import { useQuery, type UseQueryOptions } from '@tanstack/react-query';
+import { useInfiniteQuery, type UseInfiniteQueryOptions } from '@tanstack/react-query';
+
+const DEFAULT_PAGE_SIZE = 20;
+const MAX_RETRIES = 3;
 
 interface UseWorkflowExecutionsParams {
   workflowId: string | null;
   statuses?: ExecutionStatus[];
   executionTypes?: ExecutionType[];
+  perPage?: number;
 }
 
 export function useWorkflowExecutions(
   params: UseWorkflowExecutionsParams,
-  options: Omit<UseQueryOptions<WorkflowExecutionListDto>, 'queryKey' | 'queryFn'> = {}
+  options: Omit<
+    UseInfiniteQueryOptions<
+      WorkflowExecutionListDto,
+      unknown,
+      WorkflowExecutionListDto,
+      WorkflowExecutionListDto,
+      (string | number | ExecutionStatus[] | ExecutionType[] | null | undefined)[]
+    >,
+    'queryKey' | 'queryFn' | 'getNextPageParam'
+  > = {}
 ) {
   const { http } = useKibana().services;
+  const perPage = params.perPage ?? DEFAULT_PAGE_SIZE;
+
+  const queryFn = useCallback(
+    async ({ pageParam = 1 }: { pageParam?: number }) => {
+      return http!.get<WorkflowExecutionListDto>(`/api/workflowExecutions`, {
+        query: {
+          workflowId: params.workflowId,
+          statuses: params.statuses,
+          executionTypes: params.executionTypes,
+          page: pageParam,
+          perPage,
+        },
+      });
+    },
+    [http, params.workflowId, params.statuses, params.executionTypes, perPage]
+  );
 
-  return useQuery<WorkflowExecutionListDto>({
+  const getNextPageParam = useCallback((lastPage: WorkflowExecutionListDto) => {
+    const { page, limit, total } = lastPage._pagination;
+    const totalPages = Math.ceil(total / limit);
+
+    if (page >= totalPages) {
+      return undefined;
+    }
+
+    return page + 1;
+  }, []);
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetched,
+    isFetching,
+    isLoading: isInitialLoading,
+    refetch,
+    error,
+  } = useInfiniteQuery({
     networkMode: 'always',
     queryKey: [
       'workflows',
       params.workflowId,
       'executions',
       params.statuses,
       params.executionTypes,
+      perPage,
     ],
-    queryFn: () =>
-      http!.get(`/api/workflowExecutions`, {
-        query: {
-          workflowId: params.workflowId,
-          statuses: params.statuses,
-          executionTypes: params.executionTypes,
-        },
-      }),
+    queryFn,
+    getNextPageParam,
     enabled: params.workflowId !== null,
+    retry: MAX_RETRIES,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     ...options,
   });
+
+  // Computed loading states for better semantics
+  const isLoadingMore = isFetching && !isInitialLoading;
+
+  // Flatten all pages into a single list
+  const allExecutions = useMemo<WorkflowExecutionListDto | null>(() => {
+    if (!data?.pages?.length) {
+      return null;
+    }
+
+    const firstPage = data.pages[0];
+    const allResults = data.pages.flatMap((page) => page.results);
+
+    return {
+      results: allResults,
+      _pagination: {
+        page: data.pages.length, // Number of pages loaded
+        limit: firstPage._pagination.limit, // Keep original page size
+        total: firstPage._pagination.total, // Total available
+      },
+    };
+  }, [data]);
+
+  // IntersectionObserver setup for infinite scroll
+  const observerRef = useRef<IntersectionObserver>();
+  const fetchNext = useCallback(
+    async ([{ isIntersecting }]: IntersectionObserverEntry[]) => {
+      if (isIntersecting && hasNextPage && !isInitialLoading && !isFetching) {
+        await fetchNextPage();
+        // Don't disconnect - the observer will be reattached to the new last element
+      }
+    },
+    [fetchNextPage, hasNextPage, isFetching, isInitialLoading]
+  );
+
+  useEffect(() => {
+    return () => observerRef.current?.disconnect();
+  }, []);
+
+  // Attaches an intersection observer to the last element
+  // to trigger a callback to paginate when the user scrolls to it
+  const setPaginationObserver = useCallback(
+    (ref: HTMLDivElement | null) => {
+      observerRef.current?.disconnect();
+
+      if (!ref) {
+        return;
+      }
+
+      observerRef.current = new IntersectionObserver(fetchNext, {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1,
+      });
+      observerRef.current.observe(ref);
+    },
+    [fetchNext]
+  );
+
+  return {
+    data: allExecutions,
+    isInitialLoading,
+    isLoadingMore,
+    isFetched,
+    hasNextPage,
+    error,
+    refetch,
+    setPaginationObserver,
+  };
 }

src/platform/plugins/shared/workflows_management/public/features/workflow_execution_list/ui/workflow_execution_list.stories.tsx

@@ -113,8 +113,11 @@ export const Default: Story = {
         total: 8,
       },
     },
+    isInitialLoading: false,
+    isLoadingMore: false,
     onExecutionClick: () => {},
     selectedId: '2',
+    setPaginationObserver: () => {},
   },
 };
 
@@ -128,28 +131,78 @@ export const Empty: Story = {
         total: 0,
       },
     },
+    isInitialLoading: false,
+    isLoadingMore: false,
     selectedId: null,
     filters: mockFilters,
     onFiltersChange: () => {},
+    onExecutionClick: () => {},
+    setPaginationObserver: () => {},
   },
 };
 
 export const Loading: Story = {
   args: {
-    isLoading: true,
+    isInitialLoading: true,
+    isLoadingMore: false,
     error: null,
     selectedId: null,
     filters: mockFilters,
     onFiltersChange: () => {},
+    onExecutionClick: () => {},
+    setPaginationObserver: () => {},
   },
 };
 
 export const ErrorStory: Story = {
   args: {
-    isLoading: false,
+    isInitialLoading: false,
+    isLoadingMore: false,
     error: new Error('Internal server error'),
     selectedId: null,
     filters: mockFilters,
     onFiltersChange: () => {},
+    onExecutionClick: () => {},
+    setPaginationObserver: () => {},
+  },
+};
+
+export const LoadingMore: Story = {
+  args: {
+    executions: {
+      results: [
+        {
+          id: '1',
+          status: ExecutionStatus.COMPLETED,
+          startedAt: new Date().toISOString(),
+          finishedAt: new Date().toISOString(),
+          spaceId: 'default',
+          duration: parseDuration('1h2m'),
+          stepId: 'my_first_step',
+        },
+        {
+          id: '2',
+          status: ExecutionStatus.FAILED,
+          startedAt: new Date().toISOString(),
+          finishedAt: new Date().toISOString(),
+          spaceId: 'default',
+          duration: parseDuration('1d2h'),
+          stepId: 'my_first_step',
+        },
+      ],
+      _pagination: {
+        page: 1,
+        limit: 10,
+        total: 20,
+      },
+    },
+    isInitialLoading: false,
+    isLoadingMore: true,
+    error: null,
+    selectedId: null,
+    filters: mockFilters,
+    onFiltersChange: () => {},
+    onExecutionClick: () => {},
+    setPaginationObserver: () => {},
   },
 };

src/platform/plugins/shared/workflows_management/public/features/workflow_execution_list/ui/workflow_execution_list.tsx

@@ -19,7 +19,7 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { type WorkflowExecutionListDto } from '@kbn/workflows';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
@@ -31,10 +31,12 @@ export interface WorkflowExecutionListProps {
   executions: WorkflowExecutionListDto | null;
   filters: ExecutionListFiltersQueryParams;
   onFiltersChange: (filters: ExecutionListFiltersQueryParams) => void;
-  isLoading: boolean;
+  isInitialLoading: boolean;
+  isLoadingMore: boolean;
   error: Error | null;
   onExecutionClick: (executionId: string) => void;
   selectedId: string | null;
+  setPaginationObserver: (ref: HTMLDivElement | null) => void;
 }
 
 // TODO: use custom table? add pagination and search
@@ -44,17 +46,27 @@ const emptyPromptCommonProps: EuiEmptyPromptProps = { titleSize: 'xs', paddingSi
 export const WorkflowExecutionList = ({
   filters,
   onFiltersChange,
-  isLoading,
+  isInitialLoading,
+  isLoadingMore,
   error,
   executions,
   onExecutionClick,
   selectedId,
+  setPaginationObserver,
 }: WorkflowExecutionListProps) => {
   const styles = useMemoCss(componentStyles);
+  const scrollableContentRef = useRef<HTMLDivElement>(null);
+
+  // Reset scroll position when filters change
+  useEffect(() => {
+    if (scrollableContentRef.current) {
+      scrollableContentRef.current.scrollTop = 0;
+    }
+  }, [filters.statuses, filters.executionTypes]);
 
   let content: React.ReactNode = null;
 
-  if (isLoading) {
+  if (isInitialLoading) {
     content = (
       <EuiEmptyPrompt
         {...emptyPromptCommonProps}
@@ -112,20 +124,42 @@ export const WorkflowExecutionList = ({
       />
     );
   } else {
+    const lastExecutionId = executions.results[executions.results.length - 1]?.id;
+
     content = (
-      <EuiFlexGroup direction="column" gutterSize="s">
-        {executions.results.map((execution) => (
-          <EuiFlexItem key={execution.id} grow={false}>
-            <WorkflowExecutionListItem
-              status={execution.status}
-              startedAt={new Date(execution.startedAt)}
-              duration={execution.duration}
-              selected={execution.id === selectedId}
-              onClick={() => onExecutionClick(execution.id)}
-            />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
+      <>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          {executions.results.map((execution) => (
+            <React.Fragment key={execution.id}>
+              <EuiFlexItem grow={false}>
+                <WorkflowExecutionListItem
+                  status={execution.status}
+                  startedAt={new Date(execution.startedAt)}
+                  duration={execution.duration}
+                  selected={execution.id === selectedId}
+                  onClick={() => onExecutionClick(execution.id)}
+                />
+              </EuiFlexItem>
+              {/* Observer element for infinite scrolling - attached to last item */}
+              {execution.id === lastExecutionId && (
+                <div
+                  ref={setPaginationObserver}
+                  css={css`
+                    height: 1px;
+                  `}
+                />
+              )}
+            </React.Fragment>
+          ))}
+        </EuiFlexGroup>
+        {isLoadingMore && (
+          <EuiFlexGroup justifyContent="center" css={css({ marginTop: '8px' })}>
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="m" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+      </>
     );
   }
 
@@ -153,8 +187,10 @@ export const WorkflowExecutionList = ({
           </EuiFlexItem>
         </EuiFlexGroup>
       </header>
-      <EuiFlexItem grow={true} css={styles.scrollableContent}>
-        {content}
+      <EuiFlexItem grow={true} css={styles.scrollableWrapper}>
+        <div ref={scrollableContentRef} css={styles.scrollableContent}>
+          {content}
+        </div>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
@@ -167,9 +203,11 @@ const componentStyles = {
       height: '100%',
       overflow: 'hidden',
     }),
-  scrollableContent: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      overflowY: 'auto',
-      minHeight: 0, // This is important for flex items to shrink properly
-    }),
+  scrollableWrapper: css({
+    minHeight: 0,
+  }),
+  scrollableContent: css({
+    height: '100%',
+    overflowY: 'auto',
+  }),
 };