[ML] Anomaly Detection: adds ability to delete forecasts from job

x-pack/plugins/ml/common/types/capabilities.ts

@@ -58,6 +58,7 @@ export const adminMlCapabilities = {
   canResetJob: false,
   canUpdateJob: false,
   canForecastJob: false,
+  canDeleteForecast: false,
   canCreateDatafeed: false,
   canDeleteDatafeed: false,
   canStartStopDatafeed: false,
@@ -222,6 +223,7 @@ export const featureCapabilities: FeatureCapabilities = {
     'canResetJob',
     'canUpdateJob',
     'canForecastJob',
+    'canDeleteForecast',
     'canCreateDatafeed',
     'canDeleteDatafeed',
     'canStartStopDatafeed',

x-pack/plugins/ml/public/application/capabilities/check_capabilities.ts

@@ -269,6 +269,10 @@ export function createPermissionFailureMessage(privilegeType: keyof MlCapabiliti
     message = i18n.translate('xpack.ml.privilege.noPermission.runForecastsTooltip', {
       defaultMessage: 'You do not have permission to run forecasts.',
     });
+  } else if (privilegeType === 'canDeleteForecast') {
+    message = i18n.translate('xpack.ml.privilege.noPermission.deleteForecastsTooltip', {
+      defaultMessage: 'You do not have permission to delete forecasts.',
+    });
   }
   return i18n.translate('xpack.ml.privilege.pleaseContactAdministratorTooltip', {
     defaultMessage: '{message} Please contact your administrator.',

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js

@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import {
-  EuiButtonIcon,
   EuiCallOut,
+  EuiConfirmModal,
   EuiFlexGroup,
   EuiFlexItem,
   EuiInMemoryTable,
@@ -32,9 +32,43 @@ import {
   isTimeSeriesViewJob,
 } from '../../../../../../../common/util/job_utils';
 import { ML_APP_LOCATOR, ML_PAGES } from '../../../../../../../common/constants/locator';
+import { checkPermission } from '../../../../../capabilities/check_capabilities';
 
 const MAX_FORECASTS = 500;
 
+const DeleteForecastConfirm = ({ onCancel, onConfirm }) => (
+  <EuiConfirmModal
+    title={i18n.translate(
+      'xpack.ml.jobsList.jobDetails.forecastsTable.deleteForecastConfirm.title',
+      {
+        defaultMessage: 'Delete the selected forecast?',
+      }
+    )}
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+    cancelButtonText={i18n.translate(
+      'xpack.ml.jobsList.jobDetails.forecastsTable.deleteForecastConfirm.cancelButton',
+      {
+        defaultMessage: 'Cancel',
+      }
+    )}
+    confirmButtonText={i18n.translate(
+      'xpack.ml.jobsList.jobDetails.forecastsTable.deleteForecastConfirm.confirmButton',
+      {
+        defaultMessage: 'Confirm',
+      }
+    )}
+    defaultFocusedButton="confirm"
+  >
+    <p>
+      <FormattedMessage
+        id="xpack.ml.jobsList.jobDetails.forecastsTable.deleteForecastConfirm.text"
+        defaultMessage="This will permanently delete the forecast from the job."
+      />
+    </p>
+  </EuiConfirmModal>
+);
+
 /**
  * Table component for rendering the lists of forecasts run on an ML job.
  */
@@ -44,6 +78,7 @@ export class ForecastsTable extends Component {
     this.state = {
       isLoading: props.job.data_counts.processed_record_count !== 0,
       forecasts: [],
+      forecastIdToDelete: undefined,
     };
     this.mlForecastService = forecastServiceFactory(constructorContext.services.mlServices.mlApi);
   }
@@ -54,6 +89,11 @@ export class ForecastsTable extends Component {
   static contextType = context;
 
   componentDidMount() {
+    this.loadForecasts();
+    this.canDeleteJobForecast = checkPermission('canDeleteForecast');
+  }
+
+  async loadForecasts() {
     const dataCounts = this.props.job.data_counts;
     if (dataCounts.processed_record_count > 0) {
       // Get the list of all the forecasts with results at or later than the specified 'from' time.
@@ -163,6 +203,36 @@ export class ForecastsTable extends Component {
     await navigateToUrl(singleMetricViewerForecastLink);
   }
 
+  async deleteForecast(forecastId) {
+    const {
+      services: {
+        mlServices: { mlApi },
+      },
+    } = this.context;
+
+    this.setState({
+      isLoading: true,
+      forecastIdToDelete: undefined,
+    });
+
+    try {
+      await mlApi.deleteForecast({ jobId: this.props.job.job_id, forecastId });
+    } catch (error) {
+      this.setState({
+        forecastIdToDelete: undefined,
+        isLoading: false,
+        errorMessage: i18n.translate(
+          'xpack.ml.jobsList.jobDetails.forecastsTable.deleteForecastErrorMessage',
+          {
+            defaultMessage: 'An error occurred when deleting the forecast.',
+          }
+        ),
+      });
+    }
+
+    this.loadForecasts();
+  }
+
   render() {
     if (this.state.isLoading === true) {
       return (
@@ -302,48 +372,74 @@ export class ForecastsTable extends Component {
         textOnly: true,
       },
       {
-        name: i18n.translate('xpack.ml.jobsList.jobDetails.forecastsTable.viewLabel', {
-          defaultMessage: 'View',
+        width: '75px',
+        name: i18n.translate('xpack.ml.jobsList.jobDetails.forecastsTable.actionsLabel', {
+          defaultMessage: 'Actions',
         }),
-        width: '60px',
-        render: (forecast) => {
-          const viewForecastAriaLabel = i18n.translate(
-            'xpack.ml.jobsList.jobDetails.forecastsTable.viewAriaLabel',
-            {
-              defaultMessage: 'View forecast created at {createdDate}',
-              values: {
-                createdDate: timeFormatter(forecast.forecast_create_timestamp),
-              },
-            }
-          );
-
-          return (
-            <EuiButtonIcon
-              onClick={() => this.openSingleMetricView(forecast)}
-              isDisabled={
+        actions: [
+          {
+            description: i18n.translate('xpack.ml.jobsList.jobDetails.forecastsTable.viewLabel', {
+              defaultMessage: 'View',
+            }),
+            type: 'icon',
+            icon: 'eye',
+            enabled: (forecast) =>
+              !(
                 this.props.job.blocked !== undefined ||
                 forecast.forecast_status !== FORECAST_REQUEST_STATE.FINISHED
-              }
-              iconType="singleMetricViewer"
-              aria-label={viewForecastAriaLabel}
-              data-test-subj="mlJobListForecastTabOpenSingleMetricViewButton"
-            />
-          );
-        },
+              ),
+            onClick: (forecast) => this.openSingleMetricView(forecast),
+            'data-test-subj': 'mlJobListForecastTabOpenSingleMetricViewButton',
+          },
+          ...(this.canDeleteJobForecast
+            ? [
+                {
+                  description: i18n.translate(
+                    'xpack.ml.jobsList.jobDetails.forecastsTable.deleteForecastDescription',
+                    {
+                      defaultMessage: 'Delete forecast',
+                    }
+                  ),
+                  type: 'icon',
+                  icon: 'trash',
+                  color: 'danger',
+                  enabled: () => this.state.isLoading === false,
+                  onClick: (item) => {
+                    this.setState({
+                      forecastIdToDelete: item.forecast_id,
+                    });
+                  },
+                  'data-test-subj': 'mlJobListForecastTabDeleteForecastButton',
+                },
+              ]
+            : []),
+        ],
       },
     ];
 
     return (
-      <EuiInMemoryTable
-        data-test-subj="mlJobListForecastTable"
-        compressed={true}
-        items={forecasts}
-        columns={columns}
-        pagination={{
-          pageSizeOptions: [5, 10, 25],
-        }}
-        sorting={true}
-      />
+      <>
+        <EuiInMemoryTable
+          data-test-subj="mlJobListForecastTable"
+          compressed={true}
+          items={forecasts}
+          columns={columns}
+          pagination={{
+            pageSizeOptions: [5, 10, 25],
+          }}
+          sorting={true}
+        />
+        {this.state.forecastIdToDelete !== undefined ? (
+          <DeleteForecastConfirm
+            onCancel={() =>
+              this.setState({
+                forecastIdToDelete: undefined,
+              })
+            }
+            onConfirm={() => this.deleteForecast(this.state.forecastIdToDelete)}
+          />
+        ) : null}
+      </>
     );
   }
 }

x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer/state_manager.tsx

@@ -216,16 +216,17 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   );
 
   useEffect(() => {
+    if (selectedForecastIdProp !== selectedForecastId) {
+      setSelectedForecastIdProp(undefined);
+    }
+
     if (
       autoZoomDuration !== undefined &&
       boundsMinMs !== undefined &&
       boundsMaxMs !== undefined &&
       selectedJob !== undefined &&
       selectedForecastId !== undefined
     ) {
-      if (selectedForecastIdProp !== selectedForecastId) {
-        setSelectedForecastIdProp(undefined);
-      }
       mlForecastService
         .getForecastDateRange(selectedJob, selectedForecastId)
         .then((resp) => {

x-pack/plugins/ml/public/application/services/ml_api_service/index.ts

@@ -103,6 +103,10 @@ export interface GetModelSnapshotsResponse {
   model_snapshots: ModelSnapshot[];
 }
 
+export interface DeleteForecastResponse {
+  acknowledged: boolean;
+}
+
 export function mlApiProvider(httpService: HttpService) {
   return {
     getJobs(obj?: { jobId?: string }) {
@@ -368,6 +372,14 @@ export function mlApiProvider(httpService: HttpService) {
       });
     },
 
+    deleteForecast({ jobId, forecastId }: { jobId: string; forecastId: string }) {
+      return httpService.http<DeleteForecastResponse>({
+        path: `${ML_INTERNAL_BASE_PATH}/anomaly_detectors/${jobId}/_forecast/${forecastId}`,
+        method: 'DELETE',
+        version: '1',
+      });
+    },
+
     overallBuckets({
       jobId,
       topN,

x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js

@@ -30,9 +30,13 @@ import { forecastServiceFactory } from '../../../services/forecast_service';
 import { ForecastButton } from './forecast_button';
 
 export const FORECAST_DURATION_MAX_DAYS = 3650; // Max forecast duration allowed by analytics.
-
-const FORECAST_JOB_MIN_VERSION = '6.1.0'; // Forecasting only allowed for jobs created >= 6.1.0.
+const STATUS_FINISHED_QUERY = {
+  term: {
+    forecast_status: FORECAST_REQUEST_STATE.FINISHED,
+  },
+};
 const FORECASTS_VIEW_MAX = 5; // Display links to a maximum of 5 forecasts.
+const FORECAST_JOB_MIN_VERSION = '6.1.0'; // Forecasting only allowed for jobs created >= 6.1.0.
 const FORECAST_DURATION_MAX_MS = FORECAST_DURATION_MAX_DAYS * 86400000;
 const WARN_NUM_PARTITIONS = 100; // Warn about running a forecast with this number of field values.
 const FORECAST_STATS_POLL_FREQUENCY = 250; // Frequency in ms at which to poll for forecast request stats.
@@ -64,6 +68,7 @@ export class ForecastingModal extends Component {
     latestRecordTimestamp: PropTypes.number,
     entities: PropTypes.array,
     setForecastId: PropTypes.func,
+    selectedForecastId: PropTypes.string,
   };
 
   constructor(props) {
@@ -405,13 +410,8 @@ export class ForecastingModal extends Component {
       // Get the list of all the finished forecasts for this job with results at or later than the dashboard 'from' time.
       const { timefilter } = this.context.services.data.query.timefilter;
       const bounds = timefilter.getActiveBounds();
-      const statusFinishedQuery = {
-        term: {
-          forecast_status: FORECAST_REQUEST_STATE.FINISHED,
-        },
-      };
       this.mlForecastService
-        .getForecastsSummary(job, statusFinishedQuery, bounds.min.valueOf(), FORECASTS_VIEW_MAX)
+        .getForecastsSummary(job, STATUS_FINISHED_QUERY, bounds.min.valueOf(), FORECASTS_VIEW_MAX)
         .then((resp) => {
           this.setState({
             previousForecasts: resp.forecasts,
@@ -558,6 +558,7 @@ export class ForecastingModal extends Component {
             jobOpeningState={this.state.jobOpeningState}
             jobClosingState={this.state.jobClosingState}
             messages={this.state.messages}
+            selectedForecastId={this.props.selectedForecastId}
           />
         )}
       </div>