diff --git a/examples/alerting_example/kibana.json b/examples/alerting_example/kibana.json index 76c549adc797005..5a2304281abc912 100644 --- a/examples/alerting_example/kibana.json +++ b/examples/alerting_example/kibana.json @@ -4,6 +4,6 @@ "kibanaVersion": "kibana", "server": true, "ui": true, - "requiredPlugins": ["triggers_actions_ui", "charts", "data", "alerting", "actions"], + "requiredPlugins": ["triggers_actions_ui", "charts", "data", "alerting", "actions", "developerExamples"], "optionalPlugins": [] } diff --git a/examples/alerting_example/public/alerting.png b/examples/alerting_example/public/alerting.png new file mode 100644 index 000000000000000..f8ba96b410bb3f0 Binary files /dev/null and b/examples/alerting_example/public/alerting.png differ diff --git a/examples/alerting_example/public/plugin.tsx b/examples/alerting_example/public/plugin.tsx index e3748e3235f4768..5bb378e513ebe95 100644 --- a/examples/alerting_example/public/plugin.tsx +++ b/examples/alerting_example/public/plugin.tsx @@ -17,7 +17,7 @@ * under the License. */ -import { Plugin, CoreSetup, AppMountParameters } from 'kibana/public'; +import { Plugin, CoreSetup, AppMountParameters, AppNavLinkStatus } from '../../../src/core/public'; import { PluginSetupContract as AlertingSetup } from '../../../x-pack/plugins/alerting/public'; import { ChartsPluginStart } from '../../../src/plugins/charts/public'; import { TriggersAndActionsUIPublicPluginSetup } from '../../../x-pack/plugins/triggers_actions_ui/public'; @@ -25,6 +25,8 @@ import { DataPublicPluginStart } from '../../../src/plugins/data/public'; import { getAlertType as getAlwaysFiringAlertType } from './alert_types/always_firing'; import { getAlertType as getPeopleInSpaceAlertType } from './alert_types/astros'; import { registerNavigation } from './alert_types'; +import { DeveloperExamplesSetup } from '../../developer_examples/public'; +import image from './alerting.png'; export type Setup = void; export type Start = void; @@ -32,6 +34,7 @@ export type Start = void; export interface AlertingExamplePublicSetupDeps { alerting: AlertingSetup; triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup; + developerExamples: DeveloperExamplesSetup; } export interface AlertingExamplePublicStartDeps { @@ -44,11 +47,12 @@ export interface AlertingExamplePublicStartDeps { export class AlertingExamplePlugin implements Plugin { public setup( core: CoreSetup, - { alerting, triggers_actions_ui }: AlertingExamplePublicSetupDeps + { alerting, triggers_actions_ui, developerExamples }: AlertingExamplePublicSetupDeps ) { core.application.register({ id: 'AlertingExample', title: 'Alerting Example', + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { const [coreStart, depsStart] = await core.getStartServices(); const { renderApp } = await import('./application'); @@ -60,6 +64,22 @@ export class AlertingExamplePlugin implements Plugin Promise<{ num: number }>; @@ -27,6 +29,7 @@ export interface ExplorerService { export interface BfetchExplorerSetupPlugins { bfetch: BfetchPublicSetup; + developerExamples: DeveloperExamplesSetup; } export interface BfetchExplorerStartPlugins { @@ -36,9 +39,9 @@ export interface BfetchExplorerStartPlugins { export class BfetchExplorerPlugin implements Plugin { public setup( core: CoreSetup, - plugins: BfetchExplorerSetupPlugins + { bfetch, developerExamples }: BfetchExplorerSetupPlugins ) { - const double = plugins.bfetch.batchedFunction<{ num: number }, { num: number }>({ + const double = bfetch.batchedFunction<{ num: number }, { num: number }>({ url: '/bfetch_explorer/double', }); @@ -49,8 +52,26 @@ export class BfetchExplorerPlugin implements Plugin { core.application.register({ id: 'bfetch-explorer', title: 'bfetch explorer', + navLinkStatus: AppNavLinkStatus.hidden, mount: mount(core, explorer), }); + + developerExamples.register({ + appId: 'bfetch-explorer', + title: 'bfetch', + description: + 'bfetch is a service that allows to batch HTTP requests and streams responses back.', + image, + links: [ + { + label: 'README', + href: 'https://github.com/elastic/kibana/blob/master/src/plugins/bfetch/README.md', + iconType: 'logoGithub', + size: 's', + target: '_blank', + }, + ], + }); } public start() {} diff --git a/examples/developer_examples/README.md b/examples/developer_examples/README.md new file mode 100644 index 000000000000000..b2925da329e2429 --- /dev/null +++ b/examples/developer_examples/README.md @@ -0,0 +1,14 @@ +## Developer examples + +Owner: Kibana application architecture team + +Register your API services, a description, and add links to examples and READMEs. These +will appear in the Developer portal app when Kibana in dev mode, is run via : + +``` +yarn start --run-examples +``` + + + + diff --git a/examples/developer_examples/developer_examples.png b/examples/developer_examples/developer_examples.png new file mode 100644 index 000000000000000..c2372662aee86e9 Binary files /dev/null and b/examples/developer_examples/developer_examples.png differ diff --git a/examples/developer_examples/kibana.json b/examples/developer_examples/kibana.json new file mode 100644 index 000000000000000..8c9ec2e4dcbfcb5 --- /dev/null +++ b/examples/developer_examples/kibana.json @@ -0,0 +1,9 @@ +{ + "id": "developerExamples", + "version": "0.0.1", + "kibanaVersion": "kibana", + "server": false, + "ui": true, + "requiredPlugins": [], + "optionalPlugins": [] +} diff --git a/examples/developer_examples/navigation.png b/examples/developer_examples/navigation.png new file mode 100644 index 000000000000000..d1cc5e71f3e549f Binary files /dev/null and b/examples/developer_examples/navigation.png differ diff --git a/examples/developer_examples/public/app.tsx b/examples/developer_examples/public/app.tsx new file mode 100644 index 000000000000000..c132296a586a34f --- /dev/null +++ b/examples/developer_examples/public/app.tsx @@ -0,0 +1,112 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom'; + +import { + EuiText, + EuiPageContent, + EuiCard, + EuiPageContentHeader, + EuiFlexGroup, + EuiFlexItem, + EuiFieldSearch, + EuiListGroup, + EuiHighlight, +} from '@elastic/eui'; +import { AppMountParameters } from 'kibana/public'; +import { EuiListGroupItemProps } from '@elastic/eui'; +import { ExampleDefinition } from './types'; + +interface Props { + examples: ExampleDefinition[]; + navigateToApp: (appId: string) => void; +} + +function DeveloperExamples({ examples, navigateToApp }: Props) { + const [search, setSearch] = useState(''); + + const lcSearch = search.toLowerCase(); + const filteredExamples = !lcSearch + ? examples + : examples.filter(def => { + if (def.description.toLowerCase().indexOf(lcSearch) >= 0) return true; + if (def.title.toLowerCase().indexOf(lcSearch) >= 0) return true; + return false; + }); + + return ( + + + +

Developer examples

+

+ The following examples showcase services and APIs that are available to developers. + setSearch(e.target.value)} + isClearable={true} + aria-label="Search developer examples" + /> +

+ + + + {filteredExamples.map(def => ( + + + {def.description} + + } + title={ + + {def.title} + + } + image={def.image} + footer={ + navigateToApp(def.appId), + iconType: 'popout', + size: 's', + }, + ...(def.links ? def.links : []), + ]} + /> + } + /> + + ))} + + + ); +} + +export const renderApp = (props: Props, element: AppMountParameters['element']) => { + ReactDOM.render(, element); + + return () => ReactDOM.unmountComponentAtNode(element); +}; diff --git a/examples/developer_examples/public/index.ts b/examples/developer_examples/public/index.ts new file mode 100644 index 000000000000000..616fb011e37058b --- /dev/null +++ b/examples/developer_examples/public/index.ts @@ -0,0 +1,24 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { DeveloperExamplesPlugin } from './plugin'; + +export const plugin = () => new DeveloperExamplesPlugin(); + +export { DeveloperExamplesSetup } from './plugin'; diff --git a/examples/developer_examples/public/plugin.ts b/examples/developer_examples/public/plugin.ts new file mode 100644 index 000000000000000..bdf1bceecc4527b --- /dev/null +++ b/examples/developer_examples/public/plugin.ts @@ -0,0 +1,67 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { + CoreSetup, + Plugin, + AppMountParameters, + DEFAULT_APP_CATEGORIES, +} from '../../../src/core/public'; + +import { ExampleDefinition } from './types'; + +export interface DeveloperExamplesSetup { + register: (def: ExampleDefinition) => void; +} + +export class DeveloperExamplesPlugin implements Plugin { + private examplesRegistry: ExampleDefinition[] = []; + + public setup(core: CoreSetup) { + const examples = this.examplesRegistry; + core.application.register({ + id: 'developerExamples', + title: 'Developer examples', + order: -2000, + category: DEFAULT_APP_CATEGORIES.kibana, + async mount(params: AppMountParameters) { + const { renderApp } = await import('./app'); + const [coreStart] = await core.getStartServices(); + return renderApp( + { + examples, + navigateToApp: (appId: string) => coreStart.application.navigateToApp(appId), + }, + params.element + ); + }, + }); + + const api: DeveloperExamplesSetup = { + register: def => { + this.examplesRegistry.push(def); + }, + }; + return api; + } + + public start() {} + + public stop() {} +} diff --git a/examples/developer_examples/public/types.ts b/examples/developer_examples/public/types.ts new file mode 100644 index 000000000000000..0ef359ef64a2357 --- /dev/null +++ b/examples/developer_examples/public/types.ts @@ -0,0 +1,34 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { EuiListGroupItemProps } from '@elastic/eui'; + +export interface ExampleDefinition { + /** + * The application id that is the landing page for the example. + */ + appId: string; + title: string; + description: string; + image?: string; + /** + * Any additional links you want to show, for example to the github README. + */ + links?: EuiListGroupItemProps[]; +} diff --git a/examples/developer_examples/tsconfig.json b/examples/developer_examples/tsconfig.json new file mode 100644 index 000000000000000..d508076b3319904 --- /dev/null +++ b/examples/developer_examples/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./target", + "skipLibCheck": true + }, + "include": [ + "index.ts", + "public/**/*.ts", + "public/**/*.tsx", + "server/**/*.ts", + "../../typings/**/*", + ], + "exclude": [] +} diff --git a/examples/embeddable_explorer/kibana.json b/examples/embeddable_explorer/kibana.json index 3e4b074fb6b12dd..aa14549d0460fa6 100644 --- a/examples/embeddable_explorer/kibana.json +++ b/examples/embeddable_explorer/kibana.json @@ -4,6 +4,6 @@ "kibanaVersion": "kibana", "server": false, "ui": true, - "requiredPlugins": ["uiActions", "inspector", "embeddable", "embeddableExamples"], + "requiredPlugins": ["uiActions", "inspector", "embeddable", "embeddableExamples", "developerExamples"], "optionalPlugins": [] } diff --git a/examples/embeddable_explorer/public/embeddables.png b/examples/embeddable_explorer/public/embeddables.png new file mode 100644 index 000000000000000..90b287962d24823 Binary files /dev/null and b/examples/embeddable_explorer/public/embeddables.png differ diff --git a/examples/embeddable_explorer/public/plugin.tsx b/examples/embeddable_explorer/public/plugin.tsx index bba1b1748e20774..479c311b10f0a56 100644 --- a/examples/embeddable_explorer/public/plugin.tsx +++ b/examples/embeddable_explorer/public/plugin.tsx @@ -16,12 +16,13 @@ * specific language governing permissions and limitations * under the License. */ - -import { Plugin, CoreSetup, AppMountParameters } from 'kibana/public'; import { EmbeddableExamplesStart } from 'examples/embeddable_examples/public/plugin'; +import { Plugin, CoreSetup, AppMountParameters, AppNavLinkStatus } from '../../../src/core/public'; import { UiActionsService } from '../../../src/plugins/ui_actions/public'; import { EmbeddableStart } from '../../../src/plugins/embeddable/public'; import { Start as InspectorStart } from '../../../src/plugins/inspector/public'; +import { DeveloperExamplesSetup } from '../../developer_examples/public'; +import img from './embeddables.png'; interface StartDeps { uiActions: UiActionsService; @@ -30,11 +31,16 @@ interface StartDeps { embeddableExamples: EmbeddableExamplesStart; } +interface SetupDeps { + developerExamples: DeveloperExamplesSetup; +} + export class EmbeddableExplorerPlugin implements Plugin { - public setup(core: CoreSetup) { + public setup(core: CoreSetup, { developerExamples }: SetupDeps) { core.application.register({ id: 'embeddableExplorer', title: 'Embeddable explorer', + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { const [coreStart, depsStart] = await core.getStartServices(); const { renderApp } = await import('./app'); @@ -55,6 +61,22 @@ export class EmbeddableExplorerPlugin implements Plugin) { + public setup( + core: CoreSetup, + { developerExamples }: SetupDeps + ) { core.application.register({ id: 'searchExplorer', title: 'Search Explorer', + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { const [coreStart, depsStart] = await core.getStartServices(); const { renderApp } = await import('./application'); return renderApp(coreStart, depsStart, params); }, }); + + developerExamples.register({ + appId: 'searchExplorer', + title: 'Data search services', + description: `Data search services can be used to query Elasticsearch in away that supports background search + and partial results, when available. It also automatically incorporates settings such as requestTimeout and includeFrozen. + Use the provided ES search strategy, or register your own. + `, + image, + links: [ + { + label: 'README', + href: + 'https://github.com/elastic/kibana/blob/master/src/plugins/data/public/search/README.md', + iconType: 'logoGithub', + size: 's', + target: '_blank', + }, + ], + }); } public start() {} diff --git a/examples/search_explorer/public/search_strategy.png b/examples/search_explorer/public/search_strategy.png new file mode 100644 index 000000000000000..8b1ed5bc83cdbb9 Binary files /dev/null and b/examples/search_explorer/public/search_strategy.png differ diff --git a/examples/state_containers_examples/kibana.json b/examples/state_containers_examples/kibana.json index 581b399e3ffbac9..66da207cb4e7721 100644 --- a/examples/state_containers_examples/kibana.json +++ b/examples/state_containers_examples/kibana.json @@ -4,6 +4,6 @@ "kibanaVersion": "kibana", "server": true, "ui": true, - "requiredPlugins": ["navigation", "data"], + "requiredPlugins": ["navigation", "data", "developerExamples"], "optionalPlugins": [] } diff --git a/examples/state_containers_examples/public/plugin.ts b/examples/state_containers_examples/public/plugin.ts index 38ebf315789c093..dac4b6781feddec 100644 --- a/examples/state_containers_examples/public/plugin.ts +++ b/examples/state_containers_examples/public/plugin.ts @@ -17,15 +17,22 @@ * under the License. */ -import { AppMountParameters, CoreSetup, Plugin } from 'kibana/public'; +import { AppMountParameters, CoreSetup, Plugin, AppNavLinkStatus } from '../../../src/core/public'; import { AppPluginDependencies } from './with_data_services/types'; import { PLUGIN_ID, PLUGIN_NAME } from '../common'; +import { DeveloperExamplesSetup } from '../../developer_examples/public'; +import image from './state_storage.png'; + +interface SetupDeps { + developerExamples: DeveloperExamplesSetup; +} export class StateContainersExamplesPlugin implements Plugin { - public setup(core: CoreSetup) { + public setup(core: CoreSetup, { developerExamples }: SetupDeps) { core.application.register({ id: 'stateContainersExampleBrowserHistory', title: 'State containers example - browser history routing', + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { const { renderApp, History } = await import('./todo/app'); return renderApp(params, { @@ -38,6 +45,7 @@ export class StateContainersExamplesPlugin implements Plugin { core.application.register({ id: 'stateContainersExampleHashHistory', title: 'State containers example - hash history routing', + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { const { renderApp, History } = await import('./todo/app'); return renderApp(params, { @@ -51,6 +59,7 @@ export class StateContainersExamplesPlugin implements Plugin { core.application.register({ id: PLUGIN_ID, title: PLUGIN_NAME, + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { // Load application bundle const { renderApp } = await import('./with_data_services/application'); @@ -60,6 +69,23 @@ export class StateContainersExamplesPlugin implements Plugin { return renderApp(coreStart, depsStart as AppPluginDependencies, params); }, }); + + developerExamples.register({ + appId: PLUGIN_ID, + title: 'Kibana utils', + description: `Kibana utils offer helpful state syncing and state container capabilities. + `, + image, + links: [ + { + label: 'README', + href: 'https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/README.md', + iconType: 'logoGithub', + size: 's', + target: '_blank', + }, + ], + }); } public start() {} diff --git a/examples/state_containers_examples/public/state_storage.png b/examples/state_containers_examples/public/state_storage.png new file mode 100644 index 000000000000000..d702805ab3da05d Binary files /dev/null and b/examples/state_containers_examples/public/state_storage.png differ diff --git a/examples/ui_actions_explorer/kibana.json b/examples/ui_actions_explorer/kibana.json index e88739a9e44d6cb..f57072e89b06dd1 100644 --- a/examples/ui_actions_explorer/kibana.json +++ b/examples/ui_actions_explorer/kibana.json @@ -4,6 +4,6 @@ "kibanaVersion": "kibana", "server": false, "ui": true, - "requiredPlugins": ["uiActions", "uiActionsExamples"], + "requiredPlugins": ["uiActions", "uiActionsExamples", "developerExamples"], "optionalPlugins": [] } diff --git a/examples/ui_actions_explorer/public/plugin.tsx b/examples/ui_actions_explorer/public/plugin.tsx index de86b51aee3a8c2..670138b43b9c426 100644 --- a/examples/ui_actions_explorer/public/plugin.tsx +++ b/examples/ui_actions_explorer/public/plugin.tsx @@ -17,8 +17,8 @@ * under the License. */ -import { Plugin, CoreSetup, AppMountParameters } from 'kibana/public'; -import { UiActionsStart, UiActionsSetup } from 'src/plugins/ui_actions/public'; +import { UiActionsStart, UiActionsSetup } from '../../../src/plugins/ui_actions/public'; +import { Plugin, CoreSetup, AppMountParameters, AppNavLinkStatus } from '../../../src/core/public'; import { PHONE_TRIGGER, USER_TRIGGER, @@ -39,6 +39,8 @@ import { ACTION_VIEW_IN_MAPS, ACTION_PHONE_USER, } from './actions/actions'; +import { DeveloperExamplesSetup } from '../../developer_examples/public'; +import image from './ui_actions.png'; interface StartDeps { uiActions: UiActionsStart; @@ -46,6 +48,7 @@ interface StartDeps { interface SetupDeps { uiActions: UiActionsSetup; + developerExamples: DeveloperExamplesSetup; } declare module '../../../src/plugins/ui_actions/public' { @@ -66,7 +69,7 @@ declare module '../../../src/plugins/ui_actions/public' { } export class UiActionsExplorerPlugin implements Plugin { - public setup(core: CoreSetup<{ uiActions: UiActionsStart }>, deps: SetupDeps) { + public setup(core: CoreSetup, deps: SetupDeps) { deps.uiActions.registerTrigger({ id: COUNTRY_TRIGGER, }); @@ -98,6 +101,7 @@ export class UiActionsExplorerPlugin implements Plugin { - public setup(core: CoreSetup) { +interface SetupDeps { + developerExamples: DeveloperExamplesSetup; +} + +export class AccessLinksExplorerPlugin implements Plugin { + public setup(core: CoreSetup, { developerExamples }: SetupDeps) { core.application.register({ id: 'urlGeneratorsExplorer', title: 'Access links explorer', + navLinkStatus: AppNavLinkStatus.hidden, async mount(params: AppMountParameters) { const depsStart = (await core.getStartServices())[1]; const { renderApp } = await import('./app'); @@ -40,6 +46,27 @@ export class AccessLinksExplorerPlugin implements Plugin