[ML] DF Analytics: allow failed job to be stopped by force via the UI (#74710)

* allow force stop from ui if job is failed

* update wording in confirm modal

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_stop/index.ts

@@ -5,3 +5,5 @@
  */
 
 export { StopButton } from './stop_button';
+export { StopButtonModal } from './stop_button_modal';
+export { useForceStopAction } from './use_force_stop_action';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_stop/stop_button_modal.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiConfirmModal, EuiOverlayMask, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
+
+import { ForceStopAction } from './use_force_stop_action';
+
+export const StopButtonModal: FC<ForceStopAction> = ({
+  closeModal,
+  item,
+  forceStopAndCloseModal,
+}) => {
+  return (
+    <>
+      {item !== undefined && (
+        <EuiOverlayMask>
+          <EuiConfirmModal
+            title={i18n.translate('xpack.ml.dataframe.analyticsList.forceStopModalTitle', {
+              defaultMessage: 'Force this job to stop?',
+            })}
+            onCancel={closeModal}
+            onConfirm={forceStopAndCloseModal}
+            cancelButtonText={i18n.translate(
+              'xpack.ml.dataframe.analyticsList.forceStopModalCancelButton',
+              {
+                defaultMessage: 'Cancel',
+              }
+            )}
+            confirmButtonText={i18n.translate(
+              'xpack.ml.dataframe.analyticsList.forceStopModalStartButton',
+              {
+                defaultMessage: 'Force stop',
+              }
+            )}
+            defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+            buttonColor="primary"
+          >
+            <p>
+              <FormattedMessage
+                id="xpack.ml.dataframe.analyticsList.forceStopModalBody"
+                defaultMessage="{analyticsId} is in a failed state. You must stop the job and fix the failure."
+                values={{ analyticsId: item.config.id }}
+              />
+            </p>
+          </EuiConfirmModal>
+        </EuiOverlayMask>
+      )}
+    </>
+  );
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_stop/use_force_stop_action.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useState } from 'react';
+
+import { DataFrameAnalyticsListRow } from '../analytics_list/common';
+import { stopAnalytics } from '../../services/analytics_service';
+
+export type ForceStopAction = ReturnType<typeof useForceStopAction>;
+export const useForceStopAction = () => {
+  const [isModalVisible, setModalVisible] = useState(false);
+
+  const [item, setItem] = useState<DataFrameAnalyticsListRow>();
+
+  const closeModal = () => setModalVisible(false);
+  const forceStopAndCloseModal = () => {
+    if (item !== undefined) {
+      setModalVisible(false);
+      stopAnalytics(item);
+    }
+  };
+
+  const openModal = (newItem: DataFrameAnalyticsListRow) => {
+    setItem(newItem);
+    setModalVisible(true);
+  };
+
+  return {
+    closeModal,
+    isModalVisible,
+    item,
+    openModal,
+    forceStopAndCloseModal,
+  };
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_actions.tsx

@@ -21,12 +21,13 @@ import {
   EditButtonFlyout,
 } from '../action_edit';
 import { useStartAction, StartButton, StartButtonModal } from '../action_start';
-import { StopButton } from '../action_stop';
+import { StopButton, useForceStopAction, StopButtonModal } from '../action_stop';
 import { getViewAction } from '../action_view';
 
 import {
   isCompletedAnalyticsJob,
   isDataFrameAnalyticsRunning,
+  isDataFrameAnalyticsFailed,
   DataFrameAnalyticsListRow,
 } from './common';
 
@@ -53,11 +54,13 @@ export const useActions = (
     const deleteAction = useDeleteAction();
     const editAction = useEditAction();
     const startAction = useStartAction();
+    const stopAction = useForceStopAction();
     /* eslint-disable react-hooks/rules-of-hooks */
 
     modals = (
       <>
         {startAction.isModalVisible && <StartButtonModal {...startAction} />}
+        {stopAction.isModalVisible && <StopButtonModal {...stopAction} />}
         {deleteAction.isModalVisible && <DeleteButtonModal {...deleteAction} />}
         {isEditActionFlyoutVisible(editAction) && <EditButtonFlyout {...editAction} />}
       </>
@@ -78,7 +81,10 @@ export const useActions = (
       ...[
         {
           render: (item: DataFrameAnalyticsListRow) => {
-            if (!isDataFrameAnalyticsRunning(item.stats.state)) {
+            if (
+              !isDataFrameAnalyticsRunning(item.stats.state) &&
+              !isDataFrameAnalyticsFailed(item.stats.state)
+            ) {
               return (
                 <StartButton
                   canStartStopDataFrameAnalytics={canStartStopDataFrameAnalytics}
@@ -99,7 +105,11 @@ export const useActions = (
                 item={item}
                 onClick={() => {
                   if (canStartStopDataFrameAnalytics) {
-                    stopAnalytics(item);
+                    if (isDataFrameAnalyticsFailed(item.stats.state)) {
+                      stopAction.openModal(item);
+                    } else {
+                      stopAnalytics(item);
+                    }
                   }
                 }}
               />