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: debug mode tweaks (#23802)

Browse Source
This commit is contained in:
Dominik Prokop 2020-04-23 09:56:56 +02:00 committed by GitHub
parent 906cc6d317
commit 4b42697912
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 78 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
{debugMode && (
<div className={styles.debugWrapper}>
<div className={styles.debug}>
<div className={styles.debugTitle}>Input</div>
<div className={styles.debugTitle}>Transformation input data</div>
<div className={styles.debugJson}>
<JSONFormatter json={input} />
</div>
@ -31,7 +31,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
<Icon name="arrow-right" />
</div>
<div className={styles.debug}>
<div className={styles.debugTitle}>Output</div>
<div className={styles.debugTitle}>Transformation output data</div>
<div className={styles.debugJson}>
<JSONFormatter json={output} />
</div>
@ -42,73 +42,80 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
);
};
const getStyles = (theme: GrafanaTheme) => ({
title: css`
display: flex;
padding: 4px 8px 4px 8px;
position: relative;
height: 35px;
border-radius: 4px 4px 0 0;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
`,
name: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.colors.textBlue};
`,
iconRow: css`
display: flex;
`,
icon: css`
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
color: ${theme.colors.textWeak};
margin-left: ${theme.spacing.sm};
&:hover {
color: ${theme.colors.text};
}
`,
editor: css``,
debugWrapper: css`
display: flex;
flex-direction: row;
`,
debugSeparator: css`
width: 48px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 ${theme.spacing.xs};
`,
debugTitle: css`
padding: ${theme.spacing.xxs};
text-align: center;
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
color: ${theme.palette.blue80};
border-bottom: 1px dashed ${theme.palette.gray15};
flex-grow: 0;
flex-shrink: 1;
`,
const getStyles = (theme: GrafanaTheme) => {
const debugBorder = theme.isLight ? theme.palette.gray85 : theme.palette.gray15;
debug: css`
margin-top: ${theme.spacing.md};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
border: 1px dashed ${theme.palette.gray15};
background: ${theme.palette.gray05};
border-radius: ${theme.border.radius.sm};
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
`,
debugJson: css`
flex-grow: 1;
height: 100%;
overflow: hidden;
`,
});
return {
title: css`
display: flex;
padding: 4px 8px 4px 8px;
position: relative;
height: 35px;
border-radius: 4px 4px 0 0;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
`,
name: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.colors.textBlue};
`,
iconRow: css`
display: flex;
`,
icon: css`
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
color: ${theme.colors.textWeak};
margin-left: ${theme.spacing.sm};
&:hover {
color: ${theme.colors.text};
}
`,
editor: css``,
debugWrapper: css`
display: flex;
flex-direction: row;
`,
debugSeparator: css`
width: 48px;
min-height: 300px;
display: flex;
align-items: center;
align-self: stretch;
justify-content: center;
margin: 0 ${theme.spacing.xs};
color: ${theme.colors.textBlue};
`,
debugTitle: css`
padding: ${theme.spacing.sm} ${theme.spacing.xxs};
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.text};
border-bottom: 1px solid ${debugBorder};
flex-grow: 0;
flex-shrink: 1;
`,
debug: css`
margin-top: ${theme.spacing.sm};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
border: 1px solid ${debugBorder};
background: ${theme.isLight ? theme.palette.white : theme.palette.gray05};
border-radius: ${theme.border.radius.sm};
width: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
align-self: stretch;
`,
debugJson: css`
flex-grow: 1;
height: 100%;
overflow: hidden;
padding: ${theme.spacing.xs};
`,
};
};