[Search][Homepage] Indices Card

config/serverless.es.yml

@@ -71,7 +71,9 @@ xpack.searchInferenceEndpoints.ui.enabled: false
 xpack.search.notebooks.catalog.url: https://elastic-enterprise-search.s3.us-east-2.amazonaws.com/serverless/catalog.json
 
 # Search Homepage
-xpack.search.homepage.ui.enabled: true
+xpack.search.homepage:
+  enableIndexStats: false
+  ui.enabled: true
 
 # Semantic text UI
 xpack.index_management.dev.enableSemanticText: false

x-pack/plugins/enterprise_search/common/locators/index_details_locator.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { LocatorDefinition } from '@kbn/share-plugin/common';
+import { SerializableRecord } from '@kbn/utility-types';
+
+import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../constants';
+
+export interface IndexDetailsLocatorParams extends SerializableRecord {
+  indexId: string;
+}
+
+export class IndexDetailsLocatorDefinition implements LocatorDefinition<IndexDetailsLocatorParams> {
+  public readonly getLocation = async (params: IndexDetailsLocatorParams) => {
+    return {
+      app: ENTERPRISE_SEARCH_CONTENT_PLUGIN.ID,
+      path: `/search_indices/${params.indexId}`,
+      state: {},
+    };
+  };
+  public readonly id = 'INDEX_DETAILS_LOCATOR_ID';
+}

x-pack/plugins/enterprise_search/public/index.ts

@@ -13,4 +13,8 @@ export const plugin = (initializerContext: PluginInitializerContext) => {
   return new EnterpriseSearchPlugin(initializerContext);
 };
 
-export type { EnterpriseSearchPublicSetup, EnterpriseSearchPublicStart } from './plugin';
+export type {
+  EnterpriseSearchPublicSetup,
+  EnterpriseSearchPublicStart,
+  EnterpriseSearchKibanaServicesContext,
+} from './plugin';

x-pack/plugins/enterprise_search/public/plugin.ts

@@ -41,6 +41,7 @@ import { SearchInferenceEndpointsPluginStart } from '@kbn/search-inference-endpo
 import { SearchPlaygroundPluginStart } from '@kbn/search-playground/public';
 import { SecurityPluginSetup, SecurityPluginStart } from '@kbn/security-plugin/public';
 import { SharePluginSetup, SharePluginStart } from '@kbn/share-plugin/public';
+import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
 
 import {
   ANALYTICS_PLUGIN,
@@ -61,6 +62,10 @@ import {
   CreatIndexLocatorDefinition,
   CreatIndexLocatorParams,
 } from '../common/locators/create_index_locator';
+import {
+  IndexDetailsLocatorDefinition,
+  IndexDetailsLocatorParams,
+} from '../common/locators/index_details_locator';
 import { ClientConfigType, InitialAppData } from '../common/types';
 
 import { ENGINES_PATH } from './applications/app_search/routes';
@@ -110,8 +115,11 @@ export interface PluginsStart {
   searchInferenceEndpoints?: SearchInferenceEndpointsPluginStart;
   security?: SecurityPluginStart;
   share?: SharePluginStart;
+  usageCollection?: UsageCollectionStart;
 }
 
+export type EnterpriseSearchKibanaServicesContext = CoreStart & PluginsStart;
+
 export interface ESConfig {
   elasticsearch_host: string;
 }
@@ -523,6 +531,7 @@ export class EnterpriseSearchPlugin implements Plugin {
     });
 
     share?.url.locators.create<CreatIndexLocatorParams>(new CreatIndexLocatorDefinition());
