[ML] Update data-test-subj attributes for action buttons and add ml namespace

x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js

@@ -40,7 +40,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         showStartDatafeedModal([item]);
         closeMenu();
-      }
+      },
+      'data-test-subj': 'mlActionButtonStartDatafeed'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.stopDatafeedLabel', {
         defaultMessage: 'Stop datafeed'
@@ -54,7 +55,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         stopDatafeeds([item], refreshJobs);
         closeMenu(true);
-      }
+      },
+      'data-test-subj': 'mlActionButtonStopDatafeed'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.closeJobLabel', {
         defaultMessage: 'Close job'
@@ -68,7 +70,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         closeJobs([item], refreshJobs);
         closeMenu(true);
-      }
+      },
+      'data-test-subj': 'mlActionButtonCloseJob'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.cloneJobLabel', {
         defaultMessage: 'Clone job'
@@ -92,7 +95,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         cloneJob(item.id);
         closeMenu(true);
-      }
+      },
+      'data-test-subj': 'mlActionButtonCloneJob'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.editJobLabel', {
         defaultMessage: 'Edit job'
@@ -105,7 +109,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         showEditJobFlyout(item);
         closeMenu();
-      }
+      },
+      'data-test-subj': 'mlActionButtonEditJob'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.deleteJobLabel', {
         defaultMessage: 'Delete job'
@@ -119,7 +124,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         showDeleteJobModal([item]);
         closeMenu();
-      }
+      },
+      'data-test-subj': 'mlActionButtonDeleteJob'
     }
   ];
 }

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

@@ -51,7 +51,7 @@ class JobDetailsUI extends Component {
     const { job } = this.state;
     if (job === undefined) {
       return (
-        <div className="job-loading-spinner" data-test-subj="jobDetails loading">
+        <div className="job-loading-spinner" data-test-subj="mlJobDetails loading">
           <EuiLoadingSpinner size="l"/>
         </div>
       );
@@ -77,43 +77,43 @@ class JobDetailsUI extends Component {
 
       const tabs = [{
         id: 'job-settings',
-        'data-test-subj': 'tab-job-settings',
+        'data-test-subj': 'mlJobListTab-job-settings',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobSettingsLabel',
           defaultMessage: 'Job settings'
         }),
-        content: <JobDetailsPane data-test-subj="details-job-settings" sections={[general, customUrl, node, calendars]} />,
+        content: <JobDetailsPane data-test-subj="mlJobDetails-job-settings" sections={[general, customUrl, node, calendars]} />,
         time: job.open_time
       }, {
         id: 'job-config',
-        'data-test-subj': 'tab-job-config',
+        'data-test-subj': 'mlJobListTab-job-config',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobConfigLabel',
           defaultMessage: 'Job config'
         }),
         content: <JobDetailsPane
-          data-test-subj="details-job-config"
+          data-test-subj="mlJobDetails-job-config"
           sections={[detectors, influencers, analysisConfig, analysisLimits, dataDescription]}
         />,
       }, {
         id: 'counts',
-        'data-test-subj': 'tab-counts',
+        'data-test-subj': 'mlJobListTab-counts',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.countsLabel',
           defaultMessage: 'Counts'
         }),
