From bf9413dc42b4f2beebf2e316879ace26f254966f Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 23 Aug 2021 12:02:22 -0400 Subject: [PATCH] [APM] Support multiple route paths in useApmParams (#109370) (#109653) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dario Gieselaar --- .../src/create_router.test.tsx | 15 +++++++ .../src/create_router.ts | 44 ++++++++++++------- .../src/types/index.ts | 16 +++++++ .../src/use_params.ts | 18 +++++++- .../service_map/Popover/backend_contents.tsx | 6 ++- .../apm/public/hooks/use_apm_params.ts | 26 +++++++++-- x-pack/plugins/apm/typings/common.d.ts | 1 + 7 files changed, 104 insertions(+), 22 deletions(-) diff --git a/packages/kbn-typed-react-router-config/src/create_router.test.tsx b/packages/kbn-typed-react-router-config/src/create_router.test.tsx index d8f42c8714e8b..3fb37f813e2e1 100644 --- a/packages/kbn-typed-react-router-config/src/create_router.test.tsx +++ b/packages/kbn-typed-react-router-config/src/create_router.test.tsx @@ -201,6 +201,21 @@ describe('createRouter', () => { }, }); }); + + it('supports multiple paths', () => { + history.push('/service-map?rangeFrom=now-15m&rangeTo=now&maxNumNodes=3'); + + const params = router.getParams('/services', '/service-map', history.location); + + expect(params).toEqual({ + path: {}, + query: { + maxNumNodes: 3, + rangeFrom: 'now-15m', + rangeTo: 'now', + }, + }); + }); }); describe('matchRoutes', () => { diff --git a/packages/kbn-typed-react-router-config/src/create_router.ts b/packages/kbn-typed-react-router-config/src/create_router.ts index 28f9e2774eb74..370d8b48e53b4 100644 --- a/packages/kbn-typed-react-router-config/src/create_router.ts +++ b/packages/kbn-typed-react-router-config/src/create_router.ts @@ -9,6 +9,7 @@ import { isLeft } from 'fp-ts/lib/Either'; import { Location } from 'history'; import { PathReporter } from 'io-ts/lib/PathReporter'; import { + MatchedRoute, matchRoutes as matchRoutesConfig, RouteConfig as ReactRouterConfig, } from 'react-router-config'; @@ -49,33 +50,44 @@ export function createRouter(routes: TRoutes): Router { - let path: string = args[0]; - let location: Location = args[1]; - let optional: boolean = args[2]; - - if (args.length === 1) { - location = args[0] as Location; - path = location.pathname; - optional = args[1]; + let optional: boolean = false; + + if (typeof args[args.length - 1] === 'boolean') { + optional = args[args.length - 1]; + args.pop(); } - const greedy = path.endsWith('/*') || args.length === 1; + const location: Location = args[args.length - 1]; + args.pop(); + + let paths: string[] = args; - if (!path) { - path = '/'; + if (paths.length === 0) { + paths = [location.pathname || '/']; } - const matches = matchRoutesConfig(reactRouterConfigs, location.pathname); + let matches: Array> = []; + let matchIndex: number = -1; - const matchIndex = greedy - ? matches.length - 1 - : findLastIndex(matches, (match) => match.route.path === path); + for (const path of paths) { + const greedy = path.endsWith('/*') || args.length === 0; + matches = matchRoutesConfig(reactRouterConfigs, location.pathname); + + matchIndex = greedy + ? matches.length - 1 + : findLastIndex(matches, (match) => match.route.path === path); + + if (matchIndex !== -1) { + break; + } + matchIndex = -1; + } if (matchIndex === -1) { if (optional) { return []; } - throw new Error(`No matching route found for ${path}`); + throw new Error(`No matching route found for ${paths}`); } return matches.slice(0, matchIndex + 1).map((matchedRoute) => { diff --git a/packages/kbn-typed-react-router-config/src/types/index.ts b/packages/kbn-typed-react-router-config/src/types/index.ts index 0e02318c50aad..4d26d2879d5e7 100644 --- a/packages/kbn-typed-react-router-config/src/types/index.ts +++ b/packages/kbn-typed-react-router-config/src/types/index.ts @@ -134,6 +134,22 @@ export interface Router { location: Location, optional: TOptional ): TOptional extends true ? TypeOf | undefined : TypeOf; + getParams, T2 extends PathsOf>( + path1: T1, + path2: T2, + location: Location + ): TypeOf | TypeOf; + getParams, T2 extends PathsOf, T3 extends PathsOf>( + path1: T1, + path2: T2, + path3: T3, + location: Location + ): TypeOf | TypeOf | TypeOf; + getParams, TOptional extends boolean>( + path: TPath, + location: Location, + optional: TOptional + ): TOptional extends true ? TypeOf | undefined : TypeOf; link>( path: TPath, ...args: TypeAsArgs> diff --git a/packages/kbn-typed-react-router-config/src/use_params.ts b/packages/kbn-typed-react-router-config/src/use_params.ts index 94a5cf401c569..0468eb9566236 100644 --- a/packages/kbn-typed-react-router-config/src/use_params.ts +++ b/packages/kbn-typed-react-router-config/src/use_params.ts @@ -6,12 +6,26 @@ * Side Public License, v 1. */ +import { Location } from 'history'; import { useLocation } from 'react-router-dom'; import { useRouter } from './use_router'; -export function useParams(path: string, optional: boolean = false) { +export function useParams(...args: any[]) { const router = useRouter(); const location = useLocation(); - return router.getParams(path as never, location, optional); + let optional: boolean = false; + + const last: boolean | string | undefined = args[args.length - 1]; + + if (typeof last === 'boolean') { + optional = last; + args.pop(); + } + + const paths = args as string[]; + + const getParamsArgs = [...paths, location, optional] as [never, Location, boolean]; + + return router.getParams(...getParamsArgs); } diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/backend_contents.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/backend_contents.tsx index 5a55fd1979c91..0432cdb2dff5e 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/Popover/backend_contents.tsx +++ b/x-pack/plugins/apm/public/components/app/service_map/Popover/backend_contents.tsx @@ -21,7 +21,11 @@ import { ApmRoutes } from '../../../routing/apm_route_config'; import { StatsList } from './stats_list'; export function BackendContents({ nodeData, environment }: ContentsProps) { - const { query } = useApmParams('/*'); + const { query } = useApmParams( + '/service-map', + '/services/:serviceName/service-map' + ); + const apmRouter = useApmRouter(); const { urlParams: { start, end }, diff --git a/x-pack/plugins/apm/public/hooks/use_apm_params.ts b/x-pack/plugins/apm/public/hooks/use_apm_params.ts index fd27e8446e3c4..12b79ec7c90ae 100644 --- a/x-pack/plugins/apm/public/hooks/use_apm_params.ts +++ b/x-pack/plugins/apm/public/hooks/use_apm_params.ts @@ -17,9 +17,29 @@ export function useApmParams>( path: TPath ): TypeOf; +export function useApmParams< + TPath1 extends PathsOf, + TPath2 extends PathsOf +>( + path1: TPath1, + path2: TPath2 +): TypeOf | TypeOf; + +export function useApmParams< + TPath1 extends PathsOf, + TPath2 extends PathsOf, + TPath3 extends PathsOf +>( + path1: TPath1, + path2: TPath2, + path3: TPath3 +): + | TypeOf + | TypeOf + | TypeOf; + export function useApmParams( - path: string, - optional?: true + ...args: any[] ): TypeOf> | undefined { - return useParams(path, optional); + return useParams(...args); } diff --git a/x-pack/plugins/apm/typings/common.d.ts b/x-pack/plugins/apm/typings/common.d.ts index ea4bafad84619..b94eb6cd97b06 100644 --- a/x-pack/plugins/apm/typings/common.d.ts +++ b/x-pack/plugins/apm/typings/common.d.ts @@ -10,6 +10,7 @@ import '../../../typings/rison_node'; import '../../infra/types/eui'; // EUIBasicTable import '../../reporting/public/components/report_listing'; +import '../../reporting/server/lib/puid'; import './apm_rum_react'; // Allow unknown properties in an object