maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added a SuggestionsTable to Curations view (#113123) (#113176)

Browse source 
Co-authored-by: Jason Stoltzfus <jastoltz24@gmail.com>
This commit is contained in:
Kibana Machine 2021-09-27 18:19:44 -04:00 committed by GitHub
parent 63f3a6383f
commit 579a62eaa6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 309 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/curations_table.tsx
View file

@ -19,6 +19,7 @@ import { convertMetaToPagination, handlePageChange } from '../../../../shared/ta
import { ENGINE_CURATION_PATH } from '../../../routes';
import { FormattedDateTime } from '../../../utils/formatted_date_time';
import { DataPanel } from '../../data_panel';
import { generateEnginePath } from '../../engine';
import { CurationsLogic } from '../curations_logic';
@ -101,17 +102,29 @@ export const CurationsTable: React.FC = () => {
];
return (
<EuiBasicTable
columns={columns}
items={curations}
responsive
hasActions
loading={dataLoading}
pagination={{
...convertMetaToPagination(meta),
hidePerPageOptions: true,
}}
onChange={handlePageChange(onPaginate)}
/>
<DataPanel
hasBorder
iconType="package"
title={
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.engine.curations.table.title', {
defaultMessage: 'Active curations',
})}
</h2>
}
>
<EuiBasicTable
columns={columns}
items={curations}
responsive
hasActions
loading={dataLoading}
pagination={{
...convertMetaToPagination(meta),
hidePerPageOptions: true,
}}
onChange={handlePageChange(onPaginate)}
/>
</DataPanel>
);
};

82
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/suggestions_table.test.tsx Normal file
View file

@ -0,0 +1,82 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { mockKibanaValues, setMockValues } from '../../../../__mocks__/kea_logic';
import '../../../__mocks__/engine_logic.mock';
import React from 'react';
import { shallow } from 'enzyme';
import { EuiBasicTable } from '@elastic/eui';
import { SuggestionsTable } from './suggestions_table';
describe('SuggestionsTable', () => {
const { navigateToUrl } = mockKibanaValues;
const values = {
engineName: 'some-engine',
};
beforeAll(() => {
setMockValues(values);
});
beforeEach(() => {
jest.clearAllMocks();
});
const getColumn = (index: number) => {
const wrapper = shallow(<SuggestionsTable />);
const table = wrapper.find(EuiBasicTable);
const columns = table.prop('columns');
return columns[index];
};
const renderColumn = (index: number) => {
const column = getColumn(index);
// @ts-ignore
return (...props) => {
// @ts-ignore
return shallow(column.render(...props));
};
};
it('renders', () => {
const wrapper = shallow(<SuggestionsTable />);
expect(wrapper.find(EuiBasicTable).exists()).toBe(true);
});
it('show a suggestions query with a link', () => {
const wrapper = renderColumn(0)('test');
expect(wrapper.prop('href')).toBe(
'/app/enterprise_search/engines/some-engine/curations/suggestions/test'
);
expect(wrapper.text()).toEqual('test');
});
it('contains an updated at timestamp', () => {
const wrapper = renderColumn(1)('2021-07-08T14:35:50Z');
expect(wrapper.find('FormattedDate').exists()).toBe(true);
});
it('contains a promoted documents count', () => {
const wrapper = renderColumn(2)(['a', 'b', 'c']);
expect(wrapper.text()).toEqual('3');
});
it('has a view action', () => {
const column = getColumn(3);
// @ts-ignore
const actions = column.actions;
actions[0].onClick({
query: 'foo',
});
expect(navigateToUrl).toHaveBeenCalledWith('/engines/some-engine/curations/suggestions/foo');
});
});

141
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/suggestions_table.tsx Normal file
View file

