Skip to content

Commit

Permalink
[Infra UI] Adding time ranges to detail links
Browse files Browse the repository at this point in the history
- Adds timeranges to hosts, containers, and pods links
- Fixes #24228 - Typos and what not prevented urls from working
  • Loading branch information
simianhacker committed Oct 18, 2018
1 parent 2b6cd21 commit eaa37c2
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}

Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,8 +18,8 @@ const selectOptionsUrlState = createSelector(
waffleOptionsSelectors.selectMetric,
waffleOptionsSelectors.selectGroupBy,
waffleOptionsSelectors.selectNodeType,
(metrics, groupBy, nodeType) => ({
metrics,
(metric, groupBy, nodeType) => ({
metric,
groupBy,
nodeType,
})
Expand Down Expand Up @@ -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);
}
}}
/>
Expand Down
10 changes: 10 additions & 0 deletions x-pack/plugins/infra/public/pages/link_to/query_params.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>) => (
<Redirect to={`/metrics/container/${match.params.name}`} />
);
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 <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}`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>) => (
<Redirect to={`/metrics/host/${match.params.name}`} />
);
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 <Redirect to={`/metrics/host/${match.params.name}${args}`} />;
};

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}`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>) => (
<Redirect to={`/metrics/pod/${match.params.name}`} />
);
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 <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}`;
};

0 comments on commit eaa37c2

Please sign in to comment.