From eaa37c24e9e4ce52a88c4952be7ed7947ee7a9e3 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Thu, 18 Oct 2018 09:57:46 -0700 Subject: [PATCH 1/5] [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 --- .../containers/metrics/with_metrics_time.tsx | 12 ++++---- .../containers/waffle/with_waffle_options.tsx | 17 ++++++----- .../public/pages/link_to/query_params.ts | 10 +++++++ .../link_to/redirect_to_container_detail.tsx | 28 +++++++++++++++---- .../pages/link_to/redirect_to_host_detail.tsx | 27 +++++++++++++++--- .../pages/link_to/redirect_to_pod_detail.tsx | 24 +++++++++++++--- 6 files changed, 92 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/infra/public/containers/metrics/with_metrics_time.tsx b/x-pack/plugins/infra/public/containers/metrics/with_metrics_time.tsx index c2d4fdcc62322..5cc88a60ca1b8 100644 --- a/x-pack/plugins/infra/public/containers/metrics/with_metrics_time.tsx +++ b/x-pack/plugins/infra/public/containers/metrics/with_metrics_time.tsx @@ -35,7 +35,7 @@ export const WithMetricsTime = asChildFunctionRenderer(withMetricsTime, { */ interface MetricTimeUrlState { - timeRange?: ReturnType; + time?: ReturnType; autoReload?: ReturnType; } @@ -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; diff --git a/x-pack/plugins/infra/public/containers/waffle/with_waffle_options.tsx b/x-pack/plugins/infra/public/containers/waffle/with_waffle_options.tsx index 3992d78f71cd0..0136ac6cf5fee 100644 --- a/x-pack/plugins/infra/public/containers/waffle/with_waffle_options.tsx +++ b/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); } }} /> diff --git a/x-pack/plugins/infra/public/pages/link_to/query_params.ts b/x-pack/plugins/infra/public/pages/link_to/query_params.ts index 8ee492ebc010d..8b28b7df113ac 100644 --- a/x-pack/plugins/infra/public/pages/link_to/query_params.ts +++ b/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; +}; diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx index f6d6b7d8dab16..778cdbfc907d7 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx @@ -6,10 +6,28 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { getFromFromLocation, getToFromLocation } from './query_params'; -export const RedirectToContainerDetail = ({ match }: RouteComponentProps<{ name: string }>) => ( - -); +export const RedirectToContainerDetail = ({ + match, + location, +}: RouteComponentProps<{ name: string }>) => { + const to = getToFromLocation(location); + const from = getFromFromLocation(location); + const args = + to && from ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` : ''; + return ; +}; -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}`; +}; diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx index dcce4e3cb5e64..1831bc2bd5025 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx @@ -6,9 +6,28 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { getFromFromLocation, getToFromLocation } from './query_params'; -export const RedirectToHostDetail = ({ match }: RouteComponentProps<{ name: string }>) => ( - -); +export const RedirectToHostDetail = ({ + match, + location, +}: RouteComponentProps<{ name: string }>) => { + const to = getToFromLocation(location); + const from = getFromFromLocation(location); + const args = + to && from ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` : ''; + return ; +}; -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}`; +}; diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx index 0de7b7ca0f579..262dbb062b584 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx @@ -6,9 +6,25 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { getFromFromLocation, getToFromLocation } from './query_params'; -export const RedirectToPodDetail = ({ match }: RouteComponentProps<{ name: string }>) => ( - -); +export const RedirectToPodDetail = ({ match, location }: RouteComponentProps<{ name: string }>) => { + const to = getToFromLocation(location); + const from = getFromFromLocation(location); + const args = + to && from ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` : ''; + return ; +}; -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}`; +}; From f74c1733a74413cdd5fa5d478e0dda7243d2def5 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Fri, 19 Oct 2018 12:15:50 -0700 Subject: [PATCH 2/5] remove argument hard coded formatting --- .../public/pages/link_to/redirect_to_host_detail.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx index 1831bc2bd5025..b8ed8154f1759 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx @@ -6,8 +6,8 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { replaceStateKeyInQueryString } from '../../utils/url_state'; import { getFromFromLocation, getToFromLocation } from './query_params'; - export const RedirectToHostDetail = ({ match, location, @@ -15,7 +15,12 @@ export const RedirectToHostDetail = ({ const to = getToFromLocation(location); const from = getFromFromLocation(location); const args = - to && from ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` : ''; + to && from + ? '?' + + replaceStateKeyInQueryString('metricTime', { + time: { to, from }, + })('') + : ''; return ; }; From dee2ad10e097834c41a0bf4044b42b27afd18184 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Fri, 19 Oct 2018 15:10:31 -0700 Subject: [PATCH 3/5] Cleaning up query arg generation --- .../pages/link_to/redirect_to_container_detail.tsx | 7 ++----- .../pages/link_to/redirect_to_host_detail.tsx | 13 ++----------- .../public/pages/link_to/redirect_to_pod_detail.tsx | 7 ++----- 3 files changed, 6 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx index 778cdbfc907d7..d8674f306befd 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_container_detail.tsx @@ -6,16 +6,13 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; -import { getFromFromLocation, getToFromLocation } from './query_params'; +import { createQueryStringForDetailTime } from './create_query_string_for_detail_time'; export const RedirectToContainerDetail = ({ match, location, }: RouteComponentProps<{ name: string }>) => { - const to = getToFromLocation(location); - const from = getFromFromLocation(location); - const args = - to && from ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` : ''; + const args = createQueryStringForDetailTime(location); return ; }; diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx index b8ed8154f1759..da633581c3dcf 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_host_detail.tsx @@ -6,21 +6,12 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; -import { replaceStateKeyInQueryString } from '../../utils/url_state'; -import { getFromFromLocation, getToFromLocation } from './query_params'; +import { createQueryStringForDetailTime } from './create_query_string_for_detail_time'; export const RedirectToHostDetail = ({ match, location, }: RouteComponentProps<{ name: string }>) => { - const to = getToFromLocation(location); - const from = getFromFromLocation(location); - const args = - to && from - ? '?' + - replaceStateKeyInQueryString('metricTime', { - time: { to, from }, - })('') - : ''; + const args = createQueryStringForDetailTime(location); return ; }; diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx index 262dbb062b584..c8957283bd21e 100644 --- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx +++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_pod_detail.tsx @@ -6,13 +6,10 @@ import React from 'react'; import { Redirect, RouteComponentProps } from 'react-router-dom'; -import { getFromFromLocation, getToFromLocation } from './query_params'; +import { createQueryStringForDetailTime } from './create_query_string_for_detail_time'; export const RedirectToPodDetail = ({ match, location }: RouteComponentProps<{ name: string }>) => { - const to = getToFromLocation(location); - const from = getFromFromLocation(location); - const args = - to && from ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` : ''; + const args = createQueryStringForDetailTime(location); return ; }; From 94efc6102f8771ab50cd20ec40ef6273740f09d8 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Mon, 22 Oct 2018 08:48:12 -0700 Subject: [PATCH 4/5] Adding missing file --- .../create_query_string_for_detail_time.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts diff --git a/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts b/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts new file mode 100644 index 0000000000000..0a46f06dc97b7 --- /dev/null +++ b/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts @@ -0,0 +1,15 @@ +/* + * 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 { getFromFromLocation, getToFromLocation } from './query_params'; + +export const createQueryStringForDetailTime = (location: Location) => { + const to = getToFromLocation(location); + const from = getFromFromLocation(location); + return to && from + ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` + : ''; +}; From 14833c6b400ef776055c6c0a0e3ee4cfba7cd8b0 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Tue, 23 Oct 2018 08:59:34 -0700 Subject: [PATCH 5/5] removing rison hard coded string --- .../pages/link_to/create_query_string_for_detail_time.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts b/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts index 0a46f06dc97b7..f93951391a8d1 100644 --- a/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts +++ b/x-pack/plugins/infra/public/pages/link_to/create_query_string_for_detail_time.ts @@ -4,12 +4,13 @@ * 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 - ? `?metricTime=(autoReload:!f,time:(from:${from},interval:>%3D1m,to:${to}))` + ? '?' + replaceStateKeyInQueryString('metricTime', { to, from, interval: '>=1m' })('') : ''; };