Skip to content

Commit

Permalink
[Ingest Manager] Integrate beta messaging with Add Data (elastic#71147)
Browse files Browse the repository at this point in the history
* Add methods to register directory notices and header links in tutorials, and use registered components when rendering tutorial directory

* Add methods to register module notices components in tutorial pages, and use registered components when rendering tutorial page

* Add `moduleName` field to server tutorial schema and test fixure

* Surface `moduleName` field from built in tutorials and registered apm tutorial

* Export component types

* Add KibanaContextProvider to home plugin app render

* Move setHttpClient to ingest manager plugin setup() method; add home as optional plugin dep; register tutorial module notice

* Fix key prop warnings

* Add dismissable tutorial directory notice and corresponding ingest manager global setting field

* Add tutorial directory header link and tie it to the state of the dismissible directory notice via observable

* Put spacing inside module notice component itself

* Check if ingest manager is available in current space

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
jen-huang and elasticmachine authored Jul 9, 2020
1 parent 09da110 commit 9037018
Show file tree
Hide file tree
Showing 100 changed files with 663 additions and 70 deletions.
2 changes: 2 additions & 0 deletions src/plugins/apm_oss/server/tutorial/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { APM_STATIC_INDEX_PATTERN_ID } from '../../common/index_pattern_constant
const apmIntro = i18n.translate('apmOss.tutorial.introduction', {
defaultMessage: 'Collect in-depth performance metrics and errors from inside your applications.',
});
const moduleName = 'apm';

export const tutorialProvider = ({
indexPatternTitle,
Expand Down Expand Up @@ -68,6 +69,7 @@ export const tutorialProvider = ({
name: i18n.translate('apmOss.tutorial.specProvider.name', {
defaultMessage: 'APM',
}),
moduleName,
category: TutorialsCategory.OTHER,
shortDescription: apmIntro,
longDescription: i18n.translate('apmOss.tutorial.specProvider.longDescription', {
Expand Down
16 changes: 13 additions & 3 deletions src/plugins/home/public/application/application.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,19 @@
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { i18n } from '@kbn/i18n';
import { ScopedHistory } from 'kibana/public';
import { ScopedHistory, CoreStart } from 'kibana/public';
import { KibanaContextProvider } from '../../../kibana_react/public';
// @ts-ignore
import { HomeApp } from './components/home_app';
import { getServices } from './kibana_services';

import './index.scss';

export const renderApp = async (element: HTMLElement, history: ScopedHistory) => {
export const renderApp = async (
element: HTMLElement,
coreStart: CoreStart,
history: ScopedHistory
) => {
const homeTitle = i18n.translate('home.breadcrumbs.homeTitle', { defaultMessage: 'Home' });
const { featureCatalogue, chrome } = getServices();

Expand All @@ -36,7 +41,12 @@ export const renderApp = async (element: HTMLElement, history: ScopedHistory) =>

chrome.setBreadcrumbs([{ text: homeTitle }]);

render(<HomeApp directories={directories} />, element);
render(
<KibanaContextProvider services={{ ...coreStart }}>
<HomeApp directories={directories} />
</KibanaContextProvider>,
element
);

// dispatch synthetic hash change event to update hash history objects
// this is necessary because hash updates triggered by using popState won't trigger this event naturally.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,23 @@ class TutorialUi extends React.Component {
}
};

renderModuleNotices() {
const notices = getServices().tutorialService.getModuleNotices();
if (notices.length && this.state.tutorial.moduleName) {
return (
<EuiFlexGroup direction="column" gutterSize="none">
{notices.map((ModuleNotice, index) => (
<EuiFlexItem key={index}>
<ModuleNotice moduleName={this.state.tutorial.moduleName} />
</EuiFlexItem>
))}
</EuiFlexGroup>
);
} else {
return null;
}
}

render() {
let content;
if (this.state.notFound) {
Expand Down Expand Up @@ -382,6 +399,7 @@ class TutorialUi extends React.Component {
isBeta={this.state.tutorial.isBeta}
/>

{this.renderModuleNotices()}
<EuiSpacer />
<div className="eui-textCenter">{this.renderInstructionSetsToggle()}</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ jest.mock('../../kibana_services', () => ({
chrome: {
setBreadcrumbs: () => {},
},
tutorialService: {
getModuleNotices: () => [],
},
}),
}));
jest.mock('../../../../../kibana_react/public', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
EuiTab,
EuiFlexItem,
EuiFlexGrid,
EuiFlexGroup,
EuiSpacer,
EuiTitle,
EuiPageBody,
Expand Down Expand Up @@ -102,6 +103,7 @@ class TutorialDirectoryUi extends React.Component {
this.state = {
selectedTabId: openTab,
tutorialCards: [],
notices: getServices().tutorialService.getDirectoryNotices(),
};
}

Expand Down Expand Up @@ -227,18 +229,62 @@ class TutorialDirectoryUi extends React.Component {
);
};

renderNotices = () => {
const notices = getServices().tutorialService.getDirectoryNotices();
return notices.length ? (
<EuiFlexGroup direction="column" gutterSize="none">
{notices.map((DirectoryNotice, index) => (
<EuiFlexItem key={index}>
<DirectoryNotice />
</EuiFlexItem>
))}
</EuiFlexGroup>
) : null;
};

renderHeaderLinks = () => {
const headerLinks = getServices().tutorialService.getDirectoryHeaderLinks();
return headerLinks.length ? (
<EuiFlexGroup gutterSize="m" alignItems="center">
{headerLinks.map((HeaderLink, index) => (
<EuiFlexItem key={index}>
<HeaderLink />
</EuiFlexItem>
))}
</EuiFlexGroup>
) : null;
};

renderHeader = () => {
const notices = this.renderNotices();
const headerLinks = this.renderHeaderLinks();

return (
<>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle size="l">
<h1>
<FormattedMessage
id="home.tutorial.addDataToKibanaTitle"
defaultMessage="Add data"
/>
</h1>
</EuiTitle>
</EuiFlexItem>
{headerLinks ? <EuiFlexItem grow={false}>{headerLinks}</EuiFlexItem> : null}
</EuiFlexGroup>
{notices}
</>
);
};

render() {
return (
<EuiPage restrictWidth={1200}>
<EuiPageBody>
<EuiTitle size="l">
<h1>
<FormattedMessage id="home.tutorial.addDataToKibanaTitle" defaultMessage="Add data" />
</h1>
</EuiTitle>

{this.renderHeader()}
<EuiSpacer size="m" />

<EuiTabs>{this.renderTabs()}</EuiTabs>
<EuiSpacer />
{this.renderTabContent()}
Expand Down
3 changes: 3 additions & 0 deletions src/plugins/home/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ export {
FeatureCatalogueCategory,
Environment,
TutorialVariables,
TutorialDirectoryNoticeComponent,
TutorialDirectoryHeaderLinkComponent,
TutorialModuleNoticeComponent,
} from './services';
export * from '../common/instruction_variant';
import { HomePublicPlugin } from './plugin';
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/home/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export class HomePublicPlugin
i18n.translate('home.pageTitle', { defaultMessage: 'Home' })
);
const { renderApp } = await import('./application');
return await renderApp(params.element, params.history);
return await renderApp(params.element, coreStart, params.history);
},
});
kibanaLegacy.forwardApp('home', 'home');
Expand Down
9 changes: 8 additions & 1 deletion src/plugins/home/public/services/tutorials/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,11 @@
* under the License.
*/

export { TutorialService, TutorialVariables, TutorialServiceSetup } from './tutorial_service';
export {
TutorialService,
TutorialVariables,
TutorialServiceSetup,
TutorialDirectoryNoticeComponent,
TutorialDirectoryHeaderLinkComponent,
TutorialModuleNoticeComponent,
} from './tutorial_service';
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ import { TutorialService, TutorialServiceSetup } from './tutorial_service';
const createSetupMock = (): jest.Mocked<TutorialServiceSetup> => {
const setup = {
setVariable: jest.fn(),
registerDirectoryNotice: jest.fn(),
registerDirectoryHeaderLink: jest.fn(),
registerModuleNotice: jest.fn(),
};
return setup;
};
Expand All @@ -30,6 +33,9 @@ const createMock = (): jest.Mocked<PublicMethodsOf<TutorialService>> => {
const service = {
setup: jest.fn(),
getVariables: jest.fn(() => ({})),
getDirectoryNotices: jest.fn(() => []),
getDirectoryHeaderLinks: jest.fn(() => []),
getModuleNotices: jest.fn(() => []),
};
service.setup.mockImplementation(createSetupMock);
return service;
Expand Down

This file was deleted.

Loading

0 comments on commit 9037018

Please sign in to comment.