Skip to content

Commit

Permalink
[APM] Some miscellaneous client new platform updates (#51482)
Browse files Browse the repository at this point in the history
* Move `setHelpExtension` to plugin start method instead of plugin root
* Move `setHelpExtension` to a separate file
* Remove 'ui/modules' import
* Use new platform capabilities in useUpdateBadgeEffect
* Move useUpdateBadgeEffect to a utility function called in start
* Add plugins and plugins context to new platform start
* Use new platform plugins for KueryBar autocomplete provider
* Add types for plugin and rename to ApmPublicPlugin
* Add empty setup method to plugin
* Move all context providers from App to render method
* Remove some unnecessary mocks

References #32894.
  • Loading branch information
smith committed Nov 26, 2019
1 parent aecea19 commit 0cc3266
Show file tree
Hide file tree
Showing 9 changed files with 153 additions and 109 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { shallow } from 'enzyme';
import React from 'react';
import { Home } from '../Home';

jest.mock('ui/index_patterns');
jest.mock('ui/new_platform');

describe('Home component', () => {
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ import { mount } from 'enzyme';
import { EuiSuperDatePicker } from '@elastic/eui';
import { MemoryRouter } from 'react-router-dom';

jest.mock('ui/kfetch');

const mockHistoryPush = jest.spyOn(history, 'push');
const mockRefreshTimeRange = jest.fn();
const MockUrlParamsProvider: React.FC<{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import React, { useState } from 'react';
import { uniqueId, startsWith } from 'lodash';
import styled from 'styled-components';
import { npStart } from 'ui/new_platform';
import { StaticIndexPattern } from 'ui/index_patterns';
import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
import { i18n } from '@kbn/i18n';
Expand All @@ -18,16 +17,17 @@ import { getBoolFilter } from './get_bool_filter';
import { useLocation } from '../../../hooks/useLocation';
import { useUrlParams } from '../../../hooks/useUrlParams';
import { history } from '../../../utils/history';
import { AutocompleteSuggestion } from '../../../../../../../../src/plugins/data/public';
import {
AutocompleteSuggestion,
AutocompleteProvider
} from '../../../../../../../../src/plugins/data/public';
import { useDynamicIndexPattern } from '../../../hooks/useDynamicIndexPattern';
import { usePlugins } from '../../../new-platform/plugin';

const Container = styled.div`
margin-bottom: 10px;
`;

const getAutocompleteProvider = (language: string) =>
npStart.plugins.data.autocomplete.getProvider(language);

interface State {
suggestions: AutocompleteSuggestion[];
isLoadingSuggestions: boolean;
Expand All @@ -45,9 +45,9 @@ function getSuggestions(
query: string,
selectionStart: number,
indexPattern: StaticIndexPattern,
boolFilter: unknown
boolFilter: unknown,
autocompleteProvider?: AutocompleteProvider
) {
const autocompleteProvider = getAutocompleteProvider('kuery');
if (!autocompleteProvider) {
return [];
}
Expand All @@ -74,6 +74,8 @@ export function KueryBar() {
});
const { urlParams } = useUrlParams();
const location = useLocation();
const { data } = usePlugins();
const autocompleteProvider = data.autocomplete.getProvider('kuery');

let currentRequestCheck;

Expand Down Expand Up @@ -108,7 +110,8 @@ export function KueryBar() {
inputValue,
selectionStart,
indexPattern,
boolFilter
boolFilter,
autocompleteProvider
)
)
.filter(suggestion => !startsWith(suggestion.text, 'span.'))
Expand Down
35 changes: 5 additions & 30 deletions x-pack/legacy/plugins/apm/public/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,18 @@

import { npStart } from 'ui/new_platform';
import 'react-vis/dist/style.css';
import { PluginInitializerContext } from 'kibana/public';
import 'ui/autoload/all';
import chrome from 'ui/chrome';
import { i18n } from '@kbn/i18n';
import url from 'url';

// @ts-ignore
import { uiModules } from 'ui/modules';
import { plugin } from './new-platform';
import { REACT_APP_ROOT_ID } from './new-platform/plugin';
import './style/global_overrides.css';
import template from './templates/index.html';

const { core } = npStart;

// render APM feedback link in global help menu
core.chrome.setHelpExtension({
appName: i18n.translate('xpack.apm.feedbackMenu.appName', {
defaultMessage: 'APM'
}),
links: [
{
linkType: 'discuss',
href: 'https://discuss.elastic.co/c/apm'
},
{
linkType: 'custom',
href: url.format({
pathname: core.http.basePath.prepend('/app/kibana'),
hash: '/management/elasticsearch/upgrade_assistant'
}),
content: i18n.translate('xpack.apm.helpMenu.upgradeAssistantLink', {
defaultMessage: 'Upgrade assistant'
})
}
]
});
const { core, plugins } = npStart;

// This will be moved to core.application.register when the new platform
// migration is complete.
// @ts-ignore
chrome.setRootTemplate(template);

Expand All @@ -57,5 +32,5 @@ const checkForRoot = () => {
});
};
checkForRoot().then(() => {
plugin().start(core);
plugin({} as PluginInitializerContext).start(core, plugins);
});
10 changes: 6 additions & 4 deletions x-pack/legacy/plugins/apm/public/new-platform/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { Plugin } from './plugin';
import { PluginInitializer } from '../../../../../../src/core/public';
import { ApmPlugin, ApmPluginSetup, ApmPluginStart } from './plugin';

export function plugin() {
return new Plugin();
}
export const plugin: PluginInitializer<
ApmPluginSetup,
ApmPluginStart
> = _core => new ApmPlugin();
104 changes: 71 additions & 33 deletions x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,17 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import React, { useContext, createContext } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom';
import styled from 'styled-components';
import { LegacyCoreStart } from 'src/core/public';
import {
CoreStart,
LegacyCoreStart,
Plugin,
CoreSetup
} from '../../../../../../src/core/public';
import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
import { KibanaCoreContextProvider } from '../../../observability/public';
import { history } from '../utils/history';
import { LocationProvider } from '../context/LocationContext';
Expand All @@ -19,9 +25,10 @@ import { LicenseProvider } from '../context/LicenseContext';
import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
import { routes } from '../components/app/Main/route_config';
import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
import { useUpdateBadgeEffect } from '../components/app/Main/useUpdateBadgeEffect';
import { MatchedRouteProvider } from '../context/MatchedRouteContext';
import { createStaticIndexPattern } from '../services/rest/index_pattern';
import { setHelpExtension } from './setHelpExtension';
import { setReadonlyBadge } from './updateBadge';

export const REACT_APP_ROOT_ID = 'react-apm-root';

Expand All @@ -31,41 +38,70 @@ const MainContainer = styled.main`
`;

const App = () => {
useUpdateBadgeEffect();

return (
<MatchedRouteProvider>
<UrlParamsProvider>
<LoadingIndicatorProvider>
<MainContainer data-test-subj="apmMainContainer">
<UpdateBreadcrumbs />
<Route component={ScrollToTopOnPathChange} />
<LicenseProvider>
<Switch>
{routes.map((route, i) => (
<Route key={i} {...route} />
))}
</Switch>
</LicenseProvider>
</MainContainer>
</LoadingIndicatorProvider>
</UrlParamsProvider>
</MatchedRouteProvider>
<MainContainer data-test-subj="apmMainContainer">
<UpdateBreadcrumbs />
<Route component={ScrollToTopOnPathChange} />
<Switch>
{routes.map((route, i) => (
<Route key={i} {...route} />
))}
</Switch>
</MainContainer>
);
};

export class Plugin {
public start(core: LegacyCoreStart) {
const { i18n } = core;
export type ApmPluginSetup = void;
export type ApmPluginStart = void;
export type ApmPluginSetupDeps = {}; // eslint-disable-line @typescript-eslint/consistent-type-definitions

export interface ApmPluginStartDeps {
data: DataPublicPluginStart;
}

const PluginsContext = createContext({} as ApmPluginStartDeps);

export function usePlugins() {
return useContext(PluginsContext);
}

export class ApmPlugin
implements
Plugin<
ApmPluginSetup,
ApmPluginStart,
ApmPluginSetupDeps,
ApmPluginStartDeps
> {
// Take the DOM element as the constructor, so we can mount the app.
public setup(_core: CoreSetup, _plugins: ApmPluginSetupDeps) {}

public start(core: CoreStart, plugins: ApmPluginStartDeps) {
const i18nCore = core.i18n;

// render APM feedback link in global help menu
setHelpExtension(core);
setReadonlyBadge(core);

ReactDOM.render(
<KibanaCoreContextProvider core={core}>
<i18n.Context>
<Router history={history}>
<LocationProvider>
<App />
</LocationProvider>
</Router>
</i18n.Context>
<KibanaCoreContextProvider core={core as LegacyCoreStart}>
<PluginsContext.Provider value={plugins}>
<i18nCore.Context>
<Router history={history}>
<LocationProvider>
<MatchedRouteProvider>
<UrlParamsProvider>
<LoadingIndicatorProvider>
<LicenseProvider>
<App />
</LicenseProvider>
</LoadingIndicatorProvider>
</UrlParamsProvider>
</MatchedRouteProvider>
</LocationProvider>
</Router>
</i18nCore.Context>
</PluginsContext.Provider>
</KibanaCoreContextProvider>,
document.getElementById(REACT_APP_ROOT_ID)
);
Expand All @@ -76,4 +112,6 @@ export class Plugin {
console.log('Error fetching static index pattern', e);
});
}

public stop() {}
}
33 changes: 33 additions & 0 deletions x-pack/legacy/plugins/apm/public/new-platform/setHelpExtension.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import url from 'url';
import { i18n } from '@kbn/i18n';
import { CoreStart } from 'kibana/public';

export function setHelpExtension({ chrome, http }: CoreStart) {
chrome.setHelpExtension({
appName: i18n.translate('xpack.apm.feedbackMenu.appName', {
defaultMessage: 'APM'
}),
links: [
{
linkType: 'discuss',
href: 'https://discuss.elastic.co/c/apm'
},
{
linkType: 'custom',
href: url.format({
pathname: http.basePath.prepend('/app/kibana'),
hash: '/management/elasticsearch/upgrade_assistant'
}),
content: i18n.translate('xpack.apm.helpMenu.upgradeAssistantLink', {
defaultMessage: 'Upgrade assistant'
})
}
]
});
}
27 changes: 27 additions & 0 deletions x-pack/legacy/plugins/apm/public/new-platform/updateBadge.ts
Original file line number Diff line number Diff line change
@@ -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;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';
import { CoreStart } from 'kibana/public';

export function setReadonlyBadge({ application, chrome }: CoreStart) {
const canSave = application.capabilities.apm.save;
const { setBadge } = chrome;

setBadge(
!canSave
? {
text: i18n.translate('xpack.apm.header.badge.readOnly.text', {
defaultMessage: 'Read only'
}),
tooltip: i18n.translate('xpack.apm.header.badge.readOnly.tooltip', {
defaultMessage: 'Unable to save'
}),
iconType: 'glasses'
}
: undefined
);
}

0 comments on commit 0cc3266

Please sign in to comment.