[Onboarding] Remove retrying when fetch index API query fails (elasti…

…c#193634)

## Summary

This Pr set retrying to `false` when fetch Index api returns 404 status.
For all other status code, the fetch index api is retried until failure
count is 3.

Also updated error component to show error message returned from
elasticsearch

### screenshot

**Status code: 404** 

<img width="1286" alt="Screenshot 2024-09-25 at 11 07 20 AM"
src="https://github.com/user-attachments/assets/982b5037-b8a5-43d7-bd5f-874929a74ede">

**Status code: 500** 
<img width="1286" alt="Screenshot 2024-09-25 at 11 16 26 AM"
src="https://github.com/user-attachments/assets/7b7ecbbe-14af-4d9d-8107-bcee9fa384bf">

**How to test:** 
1. Enable searchIndices plugin in `kibana.dev.yml` as this plugin is
behind Feature flag
```
xpack.searchIndices.enabled: true

```
2. [Create new
index](https://www.elastic.co/guide/en/elasticsearch/reference/current/indices-create-index.html)
3. Navigate to
`/app/elasticsearch/indices/index_details/${indexName}/data`
4. [ Delete
index](https://www.elastic.co/guide/en/elasticsearch/reference/current/indices-delete-index.html)
5. Wait for the error screen to appear. Note error message is shown
after one `/internal/index_management/indices/my-index` API is failed

### Checklist

Delete any items that are not applicable to this PR.

- [x] [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
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed

x-pack/plugins/search_indices/public/components/indices/details_page.tsx

@@ -43,11 +43,18 @@ export const SearchIndexDetailsPage = () => {
   const tabId = decodeURIComponent(useParams<{ tabId: string }>().tabId);
 
   const { console: consolePlugin, docLinks, application, history } = useKibana().services;
-  const { data: index, refetch, isError: isIndexError, isInitialLoading } = useIndex(indexName);
+  const {
+    data: index,
+    refetch,
+    isError: isIndexError,
+    isInitialLoading,
+    error: indexLoadingError,
+  } = useIndex(indexName);
   const {
     data: mappings,
     isError: isMappingsError,
     isInitialLoading: isMappingsInitialLoading,
+    error: mappingsError,
   } = useIndexMapping(indexName);
 
   const detailsPageTabs: EuiTabbedContentTab[] = useMemo(() => {
@@ -103,6 +110,19 @@ export const SearchIndexDetailsPage = () => {
   const refetchIndex = useCallback(() => {
     refetch();
   }, [refetch]);
+  const indexError = useMemo(
+    () =>
+      isIndexError
+        ? {
+            title: indexLoadingError ? indexLoadingError.body?.error : '',
+            message: indexLoadingError ? indexLoadingError.body?.message : '',
+          }
+        : {
+            title: mappingsError ? mappingsError.body?.error : '',
+            message: mappingsError ? mappingsError.body?.message : '',
+          },
+    [isIndexError, indexLoadingError, mappingsError]
+  );
   const [showMoreOptions, setShowMoreOptions] = useState<boolean>(false);
   const [isShowingDeleteModal, setShowDeleteIndexModal] = useState<boolean>(false);
   const moreOptionsPopover = (
@@ -165,7 +185,7 @@ export const SearchIndexDetailsPage = () => {
     >
       {isIndexError || isMappingsError || !index || !mappings ? (
         <IndexloadingError
-          indexName={indexName}
+          error={indexError}
           navigateToIndexListPage={navigateToIndexListPage}
           reloadFunction={refetchIndex}
         />

x-pack/plugins/search_indices/public/components/indices/details_page_loading_error.tsx

@@ -15,12 +15,15 @@ import {
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 interface IndexloadingErrorProps {
-  indexName: string;
+  error: {
+    title: string;
+    message: string;
+  };
   navigateToIndexListPage: () => void;
   reloadFunction: () => void;
 }
 export const IndexloadingError = ({
-  indexName,
+  error: { title, message },
   navigateToIndexListPage,
   reloadFunction,
 }: IndexloadingErrorProps) => (
@@ -31,18 +34,21 @@ export const IndexloadingError = ({
     title={
       <h2>
         <FormattedMessage
-          id="xpack.searchIndices.pageLoaError.errorTitle"
-          defaultMessage="Unable to load index details"
+          id="xpack.searchIndices.pageLoadError.errorTitle"
+          defaultMessage="{error}"
+          values={{
+            error: title,
+          }}
         />
       </h2>
     }
     body={
       <EuiText color="subdued">
         <FormattedMessage
           id="xpack.searchIndices.pageLoadError.description"
-          defaultMessage="We encountered an error loading data for index {indexName}. Make sure that the index name in the URL is correct and try again."
+          defaultMessage="{message}"
           values={{
-            indexName,
+            message,
           }}
         />
       </EuiText>

x-pack/plugins/search_indices/public/hooks/api/use_index.ts

@@ -14,12 +14,14 @@ const POLLING_INTERVAL = 15 * 1000;
 export const useIndex = (indexName: string) => {
   const { http } = useKibana().services;
   const queryKey = [QueryKeys.FetchIndex, indexName];
-  const result = useQuery({
+  const result = useQuery<Index, { body: { statusCode: number; message: string; error: string } }>({
     queryKey,
     refetchInterval: POLLING_INTERVAL,
     refetchIntervalInBackground: true,
     refetchOnWindowFocus: 'always',
-    retry: 3,
+    retry: (failureCount, error) => {
+      return !(error?.body?.statusCode === 404 || failureCount === 3);
+    },
     queryFn: () =>
       http.fetch<Index>(`/internal/index_management/indices/${encodeURIComponent(indexName)}`),
   });

x-pack/plugins/search_indices/public/hooks/api/use_index_mappings.ts

@@ -12,7 +12,7 @@ import { Mappings } from '../../types';
 export const useIndexMapping = (indexName: string) => {
   const { http } = useKibana().services;
   const queryKey = ['fetchMapping', indexName];
-  const result = useQuery({
+  const result = useQuery<Mappings, { body: { message: string; error: string } }>({
     queryKey,
     refetchOnWindowFocus: 'always',
     queryFn: () =>

x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts

@@ -103,6 +103,12 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
       await testSubjects.existOrFail('loadingErrorBackToIndicesButton');
       await testSubjects.existOrFail('reloadButton');
     },
+    async expectIndexNotFoundErrorExists() {
+      const pageLoadErrorElement = await (
+        await testSubjects.find('pageLoadError')
+      ).findByClassName('euiTitle');
+      expect(await pageLoadErrorElement.getVisibleText()).to.contain('Not Found');
+    },
     async clickPageReload() {
       await retry.tryForTime(60 * 1000, async () => {
         await testSubjects.click('reloadButton', 2000);

x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts

@@ -124,6 +124,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
         it('has page load error section', async () => {
           await pageObjects.svlSearchIndexDetailPage.expectPageLoadErrorExists();
+          await pageObjects.svlSearchIndexDetailPage.expectIndexNotFoundErrorExists();
         });
         it('reload button shows details page again', async () => {
           await es.indices.create({ index: indexName });