@ -0,0 +1,141 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { VIEW_BUTTON_LABEL } from '../../../../shared/constants';
import { LightbulbIcon } from '../../../../shared/icons';
import { KibanaLogic } from '../../../../shared/kibana';
import { EuiLinkTo } from '../../../../shared/react_router_helpers';
import { convertMetaToPagination, handlePageChange } from '../../../../shared/table_pagination';
import { ENGINE_CURATION_SUGGESTION_PATH } from '../../../routes';
import { FormattedDateTime } from '../../../utils/formatted_date_time';
import { DataPanel } from '../../data_panel';
import { generateEnginePath } from '../../engine';
import { CurationSuggestion } from '../types';
import { convertToDate } from '../utils';
const getSuggestionRoute = (query: string) => {
return generateEnginePath(ENGINE_CURATION_SUGGESTION_PATH, { query });
};
const columns: Array<EuiBasicTableColumn<CurationSuggestion>> = [
{
field: 'query',
name: i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.column.queryTableHeader',
{ defaultMessage: 'Query' }
),
render: (query: string) => <EuiLinkTo to={getSuggestionRoute(query)}>{query}</EuiLinkTo>,
},
{
field: 'updated_at',
dataType: 'string',
name: i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.column.lastUpdatedTableHeader',
{ defaultMessage: 'Last updated' }
),
render: (dateString: string) => <FormattedDateTime date={convertToDate(dateString)} />,
},
{
field: 'promoted',
name: i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.column.promotedDocumentsTableHeader',
{ defaultMessage: 'Promoted documents' }
),
render: (promoted: string[]) => <span>{promoted.length}</span>,
},
{
actions: [
{
name: VIEW_BUTTON_LABEL,
description: i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.viewTooltip',
{ defaultMessage: 'View suggestion' }
),
type: 'icon',
icon: 'eye',
onClick: (item) => {
const { navigateToUrl } = KibanaLogic.values;
const query = item.query;
navigateToUrl(getSuggestionRoute(query));
},
},
],
width: '120px',
},
];
export const SuggestionsTable: React.FC = () => {
// TODO wire up this data
const items: CurationSuggestion[] = [
{
query: 'foo',
updated_at: '2021-07-08T14:35:50Z',
promoted: ['1', '2'],
},
];
const meta = {
page: {
current: 1,
size: 10,
total_results: 100,
total_pages: 10,
},
};
const totalSuggestions = meta.page.total_results;
// TODO
// @ts-ignore
const onPaginate = (...params) => {
// eslint-disable-next-line no-console
console.log('paging...');
// eslint-disable-next-line no-console
console.log(params);
};
const isLoading = false;
return (
<DataPanel
iconType={LightbulbIcon}
title={
<h2>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.title',
{
defaultMessage: '{totalSuggestions} Suggestions',
values: { totalSuggestions },
}
)}
</h2>
}
subtitle={i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.description',
{
defaultMessage:
'Based on your analytics, results for the following queries could be improved by promoting some documents.',
}
)}
hasBorder
>
<EuiBasicTable
columns={columns}
items={items}
responsive
hasActions
loading={isLoading}
pagination={{
...convertMetaToPagination(meta),
hidePerPageOptions: true,
}}
onChange={handlePageChange(onPaginate)}
/>
</DataPanel>
);
};

5
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/types.ts
View file

