[7.6] [ML] Disabling datafeed editing when job is running (#60751) (#60939)

* [ML] Disabling datafeed editing when job is running (#60751)

* [ML] Disabling datafeed editing when job is running

* changing variable

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* moving help text

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js

@@ -29,6 +29,7 @@ import { validateModelMemoryLimit, validateGroupNames, isValidCustomUrls } from
 import { mlMessageBarService } from '../../../../components/messagebar';
 import { toastNotifications } from 'ui/notify';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { DATAFEED_STATE } from '../../../../../../common/constants/states';
 
 class EditJobFlyoutUI extends Component {
   _initialJobFormState = null;
@@ -39,6 +40,7 @@ class EditJobFlyoutUI extends Component {
     this.state = {
       job: {},
       hasDatafeed: false,
+      datafeedRunning: false,
       isFlyoutVisible: false,
       isConfirmationModalVisible: false,
       jobDescription: '',
@@ -155,10 +157,12 @@ class EditJobFlyoutUI extends Component {
 
   extractJob(job, hasDatafeed) {
     this.extractInitialJobFormState(job, hasDatafeed);
+    const datafeedRunning = hasDatafeed && job.datafeed_config.state !== DATAFEED_STATE.STOPPED;
 
     this.setState({
       job,
       hasDatafeed,
+      datafeedRunning,
       jobModelMemoryLimitValidationError: '',
       jobGroupsValidationError: '',
       ...cloneDeep(this._initialJobFormState),
@@ -284,6 +288,7 @@ class EditJobFlyoutUI extends Component {
         jobModelMemoryLimitValidationError,
         isValidJobDetails,
         isValidJobCustomUrls,
+        datafeedRunning,
       } = this.state;
 
       const { intl } = this.props;
@@ -297,6 +302,7 @@ class EditJobFlyoutUI extends Component {
           }),
           content: (
             <JobDetails
+              datafeedRunning={datafeedRunning}
               jobDescription={jobDescription}
               jobGroups={jobGroups}
               jobModelMemoryLimit={jobModelMemoryLimit}
@@ -334,6 +340,7 @@ class EditJobFlyoutUI extends Component {
               datafeedScrollSize={datafeedScrollSize}
               jobBucketSpan={jobBucketSpan}
               setDatafeed={this.setDatafeed}
+              datafeedRunning={datafeedRunning}
             />
           ),
         },

x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/datafeed.js

@@ -7,7 +7,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import { EuiFieldText, EuiForm, EuiFormRow, EuiSpacer, EuiFieldNumber } from '@elastic/eui';
+import {
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiSpacer,
+  EuiFieldNumber,
+  EuiCallOut,
+} from '@elastic/eui';
 
 import { calculateDatafeedFrequencyDefaultSeconds } from '../../../../../../../common/util/job_utils';
 import { getNewJobDefaults } from '../../../../../services/ml_server_info';
@@ -72,9 +79,21 @@ export class Datafeed extends Component {
 
   render() {
     const { query, queryDelay, frequency, scrollSize, defaults } = this.state;
+    const { datafeedRunning } = this.props;
     return (
       <React.Fragment>
         <EuiSpacer size="m" />
+        {datafeedRunning && (
+          <>
+            <EuiCallOut color="warning">
+              <FormattedMessage
+                id="xpack.ml.jobsList.editJobFlyout.datafeed.readOnlyCalloutText"
+                defaultMessage="Datafeed settings cannot be edited while the datafeed is running. Please stop the job if you wish to edit these settings."
+              />
+            </EuiCallOut>
+            <EuiSpacer size="l" />
+          </>
+        )}
         <EuiForm>
           <EuiFormRow
             label={
@@ -85,7 +104,12 @@ export class Datafeed extends Component {
             }
             style={{ maxWidth: 'inherit' }}
           >
-            <MLJobEditor value={query} onChange={this.onQueryChange} height="200px" />
+            <MLJobEditor
+              value={query}
+              onChange={this.onQueryChange}
+              height="200px"
+              readOnly={datafeedRunning}
+            />
           </EuiFormRow>
           <EuiFormRow
             label={
@@ -99,6 +123,7 @@ export class Datafeed extends Component {
               value={queryDelay}
               placeholder={defaults.queryDelay}
               onChange={this.onQueryDelayChange}
+              disabled={datafeedRunning}
             />
           </EuiFormRow>
           <EuiFormRow
@@ -113,6 +138,7 @@ export class Datafeed extends Component {
               value={frequency}
               placeholder={defaults.frequency}
               onChange={this.onFrequencyChange}
+              disabled={datafeedRunning}
             />
           </EuiFormRow>
           <EuiFormRow
@@ -127,6 +153,7 @@ export class Datafeed extends Component {
               value={scrollSize}
               placeholder={defaults.scrollSize}
               onChange={this.onScrollSizeChange}
+              disabled={datafeedRunning}
             />
           </EuiFormRow>
         </EuiForm>
@@ -135,6 +162,7 @@ export class Datafeed extends Component {
   }
 }
 Datafeed.propTypes = {
+  datafeedRunning: PropTypes.bool.isRequired,
   datafeedQuery: PropTypes.string.isRequired,
   datafeedQueryDelay: PropTypes.string.isRequired,
   datafeedFrequency: PropTypes.string.isRequired,

x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/job_details.js

@@ -104,6 +104,7 @@ class JobDetailsUI extends Component {
       mmlValidationError,
       groupsValidationError,
     } = this.state;
+    const { datafeedRunning } = this.props;
     return (
       <React.Fragment>
         <EuiSpacer size="m" />
@@ -149,6 +150,14 @@ class JobDetailsUI extends Component {
                 defaultMessage="Model memory limit"
               />
             }
+            helpText={
+              datafeedRunning ? (
+                <FormattedMessage
+                  id="xpack.ml.jobsList.editJobFlyout.jobDetails.modelMemoryLimitLabelHelp"
+                  defaultMessage="Model memory limit cannot be edited while the datafeed is running."
+                />
+              ) : null
+            }
             isInvalid={mmlValidationError !== ''}
             error={mmlValidationError}
           >
@@ -157,6 +166,7 @@ class JobDetailsUI extends Component {
               onChange={this.onMmlChange}
               isInvalid={mmlValidationError !== ''}
               error={mmlValidationError}
+              disabled={datafeedRunning}
             />
           </EuiFormRow>
         </EuiForm>
@@ -165,6 +175,7 @@ class JobDetailsUI extends Component {
   }
 }
 JobDetailsUI.propTypes = {
+  datafeedRunning: PropTypes.bool.isRequired,
   jobDescription: PropTypes.string.isRequired,
   jobGroups: PropTypes.array.isRequired,
   jobModelMemoryLimit: PropTypes.string.isRequired,