[Enterprise Search] Support for starting ELSER model deployment

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/api/ml_models/text_expansion/start_text_expansion_model_api_logic.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { ELSER_MODEL_ID } from '../../../../../../common/ml_inference_pipeline';
+import { Actions, createApiLogic } from '../../../../shared/api_logic/create_api_logic';
+import { HttpLogic } from '../../../../shared/http';
+
+export type StartTextExpansionModelArgs = undefined;
+
+export interface StartTextExpansionModelResponse {
+  deploymentState: string;
+  modelId: string;
+}
+
+export const startTextExpansionModel = async (): Promise<StartTextExpansionModelResponse> => {
+  const route = `/internal/enterprise_search/ml/models/${ELSER_MODEL_ID}/deploy`;
+  return await HttpLogic.values.http.post<StartTextExpansionModelResponse>(route, {
+    body: undefined,
+  });
+};
+
+export const StartTextExpansionModelApiLogic = createApiLogic(
+  ['start_text_expansion_model_api_logic'],
+  startTextExpansionModel
+);
+
+export type StartTextExpansionModelApiLogicActions = Actions<
+  StartTextExpansionModelArgs,
+  StartTextExpansionModelResponse
+>;

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout.test.tsx

@@ -19,13 +19,15 @@ import {
   ModelDeploymentInProgress,
   ModelDeployed,
   TextExpansionDismissButton,
+  ModelStarted,
 } from './text_expansion_callout';
 
 jest.mock('./text_expansion_callout_data', () => ({
   useTextExpansionCallOutData: jest.fn(() => ({
     dismiss: jest.fn(),
     isCreateButtonDisabled: false,
     isDismissable: false,
+    isStartButtonDisabled: false,
     show: true,
   })),
 }));
