[9.3] [Search] Reduce polling on Index Details page (#251446)

x-pack/solutions/search/packages/kbn-search-api-keys-components/src/components/api_key_form.tsx

@@ -25,9 +25,10 @@ const API_KEY_MASK = '•'.repeat(60);
 
 interface ApiKeyFormProps {
   hasTitle?: boolean;
+  minWidth?: number;
 }
 
-export const ApiKeyForm: React.FC<ApiKeyFormProps> = ({ hasTitle = true }) => {
+export const ApiKeyForm: React.FC<ApiKeyFormProps> = ({ hasTitle = true, minWidth }) => {
   const [showFlyout, setShowFlyout] = useState(false);
   const { apiKey, status, updateApiKey, toggleApiKeyVisibility } = useSearchApiKey();
 
@@ -43,6 +44,7 @@ export const ApiKeyForm: React.FC<ApiKeyFormProps> = ({ hasTitle = true }) => {
         copyValue={apiKey}
         dataTestSubj="apiKeyFormAPIKey"
         copyValueDataTestSubj="APIKeyButtonCopy"
+        minWidth={minWidth}
         actions={[
           <EuiButtonIcon
             iconType={status === Status.showPreviewKey ? 'eyeClosed' : 'eye'}

x-pack/solutions/search/plugins/search_indices/public/components/connection_details/connection_details.tsx

@@ -24,6 +24,7 @@ export const ConnectionDetails: React.FC = () => {
       copyValue={elasticsearchUrl}
       dataTestSubj="connectionDetailsEndpoint"
       copyValueDataTestSubj="connectionDetailsEndpointCopy"
+      minWidth={400}
     />
   );
 };

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

@@ -58,19 +58,23 @@ export const SearchIndexDetailsPage = () => {
   } = useKibana().services;
   const {
     data: index,
-    refetch,
+    refetch: refetchIndex,
     isError: isIndexError,
     isInitialLoading,
     error: indexLoadingError,
   } = useIndex(indexName);
   const {
     data: mappings,
+    refetch: refetchMappings,
     isError: isMappingsError,
     isInitialLoading: isMappingsInitialLoading,
     error: mappingsError,
   } = useIndexMapping(indexName);
-  const { data: indexDocuments, isInitialLoading: indexDocumentsIsInitialLoading } =
-    useIndexDocumentSearch(indexName);
+  const {
+    data: indexDocuments,
+    refetch: refetchIndexDocuments,
+    isInitialLoading: indexDocumentsIsInitialLoading,
+  } = useIndexDocumentSearch(indexName);
   const { data: userPrivileges } = useUserPrivilegesQuery(indexName);
 
   const navigateToPlayground = useCallback(async () => {
@@ -112,6 +116,7 @@ export const SearchIndexDetailsPage = () => {
             isInitialLoading={indexDocumentsIsInitialLoading}
             userPrivileges={userPrivileges}
             navigateToPlayground={navigateToPlayground}
+            mappingData={mappings}
           />
         ),
         'data-test-subj': `${SearchIndexDetailsTabs.DATA}Tab`,
@@ -141,6 +146,7 @@ export const SearchIndexDetailsPage = () => {
     indexDocuments,
     indexDocumentsIsInitialLoading,
     userPrivileges,
+    mappings,
     navigateToPlayground,
   ]);
   const [selectedTab, setSelectedTab] = useState(detailsPageTabs[0]);
@@ -175,9 +181,12 @@ export const SearchIndexDetailsPage = () => {
     application.navigateToApp('management', { deepLinkId: 'index_management' });
   }, [application]);
 
-  const refetchIndex = useCallback(() => {
-    refetch();
-  }, [refetch]);
+  const refetchAllData = useCallback(() => {
+    refetchIndex();
+    refetchMappings();
+    refetchIndexDocuments();
+  }, [refetchIndex, refetchMappings, refetchIndexDocuments]);
+
   const indexError = useMemo(
     () =>
       isIndexError
@@ -197,7 +206,10 @@ export const SearchIndexDetailsPage = () => {
   }, [isShowingDeleteModal]);
   const { euiTheme } = useEuiTheme();
 
-  if (isInitialLoading || isMappingsInitialLoading || indexDocumentsIsInitialLoading) {
+  const pageDataLoading =
+    isInitialLoading || isMappingsInitialLoading || indexDocumentsIsInitialLoading;
+
+  if (pageDataLoading) {
     return (
       <SectionLoading>
         {i18n.translate('xpack.searchIndices.loadingDescription', {
@@ -221,7 +233,7 @@ export const SearchIndexDetailsPage = () => {
         <IndexloadingError
           error={indexError}
           navigateToIndexListPage={navigateToIndexListPage}
-          reloadFunction={refetchIndex}
+          reloadFunction={refetchAllData}
         />
       ) : (
         <>
@@ -295,12 +307,27 @@ export const SearchIndexDetailsPage = () => {
             <EuiFlexGroup direction="column">
               <EuiFlexGroup direction="column">
                 <EuiFlexItem>
-                  <EuiFlexGroup css={{ overflow: 'auto' }} wrap>
-                    <EuiFlexItem grow={false} css={{ minWidth: 400 }}>
-                      <ConnectionDetails />
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false} css={{ minWidth: 400 }}>
-                      <ApiKeyForm />
+                  <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
+                    <EuiFlexGroup css={{ overflow: 'auto' }} wrap>
+                      <EuiFlexItem grow={false}>
+                        <ConnectionDetails />
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <ApiKeyForm minWidth={400} />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                    <EuiFlexItem css={{ maxWidth: 'fit-content' }}>
+                      <EuiButton
+                        data-test-subj="SearchIndexDetailsPageRefreshDataButton"
+                        isLoading={pageDataLoading}
+                        onClick={refetchAllData}
+                        iconType="refresh"
+                        color="success"
+                      >
+                        {i18n.translate('xpack.searchIndices.indexAction.refreshDataButtonLabel', {
+                          defaultMessage: 'Refresh data',
+                        })}
+                      </EuiButton>
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>

x-pack/solutions/search/plugins/search_indices/public/components/indices/details_page_data.tsx

@@ -20,7 +20,6 @@ import { CLOUD_CONNECT_NAV_ID } from '@kbn/deeplinks-management/constants';
 
 import type { UserStartPrivilegesResponse } from '../../../common';
 import { useKibana } from '../../hooks/use_kibana';
-import { useIndexMapping } from '../../hooks/api/use_index_mappings';
 import type { IndexDocuments as IndexDocumentsType } from '../../hooks/api/use_document_search';
 import { IndexDocuments } from '../index_documents/index_documents';
 import { IndexSearchExample } from './details_search_example';
@@ -29,13 +28,15 @@ import { UpdateElserMappingsModal } from '../update_elser_mappings/update_elser_
 import { flattenMappings, hasElserOnMlNodeSemanticTextField } from '../update_elser_mappings/utils';
 import type { NormalizedFields } from '../update_elser_mappings/types';
 import { useLicense } from '../../hooks/use_license';
+import type { Mappings } from '../../types';
 
 interface IndexDetailsDataProps {
   indexName: string;
   indexDocuments?: IndexDocumentsType;
   isInitialLoading: boolean;
   navigateToPlayground: () => void;
   userPrivileges?: UserStartPrivilegesResponse;
+  mappingData: Mappings | undefined;
 }
 
 export const IndexDetailsData = ({
@@ -44,9 +45,9 @@ export const IndexDetailsData = ({
   isInitialLoading,
   navigateToPlayground,
   userPrivileges,
+  mappingData,
 }: IndexDetailsDataProps) => {
   const { application, cloud } = useKibana().services;
-  const { data: mappingData } = useIndexMapping(indexName);
   const { isAtLeastEnterprise } = useLicense();
   const [isUpdatingElserMappings, setIsUpdatingElserMappings] = useState<boolean>(false);
 

x-pack/solutions/search/plugins/search_indices/public/hooks/api/use_delete_document.ts

@@ -11,7 +11,8 @@ import type { SearchHit } from '@elastic/elasticsearch/lib/api/types';
 import { MutationKeys, QueryKeys } from '../../constants';
 import { useKibana } from '../use_kibana';
 import type { IndexDocuments } from './use_document_search';
-import { INDEX_SEARCH_POLLING } from './use_document_search';
+
+const INDEX_SEARCH_POLLING = 30000;
 
 interface DeleteDocumentParams {
   id: string;

x-pack/solutions/search/plugins/search_indices/public/hooks/api/use_document_search.ts

@@ -23,15 +23,12 @@ const DEFAULT_PAGINATION = {
   size: DEFAULT_DOCUMENT_PAGE_SIZE,
   total: 0,
 };
-export const INDEX_SEARCH_POLLING = 30000;
 export const useIndexDocumentSearch = (indexName: string) => {
   const {
     services: { http },
   } = useKibana();
-  const { data, isInitialLoading } = useQuery({
+  const { data, isInitialLoading, refetch } = useQuery({
     queryKey: [QueryKeys.SearchDocuments, indexName],
-    refetchInterval: INDEX_SEARCH_POLLING,
-    refetchIntervalInBackground: true,
     refetchOnWindowFocus: 'always',
     queryFn: async ({ signal }) =>
       http.post<IndexDocuments>(`/internal/search_indices/${indexName}/documents/search`, {
@@ -48,6 +45,7 @@ export const useIndexDocumentSearch = (indexName: string) => {
   });
   return {
     data,
+    refetch,
     isInitialLoading,
     meta: pageToPagination(data?.results?._meta?.page ?? DEFAULT_PAGINATION),
   };

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

@@ -10,14 +10,11 @@ import { useQuery } from '@kbn/react-query';
 import { QueryKeys } from '../../constants';
 import { useKibana } from '../use_kibana';
 
-const POLLING_INTERVAL = 15 * 1000;
 export const useIndex = (indexName: string) => {
   const { http } = useKibana().services;
   const queryKey = [QueryKeys.FetchIndex, indexName];
   return useQuery<Index, { body: { statusCode: number; message: string; error: string } }>({
     queryKey,
-    refetchInterval: POLLING_INTERVAL,
-    refetchIntervalInBackground: true,
     refetchOnWindowFocus: 'always',
     retry: (failureCount, error) => {
       return !(error?.body?.statusCode === 404 || failureCount === 3);

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

@@ -10,14 +10,11 @@ import { useKibana } from '../use_kibana';
 import type { Mappings } from '../../types';
 import { QueryKeys } from '../../constants';
 
-const POLLING_INTERVAL = 15 * 1000;
 export const useIndexMapping = (indexName: string) => {
   const { http } = useKibana().services;
   const queryKey = [QueryKeys.FetchMapping, indexName];
   return useQuery<Mappings, { body: { message: string; error: string } }>({
     queryKey,
-    refetchInterval: POLLING_INTERVAL,
-    refetchIntervalInBackground: true,
     refetchOnWindowFocus: 'always',
     queryFn: () =>
       http.fetch<Mappings>(`/api/index_management/mapping/${encodeURIComponent(indexName)}`),

x-pack/solutions/search/plugins/search_indices/public/hooks/api/use_user_permissions.ts

@@ -15,7 +15,8 @@ import { useKibana } from '../use_kibana';
 export const useUserPrivilegesQuery = (indexName: string) => {
   const { http } = useKibana().services;
   return useQuery({
-    queryKey: [QueryKeys.FetchUserStartPrivileges],
+    queryKey: [QueryKeys.FetchUserStartPrivileges, indexName],
+    refetchOnWindowFocus: false,
     queryFn: () =>
       http.get<UserStartPrivilegesResponse>(
         `/internal/search_indices/start_privileges/${indexName}`