Skip to content

N
nexpie-grafana-theme
Commit 4b426979 by Dominik Prokop Committed by GitHub
Options

Transformations: debug mode tweaks (#23802)

parent 906cc6d3
Showing with 77 additions and 70 deletions
public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
...@@ -22,7 +22,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans ...@@ -22,7 +22,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
{debugMode && ( {debugMode && (
<div className={styles.debugWrapper}> <div className={styles.debugWrapper}>
<div className={styles.debug}> <div className={styles.debug}>
<div className={styles.debugTitle}>Input</div> <div className={styles.debugTitle}>Transformation input data</div>
<div className={styles.debugJson}> <div className={styles.debugJson}>
<JSONFormatter json={input} /> <JSONFormatter json={input} />
</div> </div>
...@@ -31,7 +31,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans ...@@ -31,7 +31,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
<Icon name="arrow-right" /> <Icon name="arrow-right" />
</div> </div>
<div className={styles.debug}> <div className={styles.debug}>
<div className={styles.debugTitle}>Output</div> <div className={styles.debugTitle}>Transformation output data</div>
<div className={styles.debugJson}> <div className={styles.debugJson}>
<JSONFormatter json={output} /> <JSONFormatter json={output} />
</div> </div>
...@@ -42,73 +42,80 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans ...@@ -42,73 +42,80 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
); );
}; };
const getStyles = (theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme) => {
title: css` const debugBorder = theme.isLight ? theme.palette.gray85 : theme.palette.gray15;
display: flex;
padding: 4px 8px 4px 8px; return {
position: relative; title: css`
height: 35px; display: flex;
border-radius: 4px 4px 0 0; padding: 4px 8px 4px 8px;
flex-wrap: nowrap; position: relative;
justify-content: space-between; height: 35px;
align-items: center; border-radius: 4px 4px 0 0;
`, flex-wrap: nowrap;
name: css` justify-content: space-between;
font-weight: ${theme.typography.weight.semibold}; align-items: center;
color: ${theme.colors.textBlue}; `,
`, name: css`
iconRow: css` font-weight: ${theme.typography.weight.semibold};
display: flex; color: ${theme.colors.textBlue};
`, `,
icon: css` iconRow: css`
background: transparent; display: flex;
border: none; `,
box-shadow: none; icon: css`
cursor: pointer; background: transparent;
color: ${theme.colors.textWeak}; border: none;
margin-left: ${theme.spacing.sm}; box-shadow: none;
&:hover { 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}; color: ${theme.colors.text};
} border-bottom: 1px solid ${debugBorder};
`, flex-grow: 0;
editor: css``, flex-shrink: 1;
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;
`,
debug: css` debug: css`
margin-top: ${theme.spacing.md}; margin-top: ${theme.spacing.sm};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm}; padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
border: 1px dashed ${theme.palette.gray15}; border: 1px solid ${debugBorder};
background: ${theme.palette.gray05}; background: ${theme.isLight ? theme.palette.white : theme.palette.gray05};
border-radius: ${theme.border.radius.sm}; border-radius: ${theme.border.radius.sm};
width: 100%; width: 100%;
height: 300px; min-height: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
`, align-self: stretch;
debugJson: css` `,
flex-grow: 1; debugJson: css`
height: 100%; flex-grow: 1;
overflow: hidden; height: 100%;
`, overflow: hidden;
}); padding: ${theme.spacing.xs};
`,
};
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment