public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scopes: Implement message for when there are no dashboards found (#89675)

Browse Source
This commit is contained in:
Bogdan Matei
2024-06-26 14:10:38 +03:00
committed by GitHub
parent 9770ebcd6c
commit 95a8fc1dd7
5 changed files with 121 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx
+46 -5
View File
@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom';
import { GrafanaTheme2, Scope, urlUtil } from '@grafana/data';
import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
import { CustomScrollbar, FilterInput, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
import { Button, CustomScrollbar, FilterInput, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { t } from 'app/core/internationalization';
import { t, Trans } from 'app/core/internationalization';
import { fetchSuggestedDashboards } from './api';
import { SuggestedDashboard } from './types';
@@ -14,6 +14,7 @@ export interface ScopesDashboardsSceneState extends SceneObjectState {
dashboards: SuggestedDashboard[];
filteredDashboards: SuggestedDashboard[];
isLoading: boolean;
scopesSelected: boolean;
searchQuery: string;
}
@@ -25,13 +26,14 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
dashboards: [],
filteredDashboards: [],
isLoading: false,
scopesSelected: false,
searchQuery: '',
});
}
public async fetchDashboards(scopes: Scope[]) {
if (scopes.length === 0) {
return this.setState({ dashboards: [], filteredDashboards: [], isLoading: false });
return this.setState({ dashboards: [], filteredDashboards: [], isLoading: false, scopesSelected: false });
}
this.setState({ isLoading: true });
@@ -42,6 +44,7 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
dashboards,
filteredDashboards: this.filterDashboards(dashboards, this.state.searchQuery),
isLoading: false,
scopesSelected: scopes.length > 0,
});
}
@@ -62,11 +65,29 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
}
export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<ScopesDashboardsScene>) {
const { filteredDashboards, isLoading, searchQuery } = model.useState();
const { dashboards, filteredDashboards, isLoading, searchQuery, scopesSelected } = model.useState();
const styles = useStyles2(getStyles);
const [queryParams] = useQueryParams();
if (!isLoading) {
if (!scopesSelected) {
return (
<p className={styles.noResultsContainer} data-testid="scopes-dashboards-notFoundNoScopes">
<Trans i18nKey="scopes.suggestedDashboards.noResultsNoScopes">No scopes selected</Trans>
</p>
);
} else if (dashboards.length === 0) {
return (
<p className={styles.noResultsContainer} data-testid="scopes-dashboards-notFoundForScope">
<Trans i18nKey="scopes.suggestedDashboards.noResultsForScopes">
No dashboards found for the selected scopes
</Trans>
</p>
);
}
}
return (
<>
<div className={styles.searchInputContainer}>
@@ -85,7 +106,7 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
text={t('scopes.suggestedDashboards.loading', 'Loading dashboards')}
data-testid="scopes-dashboards-loading"
/>
) : (
) : filteredDashboards.length > 0 ? (
<CustomScrollbar>
{filteredDashboards.map(({ dashboard, dashboardTitle }) => (
<Link
@@ -98,6 +119,18 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
</Link>
))}
</CustomScrollbar>
) : (
<p className={styles.noResultsContainer} data-testid="scopes-dashboards-notFoundForFilter">
<Trans i18nKey="scopes.suggestedDashboards.noResultsForFilter">No results found for your query</Trans>
<Button
variant="secondary"
onClick={() => model.changeSearchQuery('')}
data-testid="scopes-dashboards-notFoundForFilter-clear"
>
<Trans i18nKey="scopes.suggestedDashboards.noResultsForFilterClear">Clear search</Trans>
</Button>
</p>
)}
</>
);
@@ -105,6 +138,14 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
const getStyles = (theme: GrafanaTheme2) => {
return {
noResultsContainer: css({
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
justifyContent: 'center',
textAlign: 'center',
}),
searchInputContainer: css({
flex: '0 1 auto',
}),
public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
+35
View File
@@ -45,6 +45,12 @@ import {
queryDashboardsContainer,
queryDashboardsExpand,
renderDashboard,
getNotFoundForScope,
queryDashboardsSearch,
getNotFoundForFilter,
getClustersSlothClusterEastRadio,
getNotFoundForFilterClear,
getNotFoundNoScopes,
} from './testUtils';
jest.mock('@grafana/runtime', () => ({
@@ -309,6 +315,35 @@ describe('ScopesScene', () => {
expect(queryAllDashboard('7')).toHaveLength(1);
expect(queryAllDashboard('8')).toHaveLength(1);
});
it('Does show a proper message when no scopes are selected', async () => {
await userEvents.click(getDashboardsExpand());
expect(getNotFoundNoScopes()).toBeInTheDocument();
expect(queryDashboardsSearch()).not.toBeInTheDocument();
});
it('Does not show the input when there are no dashboards found for scope', async () => {
await userEvents.click(getDashboardsExpand());
await userEvents.click(getFiltersInput());
await userEvents.click(getClustersExpand());
await userEvents.click(getClustersSlothClusterEastRadio());
await userEvents.click(getFiltersApply());
expect(getNotFoundForScope()).toBeInTheDocument();
expect(queryDashboardsSearch()).not.toBeInTheDocument();
});
it('Does show the input and a message when there are no dashboards found for filter', async () => {
await userEvents.click(getDashboardsExpand());
await userEvents.click(getFiltersInput());
await userEvents.click(getApplicationsExpand());
await userEvents.click(getApplicationsSlothPictureFactorySelect());
await userEvents.click(getFiltersApply());
await userEvents.type(getDashboardsSearch(), 'unknown');
expect(queryDashboardsSearch()).toBeInTheDocument();
expect(getNotFoundForFilter()).toBeInTheDocument();
await userEvents.click(getNotFoundForFilterClear());
expect(getDashboardsSearch().value).toBe('');
});
});
describe('View mode', () => {
public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx
+32
View File
@@ -49,6 +49,16 @@ export const mocksScopes: Scope[] = [
filters: [{ key: 'cluster', value: 'slothClusterSouth', operator: 'equals' }],
},
},
{
metadata: { name: 'slothClusterEast' },
spec: {
title: 'slothClusterEast',
type: 'cluster',
description: 'slothClusterEast',
category: 'clusters',
filters: [{ key: 'cluster', value: 'slothClusterEast', operator: 'equals' }],
},
},
{
metadata: { name: 'slothPictureFactory' },
spec: {
@@ -213,6 +223,17 @@ export const mocksNodes: Array<ScopeNode & { parent: string }> = [
linkId: 'slothClusterSouth',
},
},
{
parent: 'clusters',
metadata: { name: 'clusters-slothClusterEast' },
spec: {
nodeType: 'leaf',
title: 'slothClusterEast',
description: 'slothClusterEast',
linkType: 'scope',
linkId: 'slothClusterEast',
},
},
{
parent: 'clusters',
metadata: { name: 'clusters.applications' },
@@ -312,6 +333,10 @@ const selectors = {
search: 'scopes-dashboards-search',
loading: 'scopes-dashboards-loading',
dashboard: (uid: string) => `scopes-dashboards-${uid}`,
notFoundNoScopes: 'scopes-dashboards-notFoundNoScopes',
notFoundForScope: 'scopes-dashboards-notFoundForScope',
notFoundForFilter: 'scopes-dashboards-notFoundForFilter',
notFoundForFilterClear: 'scopes-dashboards-notFoundForFilter-clear',
},
};
@@ -324,10 +349,15 @@ export const queryDashboardsExpand = () => screen.queryByTestId(selectors.dashbo
export const getDashboardsExpand = () => screen.getByTestId(selectors.dashboards.expand);
export const queryDashboardsContainer = () => screen.queryByTestId(selectors.dashboards.container);
export const getDashboardsContainer = () => screen.getByTestId(selectors.dashboards.container);
export const queryDashboardsSearch = () => screen.queryByTestId(selectors.dashboards.search);
export const getDashboardsSearch = () => screen.getByTestId<HTMLInputElement>(selectors.dashboards.search);
export const queryAllDashboard = (uid: string) => screen.queryAllByTestId(selectors.dashboards.dashboard(uid));
export const queryDashboard = (uid: string) => screen.queryByTestId(selectors.dashboards.dashboard(uid));
export const getDashboard = (uid: string) => screen.getByTestId(selectors.dashboards.dashboard(uid));
export const getNotFoundNoScopes = () => screen.getByTestId(selectors.dashboards.notFoundNoScopes);
export const getNotFoundForScope = () => screen.getByTestId(selectors.dashboards.notFoundForScope);
export const getNotFoundForFilter = () => screen.getByTestId(selectors.dashboards.notFoundForFilter);
export const getNotFoundForFilterClear = () => screen.getByTestId(selectors.dashboards.notFoundForFilterClear);
export const getApplicationsExpand = () => screen.getByTestId(selectors.tree.expand('applications'));
export const getApplicationsSearch = () => screen.getByTestId<HTMLInputElement>(selectors.tree.search('applications'));
@@ -357,6 +387,8 @@ export const getClustersSlothClusterNorthRadio = () =>
screen.getByTestId<HTMLInputElement>(selectors.tree.radio('clusters-slothClusterNorth'));
export const getClustersSlothClusterSouthRadio = () =>
screen.getByTestId<HTMLInputElement>(selectors.tree.radio('clusters-slothClusterSouth'));
export const getClustersSlothClusterEastRadio = () =>
screen.getByTestId<HTMLInputElement>(selectors.tree.radio('clusters-slothClusterEast'));
export function buildTestScene(overrides: Partial<DashboardScene> = {}) {
return new DashboardScene({
public/locales/en-US/grafana.json
+4
View File
@@ -1657,6 +1657,10 @@
},
"suggestedDashboards": {
"loading": "Loading dashboards",
"noResultsForFilter": "No results found for your query",
"noResultsForFilterClear": "Clear search",
"noResultsForScopes": "No dashboards found for the selected scopes",
"noResultsNoScopes": "No scopes selected",
"search": "Search",
"toggle": {
"collapse": "Collapse scope filters",
public/locales/pseudo-LOCALE/grafana.json
+4
View File
@@ -1657,6 +1657,10 @@
},
"suggestedDashboards": {
"loading": "Ŀőäđįʼnģ đäşĥþőäřđş",
"noResultsForFilter": "Ńő řęşūľŧş ƒőūʼnđ ƒőř yőūř qūęřy",
"noResultsForFilterClear": "Cľęäř şęäřčĥ",
"noResultsForScopes": "Ńő đäşĥþőäřđş ƒőūʼnđ ƒőř ŧĥę şęľęčŧęđ şčőpęş",
"noResultsNoScopes": "Ńő şčőpęş şęľęčŧęđ",
"search": "Ŝęäřčĥ",
"toggle": {
"collapse": "Cőľľäpşę şčőpę ƒįľŧęřş",