[Metrics UI] Refactor With* containers to hooks

test/functional/page_objects/common_page.ts

@@ -287,25 +287,11 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
           }
 
           currentUrl = (await browser.getCurrentUrl()).replace(/\/\/\w+:\w+@/, '//');
-          const maxAdditionalLengthOnNavUrl = 230;
-
-          // On several test failures at the end of the TileMap test we try to navigate back to
-          // Visualize so we can create the next Vertical Bar Chart, but we can see from the
-          // logging and the screenshot that it's still on the TileMap page. Why didn't the "get"
-          // with a new timestamped URL go? I thought that sleep(700) between the get and the
-          // refresh would solve the problem but didn't seem to always work.
-          // So this hack fails the navSuccessful check if the currentUrl doesn't match the
-          // appUrl plus up to 230 other chars.
-          // Navigating to Settings when there is a default index pattern has a URL length of 196
-          // (from debug output). Some other tabs may also be long. But a rather simple configured
-          // visualization is about 1000 chars long. So at least we catch that case.
-
-          // Browsers don't show the ':port' if it's 80 or 443 so we have to
-          // remove that part so we can get a match in the tests.
-          const navSuccessful = new RegExp(
-            appUrl.replace(':80/', '/').replace(':443/', '/') +
-              `.{0,${maxAdditionalLengthOnNavUrl}}$`
-          ).test(currentUrl);
+
+          const navSuccessful = currentUrl
+            .replace(':80/', '/')
+            .replace(':443/', '/')
+            .startsWith(appUrl);
 
           if (!navSuccessful) {
             const msg = `App failed to load: ${appName} in ${defaultFindTimeout}ms appUrl=${appUrl} currentUrl=${currentUrl}`;

test/typings/rison_node.d.ts

@@ -18,7 +18,7 @@
  */
 
 declare module 'rison-node' {
-  export type RisonValue = null | boolean | number | string | RisonObject | RisonArray;
+  export type RisonValue = undefined | null | boolean | number | string | RisonObject | RisonArray;
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface RisonArray extends Array<RisonValue> {}

typings/rison_node.d.ts

@@ -18,7 +18,7 @@
  */
 
 declare module 'rison-node' {
-  export type RisonValue = null | boolean | number | string | RisonObject | RisonArray;
+  export type RisonValue = undefined | null | boolean | number | string | RisonObject | RisonArray;
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface RisonArray extends Array<RisonValue> {}

x-pack/plugins/infra/common/http_api/metadata_api.ts

@@ -11,6 +11,10 @@ export const InfraMetadataRequestRT = rt.type({
   nodeId: rt.string,
   nodeType: ItemTypeRT,
   sourceId: rt.string,
+  timeRange: rt.type({
+    from: rt.number,
+    to: rt.number,
+  }),
 });
 
 export const InfraMetadataFeatureRT = rt.type({

x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx

@@ -20,7 +20,7 @@ import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MetadataDetails } from '../../../public/pages/metrics/components/metadata_details';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, theme, onChangeRangeTime }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <MetadataDetails
       fields={[
@@ -42,6 +42,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection
           id="awsEC2CpuUtilization"

x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx

@@ -18,7 +18,7 @@ import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <LayoutContent>
       <Section
@@ -30,6 +30,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection
           id="awsRDSCpuTotal"

x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx

@@ -18,7 +18,7 @@ import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <LayoutContent>
       <Section
@@ -30,6 +30,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection
           id="awsS3BucketSize"

x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx

@@ -18,7 +18,7 @@ import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <LayoutContent>
       <Section
@@ -30,6 +30,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection
           id="awsSQSMessagesVisible"

x-pack/plugins/infra/common/inventory_models/container/layout.tsx

@@ -22,7 +22,7 @@ import { LayoutContent } from '../../../public/pages/metrics/components/layout_c
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MetadataDetails } from '../../../public/pages/metrics/components/metadata_details';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <MetadataDetails />
     <LayoutContent>
@@ -40,6 +40,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection id="containerOverview">
           <GaugesSectionVis

x-pack/plugins/infra/common/inventory_models/host/layout.tsx

@@ -24,7 +24,7 @@ import { MetadataDetails } from '../../../public/pages/metrics/components/metada
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <MetadataDetails
       fields={[
@@ -52,6 +52,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection id="hostSystemOverview">
           <GaugesSectionVis
@@ -242,6 +243,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection id="hostK8sOverview">
           <GaugesSectionVis
@@ -371,8 +373,8 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           />
         </SubSection>
       </Section>
-      <Aws.Layout metrics={metrics} />
-      <Ngnix.Layout metrics={metrics} />
+      <Aws.Layout metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
+      <Ngnix.Layout metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
     </LayoutContent>
   </React.Fragment>
 ));

x-pack/plugins/infra/common/inventory_models/pod/layout.tsx

@@ -23,7 +23,7 @@ import { MetadataDetails } from '../../../public/pages/metrics/components/metada
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <MetadataDetails />
     <LayoutContent>
@@ -38,6 +38,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           }
         )}
         metrics={metrics}
+        onChangeRangeTime={onChangeRangeTime}
       >
         <SubSection id="podOverview">
           <GaugesSectionVis
@@ -161,7 +162,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
           />
         </SubSection>
       </Section>
-      <Nginx.Layout metrics={metrics} />
+      <Nginx.Layout metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
     </LayoutContent>
   </React.Fragment>
 ));

