diff --git a/src/plugins/discover/public/application/angular/helpers/row_formatter.ts b/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
similarity index 71%
rename from src/plugins/discover/public/application/angular/helpers/row_formatter.ts
rename to src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
index b219dda19e10a8..c5e64f38a31178 100644
--- a/src/plugins/discover/public/application/angular/helpers/row_formatter.ts
+++ b/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
@@ -6,24 +6,29 @@
* Side Public License, v 1.
*/
-import { template } from 'lodash';
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom/server';
import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../common';
import { getServices, IndexPattern } from '../../../kibana_services';
-function noWhiteSpace(html: string) {
- const TAGS_WITH_WS = />\s+<');
+interface Props {
+ defPairs: Array<[string, unknown]>;
}
-
-const templateHtml = `
-
- <% defPairs.forEach(function (def) { %>
- - <%- def[0] %>:
- - <%= def[1] %>
- <%= ' ' %>
- <% }); %>
-
`;
-export const doTemplate = template(noWhiteSpace(templateHtml));
+const TemplateComponent = ({ defPairs }: Props) => {
+ return (
+
+ {defPairs.map((pair, idx) => (
+
+ - {pair[0]}:
+ {' '}
+
+ ))}
+
+ );
+};
export const formatRow = (hit: Record, indexPattern: IndexPattern) => {
const highlights = hit?.highlight ?? {};
@@ -38,7 +43,9 @@ export const formatRow = (hit: Record, indexPattern: IndexPattern)
pairs.push([displayKey ? displayKey : key, val]);
});
const maxEntries = getServices().uiSettings.get(MAX_DOC_FIELDS_DISPLAYED);
- return doTemplate({ defPairs: [...highlightPairs, ...sourcePairs].slice(0, maxEntries) });
+ return ReactDOM.renderToStaticMarkup(
+
+ );
};
export const formatTopLevelObject = (
@@ -70,5 +77,7 @@ export const formatTopLevelObject = (
pairs.push([displayKey ? displayKey : key, formatted]);
});
const maxEntries = getServices().uiSettings.get(MAX_DOC_FIELDS_DISPLAYED);
- return doTemplate({ defPairs: [...highlightPairs, ...sourcePairs].slice(0, maxEntries) });
+ return ReactDOM.renderToStaticMarkup(
+
+ );
};