[ML] File data viz fix fields from mappings (#77251)

* [ML] File data viz fix fields from mappings

* adding card count test

* updating test

Co-authored-by: Elastic Machine <[email protected]>

Author: jgowdyelastic

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/field_stats_card.js

@@ -26,7 +26,7 @@ export function FieldStatsCard({ field }) {
 
   return (
     <EuiPanel hasShadow={false} className="mlFieldDataCard">
-      <div className="ml-field-data-card">
+      <div className="ml-field-data-card" data-test-subj="mlPageFileDataVisFieldDataCard">
         <div className={`ml-field-title-bar ${type}`}>
           <FieldTypeIcon type={type} needsAria={false} />
           <div className="field-name" tabIndex="0" aria-label={`${cardTitleAriaLabel.join(', ')}`}>

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/fields_stats.js

@@ -50,14 +50,14 @@ function createFields(results) {
     timestamp_field: timestampField,
   } = results;
 
-  if (mappings && fieldStats) {
+  if (mappings && mappings.properties && fieldStats) {
     const fieldNames = getFieldNames(results);
 
     return fieldNames.map((name) => {
       if (fieldStats[name] !== undefined) {
         const field = { name };
         const f = fieldStats[name];
-        const m = mappings[name];
+        const m = mappings.properties[name];
 
         // sometimes the timestamp field is not in the mappings, and so our
         // collection of fields will be missing a time field with a type of date
@@ -93,7 +93,7 @@ function createFields(results) {
         // this could be the message field for a semi-structured log file or a
         // field which the endpoint has not been able to work out any information for
         const type =
-          mappings[name] && mappings[name].type === ML_JOB_FIELD_TYPES.TEXT
+          mappings.properties[name] && mappings.properties[name].type === ML_JOB_FIELD_TYPES.TEXT
             ? ML_JOB_FIELD_TYPES.TEXT
             : ML_JOB_FIELD_TYPES.UNKNOWN;
 

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/get_field_names.js

@@ -16,7 +16,7 @@ export function getFieldNames(results) {
   // there may be fields in the mappings which do not exist in the field_stats
   // e.g. the message field for a semi-structured log file, as they have no stats.
   // add any extra fields to the list
-  const differenceFields = difference(Object.keys(mappings), tempFields);
+  const differenceFields = difference(Object.keys(mappings.properties), tempFields);
 
   // except @timestamp
   const timestampIndex = differenceFields.indexOf('@timestamp');

x-pack/test/functional/apps/ml/data_visualizer/file_data_visualizer.ts

@@ -20,6 +20,7 @@ export default function ({ getService }: FtrProviderContext) {
       expected: {
         results: {
           title: 'artificial_server_log',
+          numberOfFields: 4,
         },
       },
     },
@@ -62,6 +63,9 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.dataVisualizerFileBased.assertFileContentPanelExists();
           await ml.dataVisualizerFileBased.assertSummaryPanelExists();
           await ml.dataVisualizerFileBased.assertFileStatsPanelExists();
+          await ml.dataVisualizerFileBased.assertNumberOfFieldCards(
+            testData.expected.results.numberOfFields
+          );
 
           await ml.testExecution.logTestStep('loads the import settings page');
           await ml.dataVisualizerFileBased.navigateToFileImport();

x-pack/test/functional/services/ml/data_visualizer_file_based.ts

@@ -54,6 +54,14 @@ export function MachineLearningDataVisualizerFileBasedProvider(
       await testSubjects.existOrFail('mlFileDataVisFileStatsPanel');
     },
 
+    async assertNumberOfFieldCards(number: number) {
+      const cards = await testSubjects.findAll('mlPageFileDataVisFieldDataCard');
+      expect(cards.length).to.eql(
+        number,
+        `expected ${number} field cards to exist, but found ${cards.length}`
+      );
+    },
+
     async assertImportButtonEnabled(expectedValue: boolean) {
       const isEnabled = await testSubjects.isEnabled('mlFileDataVisOpenImportPageButton');
       expect(isEnabled).to.eql(