@ -8,6 +8,11 @@
import { Meta } from '../../../../../common/types';
import { Result } from '../result/types';
export interface CurationSuggestion {
query: string;
updated_at: string;
promoted: string[];
}
export interface Curation {
id: string;
last_updated: string;

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_overview.test.tsx
View file

@ -26,7 +26,7 @@ describe('CurationsOverview', () => {
setMockValues({ curations: [] });
const wrapper = shallow(<CurationsOverview />);
expect(wrapper.is(EmptyState)).toBe(true);
expect(wrapper.find(EmptyState).exists()).toBe(true);
});
it('renders a curations table when there are curations present', () => {

22
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_overview.tsx
View file

@ -9,19 +9,27 @@ import React from 'react';
import { useValues } from 'kea';
import { EuiPanel } from '@elastic/eui';
import { EuiSpacer } from '@elastic/eui';
import { CurationsTable, EmptyState } from '../components';
import { SuggestionsTable } from '../components/suggestions_table';
import { CurationsLogic } from '../curations_logic';
export const CurationsOverview: React.FC = () => {
const { curations } = useValues(CurationsLogic);
return curations.length ? (
<EuiPanel hasBorder>
<CurationsTable />
</EuiPanel>
) : (
<EmptyState />
// TODO
const shouldShowSuggestions = true;
return (
<>
{shouldShowSuggestions && (
<>
<SuggestionsTable />
<EuiSpacer />
</>
)}
{curations.length > 0 ? <CurationsTable /> : <EmptyState />}
</>
);
};

1
x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts
View file

@ -49,6 +49,7 @@ export const ENGINE_RESULT_SETTINGS_PATH = `${ENGINE_PATH}/result_settings`;
export const ENGINE_CURATIONS_PATH = `${ENGINE_PATH}/curations`;
export const ENGINE_CURATIONS_NEW_PATH = `${ENGINE_CURATIONS_PATH}/new`;
export const ENGINE_CURATION_PATH = `${ENGINE_CURATIONS_PATH}/:curationId`;
export const ENGINE_CURATION_SUGGESTION_PATH = `${ENGINE_CURATIONS_PATH}/suggestions/:query`;
export const ENGINE_SEARCH_UI_PATH = `${ENGINE_PATH}/search_ui`;
export const ENGINE_API_LOGS_PATH = `${ENGINE_PATH}/api_logs`;

4
x-pack/plugins/enterprise_search/public/applications/shared/constants/actions.ts
View file

@ -49,3 +49,7 @@ export const RESET_DEFAULT_BUTTON_LABEL = i18n.translate(
'xpack.enterpriseSearch.actions.resetDefaultButtonLabel',
{ defaultMessage: 'Reset to default' }
);
export const VIEW_BUTTON_LABEL = i18n.translate('xpack.enterpriseSearch.actions.viewButtonLabel', {
defaultMessage: 'View',
});

8
x-pack/plugins/enterprise_search/public/applications/shared/icons/index.ts Normal file
View file

@ -0,0 +1,8 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
export { LightbulbIcon } from './lightbulb_icon';

27
x-pack/plugins/enterprise_search/public/applications/shared/icons/lightbulb_icon.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
// TODO: This icon will be added to EUI soon - we should remove this custom SVG when once it's available in EUI
export const LightbulbIcon: React.FC = ({ ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
className="euiIcon"
width={16}
height={16}
{...props}
viewBox="0 0 16 16"
aria-hidden="true"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.4934 8.12804C11.4134 7.39347 12 6.26556 12 5C12 2.79086 10.2091 1 8 1C5.79086 1 4 2.79086 4 5C4 6.28899 4.6086 7.43538 5.55822 8.16854C6.27087 8.71875 6.9811 9.6127 6.99963 10.7647L7.5 10.9211V7.20711L6.14645 5.85355C5.95118 5.65829 5.95118 5.34171 6.14645 5.14645C6.34171 4.95118 6.65829 4.95118 6.85355 5.14645L8 6.29289L9.14645 5.14645C9.34171 4.95118 9.65829 4.95118 9.85355 5.14645C10.0488 5.34171 10.0488 5.65829 9.85355 5.85355L8.5 7.20711V11.2336L9 11.3898V10.8927C9 9.66814 9.7538 8.71852 10.4934 8.12804ZM11.1173 8.90952C10.4961 9.40552 10 10.0977 10 10.8927V12.0699C10 12.4072 9.67283 12.6478 9.35086 12.5471L6.65782 11.7056C6.26647 11.5833 6 11.2208 6 10.8108C6 10.0656 5.53698 9.4155 4.94711 8.96009C3.76279 8.04573 3 6.61195 3 5C3 2.23858 5.23858 0 8 0C10.7614 0 13 2.23858 13 5C13 6.58253 12.2648 7.99335 11.1173 8.90952ZM6.65813 12.5257C6.39616 12.4383 6.113 12.5799 6.02567 12.8419C5.93835 13.1039 6.07993 13.387 6.3419 13.4744L8.85539 14.3122C8.94176 14.341 9.00001 14.4218 9.00001 14.5128C9.00001 14.6572 8.85858 14.7592 8.72161 14.7135L6.65813 14.0257C6.39616 13.9383 6.113 14.0799 6.02567 14.3419C5.93835 14.6039 6.07993 14.887 6.3419 14.9744L8.40539 15.6622C9.18988 15.9237 10 15.3398 10 14.5128C10 13.9914 9.66633 13.5284 9.17161 13.3635L6.65813 12.5257Z"
/>
</svg>
);