From eaa37c24e9e4ce52a88c4952be7ed7947ee7a9e3 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Thu, 18 Oct 2018 09:57:46 -0700 Subject: [PATCH] [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}`; +};