WIP: Implement panel title search logic

[kaydelaney]

After trying the behavior approach and finding critical limitations(PR), such as:

• Search by title when we had repeated panels did not work
• Saving dashboards that had a filter by title applied, removed the panels from the Dashboard JSON.

We have decided to take another chance with implementing the search logic in the scenes library.

This PR introduced new optional properties to SceneGridLayout, the idea is to use this feature toggles in the Grafana repository behind a feature toggle

  /** Panel search */
  showPanelSearch?: boolean;
  searchString?: string;
  panelsPerRow?: number;

📦 Published PR as canary version: 5.15.0--canary.845.11012035874.0

✨ Test out this PR locally via:

npm install @grafana/scenes-react@5.15.0--canary.845.11012035874.0
npm install @grafana/scenes@5.15.0--canary.845.11012035874.0
# or 
yarn add @grafana/scenes-react@5.15.0--canary.845.11012035874.0
yarn add @grafana/scenes@5.15.0--canary.845.11012035874.0

[torkelo]

Is there a way to build this as a behavior or / pluggable feature for the grid? (not sure if that is the case or if it's a good idea, but feels like a non core feature of the grid itself

[kaydelaney]

Is there a way to build this as a behavior or / pluggable feature for the grid? (not sure if that is the case or if it's a good idea, but feels like a non core feature of the grid itself

I agree it really isn't a core feature. I'll try and see if I can think of a way to make it more "modular"

[kaydelaney]

Closing in favor of grafana/grafana#91139

[axelavargas]

Hey @kaydelaney, I think this approach works better for our use case 🌟 . I gave it a local test with a dummy scenes app and the Grafana core repository.

Dummy scenes app

NewSearchAndPanelPerRow.mp4

Grafana core

CoreGrafanaDashboardTest.mp4

UX considerations:

Including "search by title" and "resize per row" in the layout canvas might not give the best user experience. However, we're planning to hide this feature behind a toggle in core Grafana, so it'll only be available to a specific customer and won't affect the wider user base much. Also, not many Grafana applications use the SceneGridLayout.

What do you think, @torkelo? Do you have strong opinions on this or a better idea for solving the problem? 🙃

[axelavargas]

We can also interpolate the title , we could match variables that are in the title, something like:

Suggested change

	const filteredChildren = this.state.children.filter(
	(v) =>
	typeof (v.state as any).body?.state?.title === 'string' &&
	(v.state as any).body.state.title.toLowerCase().includes(panelFilterInterpolated)
	);
	const filteredChildren = this.state.children.filter(
	(v) => {
	const panelTitleInterpolated = interpolate(v, (v.state as any).body?.state?.title).toLowerCase();
	return typeof (v.state as any).body?.state?.title === 'string' &&
	(panelTitleInterpolated.includes(panelFilterInterpolated));
	}
	);

[kaydelaney]

Closing in favor of grafana/grafana#93670