mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Table: Makes tooltip scrollable for long JSON values (#34120)
This commit is contained in:
parent
8a0dbd0127
commit
d721298e03
@ -1,13 +1,13 @@
|
||||
import React, { FC } from 'react';
|
||||
import React from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { isString } from 'lodash';
|
||||
import { Tooltip } from '../Tooltip/Tooltip';
|
||||
import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
|
||||
import { useStyles } from '../../themes';
|
||||
import { useStyles2 } from '../../themes';
|
||||
import { TableCellProps } from './types';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
export const JSONViewCell: FC<TableCellProps> = (props) => {
|
||||
export function JSONViewCell(props: TableCellProps): JSX.Element {
|
||||
const { cell, tableStyles, cellProps } = props;
|
||||
|
||||
const txt = css`
|
||||
@ -29,32 +29,38 @@ export const JSONViewCell: FC<TableCellProps> = (props) => {
|
||||
const content = <JSONTooltip value={value} />;
|
||||
|
||||
return (
|
||||
<div {...cellProps} className={tableStyles.cellContainer}>
|
||||
<Tooltip placement="auto" content={content} theme="info-alt">
|
||||
<Tooltip placement="auto-start" content={content} theme="info-alt">
|
||||
<div {...cellProps} className={tableStyles.cellContainer}>
|
||||
<div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
interface PopupProps {
|
||||
value: any;
|
||||
}
|
||||
|
||||
const JSONTooltip: FC<PopupProps> = (props) => {
|
||||
const styles = useStyles((theme: GrafanaTheme) => {
|
||||
return {
|
||||
container: css`
|
||||
padding: ${theme.spacing.xs};
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
function JSONTooltip(props: PopupProps): JSX.Element {
|
||||
const styles = useStyles2(getStyles);
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div>
|
||||
<JSONFormatter json={props.value} open={4} />
|
||||
<JSONFormatter json={props.value} open={4} className={styles.json} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
container: css`
|
||||
padding: ${theme.spacing(0.5)};
|
||||
`,
|
||||
json: css`
|
||||
max-width: fit-content;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
`,
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user