[Logs UI] Fix display of dataset values in anomaly and category examp…

…le rows (#71693)

This removes an unnecessary JSON encoding step of values before they are passed to the field column component used in the log entry example rows in both the Anomalies and Categories tabs.

x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_message.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo, useState, useCallback, useContext } from 'react';
+import React, { useState, useCallback, useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 import { encode } from 'rison-node';
 import moment from 'moment';
@@ -40,12 +40,8 @@ export const CategoryExampleMessage: React.FunctionComponent<{
   context: LogEntryContext;
 }> = ({ id, dataset, message, timestamp, timeRange, tiebreaker, context }) => {
   const [, { setContextEntry }] = useContext(ViewLogInContext.Context);
-  // the dataset must be encoded for the field column and the empty value must
-  // be turned into a user-friendly value
-  const encodedDatasetFieldValue = useMemo(
-    () => JSON.stringify(getFriendlyNameForPartitionId(dataset)),
-    [dataset]
-  );
+  // handle special cases for the dataset value
+  const humanFriendlyDataset = getFriendlyNameForPartitionId(dataset);
 
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const setHovered = useCallback(() => setIsHovered(true), []);
@@ -100,7 +96,7 @@ export const CategoryExampleMessage: React.FunctionComponent<{
           columnValue={{
             columnId: datasetColumnId,
             field: 'event.dataset',
-            value: encodedDatasetFieldValue,
+            value: humanFriendlyDataset,
             highlights: [],
           }}
           highlights={noHighlights}

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx

@@ -80,12 +80,8 @@ export const LogEntryExampleMessage: React.FunctionComponent<Props> = ({
   const setItemIsHovered = useCallback(() => setIsHovered(true), []);
   const setItemIsNotHovered = useCallback(() => setIsHovered(false), []);
 
-  // the dataset must be encoded for the field column and the empty value must
-  // be turned into a user-friendly value
-  const encodedDatasetFieldValue = useMemo(
-    () => JSON.stringify(getFriendlyNameForPartitionId(dataset)),
-    [dataset]
-  );
+  // handle special cases for the dataset value
+  const humanFriendlyDataset = getFriendlyNameForPartitionId(dataset);
 
   const viewInStreamLinkProps = useLinkProps({
     app: 'logs',
@@ -158,7 +154,7 @@ export const LogEntryExampleMessage: React.FunctionComponent<Props> = ({
           columnValue={{
             columnId: datasetColumnId,
             field: 'event.dataset',
-            value: encodedDatasetFieldValue,
+            value: humanFriendlyDataset,
             highlights: [],
           }}
           highlights={noHighlights}