@@ -34,6 +36,8 @@ const DEFAULT_VALUES = {
   isCreateButtonDisabled: false,
   isModelDownloadInProgress: false,
   isModelDownloaded: false,
+  isModelStarted: false,
+  isStartButtonDisabled: false,
 };
 
 describe('TextExpansionCallOut', () => {
@@ -63,6 +67,15 @@ describe('TextExpansionCallOut', () => {
     const wrapper = shallow(<TextExpansionCallOut />);
     expect(wrapper.find(ModelDeployed).length).toBe(1);
   });
+  it('renders panel with deployment in progress status if the model has been started', () => {
+    setMockValues({
+      ...DEFAULT_VALUES,
+      isModelStarted: true,
+    });
+
+    const wrapper = shallow(<TextExpansionCallOut />);
+    expect(wrapper.find(ModelStarted).length).toBe(1);
+  });
 
   describe('DeployModel', () => {
     it('renders deploy button', () => {
@@ -109,12 +122,43 @@ describe('TextExpansionCallOut', () => {
   });
 
   describe('ModelDeployed', () => {
+    it('renders start button', () => {
+      const wrapper = shallow(
+        <ModelDeployed dismiss={() => {}} isDismissable={false} isStartButtonDisabled={false} />
+      );
+      expect(wrapper.find(EuiButton).length).toBe(1);
+      const button = wrapper.find(EuiButton);
+      expect(button.prop('disabled')).toBe(false);
+    });
+    it('renders disabled start button if it is set to disabled', () => {
+      const wrapper = shallow(
+        <ModelDeployed dismiss={() => {}} isDismissable={false} isStartButtonDisabled />
+      );
+      expect(wrapper.find(EuiButton).length).toBe(1);
+      const button = wrapper.find(EuiButton);
+      expect(button.prop('disabled')).toBe(true);
+    });
+    it('renders dismiss button if it is set to dismissable', () => {
+      const wrapper = shallow(
+        <ModelDeployed dismiss={() => {}} isDismissable isStartButtonDisabled={false} />
+      );
+      expect(wrapper.find(TextExpansionDismissButton).length).toBe(1);
+    });
+    it('does not render dismiss button if it is set to non-dismissable', () => {
+      const wrapper = shallow(
+        <ModelDeployed dismiss={() => {}} isDismissable={false} isStartButtonDisabled={false} />
+      );
+      expect(wrapper.find(TextExpansionDismissButton).length).toBe(0);
+    });
+  });
+
+  describe('ModelStarted', () => {
     it('renders dismiss button if it is set to dismissable', () => {
-      const wrapper = shallow(<ModelDeployed dismiss={() => {}} isDismissable />);
+      const wrapper = shallow(<ModelStarted dismiss={() => {}} isDismissable />);
       expect(wrapper.find(TextExpansionDismissButton).length).toBe(1);
     });
     it('does not render dismiss button if it is set to non-dismissable', () => {
-      const wrapper = shallow(<ModelDeployed dismiss={() => {}} isDismissable={false} />);
+      const wrapper = shallow(<ModelStarted dismiss={() => {}} isDismissable={false} />);
       expect(wrapper.find(TextExpansionDismissButton).length).toBe(0);
     });
   });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout.tsx

@@ -12,6 +12,7 @@ import { useActions, useValues } from 'kea';
 import {
   EuiBadge,
   EuiButton,
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -25,6 +26,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedHTMLMessage } from '@kbn/i18n-react';
 
 import { docLinks } from '../../../../../shared/doc_links';
+import { KibanaLogic } from '../../../../../shared/kibana';
 
 import { useTextExpansionCallOutData } from './text_expansion_callout_data';
 import { TextExpansionCalloutLogic } from './text_expansion_callout_logic';
@@ -33,6 +35,7 @@ export interface TextExpansionCallOutState {
   dismiss: () => void;
   isCreateButtonDisabled: boolean;
   isDismissable: boolean;
+  isStartButtonDisabled: boolean;
   show: boolean;
 }
 
@@ -182,6 +185,90 @@ export const ModelDeploymentInProgress = ({
 export const ModelDeployed = ({
   dismiss,
   isDismissable,
+  isStartButtonDisabled,
+}: Pick<TextExpansionCallOutState, 'dismiss' | 'isDismissable' | 'isStartButtonDisabled'>) => {
+  const { startTextExpansionModel } = useActions(TextExpansionCalloutLogic);
+
+  return (
+    <EuiPanel color="success">
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem grow>
+          <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="checkInCircleFilled" />
+            </EuiFlexItem>
+            <EuiFlexItem grow>
+              <EuiTitle size="xs">
+                <h4>
+                  <FormattedMessage
+                    id="xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.deployedTitle"
+                    defaultMessage="Your ELSER model has deployed but not started." />
+                </h4>
+              </EuiTitle>
+            </EuiFlexItem>
+            {isDismissable && (
+              <EuiFlexItem grow={false}>
+                <TextExpansionDismissButton dismiss={dismiss} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow>
+          <EuiText>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.deployedBody"
+              defaultMessage="You may start the model in a single-threaded configuration for testing, or tune the performance for a production environment." />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow>
+          <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+            <EuiFlexItem>
+              <EuiButton
+                aria-label={i18n.translate(
+                  'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startModelButton',
+                  { defaultMessage: 'Start ELSER model' }
+                )}
+                color="success"
+                disabled={isStartButtonDisabled}
+                iconType="playFilled"
+                onClick={() => startTextExpansionModel(undefined)}
+              >
+                {i18n.translate(
+                  'xpack.enterpriseSearch.content.indices.pipelines.textExpansionCallOut.startModelButton.label',
+                  {
+                    defaultMessage: 'Start single-threaded',
+                  }
+                )}
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiButtonEmpty
+                aria-label={i18n.translate(
+                  'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.fineTuneModelButton',
+                  { defaultMessage: 'Fine-tune ELSER model' }
+                )}
+                iconSide="left"
+                iconType="wrench"
+                onClick={() => KibanaLogic.values.navigateToUrl('/app/ml/trained_models', {
+                  shouldNotCreateHref: true,
+                })}
+              >
+                {i18n.translate('xpack.enterpriseSearch.content.engine.api.step1.viewKeysButton', {
+                  defaultMessage: 'Fine-tune performance',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow />
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};
+
+export const ModelStarted = ({
+  dismiss,
+  isDismissable,
 }: Pick<TextExpansionCallOutState, 'dismiss' | 'isDismissable'>) => (
   <EuiPanel color="success">
     <EuiFlexGroup direction="column" gutterSize="s">
@@ -194,8 +281,8 @@ export const ModelDeployed = ({
             <EuiTitle size="xs">
               <h4>
                 <FormattedMessage
-                  id="xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.deployedTitle"
-                  defaultMessage="Your ELSER model has deployed."
+                  id="xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startedTitle"
+                  defaultMessage="Your ELSER model has started."
                 />
               </h4>
             </EuiTitle>
@@ -221,15 +308,28 @@ export const ModelDeployed = ({
 
 export const TextExpansionCallOut: React.FC<TextExpansionCallOutProps> = (props) => {
   const { dismiss, isDismissable, show } = useTextExpansionCallOutData(props);
-  const { isCreateButtonDisabled, isModelDownloadInProgress, isModelDownloaded } =
-    useValues(TextExpansionCalloutLogic);
+  const {
+    isCreateButtonDisabled,
+    isModelDownloadInProgress,
+    isModelDownloaded,
+    isModelStarted,
+    isStartButtonDisabled,
+  } = useValues(TextExpansionCalloutLogic);
 
   if (!show) return null;
 
   if (!!isModelDownloadInProgress) {
     return <ModelDeploymentInProgress dismiss={dismiss} isDismissable={isDismissable} />;
   } else if (!!isModelDownloaded) {
-    return <ModelDeployed dismiss={dismiss} isDismissable={isDismissable} />;
+    return (
+      <ModelDeployed
+        dismiss={dismiss}
+        isDismissable={isDismissable}
+        isStartButtonDisabled={isStartButtonDisabled}
+      />
+    );
+  } else if (!!isModelStarted) {
+    return <ModelStarted dismiss={dismiss} isDismissable={isDismissable} />;
   }
 
   return (

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout_data.tsx

@@ -20,7 +20,7 @@ const isDismissed = () => localStorage.getItem(TEXT_EXPANSION_CALL_OUT_DISMISSED
 export const useTextExpansionCallOutData = ({
   isDismissable = false,
 }: TextExpansionCallOutProps): TextExpansionCallOutState => {
-  const { isCreateButtonDisabled } = useValues(TextExpansionCalloutLogic);
+  const { isCreateButtonDisabled, isStartButtonDisabled } = useValues(TextExpansionCalloutLogic);
 
   const [show, setShow] = useState<boolean>(() => {
     if (!isDismissable) return true;
@@ -50,6 +50,7 @@ export const useTextExpansionCallOutData = ({
     dismiss,
     isCreateButtonDisabled,
     isDismissable,
+    isStartButtonDisabled,
     show,
   };
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout_logic.test.ts

@@ -25,7 +25,10 @@ const DEFAULT_VALUES: TextExpansionCalloutValues = {
   isCreateButtonDisabled: false,
   isModelDownloadInProgress: false,
   isModelDownloaded: false,
+  isModelStarted: false,
   isPollingTextExpansionModelActive: false,
+  isStartButtonDisabled: false,
+  startTextExpansionModelStatus: Status.IDLE,
   textExpansionModel: undefined,
   textExpansionModelPollTimeoutId: null,
 };
@@ -184,6 +187,19 @@ describe('TextExpansionCalloutLogic', () => {
       });
     });
 
+    describe('startTextExpansionModelSuccess', () => {
+      it('sets startedTextExpansionModel', () => {
+        jest.spyOn(TextExpansionCalloutLogic.actions, 'fetchTextExpansionModel');
+
+        TextExpansionCalloutLogic.actions.startTextExpansionModelSuccess({
+          deploymentState: MlModelDeploymentState.FullyAllocated,
+          modelId: 'mock-model-id',
+        });
+
+        expect(TextExpansionCalloutLogic.actions.fetchTextExpansionModel).toHaveBeenCalled();
+      });
+    });
+
     describe('stopPollingTextExpansionModel', () => {
       it('clears polling timeout and poll timeout ID if it is set', () => {
         mount({
@@ -269,6 +285,23 @@ describe('TextExpansionCalloutLogic', () => {
       });
     });
 
+    describe('isModelStarted', () => {
+      it('is set to true if the model is started', () => {
+        FetchTextExpansionModelApiLogic.actions.apiSuccess({
+          deploymentState: MlModelDeploymentState.FullyAllocated,
+          modelId: 'mock-model-id',
+        });
+        expect(TextExpansionCalloutLogic.values.isModelStarted).toBe(true);
+      });
+      it('is set to false if the model is not started', () => {
+        FetchTextExpansionModelApiLogic.actions.apiSuccess({
+          deploymentState: MlModelDeploymentState.NotDeployed,
+          modelId: 'mock-model-id',
+        });
+        expect(TextExpansionCalloutLogic.values.isModelStarted).toBe(false);
+      });
+    });
+
     describe('isPollingTextExpansionModelActive', () => {
       it('is set to false if polling is not active', () => {
         mount({