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

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

Browse Source 
* use JSONCell for value

* remove console log and usememo
This commit is contained in:
Peter Holmberg 2021-11-29 16:39:58 +01:00 committed by GitHub
parent 8d6831f21f
commit 8bf6011450
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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