IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table: Makes tooltip scrollable for long JSON values (#34120)

Browse Source
This commit is contained in:
Hugo Häggmark 2021-05-17 10:19:41 +02:00 committed by GitHub
parent 8a0dbd0127
commit d721298e03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/grafana-ui/src/components/Table/JSONViewCell.tsx
View File

@ -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;
`,
};
}