[Infra UI] Adding time ranges to detail links (#24237) (#24427)

* [Infra UI] Adding time ranges to detail links

- Adds timeranges to hosts, containers, and pods links
- Fixes #24228 - Typos and what not prevented urls from working

* remove argument hard coded formatting

* Cleaning up query arg generation

* Adding missing file

* removing rison hard coded string

x-pack/plugins/infra/public/containers/metrics/with_metrics_time.tsx

@@ -35,7 +35,7 @@ export const WithMetricsTime = asChildFunctionRenderer(withMetricsTime, {
  */
 
 interface MetricTimeUrlState {
-  timeRange?: ReturnType<typeof metricTimeSelectors.selectRangeTime>;
+  time?: ReturnType<typeof metricTimeSelectors.selectRangeTime>;
   autoReload?: ReturnType<typeof metricTimeSelectors.selectIsAutoReloading>;
 }
 
@@ -47,8 +47,8 @@ export const WithMetricsTimeUrlState = () => (
         urlStateKey="metricTime"
         mapToUrlState={mapToUrlState}
         onChange={newUrlState => {
-          if (newUrlState && newUrlState.timeRange) {
-            setRangeTime(newUrlState.timeRange);
+          if (newUrlState && newUrlState.time) {
+            setRangeTime(newUrlState.time);
           }
           if (newUrlState && newUrlState.autoReload) {
             startMetricsAutoReload();
@@ -61,8 +61,8 @@ export const WithMetricsTimeUrlState = () => (
           }
         }}
         onInitialize={initialUrlState => {
-          if (initialUrlState && initialUrlState.timeRange) {
-            setRangeTime(initialUrlState.timeRange);
+          if (initialUrlState && initialUrlState.time) {
+            setRangeTime(initialUrlState.time);
           }
           if (initialUrlState && initialUrlState.autoReload) {
             startMetricsAutoReload();
@@ -85,7 +85,7 @@ const selectTimeUrlState = createSelector(
 const mapToUrlState = (value: any): MetricTimeUrlState | undefined =>
   value
     ? {
-        timeRange: mapToTimeUrlState(value.timeRange),
+        time: mapToTimeUrlState(value.time),
         autoReload: mapToAutoReloadUrlState(value.autoReload),
       }
     : undefined;

x-pack/plugins/infra/public/containers/waffle/with_waffle_options.tsx

@@ -10,7 +10,6 @@ import { createSelector } from 'reselect';
 import { InfraMetricInput, InfraMetricType, InfraPathType } from '../../../common/graphql/types';
 import { InfraNodeType } from '../../../server/lib/adapters/nodes';
 import { State, waffleOptionsActions, waffleOptionsSelectors } from '../../store';
-import { initialWaffleOptionsState } from '../../store/local/waffle_options/reducer';
 import { asChildFunctionRenderer } from '../../utils/typed_react';
 import { bindPlainActionCreators } from '../../utils/typed_redux';
 import { UrlStateContainer } from '../../utils/url_state';
@@ -19,8 +18,8 @@ const selectOptionsUrlState = createSelector(
   waffleOptionsSelectors.selectMetric,
   waffleOptionsSelectors.selectGroupBy,
   waffleOptionsSelectors.selectNodeType,
-  (metrics, groupBy, nodeType) => ({
-    metrics,
+  (metric, groupBy, nodeType) => ({
+    metric,
     groupBy,
     nodeType,
   })
@@ -71,10 +70,14 @@ export const WithWaffleOptionsUrlState = () => (
           }
         }}
         onInitialize={initialUrlState => {
-          if (initialUrlState) {
-            changeMetric(initialUrlState.metric || initialWaffleOptionsState.metric);
-            changeGroupBy(initialUrlState.groupBy || initialWaffleOptionsState.groupBy);
-            changeNodeType(initialUrlState.nodeType || initialWaffleOptionsState.nodeType);
+          if (initialUrlState && initialUrlState.metric) {
+            changeMetric(initialUrlState.metric);
+          }
+          if (initialUrlState && initialUrlState.groupBy) {
+            changeGroupBy(initialUrlState.groupBy);
+          }
+          if (initialUrlState && initialUrlState.nodeType) {
+            changeNodeType(initialUrlState.nodeType);
           }
         }}
       />

x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { Location } from 'history';
+import { replaceStateKeyInQueryString } from '../../utils/url_state';
+import { getFromFromLocation, getToFromLocation } from './query_params';
+
+export const createQueryStringForDetailTime = (location: Location) => {
+  const to = getToFromLocation(location);
+  const from = getFromFromLocation(location);
+  return to && from
+    ? '?' + replaceStateKeyInQueryString('metricTime', { to, from, interval: '>=1m' })('')
+    : '';
+};

x-pack/plugins/infra/public/pages/link_to/query_params.ts

@@ -12,3 +12,13 @@ export const getTimeFromLocation = (location: Location) => {
   const timeParam = getParamFromQueryString(getQueryStringFromLocation(location), 'time');
   return timeParam ? parseFloat(timeParam) : NaN;
 };
+
+export const getToFromLocation = (location: Location) => {
+  const timeParam = getParamFromQueryString(getQueryStringFromLocation(location), 'to');
+  return timeParam ? parseFloat(timeParam) : NaN;
+};
+
+export const getFromFromLocation = (location: Location) => {
+  const timeParam = getParamFromQueryString(getQueryStringFromLocation(location), 'from');
+  return timeParam ? parseFloat(timeParam) : NaN;
+};

x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx

@@ -6,10 +6,25 @@
 
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { createQueryStringForDetailTime } from './create_query_string_for_detail_time';
 
-export const RedirectToContainerDetail = ({ match }: RouteComponentProps<{ name: string }>) => (
-  <Redirect to={`/metrics/container/${match.params.name}`} />
-);
+export const RedirectToContainerDetail = ({
+  match,
+  location,
+}: RouteComponentProps<{ name: string }>) => {
+  const args = createQueryStringForDetailTime(location);
+  return <Redirect to={`/metrics/container/${match.params.name}${args}`} />;
+};
 
-export const getContainerDetailUrl = ({ name }: { name: string }) =>
-  `#/link-to/container-detail/${name}`;
+export const getContainerDetailUrl = ({
+  name,
+  to,
+  from,
+}: {
+  name: string;
+  to?: number;
+  from?: number;
+}) => {
+  const args = to && from ? `?to=${to}&from=${from}` : '';
+  return `#/link-to/container-detail/${name}${args}`;
+};

x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx

@@ -6,9 +6,24 @@
 
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { createQueryStringForDetailTime } from './create_query_string_for_detail_time';
+export const RedirectToHostDetail = ({
+  match,
+  location,
+}: RouteComponentProps<{ name: string }>) => {
+  const args = createQueryStringForDetailTime(location);
+  return <Redirect to={`/metrics/host/${match.params.name}${args}`} />;
+};
 
-export const RedirectToHostDetail = ({ match }: RouteComponentProps<{ name: string }>) => (
-  <Redirect to={`/metrics/host/${match.params.name}`} />
-);
-
-export const getHostDetailUrl = ({ name }: { name: string }) => `#/link-to/host-detail/${name}`;
+export const getHostDetailUrl = ({
+  name,
+  to,
+  from,
+}: {
+  name: string;
+  to?: number;
+  from?: number;
+}) => {
+  const args = to && from ? `?to=${to}&from=${from}` : '';
+  return `#/link-to/host-detail/${name}${args}`;
+};

x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx

@@ -6,9 +6,22 @@
 
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { createQueryStringForDetailTime } from './create_query_string_for_detail_time';
 
-export const RedirectToPodDetail = ({ match }: RouteComponentProps<{ name: string }>) => (
-  <Redirect to={`/metrics/pod/${match.params.name}`} />
-);
+export const RedirectToPodDetail = ({ match, location }: RouteComponentProps<{ name: string }>) => {
+  const args = createQueryStringForDetailTime(location);
+  return <Redirect to={`/metrics/pod/${match.params.name}${args}`} />;
+};
 
-export const getPodDetailUrl = ({ name }: { name: string }) => `#/link-to/pod-detail/${name}`;
+export const getPodDetailUrl = ({
+  name,
+  to,
+  from,
+}: {
+  name: string;
+  to?: number;
+  from?: number;
+}) => {
+  const args = to && from ? `?to=${to}&from=${from}` : '';
+  return `#/link-to/pod-detail/${name}${args}`;
+};