Setup independent Metrics and Logs routers so that the history instan…

…ce is prepped for ScopedHistory
elastic · Feb 11, 2020 · 72641b2 · 72641b2
1 parent 327e480
commit 72641b2
Show file tree

Hide file tree

Showing 20 changed files with 150 additions and 116 deletions.
diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx
@@ -17,7 +17,6 @@ import { CoreStart, AppMountParameters } from 'kibana/public';
 import { EuiErrorBoundary } from '@elastic/eui';
 import { EuiThemeProvider } from '../../../observability/public';
 import { InfraFrontendLibs } from '../lib/lib';
-import { PageRouter } from '../routes';
 import { createStore } from '../store';
 import { ApolloClientContext } from '../utils/apollo_context';
 import { ReduxStateContextProvider } from '../utils/redux_context';
@@ -26,26 +25,19 @@ import {
   useUiSetting$,
   KibanaContextProvider,
 } from '../../../../../src/plugins/kibana_react/public';
+import { AppRouter } from '../routers';
 
 export const CONTAINER_CLASSNAME = 'infra-container-element';
 
-// Get the basePath with space ID etc, but without the actual route.
-const getRouterBasePath = (appBasePath: string) => {
-  let basePath: string = '';
-  const basePathParts: string[] = appBasePath.split('/');
-  basePathParts.pop();
-  basePath = basePathParts.join('/');
-  return basePath;
-};
-
 export async function startApp(
   libs: InfraFrontendLibs,
   core: CoreStart,
   plugins: object,
-  params: AppMountParameters
+  params: AppMountParameters,
+  Router: AppRouter
 ) {
   const { element, appBasePath } = params;
-  const history = createBrowserHistory({ basename: getRouterBasePath(appBasePath) });
+  const history = createBrowserHistory({ basename: appBasePath });
   const libs$ = new BehaviorSubject(libs);
   const store = createStore({
     apolloClient: libs$.pipe(pluck('apolloClient')),
@@ -64,7 +56,7 @@ export async function startApp(
                 <ApolloClientContext.Provider value={libs.apolloClient}>
                   <EuiThemeProvider darkMode={darkMode}>
                     <HistoryContext.Provider value={history}>
-                      <PageRouter history={history} />
+                      <Router history={history} />
                     </HistoryContext.Provider>
                   </EuiThemeProvider>
                 </ApolloClientContext.Provider>

diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/chart_context_menu.test.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/chart_context_menu.test.tsx
@@ -167,10 +167,10 @@ describe('MetricsExplorerChartContextMenu', () => {
         'example-01',
         fromDateStrig,
         toDateStrig,
-        path => `mocked/${path}`
+        (app, path) => `${app}/${path}`
       );
       expect(link).toBe(
-        `mocked/link-to/host-detail/example-01?to=${to.valueOf()}&from=${from.valueOf()}`
+        `metrics/link-to/host-detail/example-01?to=${to.valueOf()}&from=${from.valueOf()}`
       );
     });
   });

diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/chart_context_menu.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/chart_context_menu.tsx
@@ -62,7 +62,7 @@ export const createNodeDetailLink = (
   nodeId: string,
   from: string,
   to: string,
-  prefixPathWithBasePath: (path?: string | undefined) => string | undefined
+  prefixPathWithBasePath: (app: string, path?: string | undefined) => string | undefined
 ) => {
   return getNodeDetailUrl({
     nodeType,
@@ -85,11 +85,11 @@ export const MetricsExplorerChartContextMenu = ({
   const getUrlForApp = useKibana().services.application?.getUrlForApp;
   const prependBasePath = useKibana().services.http?.basePath.prepend;
   const prefixPathWithBasePath = useCallback(
-    (path?: string) => {
+    (app: string, path?: string) => {
       if (!getUrlForApp || !prependBasePath) {
         return;
       }
-      return prependBasePath(getUrlForApp('infra', { path }));
+      return prependBasePath(getUrlForApp(app, { path }));
     },
     [getUrlForApp, prependBasePath]
   );

diff --git a/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.test.ts b/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.test.ts
@@ -12,8 +12,8 @@ import {
 } from '../../../lib/lib';
 import { SnapshotMetricType } from '../../../../common/inventory_models/types';
 
-const prefixPathWithBasePath = (path?: string) => {
-  return `uptime/${path}`;
+const prefixPathWithBasePath = (app: string, path?: string) => {
+  return `${app}/${path}`;
 };
 
 const options: InfraWaffleMapOptions = {

diff --git a/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.ts b/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.ts
@@ -12,13 +12,13 @@ export const createUptimeLink = (
   options: InfraWaffleMapOptions,
   nodeType: InventoryItemType,
   node: InfraWaffleMapNode,
-  prefixPathWithBasePath: (path?: string, app?: string) => string | undefined
+  prefixPathWithBasePath: (app: string, path?: string) => string | undefined
 ) => {
   if (nodeType === 'host' && node.ip) {
     const path = `#/?search=host.ip:"${node.ip}"`;
-    return prefixPathWithBasePath(path, 'uptime');
+    return prefixPathWithBasePath('uptime', path);
   }
   const field = get(options, ['fields', nodeType], '');
   const path = `#/?search=${field ? field + ':' : ''}"${node.id}"`;
-  return prefixPathWithBasePath(path, 'uptime');
+  return prefixPathWithBasePath('uptime', path);
 };
diff --git a/x-pack/plugins/infra/public/components/waffle/node_context_menu.tsx b/x-pack/plugins/infra/public/components/waffle/node_context_menu.tsx
@@ -49,11 +49,11 @@ export const NodeContextMenu: React.FC<Props> = ({
   const getUrlForApp = useKibana().services.application?.getUrlForApp;
   const prependBasePath = useKibana().services.http?.basePath.prepend;
   const prefixPathWithBasePath = useCallback(
-    (path?: string, app?: string) => {
+    (app: string, path?: string) => {
       if (!getUrlForApp || !prependBasePath) {
         return;
       }
-      return prependBasePath(getUrlForApp(app ? app : 'infra', { path }));
+      return prependBasePath(getUrlForApp(app, { path }));
     },
     [getUrlForApp, prependBasePath]
   );
@@ -125,7 +125,7 @@ export const NodeContextMenu: React.FC<Props> = ({
       defaultMessage: '{inventoryName} APM traces',
       values: { inventoryName: inventoryModel.singularDisplayName },
     }),
-    href: prefixPathWithBasePath(`#traces?_g=()&kuery=${apmField}:"${node.id}"`, 'apm'),
+    href: prefixPathWithBasePath('apm', `#traces?_g=()&kuery=${apmField}:"${node.id}"`),
     'data-test-subj': 'viewApmTracesContextMenuItem',
     isDisabled: !showAPMTraceLink,
   };

diff --git a/x-pack/plugins/infra/public/pages/infrastructure/index.tsx b/x-pack/plugins/infra/public/pages/infrastructure/index.tsx
@@ -65,28 +65,28 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                 title: i18n.translate('xpack.infra.homePage.inventoryTabTitle', {
                   defaultMessage: 'Inventory',
                 }),
-                path: `${match.path}/inventory`,
+                path: '/inventory',
               },
               {
                 title: i18n.translate('xpack.infra.homePage.metricsExplorerTabTitle', {
                   defaultMessage: 'Metrics Explorer',
                 }),
-                path: `${match.path}/explorer`,
+                path: '/explorer',
               },
               {
                 title: i18n.translate('xpack.infra.homePage.settingsTabTitle', {
                   defaultMessage: 'Settings',
                 }),
-                path: `${match.path}/settings`,
+                path: '/settings',
               },
             ]}
           />
         </AppNavigation>
 
         <Switch>
-          <Route path={`${match.path}/inventory`} component={SnapshotPage} />
+          <Route path={'/inventory'} component={SnapshotPage} />
           <Route
-            path={`${match.path}/explorer`}
+            path={'/explorer'}
             render={props => (
               <WithSource>
                 {({ configuration, createDerivedIndexPattern }) => (
@@ -106,7 +106,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
               </WithSource>
             )}
           />
-          <Route path={`${match.path}/settings`} component={MetricsSettingsPage} />
+          <Route path={'/settings'} component={MetricsSettingsPage} />
         </Switch>
       </ColumnarPage>
     </Source.Provider>

diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail_via_ip.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail_via_ip.tsx
@@ -49,7 +49,7 @@ export const RedirectToHostDetailViaIP = ({
   )('');
 
   if (name) {
-    return <Redirect to={`/metrics/host/${name}?${searchString}`} />;
+    return <Redirect to={`/detail/host/${name}?${searchString}`} />;
   }
 
   return (

diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_logs.test.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_logs.test.tsx
@@ -19,7 +19,7 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs/stream?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'',kind:kuery)"
+        to="/stream?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'',kind:kuery)"
       />
     `);
   });
@@ -33,7 +33,7 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs/stream?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)"
+        to="/stream?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)"
       />
     `);
   });
@@ -45,7 +45,7 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs/stream?sourceId=SOME-OTHER-SOURCE&logFilter=(expression:'',kind:kuery)"
+        to="/stream?sourceId=SOME-OTHER-SOURCE&logFilter=(expression:'',kind:kuery)"
       />
     `);
   });

diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_logs.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_logs.tsx
@@ -30,5 +30,5 @@ export const RedirectToLogs = ({ location, match }: RedirectToLogsProps) => {
     replaceSourceIdInQueryString(sourceId)
   )('');
 
-  return <Redirect to={`/logs/stream?${searchString}`} />;
+  return <Redirect to={`/stream?${searchString}`} />;
 };
diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx
@@ -27,7 +27,7 @@ export const RedirectToNodeDetail = ({
     getToFromLocation(location)
   )('');
 
-  return <Redirect to={`/metrics/detail/${nodeType}/${nodeId}?${searchString}`} />;
+  return <Redirect to={`/detail/${nodeType}/${nodeId}?${searchString}`} />;
 };
 
 export const getNodeDetailUrl = ({
@@ -41,9 +41,9 @@ export const getNodeDetailUrl = ({
   nodeId: string;
   to?: number;
   from?: number;
-  prefixPathWithBasePath: (path?: string, app?: string) => string | undefined;
+  prefixPathWithBasePath: (app: string, path?: string) => string | undefined;
 }) => {
   const args = to && from ? `?to=${to}&from=${from}` : '';
   const path = `link-to/${nodeType}-detail/${nodeId}${args}`;
-  return prefixPathWithBasePath(path);
+  return prefixPathWithBasePath('metrics', path);
 };
diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx
@@ -35,7 +35,7 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs?sourceId=default&logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)"
+        to="/?sourceId=default&logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)"
       />
     `);
   });
@@ -47,7 +47,7 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs?sourceId=default&logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)"
+        to="/?sourceId=default&logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)"
       />
     `);
   });
@@ -59,7 +59,7 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs?sourceId=default&logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)"
+        to="/?sourceId=default&logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)"
       />
     `);
   });
@@ -73,7 +73,7 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)"
+        to="/?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)"
       />
     `);
   });
@@ -89,7 +89,7 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)"
+        to="/?sourceId=default&logPosition=(position:(tiebreaker:0,time:1550671089404),streamLive:!f)&logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)"
       />
     `);
   });
