From c8f814196a1715f9f2cc138cffcf0efac7284bc4 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Fri, 24 Jun 2022 14:08:29 -0700 Subject: [PATCH] CommandPalette: Populate dashboard search when the palette is opened (#51293) Co-authored-by: Kristina Durivage --- .betterer.results | 4 ++-- public/app/AppWrapper.tsx | 1 + .../commandPalette/CommandPalette.tsx | 13 ++++++---- .../actions/dashboard.nav.actions.ts | 24 ++++++++++++------- public/app/features/search/service/bluge.ts | 2 +- public/app/features/search/service/sql.ts | 2 +- 6 files changed, 29 insertions(+), 17 deletions(-) diff --git a/.betterer.results b/.betterer.results index dc9b5a61104..f032309415a 100644 --- a/.betterer.results +++ b/.betterer.results @@ -4473,12 +4473,12 @@ exports[`no explicit any`] = { [24, 44, 3, "Unexpected any. Specify a different type.", "193409811"], [24, 78, 3, "Unexpected any. Specify a different type.", "193409811"] ], - "public/app/features/search/service/bluge.ts:3054830800": [ + "public/app/features/search/service/bluge.ts:59496993": [ [38, 13, 3, "Unexpected any. Specify a different type.", "193409811"], [85, 9, 3, "Unexpected any. Specify a different type.", "193409811"], [145, 15, 3, "Unexpected any. Specify a different type.", "193409811"] ], - "public/app/features/search/service/sql.ts:1428696565": [ + "public/app/features/search/service/sql.ts:4013142735": [ [91, 36, 3, "Unexpected any. Specify a different type.", "193409811"] ], "public/app/features/search/types.ts:479421789": [ diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx index 6ff46768d9a..2b8efc69b88 100644 --- a/public/app/AppWrapper.tsx +++ b/public/app/AppWrapper.tsx @@ -105,6 +105,7 @@ export class AppWrapper extends React.Component { reportInteraction('commandPalette_action_selected', { actionId: action.id, + actionName: action.name, }); }; diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx index 3b36c77c9af..fe6bb59c5cd 100644 --- a/public/app/features/commandPalette/CommandPalette.tsx +++ b/public/app/features/commandPalette/CommandPalette.tsx @@ -34,6 +34,7 @@ import getGlobalActions from './actions/global.static.actions'; export const CommandPalette = () => { const styles = useStyles2(getSearchStyles); const [actions, setActions] = useState([]); + const [staticActions, setStaticActions] = useState([]); const { query, showing } = useKBar((state) => ({ showing: state.visualState === VisualState.showing, })); @@ -48,18 +49,22 @@ export const CommandPalette = () => { useEffect(() => { (async () => { if (isNotLogin) { - const staticActions = getGlobalActions(navBarTree); - const dashAct = await getDashboardNavActions('go/dashboard'); - setActions([...staticActions, ...dashAct]); + setStaticActions(getGlobalActions(navBarTree)); + setActions(staticActions); } })(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isNotLogin]); + }, [isNotLogin, navBarTree]); useEffect(() => { if (showing) { reportInteraction('commandPalette_opened'); + // Do dashboard search on demand + getDashboardNavActions('go/dashboard').then((dashAct) => { + setActions([...staticActions, ...dashAct]); + }); + keybindingSrv.bindGlobal('esc', () => { query.setVisualState(VisualState.animatingOut); }); diff --git a/public/app/features/commandPalette/actions/dashboard.nav.actions.ts b/public/app/features/commandPalette/actions/dashboard.nav.actions.ts index 6291eede598..61a4841ecc2 100644 --- a/public/app/features/commandPalette/actions/dashboard.nav.actions.ts +++ b/public/app/features/commandPalette/actions/dashboard.nav.actions.ts @@ -1,21 +1,27 @@ import { Action } from 'kbar'; import { locationUtil } from '@grafana/data'; -import { locationService, getBackendSrv } from '@grafana/runtime'; +import { locationService } from '@grafana/runtime'; +import { getGrafanaSearcher } from 'app/features/search/service'; async function getDashboardNav(parentId: string): Promise { - const data: Array<{ type: string; title: string; url: string }> = await getBackendSrv().get('/api/search'); + const data = await getGrafanaSearcher().search({ + kind: ['dashboard'], + query: '*', + limit: 500, + }); - const goToDashboardActions: Action[] = data - .filter((item) => item.type === 'dash-db') - .map((item) => ({ + const goToDashboardActions: Action[] = data.view.map((item) => { + const { url, name } = item; // items are backed by DataFrameView, so must hold the url in a closure + return { parent: parentId, - id: `go/dashboard/${item.url}`, - name: `Go to dashboard ${item.title}`, + id: `go/dashboard/${url}`, + name: `${name}`, perform: () => { - locationService.push(locationUtil.stripBaseFromUrl(item.url)); + locationService.push(locationUtil.stripBaseFromUrl(url)); }, - })); + }; + }); return goToDashboardActions; } diff --git a/public/app/features/search/service/bluge.ts b/public/app/features/search/service/bluge.ts index 66780da18ff..ffbb27f2708 100644 --- a/public/app/features/search/service/bluge.ts +++ b/public/app/features/search/service/bluge.ts @@ -77,7 +77,7 @@ async function doSearchQuery(query: SearchQuery): Promise { search: { ...query, query: query.query ?? '*', - limit: firstPageSize, + limit: query.limit ?? firstPageSize, }, }; const rsp = await lastValueFrom( diff --git a/public/app/features/search/service/sql.ts b/public/app/features/search/service/sql.ts index e1b91406973..4ebd6b10e5f 100644 --- a/public/app/features/search/service/sql.ts +++ b/public/app/features/search/service/sql.ts @@ -42,7 +42,7 @@ export class SQLSearcher implements GrafanaSearcher { throw 'facets not supported!'; } const q: APIQuery = { - limit: 1000, // 1k max values + limit: query.limit ?? 1000, // default 1k max values tag: query.tags, sort: query.sort, };