Update to display the conflict information on the edit field page

Fixes #7661

Moved content to the edit field page from the tooltip for better scalability when large data.
The conflict description data is now only stored for conflicting fields.

src/core_plugins/kibana/public/management/sections/indices/_field_type.html

@@ -1,7 +1,7 @@
 <span>{{field.type}}</span>
 <i
-  aria-label="The type of this field changes across indices. It is unavailable for many analysis functions. The types per index are as follows: {{field.indicesTypes}}"
+  aria-label="The type of this field changes across indices. It is unavailable for many analysis functions."
   ng-if="field.type == 'conflict'"
-  tooltip="The type of this field changes across indices. It is unavailable for many analysis functions. The types per index are as follows: {{field.indicesTypes}}"
+  tooltip="The type of this field changes across indices. It is unavailable for many analysis functions."
   class="fa fa-warning text-color-warning">
 </i>

src/ui/public/field_editor/field_editor.html

@@ -177,6 +177,23 @@
 
   </div>
 
+  <div  ng-if="editor.field.conflictDescriptions.length > 0" class="alert alert-warning">
+    <!-- {{editor.field.conflictDescriptions}} -->
+    <!-- {{editor.field.indicesTypes}} -->
+    The type of this field changes across indices. It is unavailable for many analysis functions. The types per index are as follows:
+    <table class="table">
+    <thead>
+      <th> Index Name </th>
+      <th> Field Type </th>
+    </thead>
+    <tbody>
+    <tr ng-repeat="obj in editor.field.conflictDescriptions">
+      <td>{{obj.index}}</td> <td>{{obj.type}}</td>
+    </tr>
+    </tbody>
+    </table>
+  </div>
+
   <div class="form-group">
     <button
       type="button"

src/ui/public/index_patterns/_field.js

@@ -72,7 +72,7 @@ export default function FieldObjectProvider(Private, shortDotsFilter, $rootScope
     obj.comp('$$spec', spec);
 
     // conflict info
-    obj.writ('indicesTypes');
+    obj.writ('conflictDescriptions');
 
     return obj.create();
   }

src/ui/public/index_patterns/_transform_mapping_into_fields.js

@@ -15,6 +15,7 @@ export default function transformMappingIntoFields(Private, kbnIndex, config) {
    */
   return function (response) {
     let fields = {};
+    let conflictFields = {};
     _.each(response, function (index, indexName) {
       if (indexName === kbnIndex) return;
       _.each(index.mappings, function (mappings) {
@@ -23,22 +24,39 @@ export default function transformMappingIntoFields(Private, kbnIndex, config) {
           if (keys.length === 0 || (name[0] === '_') && !_.contains(config.get('metaFields'), name)) return;
 
           let mapping = mapField(field, name);
-          const indexType = 'Index: ' + indexName + ', Type: ' + mapping.type + ';';
-          mapping.indicesTypes = indexType;
+
+          let conflictDescription = {
+            index: indexName,
+            type: mapping.type
+          };
+          mapping.conflictDescriptions = [];
+          mapping.conflictDescriptions.push(conflictDescription);
 
           if (fields[name]) {
-            mapping.indicesTypes = fields[name].indicesTypes + mapping.indicesTypes;
             if (fields[name].type !== mapping.type) {
               // conflict fields are not available for much except showing in the discover table
               mapping.type = 'conflict';
               mapping.indexed = false;
             }
           }
-          fields[name] = _.pick(mapping, 'type', 'indexed', 'analyzed', 'doc_values', 'indicesTypes');
+          if (conflictFields[name]) {
+            mapping.conflictDescriptions = conflictFields[name].conflictDescriptions;
+            mapping.conflictDescriptions.push(conflictDescription);
+          }
+          fields[name] = _.pick(mapping, 'type', 'indexed', 'analyzed', 'doc_values');
+          conflictFields[name] = _.pick(mapping, 'type', 'indexed', 'analyzed', 'doc_values', 'conflictDescriptions');
         });
       });
     });
 
+    for (let key in conflictFields) {
+      if (!conflictFields.hasOwnProperty(key)) continue;
+      let conflictField = conflictFields[key];
+      if (conflictField.type === 'conflict') {
+        fields[key].conflictDescriptions = conflictField.conflictDescriptions;
+      }
+    }
+
     config.get('metaFields').forEach(function (meta) {
       if (fields[meta]) return;