import React from 'react' ; import ReactDOM from 'react-dom' ; import { AppMountParameters } from 'opensearch-dashboards/public' ; import { EuiPage , EuiPageBody , EuiPageContent , EuiText , EuiHorizontalRule , EuiPageContentHeader , EuiListGroup , } from '@elastic/eui' ; import { RandomNumberRouteExample } from './random_number_example' ; import { RandomNumberBetweenRouteExample } from './random_number_between_example' ; import { Services } from './services' ; import { PostMessageRouteExample } from './post_message_example' ; import { GetMessageRouteExample } from './get_message_example' ; type Props = Services ; function RoutingExplorer ( { fetchRandomNumber , fetchRandomNumberBetween , addSuccessToast , postMessage , getMessageById , } ) { return ( < EuiPage > < EuiPageBody > < EuiPageContent > < EuiPageContentHeader > < EuiText > < h1 > Routing examples < /h1> < /EuiText> < /EuiPageContentHeader> < EuiText > < EuiListGroup listItems = { [ { label : 'IRouter API docs' , href : 'https://github.com/opensearch-project/OpenSearch-Dashboards/blob/master/docs/development/core/server/opensearch-dashboards-plugin-core-server.irouter.md' , iconType : 'logoGithub' , target : '_blank' , size : 's' , } , { label : 'HttpHandler (core.http.fetch) API docs' , href : 'https://github.com/opensearch-project/OpenSearch-Dashboards/blob/master/docs/development/core/public/opensearch-dashboards-plugin-core-public.httphandler.md' , iconType : 'logoGithub' , target : '_blank' , size : 's' , } , { label : 'Conventions' , href : 'https://github.com/opensearch-project/OpenSearch-Dashboards/tree/master/DEVELOPER_GUIDE.md#api-endpoints' , iconType : 'logoGithub' , target : '_blank' , size : 's' , } , ] } /> < /EuiText> < EuiHorizontalRule / > < RandomNumberRouteExample fetchRandomNumber = { fetchRandomNumber } /> < EuiHorizontalRule / > < RandomNumberBetweenRouteExample fetchRandomNumberBetween = { fetchRandomNumberBetween } /> < EuiHorizontalRule / > < PostMessageRouteExample addSuccessToast = { addSuccessToast } postMessage = { postMessage } / > < EuiHorizontalRule /> < GetMessageRouteExample getMessageById = { getMessageById } / > < /EuiPageContent> < /EuiPageBody> < /EuiPage>); } export const renderApp = ( props , element ) => { ReactDOM . render ( < RoutingExplorer { ... props } / > , element ) ; return ( ) => ReactDOM . unmountComponentAtNode ( element ) ; } ;