[Uptime] Optimize get latest monitor API (#61820)

* update monitor status API * update fixture * fix types * fix tets * fix tests
elastic · Apr 2, 2020 · df655c9 · df655c9
1 parent 467f27b
commit df655c9
Show file tree

Hide file tree

Showing 22 changed files with 78 additions and 394 deletions.
diff --git a/x-pack/legacy/plugins/uptime/common/constants/rest_api.ts b/x-pack/legacy/plugins/uptime/common/constants/rest_api.ts
@@ -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`,

diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx
@@ -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';
@@ -23,7 +23,6 @@ interface StateProps {
 
 interface DispatchProps {
   loadMonitorStatus: typeof getMonitorStatusAction;
-  loadSelectedMonitor: typeof getSelectedMonitorAction;
 }
 
 interface OwnProps {
@@ -34,7 +33,6 @@ type Props = OwnProps & StateProps & DispatchProps;
 
 const Container: React.FC<Props> = ({
   loadMonitorStatus,
-  loadSelectedMonitor,
   monitorId,
   monitorStatus,
   monitorLocations,
@@ -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
@@ -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)),
 });
 

diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/monitor.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/monitor.test.tsx.snap
diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
@@ -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();
@@ -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 (
     <>
@@ -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);
diff --git a/x-pack/legacy/plugins/uptime/public/state/actions/monitor_status.ts b/x-pack/legacy/plugins/uptime/public/state/actions/monitor_status.ts
@@ -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');
diff --git a/x-pack/legacy/plugins/uptime/public/state/api/monitor_status.ts b/x-pack/legacy/plugins/uptime/public/state/api/monitor_status.ts
@@ -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,

diff --git a/x-pack/legacy/plugins/uptime/public/state/effects/monitor_status.ts b/x-pack/legacy/plugins/uptime/public/state/effects/monitor_status.ts
@@ -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() {
@@ -25,13 +22,4 @@ export function* fetchMonitorStatusEffect() {
       getMonitorStatusActionFail
     )
   );
-
-  yield takeLatest(
-    getSelectedMonitorAction,
-    fetchEffectFactory(
-      fetchSelectedMonitor,
-      getSelectedMonitorActionSuccess,
-      getSelectedMonitorActionFail
-    )
-  );
 }
diff --git a/x-pack/legacy/plugins/uptime/public/state/reducers/monitor_status.ts b/x-pack/legacy/plugins/uptime/public/state/reducers/monitor_status.ts
@@ -5,9 +5,6 @@
  */
 import { handleActions, Action } from 'redux-actions';
 import {
-  getSelectedMonitorAction,
-  getSelectedMonitorActionSuccess,
-  getSelectedMonitorActionFail,
   getMonitorStatusAction,
   getMonitorStatusActionSuccess,
   getMonitorStatusActionFail,
@@ -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,

diff --git a/x-pack/legacy/plugins/uptime/public/state/selectors/__tests__/index.test.ts b/x-pack/legacy/plugins/uptime/public/state/selectors/__tests__/index.test.ts
@@ -46,7 +46,6 @@ describe('state selectors', () => {
     },
     monitorStatus: {
       status: null,
-      monitor: null,
       loading: false,
     },
     indexPattern: {

diff --git a/x-pack/legacy/plugins/uptime/public/state/selectors/index.ts b/x-pack/legacy/plugins/uptime/public/state/selectors/index.ts
@@ -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;

diff --git a/x-pack/plugins/uptime/server/lib/requests/__tests__/get_latest_monitor.test.ts b/x-pack/plugins/uptime/server/lib/requests/__tests__/get_latest_monitor.test.ts
@@ -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',
               },
             },
-          ],
-        },
+          },
+        ],
       },
     };
   });
@@ -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');