TableCell: show JSON rather than [object Object] (#23683)

packages/grafana-ui/src/components/Table/JSONViewCell.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import { css, cx } from 'emotion';
+import { TableCellProps } from './types';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
+
+export const JSONViewCell: FC<TableCellProps> = props => {
+  const { field, cell, tableStyles } = props;
+
+  if (!field.display) {
+    return null;
+  }
+
+  const txt = css`
+    cursor: pointer;
+    font-family: monospace;
+  `;
+
+  const displayValue = JSON.stringify(cell.value);
+  const content = <JSONTooltip value={cell.value} />;
+  return (
+    <div className={cx(txt, tableStyles.tableCell)}>
+      <Tooltip placement="auto" content={content} theme={'info'}>
+        <span>{displayValue}</span>
+      </Tooltip>
+    </div>
+  );
+};
+
+interface PopupProps {
+  value: any;
+}
+
+const JSONTooltip: FC<PopupProps> = props => {
+  const clazz = css`
+    padding: 10px;
+  `;
+  return (
+    <div className={clazz}>
+      <JSONFormatter json={props.value} open={4} />
+    </div>
+  );
+};

packages/grafana-ui/src/components/Table/types.ts

@@ -15,6 +15,7 @@ export enum TableCellDisplayMode {
   ColorBackground = 'color-background',
   GradientGauge = 'gradient-gauge',
   LcdGauge = 'lcd-gauge',
+  JSONView = 'json-view',
 }
 
 export type FieldTextAlignment = 'auto' | 'left' | 'right' | 'center';

packages/grafana-ui/src/components/Table/utils.ts

@@ -7,6 +7,7 @@ import { TableCellDisplayMode, TableCellProps, TableFieldOptions } from './types
 import { css, cx } from 'emotion';
 import { withTableStyles } from './withTableStyles';
 import tinycolor from 'tinycolor2';
+import { JSONViewCell } from './JSONViewCell';
 
 export function getTextAlign(field?: Field): TextAlignProperty {
   if (!field) {
@@ -46,7 +47,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
       fieldCountWithoutWidth -= 1;
     }
 
-    const Cell = getCellComponent(fieldTableOptions.displayMode);
+    const Cell = getCellComponent(fieldTableOptions.displayMode, field);
 
     columns.push({
       Cell,
@@ -71,7 +72,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
   return columns;
 }
 
-function getCellComponent(displayMode: TableCellDisplayMode) {
+function getCellComponent(displayMode: TableCellDisplayMode, field: Field) {
   switch (displayMode) {
     case TableCellDisplayMode.ColorText:
       return withTableStyles(DefaultCell, getTextColorStyle);
@@ -80,9 +81,15 @@ function getCellComponent(displayMode: TableCellDisplayMode) {
     case TableCellDisplayMode.LcdGauge:
     case TableCellDisplayMode.GradientGauge:
       return BarGaugeCell;
-    default:
-      return DefaultCell;
+    case TableCellDisplayMode.JSONView:
+      return JSONViewCell;
   }
+
+  // Default or Auto
+  if (field.type === FieldType.other) {
+    return JSONViewCell;
+  }
+  return DefaultCell;
 }
 
 function getTextColorStyle(props: TableCellProps) {