diff --git a/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx b/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx index 921c67ba9cb..e177fcf9fa2 100644 --- a/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx +++ b/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx @@ -27,6 +27,7 @@ import { BrowseFilters } from './components/BrowseFilters'; import { BrowseView } from './components/BrowseView'; import CreateNewButton from './components/CreateNewButton'; import { FolderActionsButton } from './components/FolderActionsButton'; +import { RecentlyViewedDashboards } from './components/RecentlyViewedDashboards'; import { SearchView } from './components/SearchView'; import { getFolderPermissions } from './permissions'; import { useHasSelection } from './state/hooks'; @@ -178,6 +179,8 @@ const BrowseDashboardsPage = memo(({ queryParams }: { queryParams: Record + {/* only show recently viewed dashboards when in root */} + {!folderUID && }
{ + if (!evaluateBooleanFlag('recentlyViewedDashboards', false)) { + return []; + } + return getRecentlyViewedDashboards(MAX_RECENT); + }, []); + + if (!evaluateBooleanFlag('recentlyViewedDashboards', false)) { + return null; + } + + return ( + + Recently viewed + + } + isOpen={true} + className={styles.title} + contentClassName={styles.content} + > + {/* placeholder */} + {loading && } + {/* TODO: Better empty state https://github.com/grafana/grafana/issues/114804 */} + {!loading && recentDashboards.length === 0 && ( + {t('browse-dashboards.recently-viewed.empty', 'Nothing viewed yet')} + )} + + {/* TODO: implement actual card content */} + {!loading && recentDashboards.length > 0 && ( + <> + {recentDashboards.map((dash) => ( +
+ {dash.name} +
+ ))} + + )} +
+ ); +} + +const getStyles = (theme: GrafanaTheme2) => { + const accent = theme.visualization.getColorByName('purple'); // or your own hex + + return { + title: css({ + background: `linear-gradient(90deg, ${accent} 0%, #e478eaff 100%)`, + WebkitTextFillColor: 'transparent', + backgroundClip: 'text', + color: 'transparent', + '& button svg': { + color: accent, + }, + }), + content: css({ + paddingTop: theme.spacing(0), + }), + }; +}; diff --git a/public/app/features/browse-dashboards/components/utils.ts b/public/app/features/browse-dashboards/components/utils.ts index a6c97e4788f..e1a3d5b5a02 100644 --- a/public/app/features/browse-dashboards/components/utils.ts +++ b/public/app/features/browse-dashboards/components/utils.ts @@ -1,6 +1,9 @@ import { config } from '@grafana/runtime'; import { contextSrv } from 'app/core/services/context_srv'; +import impressionSrv from 'app/core/services/impression_srv'; import { ResourceRef } from 'app/features/provisioning/components/BulkActions/useBulkActionJob'; +import { getGrafanaSearcher } from 'app/features/search/service/searcher'; +import { DashboardQueryResult } from 'app/features/search/service/types'; import { DashboardTreeSelection, DashboardViewItemWithUIItems, BrowseDashboardsPermissions } from '../types'; @@ -60,3 +63,36 @@ export function canSelectItems(permissions: BrowseDashboardsPermissions) { const canSelectDashboards = canEditDashboards || canDeleteDashboards; return Boolean(canSelectFolders || canSelectDashboards); } + +/** + * Returns dashboard search results ordered the same way the user opened them. + */ +export async function getRecentlyViewedDashboards(maxItems = 5): Promise { + try { + const recentlyOpened = (await impressionSrv.getDashboardOpened()).slice(0, maxItems); + if (!recentlyOpened.length) { + return []; + } + + const searchResults = await getGrafanaSearcher().search({ + kind: ['dashboard'], + limit: recentlyOpened.length, + uid: recentlyOpened, + }); + + const dashboards = searchResults.view.toArray(); + // Keep dashboards in the same order the user opened them. + // When a UID is missing from the search response + // push it to the end instead of letting indexOf return -1 + const order = (uid: string) => { + const idx = recentlyOpened.indexOf(uid); + return idx === -1 ? recentlyOpened.length : idx; + }; + + dashboards.sort((a, b) => order(a.uid) - order(b.uid)); + return dashboards; + } catch (error) { + console.error('Failed to load recently viewed dashboards', error); + return []; + } +} diff --git a/public/app/features/commandPalette/actions/dashboardActions.ts b/public/app/features/commandPalette/actions/dashboardActions.ts index 70a62e57295..ac3e8ce83dd 100644 --- a/public/app/features/commandPalette/actions/dashboardActions.ts +++ b/public/app/features/commandPalette/actions/dashboardActions.ts @@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'; import { t } from '@grafana/i18n'; import { config } from '@grafana/runtime'; import { contextSrv } from 'app/core/services/context_srv'; -import impressionSrv from 'app/core/services/impression_srv'; +import { getRecentlyViewedDashboards } from 'app/features/browse-dashboards/components/utils'; import { getGrafanaSearcher } from 'app/features/search/service/searcher'; import { CommandPaletteAction } from '../types'; @@ -20,20 +20,7 @@ export async function getRecentDashboardActions(): Promise { - const orderA = recentUids.indexOf(resultA.uid); - const orderB = recentUids.indexOf(resultB.uid); - return orderA - orderB; - }); + const recentResults = await getRecentlyViewedDashboards(MAX_RECENT_DASHBOARDS); const recentDashboardActions: CommandPaletteAction[] = recentResults.map((item) => { const { url, name } = item; // items are backed by DataFrameView, so must hold the url in a closure diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 9d9ec201d18..167f3714495 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -3707,6 +3707,10 @@ "clear": "Clear search and filters", "text": "No results found for your query" }, + "recently-viewed": { + "empty": "Nothing viewed yet", + "title": "Recently viewed" + }, "restore": { "all-failed_one": "Failed to restore {{count}} dashboard", "all-failed_other": "Failed to restore {{count}} dashboards",