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

[App Search] Crawler Landing Page (#100822) (#101175)

Browse source 
* New CrawlerLanding component

* New CrawlerRouter component

* Adding CrawlerRouter to EngineRouter

* Using internal route for Crawler link in EngineNav

* Rename crawler landing background

* Fix CrawlerLanding css

* Fix crawler documentation link

* Add Crawler title to breadcrumbs

* Reduce png filesize

* Improve CrawlerLanding copy

* Update x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.scss

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Constance <constancecchen@users.noreply.github.com>

Co-authored-by: Byron Hulcher <byronhulcher@gmail.com>
Co-authored-by: Constance <constancecchen@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2021-06-02 13:35:49 -04:00 • committed by GitHub
parent 9bcb0ae1ec
commit 2a52938c25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 221 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/assets/bg_crawler_landing.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/constants.ts
View file

@ -9,5 +9,5 @@ import { i18n } from '@kbn/i18n';
export const CRAWLER_TITLE = i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.crawler.title',
{ defaultMessage: 'Crawler' }
{ defaultMessage: 'Web Crawler' }
);

13
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.scss Normal file
View file

@ -0,0 +1,13 @@
.crawlerLanding {
&__panel {
overflow: hidden;
background-image: url('./assets/bg_crawler_landing.png');
background-size: 45%;
background-repeat: no-repeat;
background-position: right -2rem;
}
&__wrapper {
max-width: 50rem;
}
}

43
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.test.tsx Normal file
View file

@ -0,0 +1,43 @@
/*
* 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 { setMockValues } from '../../../__mocks__';
import { mockEngineValues } from '../../__mocks__';
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { docLinks } from '../../../shared/doc_links';
import { CrawlerLanding } from './crawler_landing';
describe('CrawlerLanding', () => {
let wrapper: ShallowWrapper;
beforeEach(() => {
setMockValues({ ...mockEngineValues });
wrapper = shallow(<CrawlerLanding />);
});
afterEach(() => {
jest.clearAllMocks();
});
it('contains an external documentation link', () => {
const externalDocumentationLink = wrapper.find('[data-test-subj="CrawlerDocumentationLink"]');
expect(externalDocumentationLink.prop('href')).toBe(
`${docLinks.appSearchBase}/web-crawler.html`
);
});
it('contains a link to standalone App Search', () => {
const externalDocumentationLink = wrapper.find('[data-test-subj="CrawlerStandaloneLink"]');
expect(externalDocumentationLink.prop('href')).toBe('/as/engines/some-engine/crawler');
});
});

85
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.tsx Normal file
View file

@ -0,0 +1,85 @@
/*
* 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 {
EuiButton,
EuiLink,
EuiPageHeader,
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
import { DOCS_PREFIX, ENGINE_CRAWLER_PATH } from '../../routes';
import { generateEnginePath } from '../engine';
import './crawler_landing.scss';
import { CRAWLER_TITLE } from '.';
export const CrawlerLanding: React.FC = () => (
<div data-test-subj="CrawlerLanding" className="crawlerLanding">
<EuiPageHeader pageTitle={CRAWLER_TITLE} />
<EuiSpacer />
<EuiPanel grow paddingSize="l" className="crawlerLanding__panel">
<div className="crawlerLanding__wrapper">
<EuiTitle size="s">
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.title', {
defaultMessage: 'Setup the Web Crawler',
})}
</h2>
</EuiTitle>
<EuiSpacer />
<EuiText>
<p>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.description',
{
defaultMessage:
"Easily index your website's content. To get started, enter your domain name, provide optional entry points and crawl rules, and we will handle the rest.",
}
)}{' '}
<EuiLink
target="_blank"
href={`${DOCS_PREFIX}/web-crawler.html`}
data-test-subj="CrawlerDocumentationLink"
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.documentationLinkLabel',
{
defaultMessage: 'Learn more about the web crawler.',
}
)}
</EuiLink>
</p>
</EuiText>
<EuiSpacer />
<EuiButton
iconType="popout"
fill
color="primary"
href={getAppSearchUrl(generateEnginePath(ENGINE_CRAWLER_PATH))}
target="_blank"
data-test-subj="CrawlerStandaloneLink"
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.standaloneLinkLabel',
{
defaultMessage: 'Configure the web crawler',
}
)}
</EuiButton>
<EuiSpacer size="xl" />
</div>
</EuiPanel>
</div>
);

34
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_router.test.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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { setMockValues } from '../../../__mocks__';
import { mockEngineValues } from '../../__mocks__';
import React from 'react';
import { Switch } from 'react-router-dom';
import { shallow } from 'enzyme';
import { CrawlerLanding } from './crawler_landing';
import { CrawlerRouter } from './crawler_router';
describe('CrawlerRouter', () => {
beforeEach(() => {
setMockValues({ ...mockEngineValues });
});
afterEach(() => {
jest.clearAllMocks();
});
it('renders a landing page', () => {
const wrapper = shallow(<CrawlerRouter />);
expect(wrapper.find(Switch)).toHaveLength(1);
expect(wrapper.find(CrawlerLanding)).toHaveLength(1);
});
});

27
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_router.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';
import { Route, Switch } from 'react-router-dom';
import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
import { getEngineBreadcrumbs } from '../engine';
import { CRAWLER_TITLE } from './constants';
import { CrawlerLanding } from './crawler_landing';
export const CrawlerRouter: React.FC = () => {
return (
<Switch>
<Route>
<SetPageChrome trail={getEngineBreadcrumbs([CRAWLER_TITLE])} />
<CrawlerLanding />
</Route>
</Switch>
);
};

1
x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/index.ts
View file

@ -6,3 +6,4 @@
*/
export { CRAWLER_TITLE } from './constants';
export { CrawlerRouter } from './crawler_router';

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx
View file

