Skip to content

Commit

Permalink
[Uptime] Optimize get latest monitor API (#61820)
Browse files Browse the repository at this point in the history
* update monitor status API

* update fixture

* fix types

* fix tets

* fix tests
  • Loading branch information
shahzad31 authored Apr 2, 2020
1 parent 467f27b commit df655c9
Show file tree
Hide file tree
Showing 22 changed files with 78 additions and 394 deletions.
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/uptime/common/constants/rest_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export enum API_URLS {
MONITOR_LOCATIONS = `/api/uptime/monitor/locations`,
MONITOR_DURATION = `/api/uptime/monitor/duration`,
MONITOR_DETAILS = `/api/uptime/monitor/details`,
MONITOR_SELECTED = `/api/uptime/monitor/selected`,
MONITOR_STATUS = `/api/uptime/monitor/status`,
PINGS = '/api/uptime/pings',
PING_HISTOGRAM = `/api/uptime/ping/histogram`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import React, { useContext, useEffect } from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { AppState } from '../../../state';
import { monitorLocationsSelector, selectMonitorStatus } from '../../../state/selectors';
import { monitorLocationsSelector, monitorStatusSelector } from '../../../state/selectors';
import { MonitorStatusBarComponent } from '../../functional/monitor_status_details/monitor_status_bar';
import { getMonitorStatusAction, getSelectedMonitorAction } from '../../../state/actions';
import { getMonitorStatusAction } from '../../../state/actions';
import { useUrlParams } from '../../../hooks';
import { Ping } from '../../../../common/graphql/types';
import { MonitorLocations } from '../../../../common/runtime_types/monitor';
Expand All @@ -23,7 +23,6 @@ interface StateProps {

interface DispatchProps {
loadMonitorStatus: typeof getMonitorStatusAction;
loadSelectedMonitor: typeof getSelectedMonitorAction;
}

interface OwnProps {
Expand All @@ -34,7 +33,6 @@ type Props = OwnProps & StateProps & DispatchProps;

const Container: React.FC<Props> = ({
loadMonitorStatus,
loadSelectedMonitor,
monitorId,
monitorStatus,
monitorLocations,
Expand All @@ -46,8 +44,7 @@ const Container: React.FC<Props> = ({

useEffect(() => {
loadMonitorStatus({ dateStart, dateEnd, monitorId });
loadSelectedMonitor({ monitorId });
}, [monitorId, dateStart, dateEnd, loadMonitorStatus, lastRefresh, loadSelectedMonitor]);
}, [monitorId, dateStart, dateEnd, loadMonitorStatus, lastRefresh]);

return (
<MonitorStatusBarComponent
Expand All @@ -59,12 +56,11 @@ const Container: React.FC<Props> = ({
};

const mapStateToProps = (state: AppState, ownProps: OwnProps) => ({
monitorStatus: selectMonitorStatus(state),
monitorStatus: monitorStatusSelector(state),
monitorLocations: monitorLocationsSelector(state, ownProps.monitorId),
});

const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchProps => ({
loadSelectedMonitor: params => dispatch(getSelectedMonitorAction(params)),
loadMonitorStatus: params => dispatch(getMonitorStatusAction(params)),
});

Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 8 additions & 46 deletions x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,23 @@
*/

import { EuiSpacer } from '@elastic/eui';
import React, { useContext, useState, useEffect } from 'react';
import React, { useContext, useState } from 'react';
import { useParams } from 'react-router-dom';
import { connect, MapDispatchToPropsFunction, MapStateToPropsParam } from 'react-redux';
import { useSelector } from 'react-redux';
import { MonitorCharts, PingList } from '../components/functional';
import { UptimeRefreshContext } from '../contexts';
import { useUptimeTelemetry, useUrlParams, UptimePage } from '../hooks';
import { useTrackPageview } from '../../../../../plugins/observability/public';
import { MonitorStatusDetails } from '../components/connected';
import { Ping } from '../../common/graphql/types';
import { AppState } from '../state';
import { selectSelectedMonitor } from '../state/selectors';
import { getSelectedMonitorAction } from '../state/actions';
import { monitorStatusSelector } from '../state/selectors';
import { PageHeader } from './page_header';
import { useBreadcrumbs } from '../hooks/use_breadcrumbs';

interface StateProps {
selectedMonitor: Ping | null;
}

interface DispatchProps {
dispatchGetMonitorStatus: (monitorId: string) => void;
}

type Props = StateProps & DispatchProps;

export const MonitorPageComponent: React.FC<Props> = ({
selectedMonitor,
dispatchGetMonitorStatus,
}: Props) => {
export const MonitorPage: React.FC = () => {
// decode 64 base string, it was decoded to make it a valid url, since monitor id can be a url
let { monitorId } = useParams();
monitorId = atob(monitorId || '');

useEffect(() => {
if (monitorId) {
dispatchGetMonitorStatus(monitorId);
}
}, [dispatchGetMonitorStatus, monitorId]);

const [pingListPageCount, setPingListPageCount] = useState<number>(10);
const { refreshApp } = useContext(UptimeRefreshContext);
const [getUrlParams, updateUrlParams] = useUrlParams();
Expand All @@ -53,19 +31,21 @@ export const MonitorPageComponent: React.FC<Props> = ({
const [selectedLocation, setSelectedLocation] = useState(undefined);
const [pingListIndex, setPingListIndex] = useState(0);

const selectedMonitor = useSelector(monitorStatusSelector);

const sharedVariables = {
dateRangeStart,
dateRangeEnd,
location: selectedLocation,
monitorId,
location: selectedLocation,
};

useUptimeTelemetry(UptimePage.Monitor);

useTrackPageview({ app: 'uptime', path: 'monitor' });
useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 });

const nameOrId = selectedMonitor?.monitor?.name || selectedMonitor?.monitor?.id || '';
const nameOrId = selectedMonitor?.monitor?.name || monitorId || '';
useBreadcrumbs([{ text: nameOrId }]);
return (
<>
Expand Down Expand Up @@ -97,21 +77,3 @@ export const MonitorPageComponent: React.FC<Props> = ({
</>
);
};

const mapStateToProps: MapStateToPropsParam<StateProps, {}, AppState> = state => ({
selectedMonitor: selectSelectedMonitor(state),
});

const mapDispatchToProps: MapDispatchToPropsFunction<DispatchProps, {}> = (dispatch, own) => {
return {
dispatchGetMonitorStatus: (monitorId: string) => {
dispatch(
getSelectedMonitorAction({
monitorId,
})
);
},
};
};

export const MonitorPage = connect(mapStateToProps, mapDispatchToProps)(MonitorPageComponent);
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@ import { createAction } from 'redux-actions';
import { QueryParams } from './types';
import { Ping } from '../../../common/graphql/types';

export const getSelectedMonitorAction = createAction<{ monitorId: string }>('GET_SELECTED_MONITOR');
export const getSelectedMonitorActionSuccess = createAction<Ping>('GET_SELECTED_MONITOR_SUCCESS');
export const getSelectedMonitorActionFail = createAction<Error>('GET_SELECTED_MONITOR_FAIL');

export const getMonitorStatusAction = createAction<QueryParams>('GET_MONITOR_STATUS');
export const getMonitorStatusActionSuccess = createAction<Ping>('GET_MONITOR_STATUS_SUCCESS');
export const getMonitorStatusActionFail = createAction<Error>('GET_MONITOR_STATUS_FAIL');
14 changes: 1 addition & 13 deletions x-pack/legacy/plugins/uptime/public/state/api/monitor_status.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,7 @@
import { QueryParams } from '../actions/types';
import { Ping } from '../../../common/graphql/types';
import { apiService } from './utils';
import { API_URLS } from '../../../common/constants/rest_api';

export interface APIParams {
monitorId: string;
}

export const fetchSelectedMonitor = async ({ monitorId }: APIParams): Promise<Ping> => {
const queryParams = {
monitorId,
};

return await apiService.get(API_URLS.MONITOR_SELECTED, queryParams);
};
import { API_URLS } from '../../../common/constants';

export const fetchMonitorStatus = async ({
monitorId,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,11 @@

import { takeLatest } from 'redux-saga/effects';
import {
getSelectedMonitorAction,
getSelectedMonitorActionSuccess,
getSelectedMonitorActionFail,
getMonitorStatusAction,
getMonitorStatusActionSuccess,
getMonitorStatusActionFail,
} from '../actions';
import { fetchSelectedMonitor, fetchMonitorStatus } from '../api';
import { fetchMonitorStatus } from '../api';
import { fetchEffectFactory } from './fetch_effect';

export function* fetchMonitorStatusEffect() {
Expand All @@ -25,13 +22,4 @@ export function* fetchMonitorStatusEffect() {
getMonitorStatusActionFail
)
);

yield takeLatest(
getSelectedMonitorAction,
fetchEffectFactory(
fetchSelectedMonitor,
getSelectedMonitorActionSuccess,
getSelectedMonitorActionFail
)
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
*/
import { handleActions, Action } from 'redux-actions';
import {
getSelectedMonitorAction,
getSelectedMonitorActionSuccess,
getSelectedMonitorActionFail,
getMonitorStatusAction,
getMonitorStatusActionSuccess,
getMonitorStatusActionFail,
Expand All @@ -17,46 +14,34 @@ import { QueryParams } from '../actions/types';

export interface MonitorStatusState {
status: Ping | null;
monitor: Ping | null;
loading: boolean;
}

const initialState: MonitorStatusState = {
status: null,
monitor: null,
loading: false,
};

type MonitorStatusPayload = QueryParams & Ping;

export const monitorStatusReducer = handleActions<MonitorStatusState, MonitorStatusPayload>(
{
[String(getSelectedMonitorAction)]: (state, action: Action<QueryParams>) => ({
...state,
loading: true,
}),

[String(getSelectedMonitorActionSuccess)]: (state, action: Action<Ping>) => ({
...state,
loading: false,
monitor: { ...action.payload } as Ping,
}),

[String(getSelectedMonitorActionFail)]: (state, action: Action<any>) => ({
...state,
loading: false,
}),

[String(getMonitorStatusAction)]: (state, action: Action<QueryParams>) => ({
...state,
loading: true,
}),

[String(getMonitorStatusActionSuccess)]: (state, action: Action<Ping>) => ({
...state,
loading: false,
status: { ...action.payload } as Ping,
}),
[String(getMonitorStatusActionSuccess)]: (state, action: Action<Ping>) => {
return {
...state,
loading: false,
// Keeping url from prev request to display, if there is no latest status
status: {
url: action.payload?.url || state.status?.url,
...action.payload,
} as Ping,
};
},

[String(getMonitorStatusActionFail)]: (state, action: Action<any>) => ({
...state,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ describe('state selectors', () => {
},
monitorStatus: {
status: null,
monitor: null,
loading: false,
},
indexPattern: {
Expand Down
4 changes: 1 addition & 3 deletions x-pack/legacy/plugins/uptime/public/state/selectors/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ export const monitorLocationsSelector = (state: AppState, monitorId: string) =>
return state.monitor.monitorLocationsList?.get(monitorId);
};

export const selectSelectedMonitor = (state: AppState) => state.monitorStatus.monitor;

export const selectMonitorStatus = (state: AppState) => state.monitorStatus.status;
export const monitorStatusSelector = (state: AppState) => state.monitorStatus.status;

export const selectDynamicSettings = (state: AppState) => {
return state.dynamicSettings;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,49 +31,25 @@ describe('getLatestMonitor', () => {
],
},
},
aggs: {
by_id: {
terms: {
field: 'monitor.id',
size: 1000,
},
aggs: {
latest: {
top_hits: {
size: 1,
sort: {
'@timestamp': { order: 'desc' },
},
},
},
},
},
size: 1,
_source: ['url', 'monitor', 'observer', 'tls', '@timestamp'],
sort: {
'@timestamp': { order: 'desc' },
},
size: 0,
},
};
mockEsSearchResult = {
aggregations: {
by_id: {
buckets: [
{
latest: {
hits: {
hits: [
{
_source: {
'@timestamp': 123456,
monitor: {
id: 'testMonitor',
},
},
},
],
},
hits: {
hits: [
{
_source: {
timestamp: 123456,
monitor: {
id: 'testMonitor',
},
},
],
},
},
],
},
};
});
Expand All @@ -87,6 +63,7 @@ describe('getLatestMonitor', () => {
dateEnd: 'now',
monitorId: 'testMonitor',
});

expect(result.timestamp).toBe(123456);
expect(result.monitor).not.toBeFalsy();
expect(result?.monitor?.id).toBe('testMonitor');
Expand Down
Loading

0 comments on commit df655c9

Please sign in to comment.