[Search Sessions] Client side search cache (#92439)

* dev docs * sessions tutorial * title * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update dev_docs/tutorials/data/search.mdx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Code review * client cache * mock utils * improve code * Use cacheOnClient in Lens * mock * docs and types * unit tests! * Search response cache + tests * remove cacheOnClient evict cache on error * test ts * shouldCacheOnClient + improve tests * remove unused * clear subs * dont unsubscribe on setItem * caching mess * t * fix jest * add size to bfetch response @ppisljar use it to reduce the # of stringify in response cache * ts * ts * docs * simplify abort controller logic and extract it into a class * docs * delete unused tests * use addAbortSignal * code review * Use shareReplay, fix tests * code review * bfetch test * code review * Leave the bfetch changes out * docs + isRestore * make sure to clean up properly * Make sure that aborting in cache works correctly Clearer restructuring of code * fix test * import * code review round 1 * ts * Added functional test for search request caching * test * skip before codefreeze Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2025-06-27 18:51:07 -04:00 · 2021-04-16 19:59:23 +03:00 · 2021-04-16 19:59:23 +03:00 · c187270b5e
commit c187270b5e
parent 106afd41b6
19 changed files with 1350 additions and 60 deletions
--- a/examples/search_examples/common/index.ts
+++ b/examples/search_examples/common/index.ts
@ -16,6 +16,7 @@ export interface IMyStrategyRequest extends IEsSearchRequest {
 }
 export interface IMyStrategyResponse extends IEsSearchResponse {
  cool: string;
+  executed_at: number;
 }

 export const SERVER_SEARCH_ROUTE_PATH = '/api/examples/search';
--- a/examples/search_examples/public/search/app.tsx
+++ b/examples/search_examples/public/search/app.tsx
@ -111,7 +111,7 @@ export const SearchExamplesApp = ({
    setSelectedNumericField(fields?.length ? getNumeric(fields)[0] : null);
  }, [fields]);

-  const doAsyncSearch = async (strategy?: string) => {
+  const doAsyncSearch = async (strategy?: string, sessionId?: string) => {
    if (!indexPattern || !selectedNumericField) return;

    // Construct the query portion of the search request
@ -138,6 +138,7 @@ export const SearchExamplesApp = ({
    const searchSubscription$ = data.search
      .search(req, {
        strategy,
+        sessionId,
      })
      .subscribe({
        next: (res) => {
@ -148,19 +149,30 @@ export const SearchExamplesApp = ({
              ? // @ts-expect-error @elastic/elasticsearch no way to declare a type for aggregation in the search response
                res.rawResponse.aggregations[1].value
              : undefined;
+            const isCool = (res as IMyStrategyResponse).cool;
+            const executedAt = (res as IMyStrategyResponse).executed_at;
            const message = (
              <EuiText>
                Searched {res.rawResponse.hits.total} documents. <br />
                The average of {selectedNumericField!.name} is{' '}
                {avgResult ? Math.floor(avgResult) : 0}.
                <br />
-                Is it Cool? {String((res as IMyStrategyResponse).cool)}
+                {isCool ? `Is it Cool? ${isCool}` : undefined}
+                <br />
+                <EuiText data-test-subj="requestExecutedAt">
+                  {executedAt ? `Executed at? ${executedAt}` : undefined}
+                </EuiText>
              </EuiText>
            );
-            notifications.toasts.addSuccess({
-              title: 'Query result',
-              text: mountReactNode(message),
-            });
+            notifications.toasts.addSuccess(
+              {
+                title: 'Query result',
+                text: mountReactNode(message),
+              },
+              {
+                toastLifeTimeMs: 300000,
+              }
+            );
            searchSubscription$.unsubscribe();
          } else if (isErrorResponse(res)) {
            // TODO: Make response error status clearer
@ -227,6 +239,10 @@ export const SearchExamplesApp = ({
    doAsyncSearch('myStrategy');
  };

+  const onClientSideSessionCacheClickHandler = () => {
+    doAsyncSearch('myStrategy', data.search.session.getSessionId());
+  };
+
  const onServerClickHandler = async () => {
    if (!indexPattern || !selectedNumericField) return;
    try {
@ -374,6 +390,45 @@ export const SearchExamplesApp = ({
                </EuiButtonEmpty>
              </EuiText>
              <EuiSpacer />
+              <EuiTitle size="s">
+                <h3>Client side search session caching</h3>
+              </EuiTitle>
+              <EuiText>
+                <EuiButtonEmpty
+                  size="xs"
+                  onClick={() => data.search.session.start()}
+                  iconType="alert"
+                  data-test-subj="searchExamplesStartSession"
+                >
+                  <FormattedMessage
+                    id="searchExamples.startNewSession"
+                    defaultMessage="Start a new session"
+                  />
+                </EuiButtonEmpty>
+                <EuiButtonEmpty
+                  size="xs"
+                  onClick={() => data.search.session.clear()}
+                  iconType="alert"
+                  data-test-subj="searchExamplesClearSession"
+                >
+                  <FormattedMessage
+                    id="searchExamples.clearSession"
+                    defaultMessage="Clear session"
+                  />
+                </EuiButtonEmpty>
+                <EuiButtonEmpty
+                  size="xs"
+                  onClick={onClientSideSessionCacheClickHandler}
+                  iconType="play"
+                  data-test-subj="searchExamplesCacheSearch"
+                >
+                  <FormattedMessage
+                    id="searchExamples.myStrategyButtonText"
+                    defaultMessage="Request from low-level client via My Strategy"
+                  />
+                </EuiButtonEmpty>
+              </EuiText>
+              <EuiSpacer />
              <EuiTitle size="s">
                <h3>Using search on the server</h3>
              </EuiTitle>
--- a/examples/search_examples/server/my_strategy.ts
+++ b/examples/search_examples/server/my_strategy.ts
@ -20,6 +20,7 @@ export const mySearchStrategyProvider = (
        map((esSearchRes) => ({
          ...esSearchRes,
          cool: request.get_cool ? 'YES' : 'NOPE',
+          executed_at: new Date().getTime(),
        }))
      ),
    cancel: async (id, options, deps) => {