[7.13] [ML] Functional tests for Analytics list row expansion content (…

…#98678) (#98794) * [ML] Functional tests for Analytics list row expansion content (#98678) * [ML] Remove versioning check for Analytics list row expansion content functional tests (#98828) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit cbcc800) Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com> Co-authored-by: Quynh Nguyen <quynh.nguyen@elastic.co>
elastic · May 3, 2021 · 1ec7ce9 · 1ec7ce9
1 parent e8615d0
commit 1ec7ce9
Show file tree

Hide file tree

Showing 11 changed files with 304 additions and 22 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
@@ -93,6 +93,7 @@ export const JobMessages: FC<JobMessagesProps> = ({ messages, loading, error, re
         compressed={true}
         loading={loading}
         error={error}
+        data-test-subj={'mlAnalyticsDetailsJobMessagesTable'}
       />
     </>
   );

diff --git a/...ata_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/...ata_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
@@ -192,6 +192,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
     }),
     items: stateItems as SectionItem[],
     position: 'left',
+    dataTestSubj: 'mlAnalyticsTableRowDetailsSection state',
   };
 
   const { currentPhase, totalPhases } = getDataFrameAnalyticsProgressPhase(item.stats);
@@ -217,6 +218,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       }),
     ],
     position: 'right',
+    dataTestSubj: 'mlAnalyticsTableRowDetailsSection progress',
   };
 
   const stats: SectionConfig = {
@@ -234,6 +236,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       { title: 'version', description: item.config.version },
     ],
     position: 'left',
+    dataTestSubj: 'mlAnalyticsTableRowDetailsSection stats',
   };
 
   const analysisStats: SectionConfig | undefined = analysisStatsValues
@@ -263,6 +266,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
           }),
         ],
         position: 'right',
+        dataTestSubj: 'mlAnalyticsTableRowDetailsSection analysisStats',
       }
     : undefined;
 
@@ -364,7 +368,13 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       name: i18n.translate('xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettingsLabel', {
         defaultMessage: 'Job details',
       }),
-      content: <ExpandedRowDetailsPane sections={detailsSections} />,
+      content: (
+        <ExpandedRowDetailsPane
+          sections={detailsSections}
+          dataTestSubj={`mlAnalyticsTableRowDetailsTabContent job-details ${item.config.id}`}
+        />
+      ),
+      'data-test-subj': `mlAnalyticsTableRowDetailsTab job-details ${item.config.id}`,
     },
     {
       id: 'ml-analytics-job-stats',
@@ -374,12 +384,24 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
           defaultMessage: 'Job stats',
         }
       ),
-      content: <ExpandedRowDetailsPane sections={statsSections} />,
+      content: (
+        <ExpandedRowDetailsPane
+          sections={statsSections}
+          dataTestSubj={`mlAnalyticsTableRowDetailsTabContent job-stats ${item.config.id}`}
+        />
+      ),
+      'data-test-subj': `mlAnalyticsTableRowDetailsTab job-stats ${item.config.id}`,
     },
     {
       id: 'ml-analytics-job-json',
       name: 'JSON',
-      content: <ExpandedRowJsonPane json={item.config} />,
+      content: (
+        <ExpandedRowJsonPane
+          json={item.config}
+          dataTestSubj={`mlAnalyticsTableRowDetailsTabContent json ${item.config.id}`}
+        />
+      ),
+      'data-test-subj': `mlAnalyticsTableRowDetailsTab json ${item.config.id}`,
     },
     {
       id: 'ml-analytics-job-messages',
@@ -389,7 +411,13 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
           defaultMessage: 'Job messages',
         }
       ),
-      content: <ExpandedRowMessagesPane analyticsId={item.id} />,
+      content: (
+        <ExpandedRowMessagesPane
+          analyticsId={item.id}
+          dataTestSubj={`mlAnalyticsTableRowDetailsTabContent job-messages ${item.config.id}`}
+        />
+      ),
+      'data-test-subj': `mlAnalyticsTableRowDetailsTab job-messages ${item.config.id}`,
     },
   ];
 
@@ -406,6 +434,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       onTabClick={() => {}}
       expand={false}
       style={{ width: '100%' }}
+      data-test-subj={`mlAnalyticsTableRowDetails-${item.config.id}`}
     />
   );
 };