+    share?.url.locators.create<IndexDetailsLocatorParams>(new IndexDetailsLocatorDefinition());
 
     if (config.canDeployEntSearch) {
       core.application.register({

x-pack/plugins/search_homepage/common/routes.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export enum APIRoutes {
+  GET_INDICES = '/internal/search_homepage/indices',
+}

x-pack/plugins/search_homepage/common/types.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type {
+  HealthStatus,
+  IndicesStatsIndexMetadataState,
+} from '@elastic/elasticsearch/lib/api/types';
+
+export interface GetIndicesIndexData {
+  aliases: string[];
+  count: number; // Elasticsearch _count
+  health?: HealthStatus;
+  name: string;
+  status?: IndicesStatsIndexMetadataState;
+}
+
+export interface GetIndicesResponse {
+  indices: GetIndicesIndexData[];
+}

x-pack/plugins/search_homepage/public/application.tsx

@@ -12,23 +12,28 @@ import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Router } from '@kbn/shared-ux-router';
-import { SearchHomepageServicesContext } from './types';
-import { HomepageRouter } from './router';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { UsageTrackerContextProvider } from './contexts/usage_tracker_context';
+import { HomepageRouter } from './router';
+import { SearchHomepageServicesContext } from './types';
+import { initQueryClient } from './utils/query_client';
 
 export const renderApp = async (
   core: CoreStart,
   services: SearchHomepageServicesContext,
   element: HTMLElement
 ) => {
+  const queryClient = initQueryClient(core.notifications.toasts);
   ReactDOM.render(
     <KibanaRenderContextProvider {...core}>
       <KibanaContextProvider services={{ ...core, ...services }}>
         <UsageTrackerContextProvider usageCollection={services.usageCollection}>
           <I18nProvider>
-            <Router history={services.history}>
-              <HomepageRouter />
-            </Router>
+            <QueryClientProvider client={queryClient}>
+              <Router history={services.history}>
+                <HomepageRouter />
+              </Router>
+            </QueryClientProvider>
           </I18nProvider>
         </UsageTrackerContextProvider>
       </KibanaContextProvider>

x-pack/plugins/search_homepage/public/components/create_index_modal.tsx

@@ -0,0 +1,175 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { useKibana } from '../hooks/use_kibana';
+import { useCreateIndex } from '../hooks/api/use_create_index';
+import { getErrorMessage } from '../utils/get_error_message';
+import { isValidIndexName } from '../utils/is_valid_index_name';
+import { QueryKeys } from '../constants';
+
+const INVALID_INDEX_NAME_ERROR = i18n.translate(
+  'xpack.searchHomepage.createIndex.modal.invalidName.error',
+  { defaultMessage: 'Index name is not valid' }
+);
+
+export interface CreateIndexModalProps {
+  closeModal: () => void;
+}
+
+export const CreateIndexModal = ({ closeModal }: CreateIndexModalProps) => {
+  const queryClient = useQueryClient();
+  const { notifications } = useKibana().services;
+  const { mutateAsync: createIndex } = useCreateIndex();
+  const [indexName, setIndexName] = useState<string>('');
+  const [indexNameError, setIndexNameError] = useState<string | undefined>();
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [createError, setCreateError] = useState<string | undefined>(undefined);
+
+  const putCreateIndex = useCallback(async () => {
+    setIsSaving(true);
+    try {
+      await createIndex(indexName);
+      notifications.toasts.addSuccess(
+        i18n.translate('xpack.searchHomepage.createIndex.successfullyCreatedIndexMessage', {
+          defaultMessage: 'Successfully created index: {indexName}',
+          values: { indexName },
+        }),
+        'success'
+      );
+      closeModal();
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.FetchIndices] });
+    } catch (error) {
+      setCreateError(
+        getErrorMessage(
+          error,
+          i18n.translate('xpack.searchHomepage.createIndex.error.fallbackMessage', {
+            defaultMessage: 'Unknown error creating index.',
+          })
+        )
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  }, [createIndex, closeModal, indexName, queryClient, notifications]);
+
+  const onSave = () => {
+    if (isValidIndexName(indexName)) {
+      putCreateIndex().catch(() => {});
+    }
+  };
+
+  const onNameChange = (name: string) => {
+    setIndexName(name);
+    if (!isValidIndexName(name)) {
+      setIndexNameError(INVALID_INDEX_NAME_ERROR);
+    } else if (indexNameError) {
+      setIndexNameError(undefined);
+    }
+  };
+
+  return (
+    <EuiModal onClose={closeModal} initialFocus="[name=indexName]">
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <FormattedMessage
+            id="xpack.searchHomepage.createIndex.modal.title"
+            defaultMessage="Create index"
+          />
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        {createError && (
+          <>
+            <EuiCallOut
+              color="danger"
+              iconType="error"
+              title={i18n.translate('xpack.searchHomepage.createIndex.modal.error.title', {
+                defaultMessage: 'Error creating index',
+              })}
+            >
+              <EuiText>
+                <FormattedMessage
+                  id="xpack.searchHomepage.createIndex.modal.error.description"
+                  defaultMessage="Error creating index: {errorMessage}"
+                  values={{ errorMessage: createError }}
+                />
+              </EuiText>
+            </EuiCallOut>
+            <EuiSpacer />
+          </>
+        )}
+        <EuiForm id="createIndexModalForm" component="form">
+          <EuiFormRow
+            fullWidth
+            label={i18n.translate('xpack.searchHomepage.createIndex.modal.indexName.label', {
+              defaultMessage: 'Index name',
+            })}
+            isDisabled={isSaving}
+            isInvalid={indexNameError !== undefined}
+            error={indexNameError}
+          >
+            <EuiFieldText
+              fullWidth
+              name="indexName"
+              value={indexName}
+              onChange={(e) => onNameChange(e.target.value)}
+              data-test-subj="createIndexNameFieldText"
+            />
+          </EuiFormRow>
+        </EuiForm>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButtonEmpty
+          onClick={closeModal}
+          disabled={isSaving}
+          data-test-subj="createIndexCancelButton"
+          data-telemetry-id="idxMgmt-indexList-createIndex-cancelButton"
+        >
+          <FormattedMessage
+            id="xpack.searchHomepage.createIndex.modal.cancelButton"
+            defaultMessage="Cancel"
+          />
+        </EuiButtonEmpty>
+        <EuiButton
+          fill
+          disabled={indexNameError !== undefined}
+          isLoading={isSaving}
+          type="submit"
+          onClick={onSave}
+          form="createIndexModalForm"
+          data-test-subj="createIndexSaveButton"
+          data-telemetry-id="idxMgmt-indexList-createIndex-saveButton"
+        >
+          <FormattedMessage
+            id="xpack.searchHomepage.createIndex.modal.saveButton"
+            defaultMessage="Create"
+          />
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};

x-pack/plugins/search_homepage/public/components/homepage_view.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+
+import { useKibana } from '../hooks/use_kibana';
+import { SearchHomepageBody } from './search_homepage_body';
+import { SearchHomepageHeader } from './search_homepage_header';
+import { CreateIndexModal } from './create_index_modal';
+
+export interface HomepageViewProps {
+  showEndpointsAPIKeys?: boolean;
+}
+export const HomepageView = ({ showEndpointsAPIKeys = false }: HomepageViewProps) => {
+  const { application, share } = useKibana().services;
+  const [createIndexModalOpen, setCreateIndexModalOpen] = useState<boolean>(false);
+  const onCreateIndex = useCallback(async () => {
+    const createIndexLocator = share?.url.locators.get('CREATE_INDEX_LOCATOR_ID');
+    if (createIndexLocator) {
+      const createIndexUrl = await createIndexLocator.getUrl({});
+      application.navigateToUrl(createIndexUrl);
+    } else {
+      setCreateIndexModalOpen(true);
+    }
+  }, [application, share]);
+
+  return (
+    <>
+      <SearchHomepageHeader
+        onCreateIndex={onCreateIndex}
+        showEndpointsAPIKeys={showEndpointsAPIKeys}
+      />
+      <SearchHomepageBody onCreateIndex={onCreateIndex} />
+      {createIndexModalOpen && (
+        <CreateIndexModal closeModal={() => setCreateIndexModalOpen(false)} />
+      )}
+    </>
+  );
+};