-        content: <JobDetailsPane data-test-subj="details-counts" sections={[counts, modelSizeStats]} />,
+        content: <JobDetailsPane data-test-subj="mlJobDetails-counts" sections={[counts, modelSizeStats]} />,
       }, {
         id: 'json',
-        'data-test-subj': 'tab-json',
+        'data-test-subj': 'mlJobListTab-json',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jsonLabel',
           defaultMessage: 'JSON'
         }),
         content: <JsonPane  job={job} />,
       }, {
         id: 'job-messages',
-        'data-test-subj': 'tab-job-messages',
+        'data-test-subj': 'mlJobListTab-job-messages',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobMessagesLabel',
           defaultMessage: 'Job messages'
@@ -126,25 +126,25 @@ class JobDetailsUI extends Component {
         // Datafeed should be at index 2 in tabs array for full details
         tabs.splice(2, 0,  {
           id: 'datafeed',
-          'data-test-subj': 'tab-datafeed',
+          'data-test-subj': 'mlJobListTab-datafeed',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.datafeedLabel',
             defaultMessage: 'Datafeed'
           }),
-          content: <JobDetailsPane data-test-subj="details-datafeed" sections={[datafeed, datafeedTimingStats]} />,
+          content: <JobDetailsPane data-test-subj="mlJobDetails-datafeed" sections={[datafeed, datafeedTimingStats]} />,
         });
 
         tabs.push({
           id: 'datafeed-preview',
-          'data-test-subj': 'tab-datafeed-preview',
+          'data-test-subj': 'mlJobListTab-datafeed-preview',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.datafeedPreviewLabel',
             defaultMessage: 'Datafeed preview'
           }),
           content: <DatafeedPreviewPane job={job} />,
         }, {
           id: 'forecasts',
-          'data-test-subj': 'tab-forecasts',
+          'data-test-subj': 'mlJobListTab-forecasts',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.forecastsLabel',
             defaultMessage: 'Forecasts'
@@ -156,7 +156,7 @@ class JobDetailsUI extends Component {
       if (mlAnnotationsEnabled && showFullDetails) {
         tabs.push({
           id: 'annotations',
-          'data-test-subj': 'tab-annotations',
+          'data-test-subj': 'mlJobListTab-annotations',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.annotationsLabel',
             defaultMessage: 'Annotations'
@@ -171,7 +171,7 @@ class JobDetailsUI extends Component {
       }
 
       return (
-        <div className="tab-contents"  data-test-subj={`details details-${job.job_id}`}>
+        <div className="tab-contents"  data-test-subj={`mlJobListRowDetails details-${job.job_id}`}>
           <EuiTabbedContent
             tabs={tabs}
             initialSelectedTab={tabs[0]}

x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details_pane.js

@@ -47,7 +47,7 @@ function Section({ section }) {
   return (
     <React.Fragment>
       <EuiTitle size="xs"><h4>{section.title}</h4></EuiTitle>
-      <div className="job-section"  data-test-subj={section.id}>
+      <div className="job-section"  data-test-subj={`mlJobRowDetailsSection-${section.id}`}>
         <EuiTable compressed={true}>
           <EuiTableBody>
             { section.items.map((item, i) => (<SectionItem item={item} key={i} />)) }

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

@@ -16,7 +16,7 @@ export function JobGroup({ name }) {
   return (
     <div
       className="inline-group"
-      data-test-subj="jobGroup"
+      data-test-subj="mlJobGroup"
       style={{
         backgroundColor: tabColor(name),
         display: 'inline-block',

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

@@ -167,13 +167,13 @@ class JobsListUI extends Component {
               { itemId: item.id }
               )}
             data-row-id={item.id}
-            data-test-subj="detailsToggle"
+            data-test-subj="mlJobListRowDetailsToggle"
           />
         ),
         width: '3%'
       }, {
         field: 'id',
-        'data-test-subj': 'id',
+        'data-test-subj': 'mlJobListColumnId',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.idLabel',
           defaultMessage: 'ID'
@@ -195,15 +195,15 @@ class JobsListUI extends Component {
         }),
         sortable: true,
         field: 'description',
-        'data-test-subj': 'description',
+        'data-test-subj': 'mlJobListColumnDescription',
         render: (description, item) => (
           <JobDescription job={item} />
         ),
         textOnly: true,
         width: '20%'
       }, {
         field: 'processed_record_count',
-        'data-test-subj': 'recordCount',
+        'data-test-subj': 'mlJobListColumnRecordCount',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.processedRecordsLabel',
           defaultMessage: 'Processed records'
@@ -215,7 +215,7 @@ class JobsListUI extends Component {
         width: '10%'
       }, {
         field: 'memory_status',
-        'data-test-subj': 'memoryStatus',
+        'data-test-subj': 'mlJobListColumnMemoryStatus',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.memoryStatusLabel',
           defaultMessage: 'Memory status'
@@ -225,7 +225,7 @@ class JobsListUI extends Component {
         width: '5%'
       }, {
         field: 'jobState',
-        'data-test-subj': 'jobState',
+        'data-test-subj': 'mlJobListColumnJobState',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobStateLabel',
           defaultMessage: 'Job state'
@@ -235,7 +235,7 @@ class JobsListUI extends Component {
         width: '8%'
       }, {
         field: 'datafeedState',
-        'data-test-subj': 'datafeedState',
+        'data-test-subj': 'mlJobListColumnDatafeedState',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.datafeedStateLabel',
           defaultMessage: 'Datafeed state'
@@ -278,7 +278,7 @@ class JobsListUI extends Component {
         }),
         truncateText: false,
         field: 'latestTimestampSortValue',
-        'data-test-subj': 'latestTimestamp',
+        'data-test-subj': 'mlJobListColumnLatestTimestamp',
         sortable: true,
         render: (time, item) => (
           <span className="euiTableCellContent__text">
@@ -355,7 +355,7 @@ class JobsListUI extends Component {
         sorting={sorting}
         hasActions={true}
         rowProps={item => ({
-          'data-test-subj': `row row-${item.id}`
+          'data-test-subj': `mlJobListRow row-${item.id}`
         })}
       />
     );

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/detector_title/detector_title.tsx

@@ -33,7 +33,7 @@ export const DetectorTitle: FC<DetectorTitleProps> = ({
   return (
     <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
       <EuiFlexItem>
-        <span style={{ fontSize: 'small' }} data-test-subj="detectorTitle">
+        <span style={{ fontSize: 'small' }} data-test-subj="mlDetectorTitle">
           {getTitle(agg, field, splitField)}
         </span>
       </EuiFlexItem>

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/influencers/influencers_select.tsx

@@ -35,7 +35,7 @@ export const InfluencersSelect: FC<Props> = ({ fields, changeHandler, selectedIn
       selectedOptions={selection}
       onChange={onChange}
       isClearable={false}
-      data-test-subj="influencerSelect"
+      data-test-subj="mlInfluencerSelect"
     />
   );
 };

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx

@@ -54,7 +54,7 @@ export const ChartGrid: FC<ChartGridProps> = ({
     >
       <EuiFlexGrid columns={chartSettings.cols}>
         {aggFieldPairList.map((af, i) => (
-          <EuiFlexItem key={i} data-test-subj={`detector ${i}`}>
+          <EuiFlexItem key={i} data-test-subj={`mlDetector ${i}`}>
             <Fragment>
               <DetectorTitle
                 index={i}

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx

@@ -49,7 +49,7 @@ export const ChartGrid: FC<ChartGridProps> = ({
   return (
     <EuiFlexGrid columns={chartSettings.cols}>
       {aggFieldPairList.map((af, i) => (
-        <EuiFlexItem key={i} data-test-subj={`detector ${i}`}>
+        <EuiFlexItem key={i} data-test-subj={`mlDetector ${i}`}>
           <Fragment>
             <EuiFlexGroup>
               <EuiFlexItem>

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_cards/split_cards.tsx

@@ -70,10 +70,14 @@ export const SplitCards: FC<Props> = memo(
         };
         return (
           <div key={fieldName} ref={ref => storePanels(ref, marginBottom)} style={style}>
-            <EuiPanel paddingSize="m" style={{ paddingTop: '4px' }} data-test-subj="splitCard back">
+            <EuiPanel
+              paddingSize="m"
+              style={{ paddingTop: '4px' }}
+              data-test-subj="mlSplitCard back"
+            >
               <div
                 style={{ fontWeight: 'bold', fontSize: 'small' }}
-                data-test-subj="splitCardTitle"
+                data-test-subj="mlSplitCardTitle"
               >
                 {fieldName}
               </div>
@@ -85,15 +89,15 @@ export const SplitCards: FC<Props> = memo(
 
     return (
       <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="dataSplit">
+        <EuiFlexItem data-test-subj="mlDataSplit">
           {(fieldValues.length === 0 || numberOfDetectors === 0) && <Fragment>{children}</Fragment>}
           {fieldValues.length > 0 && numberOfDetectors > 0 && splitField !== null && (
             <Fragment>
               {jobType === JOB_TYPE.MULTI_METRIC && (
                 <Fragment>
                   <div
                     style={{ fontSize: 'small' }}
-                    data-test-subj={`dataSplitTitle ${splitField.name}`}
+                    data-test-subj={`mlDataSplitTitle ${splitField.name}`}
                   >
                     <FormattedMessage
                       id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
@@ -109,11 +113,11 @@ export const SplitCards: FC<Props> = memo(
               <EuiPanel
                 paddingSize="m"
                 style={{ paddingTop: '4px' }}
-                data-test-subj="splitCard front"
+                data-test-subj="mlSplitCard front"
               >
                 <div
                   style={{ fontWeight: 'bold', fontSize: 'small' }}
-                  data-test-subj="splitCardTitle"
+                  data-test-subj="mlSplitCardTitle"
                 >
                   {fieldValues[0]}
                 </div>

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/by_field.tsx

@@ -58,7 +58,7 @@ export const ByFieldSelector: FC<Props> = ({ detectorIndex }) => {
       changeHandler={setByField}
       selectedField={byField}
       isClearable={true}
-      testSubject="byFieldSelect"
+      testSubject="mlByFieldSelect"
       placeholder={i18n.translate(
         'xpack.ml.newJob.wizard.pickFieldsStep.populationField.placeholder',
         {

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/split_field.tsx

@@ -50,9 +50,9 @@ export const SplitFieldSelector: FC = () => {
         isClearable={canClearSelection}
         testSubject={
           isMultiMetricJobCreator(jc)
-            ? 'multiMetricSplitFieldSelect'
+            ? 'mlMultiMetricSplitFieldSelect'
             : isPopulationJobCreator(jc)
-            ? 'populationSplitFieldSelect'
+            ? 'mlPopulationSplitFieldSelect'
             : undefined
         }
       />

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx

@@ -56,7 +56,7 @@ export const TimeRangePicker: FC<Props> = ({ setTimeRange, timeRange }) => {
 
   return (
     <Fragment>
-      <div style={{ minWidth: WIDTH }} data-test-subj={`jobWizardDateRange`}>
+      <div style={{ minWidth: WIDTH }} data-test-subj={`mlJobWizardDateRange`}>
         <EuiDatePickerRange
           fullWidth={true}
           startDateControl={