diff --git a/...lytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/...lytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -19,6 +19,7 @@ export interface SectionConfig {
   title: string;
   position: 'left' | 'right';
   items: SectionItem[];
+  dataTestSubj: string;
 }
 
 interface SectionProps {
@@ -44,7 +45,7 @@ export const Section: FC<SectionProps> = ({ section }) => {
   ];
 
   return (
-    <>
+    <div data-test-subj={section.dataTestSubj}>
       <EuiTitle size="xs">
         <span>{section.title}</span>
       </EuiTitle>
@@ -55,18 +56,23 @@ export const Section: FC<SectionProps> = ({ section }) => {
         tableCaption={section.title}
         tableLayout="auto"
         className="mlExpandedRowDetailsSection"
+        data-test-subj={`${section.dataTestSubj}-table`}
       />
-    </>
+    </div>
   );
 };
 
 interface ExpandedRowDetailsPaneProps {
   sections: SectionConfig[];
+  dataTestSubj: string;
 }
 
-export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({ sections }) => {
+export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({
+  sections,
+  dataTestSubj,
+}) => {
   return (
-    <EuiFlexGroup className="mlExpandedRowDetails">
+    <EuiFlexGroup className="mlExpandedRowDetails" data-test-subj={dataTestSubj}>
       <EuiFlexItem style={{ width: '50%' }}>
         {sections
           .filter((s) => s.position === 'left')

diff --git a/...analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx b/...analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx
@@ -11,11 +11,12 @@ import { EuiCodeEditor, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eu
 
 interface Props {
   json: object;
+  dataTestSubj: string;
 }
 
-export const ExpandedRowJsonPane: FC<Props> = ({ json }) => {
+export const ExpandedRowJsonPane: FC<Props> = ({ json, dataTestSubj }) => {
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup data-test-subj={dataTestSubj}>
       <EuiFlexItem>
         <EuiSpacer size="s" />
         <EuiCodeEditor
@@ -24,6 +25,7 @@ export const ExpandedRowJsonPane: FC<Props> = ({ json }) => {
           mode="json"
           style={{ width: '100%' }}
           theme="textmate"
+          data-test-subj={`mlAnalyticsDetailsJsonPreview`}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>&nbsp;</EuiFlexItem>

diff --git a/...ytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/...ytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
@@ -17,9 +17,10 @@ import { useToastNotificationService } from '../../../../../services/toast_notif
 
 interface Props {
   analyticsId: string;
+  dataTestSubj: string;
 }
 
-export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
+export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }) => {
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -58,7 +59,7 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
   useRefreshAnalyticsList({ onRefresh: getMessages });
 
   return (
-    <div className="mlExpandedRowJobMessages">
+    <div className="mlExpandedRowJobMessages" data-test-subj={dataTestSubj}>
       <JobMessages
         messages={messages}
         loading={isLoading}

diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { AnalyticsTableRowDetails } from '../../../services/ml/data_frame_analytics_table';
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService }: FtrProviderContext) {
@@ -25,11 +26,12 @@ export default function ({ getService }: FtrProviderContext) {
       await ml.api.cleanMlIndices();
     });
 
+    const jobId = `bm_1_${Date.now()}`;
     const testDataList = [
       {
         suiteTitle: 'bank marketing',
         jobType: 'classification',
-        jobId: `bm_1_${Date.now()}`,
+        jobId,
         jobDescription:
           "Classification job based on 'ft_bank_marketing' dataset with dependentVariable 'y' and trainingPercent '20'",
         source: 'ft_bank_marketing',
@@ -68,6 +70,22 @@ export default function ({ getService }: FtrProviderContext) {
             status: 'stopped',
             progress: '100',
           },
+          rowDetails: {
+            jobDetails: [
+              {
+                section: 'state',
+                expectedEntries: {
+                  id: jobId,
+                  state: 'stopped',
+                  data_counts:
+                    '{"training_docs_count":1862,"test_docs_count":7452,"skipped_docs_count":0}',
+                  description:
+                    "Classification job based on 'ft_bank_marketing' dataset with dependentVariable 'y' and trainingPercent '20'",
+                },
+              },
+              { section: 'progress', expectedEntries: { Phase: '8/8' } },
+            ],
+          } as AnalyticsTableRowDetails,
         },
       },
     ];
@@ -230,6 +248,11 @@ export default function ({ getService }: FtrProviderContext) {
             status: testData.expected.row.status,
             progress: testData.expected.row.progress,
           });
+
+          await ml.dataFrameAnalyticsTable.assertAnalyticsRowDetails(
+            testData.jobId,
+            testData.expected.rowDetails
+          );
         });
 
         it('edits the analytics job and displays it correctly in the job list', async () => {

diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts
@@ -6,6 +6,7 @@
  */
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
+import { AnalyticsTableRowDetails } from '../../../services/ml/data_frame_analytics_table';
 
 export default function ({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
@@ -25,15 +26,17 @@ export default function ({ getService }: FtrProviderContext) {
       await ml.api.cleanMlIndices();
     });
 
+    const jobId = `ihp_1_${Date.now()}`;
+
     const testDataList = [
       {
         suiteTitle: 'iowa house prices',
         jobType: 'outlier_detection',
-        jobId: `ihp_1_${Date.now()}`,
-        jobDescription: 'This is the job description',
+        jobId,
+        jobDescription: 'Outlier detection job based on ft_ihp_outlier dataset with runtime fields',
         source: 'ft_ihp_outlier',
         get destinationIndex(): string {
-          return `user-${this.jobId}`;
+          return `user-${jobId}`;
         },
         runtimeFields: {
           lowercase_central_air: {
@@ -82,6 +85,22 @@ export default function ({ getService }: FtrProviderContext) {
             status: 'stopped',
             progress: '100',
           },
+          rowDetails: {
+            jobDetails: [
+              {
+                section: 'state',
+                expectedEntries: {
+                  id: jobId,
+                  state: 'stopped',
+                  data_counts:
+                    '{"training_docs_count":1460,"test_docs_count":0,"skipped_docs_count":0}',
+                  description:
+                    'Outlier detection job based on ft_ihp_outlier dataset with runtime fields',
+                },
+              },
+              { section: 'progress', expectedEntries: { Phase: '4/4' } },
+            ],
+          } as AnalyticsTableRowDetails,
         },
       },
     ];
@@ -246,6 +265,11 @@ export default function ({ getService }: FtrProviderContext) {
             status: testData.expected.row.status,
             progress: testData.expected.row.progress,
           });
+
+          await ml.dataFrameAnalyticsTable.assertAnalyticsRowDetails(
+            testData.jobId,
+            testData.expected.rowDetails
+          );
         });
 
         it('edits the analytics job and displays it correctly in the job list', async () => {

diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts
@@ -6,6 +6,7 @@
  */
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
+import { AnalyticsTableRowDetails } from '../../../services/ml/data_frame_analytics_table';
 
 export default function ({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
@@ -25,15 +26,16 @@ export default function ({ getService }: FtrProviderContext) {
       await ml.api.cleanMlIndices();
     });
 
+    const jobId = `egs_1_${Date.now()}`;
     const testDataList = [
       {
         suiteTitle: 'electrical grid stability',
         jobType: 'regression',
-        jobId: `egs_1_${Date.now()}`,
-        jobDescription: 'This is the job description',
+        jobId,
+        jobDescription: 'Regression job based on ft_egs_regression dataset with runtime fields',
         source: 'ft_egs_regression',
         get destinationIndex(): string {
-          return `user-${this.jobId}`;
+          return `user-${jobId}`;
         },
         runtimeFields: {
           uppercase_stab: {
@@ -61,6 +63,22 @@ export default function ({ getService }: FtrProviderContext) {
             status: 'stopped',
             progress: '100',
           },
+          rowDetails: {
+            jobDetails: [
+              {
+                section: 'state',
+                expectedEntries: {
+                  id: jobId,
+                  state: 'stopped',
+                  data_counts:
+                    '{"training_docs_count":400,"test_docs_count":1600,"skipped_docs_count":0}',
+                  description:
+                    'Regression job based on ft_egs_regression dataset with runtime fields',
+                },
+              },
+              { section: 'progress', expectedEntries: { Phase: '8/8' } },
+            ],
+          } as AnalyticsTableRowDetails,
         },
       },
     ];
@@ -219,6 +237,10 @@ export default function ({ getService }: FtrProviderContext) {
             status: testData.expected.row.status,
             progress: testData.expected.row.progress,
           });
+          await ml.dataFrameAnalyticsTable.assertAnalyticsRowDetails(
+            testData.jobId,
+            testData.expected.rowDetails
+          );
         });
 
         it('edits the analytics job and displays it correctly in the job list', async () => {

diff --git a/x-pack/test/functional/apps/ml/permissions/full_ml_access.ts b/x-pack/test/functional/apps/ml/permissions/full_ml_access.ts
@@ -309,7 +309,7 @@ export default function ({ getService }: FtrProviderContext) {
               'should display enabled DFA job view and action menu'
             );
             await ml.dataFrameAnalyticsTable.assertJobRowViewButtonEnabled(dfaJobId, true);
-            await ml.dataFrameAnalyticsTable.assertJowRowActionsMenuButtonEnabled(dfaJobId, true);
+            await ml.dataFrameAnalyticsTable.assertJobRowActionsMenuButtonEnabled(dfaJobId, true);
             await ml.dataFrameAnalyticsTable.assertJobActionViewButtonEnabled(dfaJobId, true);
 
             await ml.testExecution.logTestStep('should display enabled DFA job row action buttons');

diff --git a/x-pack/test/functional/apps/ml/permissions/read_ml_access.ts b/x-pack/test/functional/apps/ml/permissions/read_ml_access.ts
@@ -300,7 +300,7 @@ export default function ({ getService }: FtrProviderContext) {
               'should display enabled DFA job view and action menu'
             );
             await ml.dataFrameAnalyticsTable.assertJobRowViewButtonEnabled(dfaJobId, true);
-            await ml.dataFrameAnalyticsTable.assertJowRowActionsMenuButtonEnabled(dfaJobId, true);
+            await ml.dataFrameAnalyticsTable.assertJobRowActionsMenuButtonEnabled(dfaJobId, true);
             await ml.dataFrameAnalyticsTable.assertJobActionViewButtonEnabled(dfaJobId, true);
 
             await ml.testExecution.logTestStep(