feat(panel-plugin): allow setting different views (#1712)

* fix(flamegraph): don't allow changing views when displayOnly is set
grafana · Nov 14, 2022 · 058099c · 058099c
1 parent 7bf54aa
commit 058099c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git 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
@@ -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
@@ -22,8 +22,9 @@ export const SimplePanel: React.FC<Props> = ({ options, data }) => {
     <div className={`flamegraph-wrapper ${styles.panel}`}>
       <FlamegraphRenderer
         flamebearer={flamebearer}
-        ExportData={<div />}
-        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
@@ -19,11 +19,27 @@ loadPluginCss({
 export const plugin = new PanelPlugin<SimpleOptions>(
   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
@@ -6,4 +6,5 @@ export interface SimpleOptions {
   seriesCountSize: SeriesSize;
 
   showToolbar: boolean;
+  displayOnly: 'flamegraph' | 'table' | 'both' | 'sandwich' | 'off';
 }