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

Transformations: Move debug to drawer (#76281)

Browse Source 
* Move debug to drawer
* Prettier
* Remove render actions arg
* Remove unused import
This commit is contained in:
Kyle Cunningham 2023-10-27 10:30:31 -05:00 committed by GitHub
parent 046791e2be
commit 470d879c80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
View File

@ -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
public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
View File

@ -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>
);