adding dangerous field formatting

elastic · Dec 11, 2019 · ead3c2d · ead3c2d
1 parent db03a5b
commit ead3c2d
Showing 1 changed file with 28 additions and 16 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/discover/angular/directives/table.tsx b/src/legacy/core_plugins/kibana/public/discover/angular/directives/table.tsx
@@ -64,7 +64,7 @@ interface Props {
 }
 
 const cellPopoverRenderer = (
-  value: string,
+  value: string | ReactNode,
   positiveFilterClick: () => void,
   negativeFilterClick: () => void
 ) => {
@@ -146,13 +146,15 @@ export function DiscoverTable({
     id: string;
     isExpandable?: boolean;
     display?: ReactNode;
+    schema?: string;
   } => {
     // Discover always injects a Time column as the first item
     // Have to guard against this to allow users to request the same column again later
     if (columnName === indexPattern.timeFieldName && i === 0) {
-      return { id: timeString };
+      return { id: timeString, schema: 'datetime' };
     }
 
+    // TODO add scheme type based on indexPattern.type or something
     return { id: columnName };
   });
 
@@ -190,6 +192,14 @@ export function DiscoverTable({
   /**
    * Cell rendering
    */
+  const formattedField = function(row: any, columnId: string) {
+    const formattedValue = indexPattern.formatField(row, columnId);
+
+    // TODO Field formatters need to be fixed
+    // eslint-disable-next-line react/no-danger
+    return <span dangerouslySetInnerHTML={{ __html: formattedValue }} />;
+  };
+
   const renderCellValue = useMemo(() => {
     // TODO use Eui types?
     return ({
@@ -203,7 +213,8 @@ export function DiscoverTable({
     }) => {
       const adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize;
       const row = rows[adjustedRowIndex];
-      let value = '-';
+      let value: string | ReactNode;
+      value = '-';
 
       if (typeof row === 'undefined') {
         return value;
@@ -226,8 +237,7 @@ export function DiscoverTable({
       }
 
       if (columnId === timeString) {
-        // TODO format through indexPattern.formatField
-        value = row._source[indexPattern.timeFieldName];
+        value = formattedField(row, indexPattern.timeFieldName);
 
         if (showFilterActions(isDetails, indexPattern.timeFieldName)) {
           return cellPopoverRenderer(
@@ -240,18 +250,20 @@ export function DiscoverTable({
         return value;
       }
 
-      const cell = row[columnId];
+      value = formattedField(row, columnId);
 
-      if (typeof cell === 'object' && cell !== null) {
-        value = JSON.stringify(cell);
-      } else {
-        // TODO
-        // Would do something like this in the old world:
-        // // return indexPattern.formatField(value, columnId);
-        // But formatter assumes you want Angular gunk surrounding your values
-        // Need to change up how formatField works
-        value = cell || row._source[columnId] || '-';
-      }
+      // if (typeof value === 'undefined') const cell = row[columnId];
+
+      // if (typeof cell === 'object' && cell !== null) {
+      //   value = JSON.stringify(cell);
+      // } else {
+      //   // TODO
+      //   // Would do something like this in the old world:
+      //   // // return indexPattern.formatField(value, columnId);
+      //   // But formatter assumes you want Angular gunk surrounding your values
+      //   // Need to change up how formatField works
+      //   value = cell || row._source[columnId] || '-';
+      // }
 
       if (showFilterActions(isDetails, columnId)) {
         return cellPopoverRenderer(