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

42
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 { css, cx } from '@emotion/css';
import { isString } from 'lodash'; import { isString } from 'lodash';
import { Tooltip } from '../Tooltip/Tooltip'; import { Tooltip } from '../Tooltip/Tooltip';
import { JSONFormatter } from '../JSONFormatter/JSONFormatter'; import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
import { useStyles } from '../../themes'; import { useStyles2 } from '../../themes';
import { TableCellProps } from './types'; 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 { cell, tableStyles, cellProps } = props;
const txt = css` const txt = css`
@ -29,32 +29,38 @@ export const JSONViewCell: FC<TableCellProps> = (props) => {
const content = <JSONTooltip value={value} />; const content = <JSONTooltip value={value} />;
return ( return (
<Tooltip placement="auto-start" content={content} theme="info-alt">
<div {...cellProps} className={tableStyles.cellContainer}> <div {...cellProps} className={tableStyles.cellContainer}>
<Tooltip placement="auto" content={content} theme="info-alt">
<div className={cx(tableStyles.cellText, txt)}>{displayValue}</div> <div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
</Tooltip>
</div> </div>
</Tooltip>
); );
}; }
interface PopupProps { interface PopupProps {
value: any; value: any;
} }
const JSONTooltip: FC<PopupProps> = (props) => { function JSONTooltip(props: PopupProps): JSX.Element {
const styles = useStyles((theme: GrafanaTheme) => { const styles = useStyles2(getStyles);
return {
container: css`
padding: ${theme.spacing.xs};
`,
};
});
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div> <div>
<JSONFormatter json={props.value} open={4} /> <JSONFormatter json={props.value} open={4} className={styles.json} />
</div> </div>
</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;
`,
};
}