[ML] Add functional tests for Data Drift view (#167911)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Oct 12, 2023 · f28349f · f28349f
1 parent 33207e3
commit f28349f
Show file tree

Hide file tree

Showing 12 changed files with 525 additions and 94 deletions.
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_overview_table.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_overview_table.tsx
@@ -112,6 +112,9 @@ export const DataDriftOverviewTable = ({
 
         return (
           <EuiButtonIcon
+            data-test-subj={`dataDriftToggleDetails-${
+              itemIdToExpandedRowMapValues[item.featureName] ? 'expanded' : 'collapsed'
+            }`}
             onClick={() => toggleDetails(item)}
             aria-label={itemIdToExpandedRowMapValues[item.featureName] ? COLLAPSE_ROW : EXPAND_ROW}
             iconType={itemIdToExpandedRowMapValues[item.featureName] ? 'arrowDown' : 'arrowRight'}
@@ -149,7 +152,10 @@ export const DataDriftOverviewTable = ({
       'data-test-subj': 'mlDataDriftOverviewTableDriftDetected',
       sortable: true,
       textOnly: true,
-      render: (driftDetected: boolean) => {
+      render: (driftDetected: boolean, item) => {
+        // @ts-expect-error currently ES two_sided does return string NaN, will be fixed
+        // NaN happens when the distributions are non overlapping. This means there is a drift.
+        if (item.similarityTestPValue === 'NaN') return dataComparisonYesLabel;
         return <span>{driftDetected ? dataComparisonYesLabel : dataComparisonNoLabel}</span>;
       },
     },

diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
@@ -94,7 +94,11 @@ export const PageHeader: FC = () => {
 
   return (
     <EuiPageHeader
-      pageTitle={<div css={dataViewTitleHeader}>{dataView.getName()}</div>}
+      pageTitle={
+        <div data-test-subj={'mlDataDriftPageDataViewTitle'} css={dataViewTitleHeader}>
+          {dataView.getName()}
+        </div>
+      }
       rightSideItems={[
         <EuiFlexGroup gutterSize="s" data-test-subj="dataComparisonTimeRangeSelectorSection">
           {hasValidTimeField ? (

diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.ts
@@ -9,8 +9,11 @@
  * formatSignificanceLevel
  * @param significanceLevel
  */
-export const formatSignificanceLevel = (significanceLevel: number) => {
+export const formatSignificanceLevel = (significanceLevel: number | 'NaN') => {
+  // NaN happens when the distributions are non overlapping. This means there is a drift, and the p-value would be astronomically small.
+  if (significanceLevel === 'NaN') return '< 0.000001';
   if (typeof significanceLevel !== 'number' || isNaN(significanceLevel)) return '';
+
   if (significanceLevel < 1e-6) {
     return '< 0.000001';
   } else if (significanceLevel < 0.01) {

diff --git a/.../plugins/data_visualizer/public/application/data_drift/document_count_with_dual_brush.tsx b/.../plugins/data_visualizer/public/application/data_drift/document_count_with_dual_brush.tsx
@@ -141,7 +141,7 @@ export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
     timeRangeEarliest === undefined ||
     timeRangeLatest === undefined
   ) {
-    return totalCount !== undefined ? <TotalCountHeader totalCount={totalCount} /> : null;
+    return totalCount !== undefined ? <TotalCountHeader totalCount={totalCount} id={id} /> : null;
   }
 
   const chartPoints: LogRateHistogramItem[] = Object.entries(documentCountStats.buckets).map(
@@ -166,7 +166,7 @@ export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
       data-test-subj={getDataTestSubject('dataDriftTotalDocCountHeader', id)}
     >
       <EuiFlexItem>
-        <TotalCountHeader totalCount={totalCount} approximate={approximate} label={label} />
+        <TotalCountHeader totalCount={totalCount} approximate={approximate} label={label} id={id} />
       </EuiFlexItem>
 
       <EuiFlexGroup gutterSize="m" direction="row" alignItems="center">

diff --git a/...gins/ml/public/application/datavisualizer/data_drift/data_drift_index_patterns_editor.tsx b/...gins/ml/public/application/datavisualizer/data_drift/data_drift_index_patterns_editor.tsx
@@ -246,7 +246,7 @@ export function DataDriftIndexPatternsEditor({
       children: (
         <EuiFlexItem grow={false}>
           <DataViewEditor
-            key={'reference'}
+            id={'reference'}
             label={
               <FormattedMessage
                 id="xpack.ml.dataDrift.indexPatternsEditor.referenceData"
@@ -274,7 +274,7 @@ export function DataDriftIndexPatternsEditor({
       children: (
         <EuiFlexItem grow={false}>
           <DataViewEditor
-            key={'comparison'}
+            id={'comparison'}
             label={
               <FormattedMessage
                 id="xpack.ml.dataDrift.indexPatternsEditor.comparisonDataIndexPatternHelp"
@@ -329,7 +329,7 @@ export function DataDriftIndexPatternsEditor({
                   }}
                   isClearable={false}
                   isDisabled={comparisonIndexPattern === '' && referenceIndexPattern === ''}
-                  data-test-subj="timestampField"
+                  data-test-subj="mlDataDriftTimestampField"
                   aria-label={i18n.translate(
                     'xpack.ml.dataDrift.indexPatternsEditor.timestampSelectAriaLabel',
                     {
@@ -389,7 +389,7 @@ export function DataDriftIndexPatternsEditor({
                     disabled={hasError}
                     onClick={createDataViewAndRedirectToDataDriftPage.bind(null, true)}
                     iconType="visTagCloud"
-                    data-test-subj="analyzeDataDriftButton"
+                    data-test-subj="analyzeDataDriftWithoutSavingButton"
                     aria-label={i18n.translate(
                       'xpack.ml.dataDrift.indexPatternsEditor.analyzeDataDriftWithoutSavingLabel',
                       {

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx
@@ -26,6 +26,7 @@ import { useTableSettings } from '../../data_frame_analytics/pages/analytics_man
 import { canAppendWildcard, matchedIndicesDefault } from './data_drift_index_patterns_editor';
 
 interface DataViewEditorProps {
+  id: string;
   label: ReactNode;
   dataViewEditorService: DataViewEditorService;
   indexPattern: string;
@@ -42,6 +43,7 @@ const mustMatchError = i18n.translate(
 );
 
 export function DataViewEditor({
+  id,
   label,
   dataViewEditorService,
   indexPattern,
@@ -131,6 +133,7 @@ export function DataViewEditor({
           isInvalid={errorMessage !== undefined}
           fullWidth
           helpText={helpText}
+          data-test-subj={`mlDataDriftIndexPatternFormRow-${id ?? ''}`}
         >
           <EuiFieldText
             value={indexPattern}
@@ -149,7 +152,7 @@ export function DataViewEditor({
               setIndexPattern(query);
             }}
             fullWidth
-            data-test-subj="createIndexPatternTitleInput"
+            data-test-subj={`mlDataDriftIndexPatternTitleInput-${id ?? ''}`}
             placeholder="example-pattern*"
           />
         </EuiFormRow>
@@ -183,6 +186,12 @@ export function DataViewEditor({
           columns={columns}
           pagination={pagination}
           onChange={onTableChange}
+          data-test-subject={`mlDataDriftIndexPatternTable-${id ?? ''}`}
+          rowProps={(item) => {
+            return {
+              'data-test-subj': `mlDataDriftIndexPatternTableRow row-${id}`,
+            };
+          }}
         />
       </EuiFlexItem>
     </EuiFlexGrid>

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/data_drift/index_patterns_picker.tsx b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/index_patterns_picker.tsx
@@ -88,6 +88,7 @@ export const DataDriftIndexOrSearchRedirect: FC = () => {
               iconType="plusInCircleFilled"
               onClick={() => navigateToPath(createPath(ML_PAGES.DATA_DRIFT_CUSTOM))}
               disabled={!canEditDataView}
+              data-test-subj={'dataDriftCreateDataViewButton'}
             >
               <FormattedMessage
                 id="xpack.ml.dataDrift.createDataViewButton"

diff --git a/x-pack/plugins/ml/public/application/model_management/expanded_row.tsx b/x-pack/plugins/ml/public/application/model_management/expanded_row.tsx
@@ -429,15 +429,15 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
         : []),
       {
         id: 'models_map',
-        'data-test-subj': 'mlTrainedModelsMap',
+        'data-test-subj': 'mlTrainedModelMap',
         name: (
           <FormattedMessage
             id="xpack.ml.trainedModels.modelsList.expandedRow.modelsMapLabel"
             defaultMessage="Models map"
           />
         ),
         content: (
-          <div data-test-subj={'mlTrainedModelDetailsContent'}>
+          <div data-test-subj={'mlTrainedModelMapContent'}>
             <EuiSpacer size={'s'} />
             <EuiFlexItem css={{ height: 300 }}>
               <JobMap