x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx

@@ -18,7 +18,7 @@ import { ChartSectionVis } from '../../../../public/pages/metrics/components/cha
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { withTheme } from '../../../../../observability/public';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
     <Section
       navLabel="AWS"
@@ -29,6 +29,7 @@ export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
         }
       )}
       metrics={metrics}
+      onChangeRangeTime={onChangeRangeTime}
     >
       <SubSection id="awsOverview">
         <GaugesSectionVis

x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx

@@ -16,9 +16,14 @@ import { ChartSectionVis } from '../../../../public/pages/metrics/components/cha
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { withTheme } from '../../../../../observability/public';
 
-export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
+export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
-    <Section navLabel="Nginx" sectionLabel="Nginx" metrics={metrics}>
+    <Section
+      navLabel="Nginx"
+      sectionLabel="Nginx"
+      metrics={metrics}
+      onChangeRangeTime={onChangeRangeTime}
+    >
       <SubSection
         id="nginxHits"
         label={i18n.translate(

x-pack/plugins/infra/common/saved_objects/inventory_view.ts

@@ -7,7 +7,7 @@
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ElasticsearchMappingOf } from '../../server/utils/typed_elasticsearch_mappings';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { WaffleViewState } from '../../public/containers/waffle/with_waffle_view_state';
+import { WaffleViewState } from '../../public/pages/inventory_view/hooks/use_waffle_view_state';
 
 export const inventoryViewSavedObjectType = 'inventory-view';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
@@ -102,7 +102,7 @@ export const inventoryViewSavedObjectMappings: {
         type: 'boolean',
       },
       time: {
-        type: 'integer',
+        type: 'long',
       },
       autoReload: {
         type: 'boolean',
@@ -117,6 +117,12 @@ export const inventoryViewSavedObjectMappings: {
           },
         },
       },
+      accountId: {
+        type: 'keyword',
+      },
+      region: {
+        type: 'keyword',
+      },
     },
   },
 };

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -8,18 +8,13 @@ import { createBrowserHistory } from 'history';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-import { BehaviorSubject } from 'rxjs';
-import { pluck } from 'rxjs/operators';
 import { CoreStart, AppMountParameters } from 'kibana/public';
 
 // TODO use theme provided from parentApp when kibana supports it
 import { EuiErrorBoundary } from '@elastic/eui';
 import { EuiThemeProvider } from '../../../observability/public';
 import { InfraFrontendLibs } from '../lib/lib';
-import { createStore } from '../store';
 import { ApolloClientContext } from '../utils/apollo_context';
-import { ReduxStateContextProvider } from '../utils/redux_context';
 import { HistoryContext } from '../utils/history_context';
 import {
   useUiSetting$,
@@ -39,31 +34,21 @@ export async function startApp(
 ) {
   const { element, appBasePath } = params;
   const history = createBrowserHistory({ basename: appBasePath });
-  const libs$ = new BehaviorSubject(libs);
-  const store = createStore({
-    apolloClient: libs$.pipe(pluck('apolloClient')),
-    observableApi: libs$.pipe(pluck('observableApi')),
-  });
-
   const InfraPluginRoot: React.FunctionComponent = () => {
     const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
     return (
       <core.i18n.Context>
         <EuiErrorBoundary>
-          <ReduxStoreProvider store={store}>
-            <ReduxStateContextProvider>
-              <ApolloProvider client={libs.apolloClient}>
-                <ApolloClientContext.Provider value={libs.apolloClient}>
-                  <EuiThemeProvider darkMode={darkMode}>
-                    <HistoryContext.Provider value={history}>
-                      <Router history={history} />
-                    </HistoryContext.Provider>
-                  </EuiThemeProvider>
-                </ApolloClientContext.Provider>
-              </ApolloProvider>
-            </ReduxStateContextProvider>
-          </ReduxStoreProvider>
+          <ApolloProvider client={libs.apolloClient}>
+            <ApolloClientContext.Provider value={libs.apolloClient}>
+              <EuiThemeProvider darkMode={darkMode}>
+                <HistoryContext.Provider value={history}>
+                  <Router history={history} />
+                </HistoryContext.Provider>
+              </EuiThemeProvider>
+            </ApolloClientContext.Provider>
+          </ApolloProvider>
         </EuiErrorBoundary>
       </core.i18n.Context>
     );