Alerting: Show full preview value in tooltip (#42445)

* use JSONCell for value

* remove console log and usememo

public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx

@@ -94,6 +94,7 @@ function getStyles(theme: GrafanaTheme2) {
   return {
     container: css`
       margin-top: ${theme.spacing(2)};
+      max-width: ${theme.breakpoints.values.xxl}px;
     `,
   };
 }

public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { useStyles2 } from '@grafana/ui';
+import { TableCellDisplayMode, useStyles2 } from '@grafana/ui';
 import { PanelRenderer } from '@grafana/runtime';
-import { GrafanaTheme2, LoadingState } from '@grafana/data';
+import { FieldConfigSource, FieldMatcherID, GrafanaTheme2, LoadingState } from '@grafana/data';
 import { PreviewRuleResponse } from '../../types/preview';
 import { RuleFormType } from '../../types/rule-form';
 import { messageFromError } from '../../utils/redux';
@@ -15,6 +15,15 @@ type Props = {
 export function PreviewRuleResult(props: Props): React.ReactElement | null {
   const { preview } = props;
   const styles = useStyles2(getStyles);
+  const fieldConfig: FieldConfigSource = {
+    defaults: {},
+    overrides: [
+      {
+        matcher: { id: FieldMatcherID.byName, options: 'Info' },
+        properties: [{ id: 'custom.displayMode', value: TableCellDisplayMode.JSONView }],
+      },
+    ],
+  };
 
   if (!preview) {
     return null;
@@ -37,7 +46,6 @@ export function PreviewRuleResult(props: Props): React.ReactElement | null {
       </div>
     );
   }
-
   return (
     <div className={styles.container}>
       <span>
@@ -48,7 +56,14 @@ export function PreviewRuleResult(props: Props): React.ReactElement | null {
         <AutoSizer>
           {({ width, height }) => (
             <div style={{ width: `${width}px`, height: `${height}px` }}>
-              <PanelRenderer title="" width={width} height={height} pluginId="table" data={data} />
+              <PanelRenderer
+                title=""
+                width={width}
+                height={height}
+                pluginId="table"
+                data={data}
+                fieldConfig={fieldConfig}
+              />
             </div>
           )}
         </AutoSizer>