github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Show a fallback empty message when no results are found (#128754)

Browse source 
* [Discover] Show a fallback empty message in Discover UI when no results are found

* [Discover] Update code style

* [Discover] Refactor more and extract into separate components

* [Discover] Revert test id

* [Discover] Update code style

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Julia Rechkunova 2022-03-31 09:20:39 +02:00 • committed by GitHub
parent 1caaabaad1
commit f4f145dedc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 219 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/plugins/discover/public/application/main/components/no_results/no_results.test.tsx
View file

@ -34,10 +34,11 @@ function mountAndFindSubjects(props: Omit<DiscoverNoResultsProps, 'onDisableFilt
);
return {
mainMsg: findTestSubject(component, 'discoverNoResults').exists(),
timeFieldMsg: findTestSubject(component, 'discoverNoResultsTimefilter').exists(),
errorMsg: findTestSubject(component, 'discoverNoResultsError').exists(),
adjustTimeRange: findTestSubject(component, 'discoverNoResultsTimefilter').exists(),
adjustSearch: findTestSubject(component, 'discoverNoResultsAdjustSearch').exists(),
adjustFilters: findTestSubject(component, 'discoverNoResultsAdjustFilters').exists(),
checkIndices: findTestSubject(component, 'discoverNoResultsCheckIndices').exists(),
disableFiltersButton: findTestSubject(component, 'discoverNoResultsDisableFilters').exists(),
};
}
@ -51,10 +52,11 @@ describe('DiscoverNoResults', () => {
Object {
"adjustFilters": false,
"adjustSearch": false,
"adjustTimeRange": false,
"checkIndices": true,
"disableFiltersButton": false,
"errorMsg": false,
"mainMsg": true,
"timeFieldMsg": false,
}
`);
});
@ -68,10 +70,11 @@ describe('DiscoverNoResults', () => {
Object {
"adjustFilters": false,
"adjustSearch": false,
"adjustTimeRange": true,
"checkIndices": false,
"disableFiltersButton": false,
"errorMsg": false,
"mainMsg": true,
"timeFieldMsg": true,
}
`);
});
@ -101,10 +104,11 @@ describe('DiscoverNoResults', () => {
Object {
"adjustFilters": false,
"adjustSearch": false,
"adjustTimeRange": false,
"checkIndices": false,
"disableFiltersButton": false,
"errorMsg": true,
"mainMsg": false,
"timeFieldMsg": false,
}
`);
});

16
src/plugins/discover/public/application/main/components/no_results/no_results.tsx
View file

@ -17,7 +17,7 @@ import {
EuiTitle,
} from '@elastic/eui';
import { DataPublicPluginStart } from '../../../../../../data/public';
import { AdjustSearch, getTimeFieldMessage } from './no_results_helper';
import { NoResultsSuggestions } from './no_results_suggestions';
import './_no_results.scss';
import { NoResultsIllustration } from './assets/no_results_illustration';
@ -54,14 +54,12 @@ export function DiscoverNoResults({
<NoResultsIllustration />
</EuiFlexItem>
<EuiFlexItem grow={2}>
{isTimeBased && getTimeFieldMessage()}
{(hasFilters || hasQuery) && (
<AdjustSearch
hasFilters={hasFilters}
hasQuery={hasQuery}
onDisableFilters={onDisableFilters}
/>
)}
<NoResultsSuggestions
isTimeBased={isTimeBased}
hasFilters={hasFilters}
hasQuery={hasQuery}
onDisableFilters={onDisableFilters}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

102
src/plugins/discover/public/application/main/components/no_results/no_results_helper.tsx
View file

@ -1,102 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { Fragment } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiLink,
EuiDescriptionListDescription,
EuiSpacer,
} from '@elastic/eui';
export function getTimeFieldMessage() {
return (
<Fragment>
<EuiDescriptionList compressed>
<EuiDescriptionListTitle data-test-subj="discoverNoResultsTimefilter">
<FormattedMessage
id="discover.noResults.expandYourTimeRangeTitle"
defaultMessage="Expand your time range"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<FormattedMessage
id="discover.noResults.queryMayNotMatchTitle"
defaultMessage="Try searching over a longer period of time."
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
</Fragment>
);
}
interface AdjustSearchProps {
onDisableFilters: () => void;
hasFilters?: boolean;
hasQuery?: boolean;
}
export function AdjustSearch({ hasFilters, hasQuery, onDisableFilters }: AdjustSearchProps) {
return (
<Fragment>
{hasQuery && (
<>
<EuiSpacer size="s" />
<EuiDescriptionList compressed>
<EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustSearch">
<FormattedMessage
id="discover.noResults.adjustSearch"
defaultMessage="Adjust your query"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<FormattedMessage
id="discover.noResults.trySearchingForDifferentCombination"
defaultMessage="Try searching for a different combination of terms."
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
</>
)}
{hasFilters && (
<>
<EuiSpacer size="s" />
<EuiDescriptionList compressed>
<EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustFilters">
<FormattedMessage
id="discover.noResults.adjustFilters"
defaultMessage="Adjust your filters"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<FormattedMessage
id="discover.noResults.tryRemovingOrDisablingFilters"
defaultMessage="Try removing or {disablingFiltersLink}."
values={{
disablingFiltersLink: (
<EuiLink
data-test-subj="discoverNoResultsDisableFilters"
onClick={onDisableFilters}
>
<FormattedMessage
id="discover.noResults.temporaryDisablingFiltersLinkText"
defaultMessage="temporarily disabling filters"
/>
</EuiLink>
),
}}
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
</>
)}
</Fragment>
);
}

9
src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/index.ts Normal file
View file

@ -0,0 +1,9 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
export { NoResultsSuggestions } from './no_results_suggestions';

24
src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/no_results_suggestion_default.tsx Normal file
View file

@ -0,0 +1,24 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiDescriptionList, EuiDescriptionListDescription } from '@elastic/eui';
export function NoResultsSuggestionDefault() {
return (
<EuiDescriptionList compressed>
<EuiDescriptionListDescription data-test-subj="discoverNoResultsCheckIndices">
<FormattedMessage
id="discover.noResults.noDocumentsOrCheckPermissionsDescription"
defaultMessage="Make sure you have permission to view the indices and that they contain documents."
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
);
}

51
src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/no_results_suggestion_when_filters.tsx Normal file
View file

@ -0,0 +1,51 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiLink,
EuiDescriptionListDescription,
} from '@elastic/eui';
export interface NoResultsSuggestionWhenFiltersProps {
onDisableFilters: () => void;
}
export function NoResultsSuggestionWhenFilters({
onDisableFilters,
}: NoResultsSuggestionWhenFiltersProps) {
return (
<EuiDescriptionList compressed>
<EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustFilters">
<FormattedMessage
id="discover.noResults.adjustFilters"
defaultMessage="Adjust your filters"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<FormattedMessage
id="discover.noResults.tryRemovingOrDisablingFilters"
defaultMessage="Try removing or {disablingFiltersLink}."
values={{
disablingFiltersLink: (
<EuiLink data-test-subj="discoverNoResultsDisableFilters" onClick={onDisableFilters}>
<FormattedMessage
id="discover.noResults.temporaryDisablingFiltersLinkText"
defaultMessage="temporarily disabling filters"
/>
</EuiLink>
),
}}
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
);
}

31
src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/no_results_suggestion_when_query.tsx Normal file
View file

@ -0,0 +1,31 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
export function NoResultsSuggestionWhenQuery() {
return (
<EuiDescriptionList compressed>
<EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustSearch">
<FormattedMessage id="discover.noResults.adjustSearch" defaultMessage="Adjust your query" />
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<FormattedMessage
id="discover.noResults.trySearchingForDifferentCombination"
defaultMessage="Try searching for a different combination of terms."
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
);
}

34
src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/no_results_suggestion_when_time_range.tsx Normal file
View file

@ -0,0 +1,34 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
export function NoResultsSuggestionWhenTimeRange() {
return (
<EuiDescriptionList compressed>
<EuiDescriptionListTitle data-test-subj="discoverNoResultsTimefilter">
<FormattedMessage
id="discover.noResults.expandYourTimeRangeTitle"
defaultMessage="Expand your time range"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<FormattedMessage
id="discover.noResults.queryMayNotMatchTitle"
defaultMessage="Try searching over a longer period of time."
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
);
}

55
src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/no_results_suggestions.tsx Normal file
View file

@ -0,0 +1,55 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiSpacer } from '@elastic/eui';
import { NoResultsSuggestionDefault } from './no_results_suggestion_default';
import {
NoResultsSuggestionWhenFilters,
NoResultsSuggestionWhenFiltersProps,
} from './no_results_suggestion_when_filters';
import { NoResultsSuggestionWhenQuery } from './no_results_suggestion_when_query';
import { NoResultsSuggestionWhenTimeRange } from './no_results_suggestion_when_time_range';
interface NoResultsSuggestionProps {
hasFilters?: boolean;
hasQuery?: boolean;
isTimeBased?: boolean;
onDisableFilters: NoResultsSuggestionWhenFiltersProps['onDisableFilters'];
}
export function NoResultsSuggestions({
isTimeBased,
hasFilters,
hasQuery,
onDisableFilters,
}: NoResultsSuggestionProps) {
const canAdjustSearchCriteria = isTimeBased || hasFilters || hasQuery;
if (canAdjustSearchCriteria) {
return (
<>
{isTimeBased && <NoResultsSuggestionWhenTimeRange />}
{hasQuery && (
<>
<EuiSpacer size="s" />
<NoResultsSuggestionWhenQuery />
</>
)}
{hasFilters && (
<>
<EuiSpacer size="s" />
<NoResultsSuggestionWhenFilters onDisableFilters={onDisableFilters} />
</>
)}
</>
);
}
return <NoResultsSuggestionDefault />;
}