[ML] Add functional tests for analytics UI: creation addition and reg…

…ression/outlier results (elastic#56059) (elastic#56191)

* add description input functional test to analytics creation test

* regression results functional tests - add initial tests

* outlier results functional tests - add initial test

* ensure description is saved correctly

* fix no key react warning

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration/exploration.tsx

@@ -453,7 +453,7 @@ export const Exploration: FC<Props> = React.memo(({ jobId, jobStatus }) => {
   const MlInMemoryTableBasic = mlInMemoryTableBasicFactory<TableItem>();
 
   return (
-    <EuiPanel grow={false}>
+    <EuiPanel grow={false} data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s">

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx

@@ -229,7 +229,7 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
   }, [JSON.stringify(searchQuery)]);
 
   return (
-    <EuiPanel>
+    <EuiPanel data-test-subj="mlDFAnalyticsRegressionExplorationEvaluatePanel">
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xs">
@@ -296,13 +296,15 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
               <Fragment>
                 <EuiFlexItem>
                   <EvaluateStat
+                    dataTestSubj={'mlDFAnalyticsRegressionGenMSEstat'}
                     isLoading={isLoadingGeneralization}
                     title={generalizationEval.meanSquaredError}
                     isMSE
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EvaluateStat
+                    dataTestSubj={'mlDFAnalyticsRegressionGenRSquaredStat'}
                     isLoading={isLoadingGeneralization}
                     title={generalizationEval.rSquared}
                     isMSE={false}
@@ -339,13 +341,15 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
               <Fragment>
                 <EuiFlexItem>
                   <EvaluateStat
+                    dataTestSubj={'mlDFAnalyticsRegressionTrainingMSEstat'}
                     isLoading={isLoadingTraining}
                     title={trainingEval.meanSquaredError}
                     isMSE
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EvaluateStat
+                    dataTestSubj={'mlDFAnalyticsRegressionTrainingRSquaredStat'}
                     isLoading={isLoadingTraining}
                     title={trainingEval.rSquared}
                     isMSE={false}

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_stat.tsx

@@ -12,6 +12,7 @@ interface Props {
   isLoading: boolean;
   title: number | string;
   isMSE: boolean;
+  dataTestSubj: string;
 }
 
 const meanSquaredErrorText = i18n.translate(
@@ -41,8 +42,8 @@ const rSquaredTooltipContent = i18n.translate(
   }
 );
 
-export const EvaluateStat: FC<Props> = ({ isLoading, isMSE, title }) => (
-  <EuiFlexGroup gutterSize="xs">
+export const EvaluateStat: FC<Props> = ({ isLoading, isMSE, title, dataTestSubj }) => (
+  <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj}>
     <EuiFlexItem grow={false}>
       <EuiStat
         reverse

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/results_table.tsx

@@ -401,7 +401,7 @@ export const ResultsTable: FC<Props> = React.memo(
         : searchError;
 
     return (
-      <EuiPanel grow={false}>
+      <EuiPanel grow={false} data-test-subj="mlDFAnalyticsRegressionExplorationTablePanel">
         <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
@@ -461,6 +461,7 @@ export const ResultsTable: FC<Props> = React.memo(
                       {docFields.map(({ name }) => (
                         <EuiCheckbox
                           id={name}
+                          key={name}
                           label={name}
                           checked={selectedFields.some(field => field.name === name)}
                           onChange={() => toggleColumn(name)}

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

@@ -47,7 +47,7 @@ export const AnalyticsViewAction = {
         aria-label={i18n.translate('xpack.ml.dataframe.analyticsList.viewAriaLabel', {
           defaultMessage: 'View',
         })}
-        data-test-sub="mlAnalyticsJobViewButton"
+        data-test-subj="mlAnalyticsJobViewButton"
       >
         {i18n.translate('xpack.ml.dataframe.analyticsList.viewActionName', {
           defaultMessage: 'View',

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

@@ -191,6 +191,7 @@ export const getColumns = (
       }),
       sortable: true,
       truncateText: true,
+      'data-test-subj': 'mlAnalyticsTableColumnJobDescription',
     },
     {
       field: DataFrameAnalyticsListColumn.configSourceIndex,

x-pack/test/functional/apps/machine_learning/data_frame_analytics/outlier_detection_creation.ts

@@ -27,6 +27,7 @@ export default function({ getService }: FtrProviderContext) {
         suiteTitle: 'iowa house prices',
         jobType: 'outlier_detection',
         jobId: `ihp_1_${Date.now()}`,
+        jobDescription: 'This is the job description',
         source: 'ihp_outlier',
         get destinationIndex(): string {
           return `dest_${this.jobId}`;
@@ -76,6 +77,11 @@ export default function({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsCreation.setJobId(testData.jobId);
         });
 
+        it('inputs the job description', async () => {
+          await ml.dataFrameAnalyticsCreation.assertJobDescriptionInputExists();
+          await ml.dataFrameAnalyticsCreation.setJobDescription(testData.jobDescription);
+        });
+
         it('selects the source index', async () => {
           await ml.dataFrameAnalyticsCreation.assertSourceIndexInputExists();
           await ml.dataFrameAnalyticsCreation.selectSourceIndex(testData.source);
@@ -139,6 +145,7 @@ export default function({ getService }: FtrProviderContext) {
         it('displays details for the created job in the analytics table', async () => {
           await ml.dataFrameAnalyticsTable.assertAnalyticsRowFields(testData.jobId, {
             id: testData.jobId,
+            description: testData.jobDescription,
             sourceIndex: testData.source,
             destinationIndex: testData.destinationIndex,
             type: testData.expected.row.type,
@@ -151,6 +158,11 @@ export default function({ getService }: FtrProviderContext) {
           await ml.api.assertIndicesExist(testData.destinationIndex);
           await ml.api.assertIndicesNotEmpty(testData.destinationIndex);
         });
+
+        it('displays the results view for created job', async () => {
+          await ml.dataFrameAnalyticsTable.openResultsView();
+          await ml.dataFrameAnalytics.assertOutlierTablePanelExists();
+        });
       });
     }
   });

x-pack/test/functional/apps/machine_learning/data_frame_analytics/regression_creation.ts

@@ -27,6 +27,7 @@ export default function({ getService }: FtrProviderContext) {
         suiteTitle: 'electrical grid stability',
         jobType: 'regression',
         jobId: `egs_1_${Date.now()}`,
+        jobDescription: 'This is the job description',
         source: 'egs_regression',
         get destinationIndex(): string {
           return `dest_${this.jobId}`;
@@ -70,6 +71,11 @@ export default function({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsCreation.setJobId(testData.jobId);
         });
 
+        it('inputs the job description', async () => {
+          await ml.dataFrameAnalyticsCreation.assertJobDescriptionInputExists();
+          await ml.dataFrameAnalyticsCreation.setJobDescription(testData.jobDescription);
+        });
+
         it('selects the source index', async () => {
           await ml.dataFrameAnalyticsCreation.assertSourceIndexInputExists();
           await ml.dataFrameAnalyticsCreation.selectSourceIndex(testData.source);
@@ -143,6 +149,7 @@ export default function({ getService }: FtrProviderContext) {
         it('displays details for the created job in the analytics table', async () => {
           await ml.dataFrameAnalyticsTable.assertAnalyticsRowFields(testData.jobId, {
             id: testData.jobId,
+            description: testData.jobDescription,
             sourceIndex: testData.source,
             destinationIndex: testData.destinationIndex,
             type: testData.expected.row.type,
@@ -155,6 +162,12 @@ export default function({ getService }: FtrProviderContext) {
           await ml.api.assertIndicesExist(testData.destinationIndex);
           await ml.api.assertIndicesNotEmpty(testData.destinationIndex);
         });
+
+        it('displays the results view for created job', async () => {
+          await ml.dataFrameAnalyticsTable.openResultsView();
+          await ml.dataFrameAnalytics.assertRegressionEvaluatePanelElementsExists();
+          await ml.dataFrameAnalytics.assertRegressionTablePanelExists();
+        });
       });
     }
   });

x-pack/test/functional/services/machine_learning/data_frame_analytics.ts

@@ -32,6 +32,22 @@ export function MachineLearningDataFrameAnalyticsProvider(
       await testSubjects.existOrFail('mlAnalyticsButtonCreate');
     },
 
+    async assertRegressionEvaluatePanelElementsExists() {
+      await testSubjects.existOrFail('mlDFAnalyticsRegressionExplorationEvaluatePanel');
+      await testSubjects.existOrFail('mlDFAnalyticsRegressionGenMSEstat');
+      await testSubjects.existOrFail('mlDFAnalyticsRegressionGenRSquaredStat');
+      await testSubjects.existOrFail('mlDFAnalyticsRegressionTrainingMSEstat');
+      await testSubjects.existOrFail('mlDFAnalyticsRegressionTrainingRSquaredStat');
+    },
+
+    async assertRegressionTablePanelExists() {
+      await testSubjects.existOrFail('mlDFAnalyticsRegressionExplorationTablePanel');
+    },
+
+    async assertOutlierTablePanelExists() {
+      await testSubjects.existOrFail('mlDFAnalyticsOutlierExplorationTablePanel');
+    },
+
     async assertAnalyticsStatsBarExists() {
       await testSubjects.existOrFail('mlAnalyticsStatsBar');
     },

x-pack/test/functional/services/machine_learning/data_frame_analytics_creation.ts

@@ -58,6 +58,10 @@ export function MachineLearningDataFrameAnalyticsCreationProvider({
       await testSubjects.existOrFail('mlAnalyticsCreateJobFlyoutJobIdInput');
     },
 
+    async assertJobDescriptionInputExists() {
+      await testSubjects.existOrFail('mlDFAnalyticsJobCreationJobDescription');
+    },
+
     async assertJobIdValue(expectedValue: string) {
       const actualJobId = await testSubjects.getAttribute(
         'mlAnalyticsCreateJobFlyoutJobIdInput',
@@ -69,13 +73,31 @@ export function MachineLearningDataFrameAnalyticsCreationProvider({
       );
     },
 
+    async assertJobDescriptionValue(expectedValue: string) {
+      const actualJobDescription = await testSubjects.getAttribute(
+        'mlDFAnalyticsJobCreationJobDescription',
+        'value'
+      );
+      expect(actualJobDescription).to.eql(
+        expectedValue,
+        `Job description should be '${expectedValue}' (got '${actualJobDescription}')`
+      );
+    },
+
     async setJobId(jobId: string) {
       await testSubjects.setValue('mlAnalyticsCreateJobFlyoutJobIdInput', jobId, {
         clearWithKeyboard: true,
       });
       await this.assertJobIdValue(jobId);
     },
 
+    async setJobDescription(jobDescription: string) {
+      await testSubjects.setValue('mlDFAnalyticsJobCreationJobDescription', jobDescription, {
+        clearWithKeyboard: true,
+      });
+      await this.assertJobDescriptionValue(jobDescription);
+    },
+
     async assertSourceIndexInputExists() {
       await testSubjects.existOrFail('mlAnalyticsCreateJobFlyoutSourceIndexSelect > comboBoxInput');
     },

x-pack/test/functional/services/machine_learning/data_frame_analytics_table.ts

@@ -26,6 +26,11 @@ export function MachineLearningDataFrameAnalyticsTableProvider({ getService }: F
             .find('.euiTableCellContent')
             .text()
             .trim(),
+          description: $tr
+            .findTestSubject('mlAnalyticsTableColumnJobDescription')
+            .find('.euiTableCellContent')
+            .text()
+            .trim(),
           sourceIndex: $tr
             .findTestSubject('mlAnalyticsTableColumnSourceIndex')
             .find('.euiTableCellContent')
@@ -71,6 +76,10 @@ export function MachineLearningDataFrameAnalyticsTableProvider({ getService }: F
       return await tableListContainer.findByClassName('euiFieldSearch');
     }
 
+    async assertJobViewButtonExists() {
+      await testSubjects.existOrFail('mlAnalyticsJobViewButton');
+    }
+
     async assertAnalyticsSearchInputValue(expectedSearchValue: string) {
       const searchBarInput = await this.getAnalyticsSearchInput();
       const actualSearchValue = await searchBarInput.getAttribute('value');
@@ -80,6 +89,12 @@ export function MachineLearningDataFrameAnalyticsTableProvider({ getService }: F
       );
     }
 
+    public async openResultsView() {
+      await this.assertJobViewButtonExists();
+      await testSubjects.click('mlAnalyticsJobViewButton');
+      await testSubjects.existOrFail('mlPageDataFrameAnalyticsExploration', { timeout: 5000 });
+    }
+
     public async filterWithSearchString(filter: string) {
       await this.waitForAnalyticsToLoad();
       const searchBarInput = await this.getAnalyticsSearchInput();