mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Transformations: Move debug to drawer (#76281)
* Move debug to drawer * Prettier * Remove render actions arg * Remove unused import
This commit is contained in:
parent
046791e2be
commit
470d879c80
@ -13,7 +13,7 @@ import {
|
||||
} from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { getTemplateSrv } from '@grafana/runtime';
|
||||
import { Icon, JSONFormatter, useStyles2 } from '@grafana/ui';
|
||||
import { Icon, JSONFormatter, useStyles2, Drawer } from '@grafana/ui';
|
||||
|
||||
import { TransformationsEditorTransformation } from './types';
|
||||
|
||||
@ -24,6 +24,7 @@ interface TransformationEditorProps {
|
||||
uiConfig: TransformerRegistryItem<any>;
|
||||
configs: TransformationsEditorTransformation[];
|
||||
onChange: (index: number, config: DataTransformerConfig) => void;
|
||||
toggleShowDebug: () => void;
|
||||
}
|
||||
|
||||
export const TransformationEditor = ({
|
||||
@ -33,6 +34,7 @@ export const TransformationEditor = ({
|
||||
uiConfig,
|
||||
configs,
|
||||
onChange,
|
||||
toggleShowDebug,
|
||||
}: TransformationEditorProps) => {
|
||||
const styles = useStyles2(getStyles);
|
||||
const [input, setInput] = useState<DataFrame[]>([]);
|
||||
@ -84,32 +86,32 @@ export const TransformationEditor = ({
|
||||
<div className={styles.editor} data-testid={selectors.components.TransformTab.transformationEditor(uiConfig.name)}>
|
||||
{editor}
|
||||
{debugMode && (
|
||||
<div
|
||||
className={styles.debugWrapper}
|
||||
data-testid={selectors.components.TransformTab.transformationEditorDebugger(uiConfig.name)}
|
||||
>
|
||||
<div className={styles.debug}>
|
||||
<div className={styles.debugTitle}>Transformation input data</div>
|
||||
<div className={styles.debugJson}>
|
||||
<JSONFormatter json={input} />
|
||||
<Drawer title="Debug transformation" subtitle={uiConfig.name} onClose={toggleShowDebug}>
|
||||
<div
|
||||
className={styles.debugWrapper}
|
||||
data-testid={selectors.components.TransformTab.transformationEditorDebugger(uiConfig.name)}
|
||||
>
|
||||
<div className={styles.debug}>
|
||||
<div className={styles.debugTitle}>Input data</div>
|
||||
<div className={styles.debugJson}>
|
||||
<JSONFormatter json={input} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.debugSeparator}>
|
||||
<Icon name="arrow-right" />
|
||||
</div>
|
||||
<div className={styles.debug}>
|
||||
<div className={styles.debugTitle}>Output data</div>
|
||||
<div className={styles.debugJson}>{output && <JSONFormatter json={output} />}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.debugSeparator}>
|
||||
<Icon name="arrow-right" />
|
||||
</div>
|
||||
<div className={styles.debug}>
|
||||
<div className={styles.debugTitle}>Transformation output data</div>
|
||||
<div className={styles.debugJson}>{output && <JSONFormatter json={output} />}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
const debugBorder = theme.isLight ? theme.v1.palette.gray85 : theme.v1.palette.gray15;
|
||||
|
||||
return {
|
||||
title: css`
|
||||
display: flex;
|
||||
@ -159,7 +161,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
font-family: ${theme.typography.fontFamilyMonospace};
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
color: ${theme.colors.text};
|
||||
border-bottom: 1px solid ${debugBorder};
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
`,
|
||||
@ -167,7 +169,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
debug: css`
|
||||
margin-top: ${theme.spacing(1)};
|
||||
padding: 0 ${theme.spacing(1, 1, 1)};
|
||||
border: 1px solid ${debugBorder};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
width: 100%;
|
||||
|
@ -9,10 +9,7 @@ import {
|
||||
QueryOperationAction,
|
||||
QueryOperationToggleAction,
|
||||
} from 'app/core/components/QueryOperationRow/QueryOperationAction';
|
||||
import {
|
||||
QueryOperationRow,
|
||||
QueryOperationRowRenderProps,
|
||||
} from 'app/core/components/QueryOperationRow/QueryOperationRow';
|
||||
import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
|
||||
import config from 'app/core/config';
|
||||
import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
|
||||
|
||||
@ -101,7 +98,7 @@ export const TransformationOperationRow = ({
|
||||
[configs, index]
|
||||
);
|
||||
|
||||
const renderActions = ({ isOpen }: QueryOperationRowRenderProps) => {
|
||||
const renderActions = () => {
|
||||
return (
|
||||
<>
|
||||
{uiConfig.state && <PluginStateInfo state={uiConfig.state} />}
|
||||
@ -122,7 +119,6 @@ export const TransformationOperationRow = ({
|
||||
)}
|
||||
<QueryOperationToggleAction
|
||||
title="Debug"
|
||||
disabled={!isOpen}
|
||||
icon="bug"
|
||||
onClick={instrumentToggleCallback(toggleShowDebug, 'debug', showDebug)}
|
||||
active={showDebug}
|
||||
@ -183,6 +179,7 @@ export const TransformationOperationRow = ({
|
||||
configs={configs}
|
||||
uiConfig={uiConfig}
|
||||
onChange={onChange}
|
||||
toggleShowDebug={toggleShowDebug}
|
||||
/>
|
||||
</QueryOperationRow>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user