[ML] Fix functional tests for index based Data Visualizer

x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx

@@ -84,6 +84,7 @@ export const MultiSelectPicker: FC<{
 
   const button = (
     <EuiFilterButton
+      data-test-subj={`${dataTestSubj}-button`}
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
@@ -98,14 +99,19 @@ export const MultiSelectPicker: FC<{
   return (
     <EuiFilterGroup data-test-subj={dataTestSubj}>
       <EuiPopover
+        data-test-subj={`${dataTestSubj}-popover`}
         id="popoverExampleMultiSelect"
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         panelPaddingSize="none"
       >
         <EuiPopoverTitle paddingSize="s">
-          <EuiFieldSearch compressed onChange={(e) => setSearchTerm(e.target.value)} />
+          <EuiFieldSearch
+            compressed
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-test-subj={`${dataTestSubj}-searchInput`}
+          />
         </EuiPopoverTitle>
         <div style={{ maxHeight: 250, overflow: 'auto' }}>
           {Array.isArray(items) && items.length > 0 ? (
@@ -120,6 +126,7 @@ export const MultiSelectPicker: FC<{
                 key={index}
                 onClick={() => handleOnChange(index)}
                 style={{ flexDirection: 'row' }}
+                data-test-subj={`${dataTestSubj}-option-${item.value}`}
               >
                 {item.name ?? item.value}
               </EuiFilterSelectItem>

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/document_count_chart/document_count_chart.tsx

@@ -52,7 +52,7 @@ export const DocumentCountChart: FC<Props> = ({
   const dateFormatter = niceTimeFormatter([timeRangeEarliest, timeRangeLatest]);
 
   return (
-    <div style={{ width: width ?? '100%' }} data-test-subj="mlFieldDataCardDocumentCountChart">
+    <div style={{ width: width ?? '100%' }} data-test-subj="mlFieldDataDocumentCountChart">
       <Chart
         size={{
           width: '100%',

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx

@@ -36,7 +36,7 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
   });
 
   return (
-    <div data-test-subj="mlFieldDataCardExamplesList">
+    <div data-test-subj="mlFieldDataExamplesList">
       <ExpandedRowFieldHeader>
         <FormattedMessage
           id="xpack.ml.fieldDataCard.examplesList.title"

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx

@@ -79,7 +79,7 @@ export const MetricDistributionChart: FC<Props> = ({
   };
 
   return (
-    <div data-test-subj="mlFieldDataCardMetricDistributionChart">
+    <div data-test-subj="mlFieldDataMetricDistributionChart">
       <Chart size={{ width, height }}>
         <Settings
           theme={{

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx

@@ -46,7 +46,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
   } = stats;
   const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
   return (
-    <div data-test-subj="mlFieldDataCardTopValues">
+    <div data-test-subj="mlFieldDataTopValues">
       {Array.isArray(topValues) &&
         topValues.map((value: any) => (
           <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
@@ -64,7 +64,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
                 </EuiText>
               </EuiToolTip>
             </EuiFlexItem>
-            <EuiFlexItem data-test-subj="mlFieldDataCardTopValueBar">
+            <EuiFlexItem data-test-subj="mlFieldDataTopValueBar">
               <EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
             </EuiFlexItem>
             <EuiFlexItem

x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_row/number_content_preview.tsx

@@ -23,7 +23,7 @@ export const NumberContentPreview: FC<FieldDataCardProps> = ({ config }) => {
   const defaultChartData: MetricDistributionChartData[] = [];
   const [distributionChartData, setDistributionChartData] = useState(defaultChartData);
   const [legendText, setLegendText] = useState<{ min: number; max: number } | undefined>();
-  const dataTestSubj = fieldName;
+  const dataTestSubj = `mlDataGridChart-${fieldName}`;
   useEffect(() => {
     const chartData = buildChartDataFromStats(stats, METRIC_DISTRIBUTION_CHART_WIDTH);
     if (

x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/expanded_row.tsx

@@ -60,7 +60,7 @@ export const DataVisualizerFieldExpandedRow = ({ item }: { item: FieldVisConfig
   return (
     <div
       className="mlDataVisualizerFieldExpandedRow"
-      data-test-subj={`mlDataVisualizerFieldExpandedRow ${fieldName} ${type}`}
+      data-test-subj={`mlDataVisualizerFieldExpandedRow-${fieldName}`}
     >
       {loading === true ? <LoadingIndicator /> : getCardContent()}
     </div>

x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/stats_datagrid.tsx

@@ -112,7 +112,7 @@ export const DataVisualizerDataGrid = ({
         const direction = expandedRowItemIds.includes(item.fieldName) ? 'arrowUp' : 'arrowDown';
         return (
           <EuiButtonIcon
-            data-test-subj={`mlDataVisualizerToggleDetails ${item.fieldName} ${direction}`}
+            data-test-subj={`mlDataVisualizerDetailsToggle-${item.fieldName}-${direction}`}
             onClick={() => toggleDetails(item)}
             aria-label={
               expandedRowItemIds.includes(item.fieldName)