@@ -103,7 +103,7 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        to="/logs?sourceId=SOME-OTHER-SOURCE&logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)"
+        to="/?sourceId=SOME-OTHER-SOURCE&logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)"
       />
     `);
   });

diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.tsx
@@ -70,7 +70,7 @@ export const RedirectToNodeLogs = ({
     replaceSourceIdInQueryString(sourceId)
   )('');
 
-  return <Redirect to={`/logs?${searchString}`} />;
+  return <Redirect to={`/?${searchString}`} />;
 };
 
 export const getNodeLogsUrl = ({
@@ -82,8 +82,8 @@ export const getNodeLogsUrl = ({
   nodeId: string;
   nodeType: InventoryItemType;
   time?: number;
-  prefixPathWithBasePath: (path?: string, app?: string) => string | undefined;
+  prefixPathWithBasePath: (app: string, path?: string) => string | undefined;
 }) => {
   const path = [`link-to/${nodeType}-logs/`, nodeId, ...(time ? [`?time=${time}`] : [])].join('');
-  return prefixPathWithBasePath(path);
+  return prefixPathWithBasePath('logs', path);
 };
diff --git a/x-pack/plugins/infra/public/pages/logs/page.tsx b/x-pack/plugins/infra/public/pages/logs/page.tsx
@@ -13,7 +13,7 @@ import { LogsPageProviders } from './page_providers';
 export const LogsPage: React.FunctionComponent<RouteComponentProps> = ({ match }) => {
   return (
     <LogsPageProviders>
-      <LogsPageContent logsPagePath={match.path} />
+      <LogsPageContent />
     </LogsPageProviders>
   );
 };
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -25,31 +25,29 @@ import { LogEntryRatePage } from './log_entry_rate';
 import { LogsSettingsPage } from './settings';
 import { StreamPage } from './stream';
 
-export const LogsPageContent: React.FunctionComponent<{
-  logsPagePath: string;
-}> = ({ logsPagePath }) => {
+export const LogsPageContent: React.FunctionComponent = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
   const source = useSourceContext();
   const logAnalysisCapabilities = useLogAnalysisCapabilitiesContext();
 
   const streamTab = {
     title: streamTabTitle,
-    path: `${logsPagePath}/stream`,
+    path: '/stream',
   };
 
   const logRateTab = {
     title: logRateTabTitle,
-    path: `${logsPagePath}/log-rate`,
+    path: '/log-rate',
   };
 
   const logCategoriesTab = {
     title: logCategoriesTabTitle,
-    path: `${logsPagePath}/log-categories`,
+    path: '/log-categories',
   };
 
   const settingsTab = {
     title: settingsTabTitle,
-    path: `${logsPagePath}/settings`,
+    path: '/settings',
   };
 
   return (
@@ -91,7 +89,7 @@ export const LogsPageContent: React.FunctionComponent<{
             <Route path={logRateTab.path} component={LogEntryRatePage} />
             <Route path={logCategoriesTab.path} component={LogEntryCategoriesPage} />
             <Route path={settingsTab.path} component={LogsSettingsPage} />
-            <RedirectWithQueryParams from={`${logsPagePath}/analysis`} to={logRateTab.path} exact />
+            <RedirectWithQueryParams from={'/analysis'} to={logRateTab.path} exact />
           </Switch>
         </>
       )}