From e2dde66b3fdfae56f64f7973c58ab5c10d833ef1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 13 Apr 2023 15:27:01 +0200 Subject: [PATCH] FlameGraph: Refactor and simplify styles (#66433) * FrameGraphTopTable: Use standard Table component * Simplify * Fix test * Update tests * Fixing test * FlameGraph: Refactor and simplify styles * updated --- .../panel/flamegraph/FlameGraphPanel.tsx | 2 +- .../components/FlameGraph/FlameGraph.tsx | 15 ++- .../components/FlameGraphContainer.tsx | 97 ++++++++++--------- .../TopTable/FlameGraphTopTableContainer.tsx | 16 +-- 4 files changed, 65 insertions(+), 65 deletions(-) diff --git a/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx b/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx index f7c289c6e9b..5f3212f6e69 100644 --- a/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx +++ b/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx @@ -5,5 +5,5 @@ import { CoreApp, PanelProps } from '@grafana/data'; import FlameGraphContainer from './components/FlameGraphContainer'; export const FlameGraphPanel = (props: PanelProps) => { - return ; + return ; }; diff --git a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx index ed381659a5f..dd450a5b2f3 100644 --- a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx +++ b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx @@ -22,6 +22,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { useMeasure } from 'react-use'; import { CoreApp } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { PIXELS_PER_LEVEL } from '../../constants'; import { SelectedView, ContextMenuData } from '../types'; @@ -35,7 +36,6 @@ import { getBarX, getRectDimensionsForLevel, renderRect } from './rendering'; type Props = { data: FlameGraphDataContainer; app: CoreApp; - flameGraphHeight?: number; levels: LevelItem[][]; topLevelIndex: number; selectedBarIndex: number; @@ -53,7 +53,6 @@ type Props = { const FlameGraph = ({ data, app, - flameGraphHeight, levels, topLevelIndex, selectedBarIndex, @@ -66,7 +65,7 @@ const FlameGraph = ({ setRangeMax, selectedView, }: Props) => { - const styles = getStyles(selectedView, app, flameGraphHeight); + const styles = useStyles2(getStyles); const totalTicks = data.getValue(0); const [sizeRef, { width: wrapperWidth }] = useMeasure(); @@ -233,14 +232,12 @@ const FlameGraph = ({ ); }; -const getStyles = (selectedView: SelectedView, app: CoreApp, flameGraphHeight: number | undefined) => ({ +const getStyles = () => ({ graph: css` - float: left; overflow: scroll; - width: ${selectedView === SelectedView.FlameGraph ? '100%' : '50%'}; - ${app !== CoreApp.Explore - ? `height: calc(${flameGraphHeight}px - 50px)` - : ''}; // 50px to adjust for header pushing content down + height: 100%; + flex-grow: 1; + flex-basis: 50%; `, canvasContainer: css` cursor: pointer; diff --git a/public/app/plugins/panel/flamegraph/components/FlameGraphContainer.tsx b/public/app/plugins/panel/flamegraph/components/FlameGraphContainer.tsx index df4368b782f..ae3724c4f0b 100644 --- a/public/app/plugins/panel/flamegraph/components/FlameGraphContainer.tsx +++ b/public/app/plugins/panel/flamegraph/components/FlameGraphContainer.tsx @@ -2,10 +2,10 @@ import { css } from '@emotion/css'; import React, { useEffect, useMemo, useState } from 'react'; import { useMeasure } from 'react-use'; -import { DataFrame, CoreApp } from '@grafana/data'; +import { DataFrame, CoreApp, GrafanaTheme2 } from '@grafana/data'; import { useStyles2, useTheme2 } from '@grafana/ui'; -import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH, PIXELS_PER_LEVEL } from '../constants'; +import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from '../constants'; import FlameGraph from './FlameGraph/FlameGraph'; import { FlameGraphDataContainer, LevelItem, nestedSetToLevels } from './FlameGraph/dataTransform'; @@ -16,10 +16,6 @@ import { SelectedView } from './types'; type Props = { data?: DataFrame; app: CoreApp; - // Height for flame graph when not used in explore. - // This needs to be different to explore flame graph height as we - // use panels with user adjustable heights in dashboards etc. - flameGraphHeight?: number; }; const FlameGraphContainer = (props: Props) => { @@ -44,7 +40,7 @@ const FlameGraphContainer = (props: Props) => { return [container, nestedSetToLevels(container)]; }, [props.data, theme]); - const styles = useStyles2(() => getStyles(props.app, PIXELS_PER_LEVEL * (levels?.length ?? 0))); + const styles = useStyles2(getStyles); // If user resizes window with both as the selected view useEffect(() => { @@ -81,49 +77,62 @@ const FlameGraphContainer = (props: Props) => { containerWidth={containerWidth} /> - {selectedView !== SelectedView.FlameGraph && ( - - )} +
+ {selectedView !== SelectedView.FlameGraph && ( + + )} - {selectedView !== SelectedView.TopTable && ( - - )} + {selectedView !== SelectedView.TopTable && ( + + )} +
)} ); }; -const getStyles = (app: CoreApp, height: number) => ({ - container: css` - height: ${app === CoreApp.Explore ? height + 'px' : '100%'}; - `, -}); +function getStyles(theme: GrafanaTheme2) { + return { + container: css({ + height: '100%', + display: 'flex', + flex: '1 1 0', + flexDirection: 'column', + minHeight: 0, + gap: theme.spacing(2), + }), + body: css({ + display: 'flex', + flexGrow: 1, + minHeight: 0, + }), + }; +} export default FlameGraphContainer; diff --git a/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx b/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx index 3ef85d5e51b..5e7c4a78e5e 100644 --- a/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx +++ b/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx @@ -43,7 +43,7 @@ const FlameGraphTopTableContainer = ({ setRangeMin, setRangeMax, }: Props) => { - const styles = useStyles2(() => getStyles(selectedView, app)); + const styles = useStyles2(getStyles); const onSymbolClick = (symbol: string) => { if (search === symbol) { @@ -148,18 +148,12 @@ function buildTableDataFrame( return dataFrames[0]; } -const getStyles = (selectedView: SelectedView, app: CoreApp) => { - const marginRight = '20px'; - +const getStyles = () => { return { topTableContainer: css` - cursor: pointer; - float: left; - margin-right: ${marginRight}; - width: ${selectedView === SelectedView.TopTable ? '100%' : `calc(50% - ${marginRight})`}; - ${app !== CoreApp.Explore - ? 'height: calc(100% - 50px)' - : 'height: calc(100% + 50px)'}; // 50px to adjust for header pushing content down + flex-grow: 1; + flex-basis: 50%; + overflow: hidden; `, }; };