Chore: Rewrite grafana-flamegraph css using object styles (#86816)
This commit is contained in:
kay delaney
@@ -454,46 +454,6 @@ exports[`better eslint`] = {
|
|||||||
"packages/grafana-data/test/__mocks__/pluginMocks.ts:5381": [
|
"packages/grafana-data/test/__mocks__/pluginMocks.ts:5381": [
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||||
],
|
],
|
||||||
"packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"]
|
|
||||||
],
|
|
||||||
"packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"]
|
|
||||||
],
|
|
||||||
"packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"]
|
|
||||||
],
|
|
||||||
"packages/grafana-flamegraph/src/FlameGraphHeader.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "6"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "7"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "8"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "9"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "10"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "11"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "12"]
|
|
||||||
],
|
|
||||||
"packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
|
||||||
],
|
|
||||||
"packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [
|
"packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [
|
||||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -185,33 +185,32 @@ const FlameGraph = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getStyles = () => ({
|
const getStyles = () => ({
|
||||||
graph: css`
|
graph: css({
|
||||||
label: graph;
|
label: 'graph',
|
||||||
overflow: auto;
|
overflow: 'auto',
|
||||||
flex-grow: 1;
|
flexGrow: 1,
|
||||||
flex-basis: 50%;
|
flexBasis: '50%',
|
||||||
`,
|
}),
|
||||||
sandwichCanvasWrapper: css`
|
sandwichCanvasWrapper: css({
|
||||||
label: sandwichCanvasWrapper;
|
label: 'sandwichCanvasWrapper',
|
||||||
display: flex;
|
display: 'flex',
|
||||||
margin-bottom: ${PIXELS_PER_LEVEL / window.devicePixelRatio}px;
|
marginBottom: `${PIXELS_PER_LEVEL / window.devicePixelRatio}px`,
|
||||||
`,
|
}),
|
||||||
sandwichMarker: css`
|
sandwichMarker: css({
|
||||||
label: sandwichMarker;
|
label: 'sandwichMarker',
|
||||||
writing-mode: vertical-lr;
|
writingMode: 'vertical-lr',
|
||||||
transform: rotate(180deg);
|
transform: 'rotate(180deg)',
|
||||||
overflow: hidden;
|
overflow: 'hidden',
|
||||||
white-space: nowrap;
|
whiteSpace: 'nowrap',
|
||||||
`,
|
}),
|
||||||
|
sandwichMarkerCalees: css({
|
||||||
sandwichMarkerCalees: css`
|
label: 'sandwichMarkerCalees',
|
||||||
label: sandwichMarkerCalees;
|
textAlign: 'right',
|
||||||
text-align: right;
|
}),
|
||||||
`,
|
sandwichMarkerIcon: css({
|
||||||
sandwichMarkerIcon: css`
|
label: 'sandwichMarkerIcon',
|
||||||
label: sandwichMarkerIcon;
|
verticalAlign: 'baseline',
|
||||||
vertical-align: baseline;
|
}),
|
||||||
`,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default FlameGraph;
|
export default FlameGraph;
|
||||||
|
|||||||
@@ -89,36 +89,35 @@ const FlameGraphMetadata = React.memo(
|
|||||||
FlameGraphMetadata.displayName = 'FlameGraphMetadata';
|
FlameGraphMetadata.displayName = 'FlameGraphMetadata';
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => ({
|
const getStyles = (theme: GrafanaTheme2) => ({
|
||||||
metadataPill: css`
|
metadataPill: css({
|
||||||
label: metadataPill;
|
label: 'metadataPill',
|
||||||
display: inline-flex;
|
display: 'inline-flex',
|
||||||
align-items: center;
|
alignItems: 'center',
|
||||||
background: ${theme.colors.background.secondary};
|
background: theme.colors.background.secondary,
|
||||||
border-radius: ${theme.shape.borderRadius(8)};
|
borderRadius: theme.shape.borderRadius(8),
|
||||||
padding: ${theme.spacing(0.5, 1)};
|
padding: theme.spacing(0.5, 1),
|
||||||
font-size: ${theme.typography.bodySmall.fontSize};
|
fontSize: theme.typography.bodySmall.fontSize,
|
||||||
font-weight: ${theme.typography.fontWeightMedium};
|
fontWeight: theme.typography.fontWeightMedium,
|
||||||
line-height: ${theme.typography.bodySmall.lineHeight};
|
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
`,
|
}),
|
||||||
|
pillCloseButton: css({
|
||||||
pillCloseButton: css`
|
label: 'pillCloseButton',
|
||||||
label: pillCloseButton;
|
verticalAlign: 'text-bottom',
|
||||||
vertical-align: text-bottom;
|
margin: theme.spacing(0, 0.5),
|
||||||
margin: ${theme.spacing(0, 0.5)};
|
}),
|
||||||
`,
|
metadata: css({
|
||||||
metadata: css`
|
margin: '8px 0',
|
||||||
margin: 8px 0;
|
textAlign: 'center',
|
||||||
text-align: center;
|
}),
|
||||||
`,
|
metadataPillName: css({
|
||||||
metadataPillName: css`
|
label: 'metadataPillName',
|
||||||
label: metadataPillName;
|
maxWidth: '200px',
|
||||||
max-width: 200px;
|
overflow: 'hidden',
|
||||||
overflow: hidden;
|
textOverflow: 'ellipsis',
|
||||||
text-overflow: ellipsis;
|
whiteSpace: 'nowrap',
|
||||||
white-space: nowrap;
|
marginLeft: theme.spacing(0.5),
|
||||||
margin-left: ${theme.spacing(0.5)};
|
}),
|
||||||
`,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default FlameGraphMetadata;
|
export default FlameGraphMetadata;
|
||||||
|
|||||||
@@ -182,33 +182,33 @@ function getValueWithUnit(data: FlameGraphDataContainer, displayValue: DisplayVa
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => ({
|
const getStyles = (theme: GrafanaTheme2) => ({
|
||||||
tooltipContainer: css`
|
tooltipContainer: css({
|
||||||
title: tooltipContainer;
|
title: 'tooltipContainer',
|
||||||
overflow: hidden;
|
overflow: 'hidden',
|
||||||
`,
|
}),
|
||||||
tooltipContent: css`
|
tooltipContent: css({
|
||||||
title: tooltipContent;
|
title: 'tooltipContent',
|
||||||
font-size: ${theme.typography.bodySmall.fontSize};
|
fontSize: theme.typography.bodySmall.fontSize,
|
||||||
width: 100%;
|
width: '100%',
|
||||||
`,
|
}),
|
||||||
tooltipName: css`
|
tooltipName: css({
|
||||||
title: tooltipName;
|
title: 'tooltipName',
|
||||||
margin-top: 0;
|
marginTop: 0,
|
||||||
word-break: break-all;
|
wordBreak: 'break-all',
|
||||||
`,
|
}),
|
||||||
lastParagraph: css`
|
lastParagraph: css({
|
||||||
title: lastParagraph;
|
title: 'lastParagraph',
|
||||||
margin-bottom: 0;
|
marginBottom: 0,
|
||||||
`,
|
}),
|
||||||
name: css`
|
name: css({
|
||||||
title: name;
|
title: 'name',
|
||||||
margin-bottom: 10px;
|
marginBottom: '10px',
|
||||||
`,
|
}),
|
||||||
|
|
||||||
tooltipTable: css`
|
tooltipTable: css({
|
||||||
title: tooltipTable;
|
title: 'tooltipTable',
|
||||||
max-width: 400px;
|
maxWidth: '400px',
|
||||||
`,
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default FlameGraphTooltip;
|
export default FlameGraphTooltip;
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ const FlameGraphHeader = ({
|
|||||||
vertical,
|
vertical,
|
||||||
isDiffMode,
|
isDiffMode,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const styles = useStyles2(getStyles, stickyHeader);
|
const styles = useStyles2(getStyles);
|
||||||
const [localSearch, setLocalSearch] = useSearchInput(search, setSearch);
|
const [localSearch, setLocalSearch] = useSearchInput(search, setSearch);
|
||||||
|
|
||||||
const suffix =
|
const suffix =
|
||||||
@@ -66,7 +66,7 @@ const FlameGraphHeader = ({
|
|||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.header}>
|
<div className={cx(styles.header, { [styles.stickyHeader]: stickyHeader })}>
|
||||||
<div className={styles.inputContainer}>
|
<div className={styles.inputContainer}>
|
||||||
<Input
|
<Input
|
||||||
value={localSearch || ''}
|
value={localSearch || ''}
|
||||||
@@ -121,7 +121,7 @@ type ColorSchemeButtonProps = {
|
|||||||
};
|
};
|
||||||
function ColorSchemeButton(props: ColorSchemeButtonProps) {
|
function ColorSchemeButton(props: ColorSchemeButtonProps) {
|
||||||
// TODO: probably create separate getStyles
|
// TODO: probably create separate getStyles
|
||||||
const styles = useStyles2(getStyles, false);
|
const styles = useStyles2(getStyles);
|
||||||
let menu = (
|
let menu = (
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item label="By package name" onClick={() => props.onChange(ColorScheme.PackageBased)} />
|
<Menu.Item label="By package name" onClick={() => props.onChange(ColorScheme.PackageBased)} />
|
||||||
@@ -213,79 +213,77 @@ function useSearchInput(
|
|||||||
return [localSearchState, setLocalSearchState];
|
return [localSearchState, setLocalSearchState];
|
||||||
}
|
}
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2, sticky?: boolean) => ({
|
const getStyles = (theme: GrafanaTheme2) => ({
|
||||||
header: css`
|
header: css({
|
||||||
label: header;
|
label: 'header',
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-wrap: wrap;
|
flexWrap: 'wrap',
|
||||||
justify-content: space-between;
|
justifyContent: 'space-between',
|
||||||
width: 100%;
|
width: '100%',
|
||||||
top: 0;
|
top: 0,
|
||||||
${sticky
|
}),
|
||||||
? css`
|
stickyHeader: css({
|
||||||
z-index: ${theme.zIndex.navbarFixed};
|
zIndex: theme.zIndex.navbarFixed,
|
||||||
position: sticky;
|
position: 'sticky',
|
||||||
padding-bottom: ${theme.spacing(1)};
|
paddingBottom: theme.spacing(1),
|
||||||
padding-top: ${theme.spacing(1)};
|
paddingTop: theme.spacing(1),
|
||||||
background: ${theme.colors.background.primary};
|
background: theme.colors.background.primary,
|
||||||
`
|
}),
|
||||||
: ''};
|
inputContainer: css({
|
||||||
`,
|
label: 'inputContainer',
|
||||||
inputContainer: css`
|
marginRight: '20px',
|
||||||
label: inputContainer;
|
flexGrow: 1,
|
||||||
margin-right: 20px;
|
minWidth: '150px',
|
||||||
flex-grow: 1;
|
maxWidth: '350px',
|
||||||
min-width: 150px;
|
}),
|
||||||
max-width: 350px;
|
rightContainer: css({
|
||||||
`,
|
label: 'rightContainer',
|
||||||
rightContainer: css`
|
display: 'flex',
|
||||||
label: rightContainer;
|
alignItems: 'flex-start',
|
||||||
display: flex;
|
flexWrap: 'wrap',
|
||||||
align-items: flex-start;
|
}),
|
||||||
flex-wrap: wrap;
|
buttonSpacing: css({
|
||||||
`,
|
label: 'buttonSpacing',
|
||||||
buttonSpacing: css`
|
marginRight: theme.spacing(1),
|
||||||
label: buttonSpacing;
|
}),
|
||||||
margin-right: ${theme.spacing(1)};
|
resetButton: css({
|
||||||
`,
|
label: 'resetButton',
|
||||||
|
display: 'flex',
|
||||||
resetButton: css`
|
marginRight: theme.spacing(2),
|
||||||
label: resetButton;
|
}),
|
||||||
display: flex;
|
resetButtonIconWrapper: css({
|
||||||
margin-right: ${theme.spacing(2)};
|
label: 'resetButtonIcon',
|
||||||
`,
|
padding: '0 5px',
|
||||||
resetButtonIconWrapper: css`
|
color: theme.colors.text.disabled,
|
||||||
label: resetButtonIcon;
|
}),
|
||||||
padding: 0 5px;
|
colorDot: css({
|
||||||
color: ${theme.colors.text.disabled};
|
label: 'colorDot',
|
||||||
`,
|
display: 'inline-block',
|
||||||
colorDot: css`
|
width: '10px',
|
||||||
label: colorDot;
|
height: '10px',
|
||||||
display: inline-block;
|
// eslint-disable-next-line @grafana/no-border-radius-literal
|
||||||
width: 10px;
|
borderRadius: '50%',
|
||||||
height: 10px;
|
}),
|
||||||
border-radius: 50%;
|
colorDotByValue: css({
|
||||||
`,
|
label: 'colorDotByValue',
|
||||||
colorDotByValue: css`
|
background: byValueGradient,
|
||||||
label: colorDotByValue;
|
}),
|
||||||
background: ${byValueGradient};
|
colorDotByPackage: css({
|
||||||
`,
|
label: 'colorDotByPackage',
|
||||||
colorDotByPackage: css`
|
background: byPackageGradient,
|
||||||
label: colorDotByPackage;
|
}),
|
||||||
background: ${byPackageGradient};
|
colorDotDiffDefault: css({
|
||||||
`,
|
label: 'colorDotDiffDefault',
|
||||||
colorDotDiffDefault: css`
|
background: diffDefaultGradient,
|
||||||
label: colorDotDiffDefault;
|
}),
|
||||||
background: ${diffDefaultGradient};
|
colorDotDiffColorBlind: css({
|
||||||
`,
|
label: 'colorDotDiffColorBlind',
|
||||||
colorDotDiffColorBlind: css`
|
background: diffColorBlindGradient,
|
||||||
label: colorDotDiffColorBlind;
|
}),
|
||||||
background: ${diffColorBlindGradient};
|
extraElements: css({
|
||||||
`,
|
label: 'extraElements',
|
||||||
extraElements: css`
|
marginLeft: theme.spacing(1),
|
||||||
label: extraElements;
|
}),
|
||||||
margin-left: ${theme.spacing(1)};
|
|
||||||
`,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default FlameGraphHeader;
|
export default FlameGraphHeader;
|
||||||
|
|||||||
@@ -332,17 +332,16 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
|
|
||||||
const getStylesActionCell = () => {
|
const getStylesActionCell = () => {
|
||||||
return {
|
return {
|
||||||
actionCellWrapper: css`
|
actionCellWrapper: css({
|
||||||
label: actionCellWrapper;
|
label: 'actionCellWrapper',
|
||||||
display: flex;
|
display: 'flex',
|
||||||
height: 24px;
|
height: '24px',
|
||||||
`,
|
}),
|
||||||
|
actionCellButton: css({
|
||||||
actionCellButton: css`
|
label: 'actionCellButton',
|
||||||
label: actionCellButton;
|
marginRight: 0,
|
||||||
margin-right: 0;
|
width: '24px',
|
||||||
width: 24px;
|
}),
|
||||||
`,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user