@ -12,7 +12,6 @@ import { useValues } from 'kea';
import { EuiText, EuiBadge, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
import { SideNavLink, SideNavItem } from '../../../shared/layout';
import { AppLogic } from '../../app_logic';
import {
@ -170,8 +169,7 @@ export const EngineNav: React.FC = () => {
)}
{canViewEngineCrawler && !isMetaEngine && (
<SideNavLink
isExternal
to={getAppSearchUrl(generateEnginePath(ENGINE_CRAWLER_PATH))}
to={generateEnginePath(ENGINE_CRAWLER_PATH)}
data-test-subj="EngineCrawlerLink"
>
{CRAWLER_TITLE}

8
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx
View file

@ -18,6 +18,7 @@ import { shallow } from 'enzyme';
import { Loading } from '../../../shared/loading';
import { AnalyticsRouter } from '../analytics';
import { ApiLogs } from '../api_logs';
import { CrawlerRouter } from '../crawler';
import { CurationsRouter } from '../curations';
import { Documents, DocumentDetail } from '../documents';
import { EngineOverview } from '../engine_overview';
@ -168,4 +169,11 @@ describe('EngineRouter', () => {
expect(wrapper.find(SearchUI)).toHaveLength(1);
});
it('renders a crawler view', () => {
setMockValues({ ...values, myRole: { canViewEngineCrawler: true } });
const wrapper = shallow(<EngineRouter />);
expect(wrapper.find(CrawlerRouter)).toHaveLength(1);
});
});

10
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
View file

@ -23,7 +23,7 @@ import {
ENGINE_DOCUMENTS_PATH,
ENGINE_DOCUMENT_DETAIL_PATH,
ENGINE_SCHEMA_PATH,
// ENGINE_CRAWLER_PATH,
ENGINE_CRAWLER_PATH,
META_ENGINE_SOURCE_ENGINES_PATH,
ENGINE_RELEVANCE_TUNING_PATH,
ENGINE_SYNONYMS_PATH,
@ -34,6 +34,7 @@ import {
} from '../../routes';
import { AnalyticsRouter } from '../analytics';
import { ApiLogs } from '../api_logs';
import { CrawlerRouter } from '../crawler';
import { CurationsRouter } from '../curations';
import { DocumentDetail, Documents } from '../documents';
import { EngineOverview } from '../engine_overview';
@ -52,7 +53,7 @@ export const EngineRouter: React.FC = () => {
canViewEngineAnalytics,
canViewEngineDocuments,
canViewEngineSchema,
// canViewEngineCrawler,
canViewEngineCrawler,
canViewMetaEngineSourceEngines,
canManageEngineRelevanceTuning,
canManageEngineSynonyms,
@ -143,6 +144,11 @@ export const EngineRouter: React.FC = () => {
<SourceEngines />
</Route>
)}
{canViewEngineCrawler && (
<Route path={ENGINE_CRAWLER_PATH}>
<CrawlerRouter />
</Route>
)}
<Route>
<SetPageChrome trail={getEngineBreadcrumbs()} />
<EngineOverview />