Flame Graph: Exact search (#56769)

* Use exact match

* Create searchable FlameGraphPanel.tsx

public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { CoreApp, PanelProps } from '@grafana/data';
+
+import FlameGraphContainer from './components/FlameGraphContainer';
+
+export const FlameGraphPanel: React.FunctionComponent<PanelProps> = (props) => {
+  return <FlameGraphContainer data={props.data.series[0]} app={CoreApp.Unknown} flameGraphHeight={props.height} />;
+};

public/app/plugins/panel/flamegraph/components/FlameGraph/rendering.ts

@@ -1,4 +1,4 @@
-import { colors, fuzzyMatch } from '@grafana/ui';
+import { colors } from '@grafana/ui';
 
 import {
   BAR_BORDER_WIDTH,
@@ -93,7 +93,7 @@ export function renderRect(
   const l = 65 + 7 * intensity;
 
   const name = rect.label;
-  const queryResult = query && fuzzyMatch(name.toLowerCase(), query.toLowerCase()).found;
+  const queryResult = query && name.toLowerCase().includes(query.toLowerCase());
 
   if (!rect.collapsed) {
     ctx.stroke();

public/app/plugins/panel/flamegraph/module.tsx

@@ -1,11 +1,5 @@
-import React from 'react';
+import { PanelPlugin } from '@grafana/data';
 
-import { CoreApp, PanelPlugin, PanelProps } from '@grafana/data';
-
-import FlameGraphContainer from './components/FlameGraphContainer';
-
-export const FlameGraphPanel: React.FunctionComponent<PanelProps> = (props) => {
-  return <FlameGraphContainer data={props.data.series[0]} app={CoreApp.Unknown} flameGraphHeight={props.height} />;
-};
+import { FlameGraphPanel } from './FlameGraphPanel';
 
 export const plugin = new PanelPlugin(FlameGraphPanel);