diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.test.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.test.tsx
index f1768425ceb..629e6da37c5 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.test.tsx
+++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.test.tsx
@@ -14,7 +14,7 @@
import { render, screen } from '@testing-library/react';
-import { createTheme } from '@grafana/data';
+import { createTheme, dateTime } from '@grafana/data';
import { setPluginLinksHook } from '@grafana/runtime';
import DetailState from './SpanDetail/DetailState';
@@ -48,6 +48,8 @@ const setup = (propOverrides?: SpanDetailRowProps) => {
theme: createTheme(),
traceFlameGraphs: {},
timeRange: {
+ from: dateTime(0),
+ to: dateTime(1000000000000),
raw: {
from: 0,
to: 1000000000000,
diff --git a/public/app/features/logs/components/LogDetails.test.tsx b/public/app/features/logs/components/LogDetails.test.tsx
index f8e7b6ff3bb..454d80b8a23 100644
--- a/public/app/features/logs/components/LogDetails.test.tsx
+++ b/public/app/features/logs/components/LogDetails.test.tsx
@@ -12,6 +12,7 @@ import {
DataFrameType,
CoreApp,
PluginExtensionPoints,
+ dateTime,
} from '@grafana/data';
import { setPluginLinksHook } from '@grafana/runtime';
@@ -43,6 +44,14 @@ const setup = (propOverrides?: Partial
, rowOverrides?: Partial {
type: 'loki',
uid: 'grafanacloud-logs',
},
+ timeRange: {
+ from: 1757937009041,
+ to: 1757940609041,
+ },
attributes: { key1: ['label1'], key2: ['label2'] },
},
});
diff --git a/public/app/features/logs/components/LogDetails.tsx b/public/app/features/logs/components/LogDetails.tsx
index 99313cf1ae9..83f19909845 100644
--- a/public/app/features/logs/components/LogDetails.tsx
+++ b/public/app/features/logs/components/LogDetails.tsx
@@ -2,6 +2,7 @@ import { cx } from '@emotion/css';
import { PureComponent, useMemo } from 'react';
import {
+ TimeRange,
CoreApp,
DataFrame,
DataFrameType,
@@ -44,23 +45,25 @@ export interface Props extends Themeable2 {
onPinLine?: (row: LogRowModel) => void;
pinLineButtonTooltipTitle?: PopoverContent;
links?: Record;
+ timeRange: TimeRange;
}
interface LinkModelWithIcon extends LinkModel {
icon?: IconName;
}
-export const useAttributesExtensionLinks = (row: LogRowModel) => {
+export const useAttributesExtensionLinks = (row: LogRowModel, timeRange: TimeRange) => {
// Stable context for useMemo inside usePluginLinks
const context: PluginExtensionResourceAttributesContext = useMemo(() => {
return {
attributes: Object.fromEntries(Object.entries(row.labels).map(([key, value]) => [key, [value]])),
+ timeRange: { from: timeRange.from.valueOf(), to: timeRange.to.valueOf() },
datasource: {
type: row.datasourceType ?? '',
uid: row.datasourceUid ?? '',
},
};
- }, [row.labels, row.datasourceType, row.datasourceUid]);
+ }, [row.labels, row.datasourceType, row.datasourceUid, timeRange]);
const { links } = usePluginLinks({
extensionPointId: PluginExtensionPoints.LogsViewResourceAttributes,
@@ -93,7 +96,7 @@ export const useAttributesExtensionLinks = (row: LogRowModel) => {
const withAttributesExtensionLinks = (Component: React.ComponentType) => {
function ComponentWithLinks(props: Props) {
- const labelLinks = useAttributesExtensionLinks(props.row);
+ const labelLinks = useAttributesExtensionLinks(props.row, props.timeRange);
return ;
}
diff --git a/public/app/features/logs/components/LogRow.test.tsx b/public/app/features/logs/components/LogRow.test.tsx
index 3760ebf4b1f..f718fcf3a9e 100644
--- a/public/app/features/logs/components/LogRow.test.tsx
+++ b/public/app/features/logs/components/LogRow.test.tsx
@@ -4,6 +4,7 @@ import { ComponentProps } from 'react';
import tinycolor from 'tinycolor2';
import { CoreApp, createTheme, LogLevel, LogRowModel } from '@grafana/data';
+import { mockTimeRange } from '@grafana/plugin-ui';
import { LogRow } from './LogRow';
import { getLogRowStyles } from './getLogRowStyles';
@@ -40,6 +41,7 @@ const setup = (propOverrides?: Partial>, rowOverri
wrapLogMessage: false,
timeZone: 'utc',
styles,
+ timeRange: mockTimeRange(),
...(propOverrides || {}),
};
diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index 5c12fbbd88f..5c6bc170c61 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/public/app/features/logs/components/LogRow.tsx
@@ -1,7 +1,15 @@
import { debounce } from 'lodash';
import { MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CoreApp, DataFrame, dateTimeFormat, LogRowContextOptions, LogRowModel, LogsSortOrder } from '@grafana/data';
+import {
+ CoreApp,
+ DataFrame,
+ dateTimeFormat,
+ LogRowContextOptions,
+ LogRowModel,
+ LogsSortOrder,
+ TimeRange,
+} from '@grafana/data';
import { t } from '@grafana/i18n';
import { reportInteraction } from '@grafana/runtime';
import { DataQuery, TimeZone } from '@grafana/schema';
@@ -56,6 +64,7 @@ export interface Props {
handleTextSelection?: (e: MouseEvent, row: LogRowModel) => boolean;
logRowMenuIconsBefore?: ReactNode[];
logRowMenuIconsAfter?: ReactNode[];
+ timeRange: TimeRange;
}
export const LogRow = ({
@@ -314,6 +323,7 @@ export const LogRow = ({
styles={styles}
isFilterLabelActive={props.isFilterLabelActive}
pinLineButtonTooltipTitle={props.pinLineButtonTooltipTitle}
+ timeRange={props.timeRange}
/>
)}
diff --git a/public/app/features/logs/components/LogRows.test.tsx b/public/app/features/logs/components/LogRows.test.tsx
index a79ac2787c0..ac38cea7c3f 100644
--- a/public/app/features/logs/components/LogRows.test.tsx
+++ b/public/app/features/logs/components/LogRows.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LogRowModel, LogsDedupStrategy, LogsSortOrder } from '@grafana/data';
+import { mockTimeRange } from '@grafana/plugin-ui';
import { disablePopoverMenu, enablePopoverMenu, isPopoverMenuDisabled } from '../utils';
@@ -46,6 +47,7 @@ describe('LogRows', () => {
onClickHideField={() => {}}
onClickShowField={() => {}}
scrollElement={null}
+ timeRange={mockTimeRange()}
/>
);
@@ -75,6 +77,7 @@ describe('LogRows', () => {
onClickHideField={() => {}}
onClickShowField={() => {}}
scrollElement={null}
+ timeRange={mockTimeRange()}
/>
);
expect(screen.queryAllByRole('row')).toHaveLength(2);
@@ -105,6 +108,7 @@ describe('LogRows', () => {
onClickHideField={() => {}}
onClickShowField={() => {}}
scrollElement={null}
+ timeRange={mockTimeRange()}
/>
);
@@ -135,6 +139,7 @@ describe('LogRows', () => {
onClickHideField={() => {}}
onClickShowField={() => {}}
scrollElement={null}
+ timeRange={mockTimeRange()}
/>
);
@@ -162,6 +167,7 @@ describe('Popover menu', () => {
onClickFilterOutString={() => {}}
onClickFilterString={() => {}}
scrollElement={null}
+ timeRange={mockTimeRange()}
{...overrides}
/>
);
diff --git a/public/app/features/logs/components/LogRows.tsx b/public/app/features/logs/components/LogRows.tsx
index 85c4af15f7a..3c564f5c538 100644
--- a/public/app/features/logs/components/LogRows.tsx
+++ b/public/app/features/logs/components/LogRows.tsx
@@ -9,6 +9,7 @@ import {
CoreApp,
DataFrame,
LogRowContextOptions,
+ TimeRange,
} from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import { config } from '@grafana/runtime';
@@ -61,6 +62,7 @@ export interface Props {
scrollIntoView?: (element: HTMLElement) => void;
isFilterLabelActive?: (key: string, value: string, refId?: string) => Promise;
pinnedLogs?: string[];
+ timeRange: TimeRange;
/**
* If false or undefined, the `contain:strict` css property will be added to the wrapping `` for performance reasons.
* Any overflowing content will be clipped at the table boundary.
diff --git a/public/app/features/logs/components/log-context/LogRowContextModal.tsx b/public/app/features/logs/components/log-context/LogRowContextModal.tsx
index c7aaa58a3af..2c712094a6d 100644
--- a/public/app/features/logs/components/log-context/LogRowContextModal.tsx
+++ b/public/app/features/logs/components/log-context/LogRowContextModal.tsx
@@ -492,6 +492,7 @@ export const LogRowContextModal: React.FunctionComponent
@@ -575,6 +577,7 @@ export const LogRowContextModal: React.FunctionComponent
@@ -594,6 +597,7 @@ export const LogRowContextModal: React.FunctionComponent
@@ -637,7 +641,7 @@ export const LogRowContextModal: React.FunctionComponent {
type: 'loki',
uid: 'grafanacloud-logs',
},
+ timeRange: {
+ from: 1757937009041,
+ to: 1757940609041,
+ },
attributes: { key1: ['label1'], key2: ['label2'] },
},
});
diff --git a/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx b/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx
index 0f274e4ed6d..240bc546313 100644
--- a/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx
@@ -37,7 +37,7 @@ export const LogLineDetailsComponent = memo(
const inputRef = useRef('');
const styles = useStyles2(getStyles);
- const extensionLinks = useAttributesExtensionLinks(log);
+ const extensionLinks = useAttributesExtensionLinks(log, timeRange);
const fieldsWithLinks = useMemo(() => {
const fieldsWithLinks = log.fields.filter((f) => f.links?.length);
diff --git a/public/app/features/provisioning/GettingStarted/FeaturesList.tsx b/public/app/features/provisioning/GettingStarted/FeaturesList.tsx
index e3352e461b5..0b932e725df 100644
--- a/public/app/features/provisioning/GettingStarted/FeaturesList.tsx
+++ b/public/app/features/provisioning/GettingStarted/FeaturesList.tsx
@@ -1,8 +1,10 @@
import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
+import { FeatureState, GrafanaTheme2 } from '@grafana/data';
+import { GrafanaEdition } from '@grafana/data/internal';
import { Trans } from '@grafana/i18n';
-import { Box, LinkButton, Stack, Text, useStyles2 } from '@grafana/ui';
+import { config } from '@grafana/runtime';
+import { Box, FeatureBadge, LinkButton, Stack, Text, TextLink, useStyles2 } from '@grafana/ui';
import { RepositoryTypeCards } from '../Shared/RepositoryTypeCards';
@@ -13,13 +15,15 @@ interface FeaturesListProps {
export const FeaturesList = ({ hasRequiredFeatures, onSetupFeatures }: FeaturesListProps) => {
const styles = useStyles2(getStyles);
+ const isOnPrem = [GrafanaEdition.OpenSource, GrafanaEdition.Enterprise].includes(config.buildInfo.edition);
return (
Get started with Git Sync
-
+ {' '}
+ {!isOnPrem && }
-
@@ -33,6 +37,20 @@ export const FeaturesList = ({ hasRequiredFeatures, onSetupFeatures }: FeaturesL
+
+
+ Want to learn more? See our{' '}
+
+ documentation
+
+ .
+
+
{!hasRequiredFeatures ? (
diff --git a/public/app/features/provisioning/GettingStarted/GettingStartedPage.tsx b/public/app/features/provisioning/GettingStarted/GettingStartedPage.tsx
index 14fefada984..ff9999698ba 100644
--- a/public/app/features/provisioning/GettingStarted/GettingStartedPage.tsx
+++ b/public/app/features/provisioning/GettingStarted/GettingStartedPage.tsx
@@ -1,4 +1,6 @@
+import { GrafanaEdition } from '@grafana/data/internal';
import { Trans, t } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
import { Box, Text, TextLink } from '@grafana/ui';
import { Repository } from 'app/api/clients/provisioning/v0alpha1';
import { Page } from 'app/core/components/Page/Page';
@@ -30,6 +32,12 @@ export default function GettingStartedPage({ items }: Props) {
}
function Banner() {
+ const isOnPrem = [GrafanaEdition.OpenSource, GrafanaEdition.Enterprise].includes(config.buildInfo.edition);
+
+ if (!isOnPrem) {
+ return null;
+ }
+
return (
{
const opts: SelectableValue[] = [
diff --git a/public/app/features/search/service/dummy.ts b/public/app/features/search/service/dummy.ts
index d014fd22c6a..fe805bbe33a 100644
--- a/public/app/features/search/service/dummy.ts
+++ b/public/app/features/search/service/dummy.ts
@@ -1,7 +1,7 @@
import { SelectableValue, DataFrame, DataFrameView } from '@grafana/data';
import { TermCount } from 'app/core/components/TagFilter/TagFilter';
-import { GrafanaSearcher, QueryResponse, SearchQuery } from './types';
+import { GrafanaSearcher, LocationInfo, QueryResponse, SearchQuery } from './types';
// This is a dummy search useful for tests
export class DummySearcher implements GrafanaSearcher {
@@ -9,6 +9,7 @@ export class DummySearcher implements GrafanaSearcher {
expectedStarsResponse: QueryResponse | undefined;
expectedSortResponse: SelectableValue[] = [];
expectedTagsResponse: TermCount[] = [];
+ expectedLocationInfoResponse: Record = {};
setExpectedSearchResult(result: DataFrame) {
this.expectedSearchResponse = {
@@ -35,6 +36,10 @@ export class DummySearcher implements GrafanaSearcher {
return Promise.resolve(this.expectedTagsResponse);
}
+ async getLocationInfo(): Promise> {
+ return Promise.resolve(this.expectedLocationInfoResponse);
+ }
+
getFolderViewSort(): string {
return '';
}
diff --git a/public/app/features/search/service/frontend.ts b/public/app/features/search/service/frontend.ts
index 11634988f7a..b926d0c2cb2 100644
--- a/public/app/features/search/service/frontend.ts
+++ b/public/app/features/search/service/frontend.ts
@@ -76,6 +76,10 @@ export class FrontendSearcher implements GrafanaSearcher {
return this.parent.tags(query);
}
+ async getLocationInfo() {
+ return this.parent.getLocationInfo();
+ }
+
getFolderViewSort(): string {
return this.parent.getFolderViewSort();
}
diff --git a/public/app/features/search/service/sql.ts b/public/app/features/search/service/sql.ts
index ba0dbc9c894..137fee41620 100644
--- a/public/app/features/search/service/sql.ts
+++ b/public/app/features/search/service/sql.ts
@@ -130,6 +130,10 @@ export class SQLSearcher implements GrafanaSearcher {
return terms.sort((a, b) => b.count - a.count);
}
+ async getLocationInfo() {
+ return this.locationInfo;
+ }
+
async doAPIQuery(query: APIQuery): Promise {
let rsp: DashboardSearchHit[];
diff --git a/public/app/features/search/service/types.ts b/public/app/features/search/service/types.ts
index cd043a2f8fe..6617bb284f9 100644
--- a/public/app/features/search/service/types.ts
+++ b/public/app/features/search/service/types.ts
@@ -97,6 +97,7 @@ export interface GrafanaSearcher {
tags: (query: SearchQuery) => Promise;
getSortOptions: () => Promise;
sortPlaceholder?: string;
+ getLocationInfo: () => Promise>;
/** Gets the default sort used for the Folder view */
getFolderViewSort: () => string;
diff --git a/public/app/features/search/service/unified.ts b/public/app/features/search/service/unified.ts
index 272881a478a..c0514db43f9 100644
--- a/public/app/features/search/service/unified.ts
+++ b/public/app/features/search/service/unified.ts
@@ -92,6 +92,10 @@ export class UnifiedSearcher implements GrafanaSearcher {
return resp.facets?.tags?.terms || [];
}
+ async getLocationInfo() {
+ return this.locationInfo;
+ }
+
// TODO: Implement this correctly
getSortOptions(): Promise {
const opts: SelectableValue[] = [
diff --git a/public/app/plugins/datasource/cloudwatch/migrations/dashboardMigrations.ts b/public/app/plugins/datasource/cloudwatch/migrations/dashboardMigrations.ts
index d492a5ad3ce..4d97404fdcb 100644
--- a/public/app/plugins/datasource/cloudwatch/migrations/dashboardMigrations.ts
+++ b/public/app/plugins/datasource/cloudwatch/migrations/dashboardMigrations.ts
@@ -36,15 +36,17 @@ export function migrateMultipleStatsAnnotationQuery(
): Array> {
const newAnnotations: Array> = [];
- if (annotationQuery && 'statistics' in annotationQuery && annotationQuery?.statistics?.length) {
- for (const stat of annotationQuery.statistics.splice(1)) {
- const { statistics, name, ...newAnnotation } = annotationQuery;
- newAnnotations.push({ ...newAnnotation, statistic: stat, name: `${name} - ${stat}` });
- }
- annotationQuery.statistic = annotationQuery.statistics[0];
- // Only change the name of the original if new annotations have been created
- if (newAnnotations.length !== 0) {
- annotationQuery.name = `${annotationQuery.name} - ${annotationQuery.statistic}`;
+ if (annotationQuery && 'statistics' in annotationQuery) {
+ if (annotationQuery?.statistics?.length) {
+ for (const stat of annotationQuery.statistics.splice(1)) {
+ const { statistics, name, ...newAnnotation } = annotationQuery;
+ newAnnotations.push({ ...newAnnotation, statistic: stat, name: `${name} - ${stat}` });
+ }
+ annotationQuery.statistic = annotationQuery.statistics[0];
+ // Only change the name of the original if new annotations have been created
+ if (newAnnotations.length !== 0) {
+ annotationQuery.name = `${annotationQuery.name} - ${annotationQuery.statistic}`;
+ }
}
delete annotationQuery.statistics;
}
diff --git a/public/app/plugins/panel/annolist/AnnoListPanel.test.tsx b/public/app/plugins/panel/annolist/AnnoListPanel.test.tsx
index 1c9dbd45abc..8ad01c6427c 100644
--- a/public/app/plugins/panel/annolist/AnnoListPanel.test.tsx
+++ b/public/app/plugins/panel/annolist/AnnoListPanel.test.tsx
@@ -105,7 +105,7 @@ describe('AnnoListPanel', () => {
tags: ['tag A', 'tag B'],
type: 'annotation',
},
- 'anno-list-panel-1'
+ expect.stringMatching(/^anno-list-panel-\d\.\d+/) // string is appended with Math.random()
);
});
});
@@ -268,7 +268,7 @@ describe('AnnoListPanel', () => {
tags: ['tag A', 'tag B', 'Result tag B'],
type: 'annotation',
},
- 'anno-list-panel-1'
+ expect.stringMatching(/^anno-list-panel-\d\.\d+/) // string is appended with Math.random()
);
expect(screen.getByText(/filter:/i)).toBeInTheDocument();
expect(screen.getAllByText(/result tag b/i)).toHaveLength(2);
@@ -293,7 +293,7 @@ describe('AnnoListPanel', () => {
type: 'annotation',
userId: 1,
},
- 'anno-list-panel-1'
+ expect.stringMatching(/^anno-list-panel-\d\.\d+/) // string is appended with Math.random()
);
expect(screen.getByText(/filter:/i)).toBeInTheDocument();
expect(screen.getByRole('button', { name: /result email/i })).toBeInTheDocument();
diff --git a/public/app/plugins/panel/annolist/AnnoListPanel.tsx b/public/app/plugins/panel/annolist/AnnoListPanel.tsx
index 744f905e483..69c21cebdb1 100644
--- a/public/app/plugins/panel/annolist/AnnoListPanel.tsx
+++ b/public/app/plugins/panel/annolist/AnnoListPanel.tsx
@@ -7,7 +7,7 @@ import {
AnnotationEvent,
AppEvents,
dateTime,
- DurationUnit,
+ dateMath,
GrafanaTheme2,
locationUtil,
PanelProps,
@@ -35,6 +35,7 @@ interface State {
loaded: boolean;
queryUser?: UserInfo;
queryTags: string[];
+ requestId: string;
}
export class AnnoListPanel extends PureComponent {
style = getStyles(config.theme2);
@@ -49,6 +50,7 @@ export class AnnoListPanel extends PureComponent {
timeInfo: '',
loaded: false,
queryTags: [],
+ requestId: `anno-list-panel-${Math.random()}`,
};
}
@@ -126,7 +128,7 @@ export class AnnoListPanel extends PureComponent {
params.tags = params.tags ? [...params.tags, ...queryTags] : queryTags;
}
- const annotations = await getBackendSrv().get('/api/annotations', params, `anno-list-panel-${this.props.id}`);
+ const annotations = await getBackendSrv().get('/api/annotations', params, this.state.requestId);
this.setState({
annotations,
@@ -180,7 +182,12 @@ export class AnnoListPanel extends PureComponent {
if (subtract) {
incr *= -1;
}
- return t.add(incr, unit as DurationUnit).valueOf();
+
+ if (!dateMath.isDurationUnit(unit)) {
+ return 0;
+ }
+
+ return t.add(incr, unit).valueOf();
}
onTagClick = (tag: string, remove?: boolean) => {
diff --git a/public/app/plugins/panel/dashlist/DashList.test.tsx b/public/app/plugins/panel/dashlist/DashList.test.tsx
new file mode 100644
index 00000000000..d1febc53817
--- /dev/null
+++ b/public/app/plugins/panel/dashlist/DashList.test.tsx
@@ -0,0 +1,128 @@
+import { render, screen } from 'test/test-utils';
+
+import { setBackendSrv } from '@grafana/runtime';
+import { setupMockServer } from '@grafana/test-utils/server';
+import { getFolderFixtures } from '@grafana/test-utils/unstable';
+import { backendSrv } from 'app/core/services/backend_srv';
+import impressionSrv from 'app/core/services/impression_srv';
+import { testWithFeatureToggles } from 'app/features/alerting/unified/test/test-utils';
+
+import { getPanelProps } from '../test-utils';
+
+import { DashList } from './DashList';
+import { Options } from './panelcfg.gen';
+
+const [_, { folderA, folderA_dashbdD, dashbdE }] = getFolderFixtures();
+
+setBackendSrv(backendSrv);
+setupMockServer();
+
+const defaultOptions: Options = {
+ includeVars: false,
+ keepTime: false,
+ maxItems: 10,
+ query: '*',
+ showFolderNames: false,
+ showHeadings: false,
+ showRecentlyViewed: false,
+ showSearch: false,
+ showStarred: false,
+ tags: [],
+};
+
+const findStarButton = (title: string, isStarred: boolean) =>
+ screen.findByRole('button', { name: new RegExp(`^${isStarred ? 'unmark' : 'mark'} "${title}" as favorite`, 'i') });
+
+describe.each([
+ // App platform APIs
+ true,
+ // Legacy APIs
+ false,
+])('DashList - app platform APIs: %s', (featureTogglesEnabled) => {
+ testWithFeatureToggles(featureTogglesEnabled ? ['unifiedStorageSearchUI'] : []);
+
+ it('renders different groups of dashboards', async () => {
+ const props = getPanelProps({
+ ...defaultOptions,
+ showHeadings: true,
+ showRecentlyViewed: true,
+ showStarred: true,
+ showSearch: true,
+ });
+ render();
+
+ const headings = (await screen.findAllByRole('heading')).map((heading) => heading.textContent);
+ expect(headings).toEqual(['Starred dashboards', 'Recently viewed dashboards', 'Search']);
+ });
+
+ it('renders folder names', async () => {
+ const props = getPanelProps({ ...defaultOptions, showStarred: true, showFolderNames: true });
+ render();
+
+ // Based on the fixtures, we expect to see a dashboard that's contained in folderA
+ const [folderTitle] = await screen.findAllByText(folderA.item.title);
+ expect(folderTitle).toBeInTheDocument();
+ });
+
+ it('renders empty state', async () => {
+ const props = getPanelProps({
+ ...defaultOptions,
+ showStarred: false,
+ showRecentlyViewed: false,
+ showSearch: false,
+ });
+ render();
+
+ expect(await screen.findByText('No dashboard groups configured')).toBeInTheDocument();
+ });
+
+ it('allows un-starring a dashboard', async () => {
+ const props = getPanelProps({
+ ...defaultOptions,
+ showStarred: true,
+ });
+ const { user } = render(, {
+ preloadedState: { navIndex: { starred: { text: 'Starred', children: [] } } },
+ });
+
+ const starButton = await findStarButton(folderA_dashbdD.item.title, true);
+
+ await user.click(starButton);
+
+ expect(screen.queryByText(folderA_dashbdD.item.title)).not.toBeInTheDocument();
+ });
+
+ it('allows starring a dashboard', async () => {
+ const props = getPanelProps({
+ ...defaultOptions,
+ showStarred: true,
+ showSearch: true,
+ });
+
+ const { user } = render(, {
+ preloadedState: { navIndex: { starred: { text: 'Starred', children: [] } } },
+ });
+
+ const starButton = await findStarButton(dashbdE.item.title, false);
+
+ await user.click(starButton);
+
+ // We use `findAll` because the dashboard will appear in two sections (starred and search)
+ // but this is fine, because there will have been none before starring it
+ const [unmarkButton] = await screen.findAllByRole('button', {
+ name: new RegExp(`^unmark "${dashbdE.item.title}" as favorite`, 'i'),
+ });
+ expect(unmarkButton).toBeInTheDocument();
+ });
+
+ it('shows recently viewed dashboards', async () => {
+ impressionSrv.addDashboardImpression(dashbdE.item.uid);
+ const props = getPanelProps({
+ ...defaultOptions,
+ showRecentlyViewed: true,
+ });
+ render();
+
+ expect(await screen.findByText(dashbdE.item.title)).toBeInTheDocument();
+ });
+});
diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx
index d997bcb36a6..76ee1497a9e 100644
--- a/public/app/plugins/panel/dashlist/DashList.tsx
+++ b/public/app/plugins/panel/dashlist/DashList.tsx
@@ -3,16 +3,16 @@ import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
import { useThrottle } from 'react-use';
import { InterpolateFunction, PanelProps, textUtil } from '@grafana/data';
+import { t } from '@grafana/i18n';
import { config } from '@grafana/runtime';
-import { useStyles2, IconButton, ScrollContainer } from '@grafana/ui';
-import { updateNavIndex } from 'app/core/actions';
+import { useStyles2, IconButton, ScrollContainer, Box, Text, EmptyState, Link } from '@grafana/ui';
import { getConfig } from 'app/core/config';
import { ID_PREFIX, setStarred } from 'app/core/reducers/navBarTree';
-import { removeNavIndex } from 'app/core/reducers/navModel';
-import { getBackendSrv } from 'app/core/services/backend_srv';
+import { removeNavIndex, updateNavIndex } from 'app/core/reducers/navModel';
import impressionSrv from 'app/core/services/impression_srv';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
-import { DashboardSearchItem } from 'app/features/search/types';
+import { getGrafanaSearcher } from 'app/features/search/service/searcher';
+import { DashboardQueryResult, LocationInfo, QueryResponse, SearchQuery } from 'app/features/search/service/types';
import { StarToolbarButtonApiServer } from 'app/features/stars/StarToolbarButton';
import { useDispatch, useSelector } from 'app/types/store';
@@ -20,7 +20,11 @@ import { Options } from './panelcfg.gen';
import { getStyles } from './styles';
import { useDashListUrlParams } from './utils';
-type Dashboard = DashboardSearchItem & { id?: number; isSearchResult?: boolean; isRecent?: boolean };
+type Dashboard = DashboardQueryResult & {
+ isSearchResult?: boolean;
+ isRecent?: boolean;
+ isStarred?: boolean;
+};
interface DashboardGroup {
show: boolean;
@@ -29,73 +33,94 @@ interface DashboardGroup {
}
async function fetchDashboards(options: Options, replaceVars: InterpolateFunction) {
- let starredDashboards: Promise = Promise.resolve([]);
+ const searcher = getGrafanaSearcher();
+ let starredDashboards: Promise = Promise.resolve();
+ let recentDashboards: Promise = Promise.resolve();
+ let searchedDashboards: Promise = Promise.resolve();
if (options.showStarred) {
- const params = { limit: options.maxItems, starred: 'true' };
- starredDashboards = getBackendSrv().search(params);
+ const params: SearchQuery = { limit: options.maxItems, starred: true };
+ starredDashboards = searcher.starred(params);
}
- let recentDashboards: Promise = Promise.resolve([]);
let dashUIDs: string[] = [];
if (options.showRecentlyViewed) {
let uids = await impressionSrv.getDashboardOpened();
dashUIDs = take(uids, options.maxItems);
- recentDashboards = getBackendSrv().search({ dashboardUIDs: dashUIDs, limit: options.maxItems });
+
+ recentDashboards = searcher.search({ uid: dashUIDs, limit: options.maxItems, kind: ['dashboard'] });
}
- let searchedDashboards: Promise = Promise.resolve([]);
if (options.showSearch) {
const uid = options.folderUID === '' ? 'general' : options.folderUID;
- const params = {
+ const params: SearchQuery = {
limit: options.maxItems,
query: replaceVars(options.query, {}, 'text'),
- folderUIDs: uid,
- tag: options.tags.map((tag: string) => replaceVars(tag, {}, 'text')),
- type: 'dash-db',
+ location: uid,
+ tags: options.tags.map((tag: string) => replaceVars(tag, {}, 'text')),
+ kind: ['dashboard'],
};
- searchedDashboards = getBackendSrv().search(params);
+ searchedDashboards = searcher.search(params);
}
- const [starred, searched, recent] = await Promise.all([starredDashboards, searchedDashboards, recentDashboards]);
+ const [starred, searched, recent] = await Promise.allSettled([
+ starredDashboards,
+ searchedDashboards,
+ recentDashboards,
+ ]);
// We deliberately deal with recent dashboards first so that the order of dash IDs is preserved
- let dashMap = new Map();
- for (const dashUID of dashUIDs) {
- const dash = recent.find((d) => d.uid === dashUID);
- if (dash) {
- dashMap.set(dashUID, { ...dash, isRecent: true });
+ let dashMap = new Map();
+ if (recent && recent.status === 'fulfilled') {
+ for (const dashUID of dashUIDs) {
+ const dash = recent.value?.view.find((d: DashboardQueryResult): d is DashboardQueryResult => {
+ return d.uid === dashUID;
+ });
+ if (dash) {
+ dashMap.set(dashUID, { ...dash, title: dash.name, isRecent: true });
+ }
}
}
- searched.forEach((dash) => {
- if (!dash.uid) {
- return;
- }
- if (dashMap.has(dash.uid)) {
- dashMap.get(dash.uid)!.isSearchResult = true;
- } else {
- dashMap.set(dash.uid, { ...dash, isSearchResult: true });
- }
- });
+ if (searched && searched.status === 'fulfilled') {
+ searched?.value?.view.forEach((dash) => {
+ if (!dash.uid) {
+ return;
+ }
+ if (dashMap.has(dash.uid)) {
+ dashMap.get(dash.uid)!.isSearchResult = true;
+ } else {
+ dashMap.set(dash.uid, { ...dash, isSearchResult: true });
+ }
+ });
+ }
- starred.forEach((dash) => {
- if (!dash.uid) {
- return;
- }
- if (dashMap.has(dash.uid)) {
- dashMap.get(dash.uid)!.isStarred = true;
- } else {
- dashMap.set(dash.uid, { ...dash, isStarred: true });
- }
- });
+ if (starred && starred.status === 'fulfilled') {
+ starred?.value?.view.forEach((dash) => {
+ if (!dash.uid) {
+ return;
+ }
+ if (dashMap.has(dash.uid)) {
+ dashMap.get(dash.uid)!.isStarred = true;
+ } else {
+ dashMap.set(dash.uid, { ...dash, isStarred: true });
+ }
+ });
+ }
return dashMap;
}
+async function fetchDashboardFolders() {
+ return getGrafanaSearcher().getLocationInfo();
+}
+
+const collator = new Intl.Collator();
+
export function DashList(props: PanelProps) {
const [dashboards, setDashboards] = useState(new Map());
+ const [foldersTitleMap, setFoldersTitleMap] = useState>({});
const dispatch = useDispatch();
const navIndex = useSelector((state) => state.navIndex);
@@ -107,22 +132,30 @@ export function DashList(props: PanelProps) {
});
}, [props.options, props.replaceVariables, throttledRenderCount]);
+ useEffect(() => {
+ if (props.options.showFolderNames && dashboards.size > 0) {
+ fetchDashboardFolders().then((locationInfo) => {
+ setFoldersTitleMap(locationInfo);
+ });
+ }
+ }, [props.options.showFolderNames, dashboards]);
+
const toggleDashboardStar = async (e: SyntheticEvent, dash: Dashboard) => {
- const { uid, title, url } = dash;
+ const { uid, name, url } = dash;
e.preventDefault();
e.stopPropagation();
- const isStarred = await getDashboardSrv().starDashboard(dash.uid, dash.isStarred);
+ const isStarred = await getDashboardSrv().starDashboard(dash.uid, Boolean(dash.isStarred));
const updatedDashboards = new Map(dashboards);
updatedDashboards.set(dash?.uid ?? '', { ...dash, isStarred });
setDashboards(updatedDashboards);
- dispatch(setStarred({ id: uid ?? '', title, url, isStarred }));
+ dispatch(setStarred({ id: uid ?? '', title: name, url, isStarred }));
- const starredNavItem = navIndex['starred'];
+ const starredNavItem = navIndex.starred;
if (isStarred) {
starredNavItem.children?.push({
id: ID_PREFIX + uid,
- text: title,
+ text: name,
url: url ?? '',
parentItem: starredNavItem,
});
@@ -138,10 +171,27 @@ export function DashList(props: PanelProps) {
const [starredDashboards, recentDashboards, searchedDashboards] = useMemo(() => {
const dashboardList = [...dashboards.values()];
+ const dashboardsGroupsMap: Record = {
+ starred: [],
+ recent: [],
+ searched: [],
+ };
+
+ for (const dash of dashboardList) {
+ if (dash.isStarred) {
+ dashboardsGroupsMap.starred.push(dash);
+ }
+ if (dash.isRecent) {
+ dashboardsGroupsMap.recent.push(dash);
+ }
+ if (dash.isSearchResult) {
+ dashboardsGroupsMap.searched.push(dash);
+ }
+ }
return [
- dashboardList.filter((dash) => dash.isStarred).sort((a, b) => a.title.localeCompare(b.title)),
- dashboardList.filter((dash) => dash.isRecent),
- dashboardList.filter((dash) => dash.isSearchResult).sort((a, b) => a.title.localeCompare(b.title)),
+ dashboardsGroupsMap.starred.sort((a, b) => collator.compare(a.name, b.name)),
+ dashboardsGroupsMap.recent,
+ dashboardsGroupsMap.searched.sort((a, b) => collator.compare(a.name, b.name)),
];
}, [dashboards]);
@@ -149,17 +199,17 @@ export function DashList(props: PanelProps) {
const dashboardGroups: DashboardGroup[] = [
{
- header: 'Starred dashboards',
+ header: t('panel.dashlist.starred-dashboards', 'Starred dashboards'),
dashboards: starredDashboards,
show: showStarred,
},
{
- header: 'Recently viewed dashboards',
+ header: t('panel.dashlist.recently-viewed-dashboards', 'Recently viewed dashboards'),
dashboards: recentDashboards,
show: showRecentlyViewed,
},
{
- header: 'Search',
+ header: t('panel.dashlist.search', 'Search'),
dashboards: searchedDashboards,
show: showSearch,
},
@@ -173,21 +223,30 @@ export function DashList(props: PanelProps) {
{dashboards.map((dash) => {
let url = dash.url + urlParams;
url = getConfig().disableSanitizeHtml ? url : textUtil.sanitizeUrl(url);
+ const markAsStarredText = t('panel.dashlist.mark-as-starred', 'Mark "{{title}}" as favorite', {
+ title: dash.title,
+ });
+ const unmarkAsStarredText = t('panel.dashlist.unmark-as-starred', 'Unmark "{{title}}" as favorite', {
+ title: dash.title,
+ });
+ const locationInfo = showFolderNames && dash.location ? foldersTitleMap[dash.location] : undefined;
return (
-
+
-
-
- {dash.title}
-
- {showFolderNames && dash.folderTitle &&
{dash.folderTitle}
}
-
+
+ {dash.name}
+ {showFolderNames && locationInfo && (
+
+ {locationInfo?.name}
+
+ )}
+
{config.featureToggles.starsFromAPIServer ? (
) : (
toggleDashboardStar(e, dash)}
@@ -200,15 +259,30 @@ export function DashList(props: PanelProps) {
);
+ const showEmptyState = dashboardGroups.every(({ show }) => !show);
+
return (
+ {showEmptyState && (
+
+ )}
{dashboardGroups.map(
({ show, header, dashboards }, i) =>
show && (
-
- {showHeadings &&
{header}
}
+
+ {showHeadings && (
+
+
+ {header}
+
+
+ )}
{renderList(dashboards)}
-
+
)
)}
diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts
index 8d482d09960..56becdd0684 100644
--- a/public/app/plugins/panel/dashlist/styles.ts
+++ b/public/app/plugins/panel/dashlist/styles.ts
@@ -4,14 +4,6 @@ import { GrafanaTheme2 } from '@grafana/data';
export const getStyles = (theme: GrafanaTheme2) => {
return {
- dashlistSectionHeader: css({
- padding: theme.spacing(0.25, 1),
- marginRight: theme.spacing(1),
- }),
- dashlistSection: css({
- marginBottom: theme.spacing(2),
- paddingTop: theme.spacing(0.5),
- }),
dashlistLink: css({
display: 'flex',
cursor: 'pointer',
@@ -27,27 +19,5 @@ export const getStyles = (theme: GrafanaTheme2) => {
},
},
}),
- dashlistFolder: css({
- color: theme.colors.text.secondary,
- fontSize: theme.typography.bodySmall.fontSize,
- lineHeight: theme.typography.body.lineHeight,
- }),
- dashlistTitle: css({
- '&::after': {
- position: 'absolute',
- content: '""',
- left: 0,
- top: 0,
- bottom: 0,
- right: 0,
- },
- }),
- dashlistLinkBody: css({
- flexGrow: 1,
- }),
- dashlistItem: css({
- position: 'relative',
- listStyle: 'none',
- }),
};
};
diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx
index 80bedeef841..ac03ed51932 100644
--- a/public/app/plugins/panel/logs/LogsPanel.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.tsx
@@ -674,6 +674,7 @@ export const LogsPanel = ({
logRowMenuIconsAfter={isReactNodeArray(logRowMenuIconsAfter) ? logRowMenuIconsAfter : undefined}
// Ascending order causes scroll to stick to the bottom, so previewing is futile
renderPreview={isAscending ? false : true}
+ timeRange={data.timeRange}
/>
{showCommonLabels && isAscending && renderCommonLabels()}
@@ -727,6 +728,7 @@ export const LogsPanel = ({
logOptionsStorageKey={controlsStorageKey}
// Ascending order causes scroll to stick to the bottom, so previewing is futile
renderPreview={isAscending ? false : true}
+ timeRange={data.timeRange}
/>
{showCommonLabels && isAscending && renderCommonLabels()}