[Metrics UI] Refactor With* containers to hooks (#59503) (#63494)

* [Metrics UI] Refactor containers to hooks

* clean up depends; move useInterval out of useWaffleTime;

* converting WithWaffleFilters to useWaffleFilters

* Removing WithWaffleOptions

* Refactor WithWaffleViewState to useWaffleViewState

* Removing obsolete files

* Fixing race condition with complext state

* Adding undefined to RisonValue; unwinding changes trying to work around bad type

* Switching to context

* Change assertion to ignore the length of the current URL

* Fixing test frameork to accept urls longer then 230 characters

* Fixes #59395; Refactor WithMetricsTime to hook; Fixes brushing on metric detail page; fixes refresh button on metric detail page

* Fixing tests with adding timeRange

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: simianhacker

test/functional/page_objects/common_page.ts

@@ -247,25 +247,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>
 ));