diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx index bf050c24d5..06a76b9943 100644 --- a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx +++ b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx @@ -222,6 +222,10 @@ export default function FlameGraphComponent(props: FlamegraphProps) { }; const OpenInSandwichViewItem = () => { + if (!updateView) { + return null; + } + const handleClick = () => { if (updateView) { updateView('sandwich'); @@ -271,7 +275,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) { HighlightSimilarNodesItem(), OpenInSandwichViewItem(), FitModeItem(), - ]; + ].filter(Boolean) as JSX.Element[]; }, [flamegraph, selectedItem, fitMode] ); diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx index afd453b452..d93de6e923 100644 --- a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx +++ b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx @@ -425,7 +425,7 @@ class FlameGraphRenderer extends Component< highlightQuery={this.getHighlightQuery()} setActiveItem={this.setActiveItem} selectedItem={this.state.selectedItem} - updateView={this.updateView} + updateView={this.props.onlyDisplay ? undefined : this.updateView} fitMode={this.state.fitMode} updateFitMode={this.updateFitMode} zoom={this.state.flamegraphConfigs.zoom} diff --git a/packages/pyroscope-panel-plugin/src/SimplePanel.tsx b/packages/pyroscope-panel-plugin/src/SimplePanel.tsx index 555acf22bb..7193c532e2 100644 --- a/packages/pyroscope-panel-plugin/src/SimplePanel.tsx +++ b/packages/pyroscope-panel-plugin/src/SimplePanel.tsx @@ -22,8 +22,9 @@ export const SimplePanel: React.FC = ({ options, data }) => {
} - onlyDisplay="flamegraph" + onlyDisplay={ + options.displayOnly === 'off' ? undefined : options.displayOnly + } showToolbar={options.showToolbar} colorMode={config.theme2.colors.mode} /> diff --git a/packages/pyroscope-panel-plugin/src/module.ts b/packages/pyroscope-panel-plugin/src/module.ts index ec33a81dba..e9d3d61154 100644 --- a/packages/pyroscope-panel-plugin/src/module.ts +++ b/packages/pyroscope-panel-plugin/src/module.ts @@ -19,11 +19,27 @@ loadPluginCss({ export const plugin = new PanelPlugin( SimplePanel ).setPanelOptions((builder) => { - return builder.addBooleanSwitch({ - description: - 'Whether to show the toolbar. Keep in mind most of the same functionality can be accessed by right-clicking the flamegraph.', - path: 'showToolbar', - name: 'Show toolbar', - defaultValue: false, - }); + return builder + .addBooleanSwitch({ + description: + 'Whether to show the toolbar. Keep in mind most of the same functionality can be accessed by right-clicking the flamegraph.', + path: 'showToolbar', + name: 'Show toolbar', + defaultValue: false, + }) + .addSelect({ + path: 'displayOnly', + name: 'Display only', + description: 'Only display a single view, not allowing to change', + defaultValue: 'flamegraph', + settings: { + options: [ + { value: 'flamegraph', label: 'Flamegraph' }, + { value: 'table', label: 'Table' }, + { value: 'both', label: 'Flamegraph + Table' }, + { value: 'sandwich', label: 'Sandwich' }, + { value: 'off', label: 'Off' }, + ], + }, + }); }); diff --git a/packages/pyroscope-panel-plugin/src/types.ts b/packages/pyroscope-panel-plugin/src/types.ts index 00bb64537a..72e79730f4 100644 --- a/packages/pyroscope-panel-plugin/src/types.ts +++ b/packages/pyroscope-panel-plugin/src/types.ts @@ -6,4 +6,5 @@ export interface SimpleOptions { seriesCountSize: SeriesSize; showToolbar: boolean; + displayOnly: 'flamegraph' | 'table' | 'both' | 'sandwich' | 'off'; }