[7.x] [Uptime] Added date range filter into expanded list query (#52609)

package.json

@@ -239,7 +239,7 @@
     "react-use": "^13.13.0",
     "reactcss": "1.2.3",
     "redux": "4.0.0",
-    "redux-actions": "2.2.1",
+    "redux-actions": "2.6.5",
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "^0.13.3",
     "regression": "2.0.1",
@@ -351,7 +351,7 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/react-virtualized": "^9.18.7",
     "@types/redux": "^3.6.31",
-    "@types/redux-actions": "^2.2.1",
+    "@types/redux-actions": "^2.6.1",
     "@types/request": "^2.48.2",
     "@types/selenium-webdriver": "^4.0.5",
     "@types/semver": "^5.5.0",

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx

@@ -8,11 +8,12 @@ import { MonitorSummary, Check } from '../../../../../../common/graphql/types';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { MonitorListDrawerComponent } from '../monitor_list_drawer';
+import { MonitorDetails } from '../../../../../../common/runtime_types';
 
 describe('MonitorListDrawer component', () => {
   let summary: MonitorSummary;
   let loadMonitorDetails: any;
-  let monitorDetails: any;
+  let monitorDetails: MonitorDetails;
 
   beforeEach(() => {
     summary = {

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx

@@ -6,7 +6,6 @@
 
 import React, { useEffect } from 'react';
 import { EuiLink, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui';
-import { get } from 'lodash';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { MonitorSummary } from '../../../../../common/graphql/types';
@@ -16,6 +15,8 @@ import { MostRecentError } from './most_recent_error';
 import { getMonitorDetails } from '../../../../state/selectors';
 import { MonitorStatusList } from './monitor_status_list';
 import { MonitorDetails } from '../../../../../common/runtime_types';
+import { useUrlParams } from '../../../../hooks';
+import { MonitorDetailsActionPayload } from '../../../../state/actions/types';
 import { MonitorListActionsPopover } from '../monitor_list_actions_popover';
 
 const ContainerDiv = styled.div`
@@ -50,19 +51,20 @@ export function MonitorListDrawerComponent({
   monitorDetails,
 }: MonitorListDrawerProps) {
   const monitorId = summary?.monitor_id;
-  useEffect(() => {
-    if (monitorId) {
-      loadMonitorDetails(monitorId);
-    }
-  }, [loadMonitorDetails, monitorId]);
+  const [getUrlParams] = useUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
 
-  if (!summary || !summary.state.checks) {
-    return null;
-  }
+  useEffect(() => {
+    loadMonitorDetails({
+      dateStart,
+      dateEnd,
+      monitorId,
+    });
+  }, [dateStart, dateEnd, monitorId, loadMonitorDetails]);
 
-  const monitorUrl: string | undefined = get(summary.state.url, 'full', undefined);
+  const monitorUrl = summary?.state?.url?.full || '';
 
-  return (
+  return summary && summary.state.checks ? (
     <ContainerDiv>
       <EuiFlexGroup>
         <EuiFlexItem grow={true}>
@@ -87,15 +89,16 @@ export function MonitorListDrawerComponent({
         />
       )}
     </ContainerDiv>
-  );
+  ) : null;
 }
 
 const mapStateToProps = (state: AppState, { summary }: any) => ({
   monitorDetails: getMonitorDetails(state, summary),
 });
 
 const mapDispatchToProps = (dispatch: any) => ({
-  loadMonitorDetails: (monitorId: string) => dispatch(fetchMonitorDetails(monitorId)),
+  loadMonitorDetails: (actionPayload: MonitorDetailsActionPayload) =>
+    dispatch(fetchMonitorDetails(actionPayload)),
 });
 
 export const MonitorListDrawer = connect(

x-pack/legacy/plugins/uptime/public/state/actions/monitor.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { MonitorDetailsActionPayload } from './types';
+import { MonitorError } from '../../../common/runtime_types';
 import { MonitorLocations } from '../../../common/runtime_types';
 import { QueryParams } from './types';
 
@@ -17,12 +19,12 @@ export const FETCH_MONITOR_LOCATIONS_FAIL = 'FETCH_MONITOR_LOCATIONS_FAIL';
 
 export interface MonitorDetailsState {
   monitorId: string;
-  error: Error;
+  error: MonitorError;
 }
 
 interface GetMonitorDetailsAction {
   type: typeof FETCH_MONITOR_DETAILS;
-  payload: string;
+  payload: MonitorDetailsActionPayload;
 }
 
 interface GetMonitorDetailsSuccessAction {
@@ -54,10 +56,10 @@ interface GetMonitorLocationsFailAction {
   payload: any;
 }
 
-export function fetchMonitorDetails(monitorId: string): GetMonitorDetailsAction {
+export function fetchMonitorDetails(payload: MonitorDetailsActionPayload): GetMonitorDetailsAction {
   return {
     type: FETCH_MONITOR_DETAILS,
-    payload: monitorId,
+    payload,
   };
 }
 

x-pack/legacy/plugins/uptime/public/state/actions/types.ts

@@ -10,3 +10,10 @@ export interface QueryParams {
   filters?: string;
   statusFilter?: string;
 }
+
+export interface MonitorDetailsActionPayload {
+  monitorId: string;
+  dateStart: string;
+  dateEnd: string;
+  location?: string;
+}

x-pack/legacy/plugins/uptime/public/state/actions/ui.ts

@@ -3,53 +3,19 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-export const SET_INTEGRATION_POPOVER_STATE = 'SET_INTEGRATION_POPOVER_STATE';
-export const SET_BASE_PATH = 'SET_BASE_PATH';
-export const REFRESH_APP = 'REFRESH_APP';
+import { createAction } from 'redux-actions';
 
 export interface PopoverState {
   id: string;
   open: boolean;
 }
 
-interface SetBasePathAction {
-  type: typeof SET_BASE_PATH;
-  payload: string;
-}
-
-interface SetIntegrationPopoverAction {
-  type: typeof SET_INTEGRATION_POPOVER_STATE;
-  payload: PopoverState;
-}
-
-interface TriggerAppRefreshAction {
-  type: typeof REFRESH_APP;
-  payload: number;
-}
+export type UiPayload = PopoverState & string & number & Map<string, string[]>;
 
-export type UiActionTypes =
-  | SetIntegrationPopoverAction
-  | SetBasePathAction
-  | TriggerAppRefreshAction;
+export const setBasePath = createAction<string>('SET BASE PATH');
 
-export function toggleIntegrationsPopover(popoverState: PopoverState): SetIntegrationPopoverAction {
-  return {
-    type: SET_INTEGRATION_POPOVER_STATE,
-    payload: popoverState,
-  };
-}
+export const triggerAppRefresh = createAction<number>('REFRESH APP');
 
-export function setBasePath(basePath: string): SetBasePathAction {
-  return {
-    type: SET_BASE_PATH,
-    payload: basePath,
-  };
-}
-
-export function triggerAppRefresh(refreshTime: number): TriggerAppRefreshAction {
-  return {
-    type: REFRESH_APP,
-    payload: refreshTime,
-  };
-}
+export const toggleIntegrationsPopover = createAction<PopoverState>(
+  'TOGGLE INTEGRATION POPOVER STATE'
+);

x-pack/legacy/plugins/uptime/public/state/api/monitor.ts

@@ -6,6 +6,7 @@
 
 import { ThrowReporter } from 'io-ts/lib/ThrowReporter';
 import { getApiPath } from '../../lib/helper';
+import { BaseParams } from './types';
 import {
   MonitorDetailsType,
   MonitorDetails,
@@ -19,12 +20,23 @@ interface ApiRequest {
   basePath: string;
 }
 
+export type MonitorQueryParams = BaseParams & ApiRequest;
+
 export const fetchMonitorDetails = async ({
   monitorId,
   basePath,
-}: ApiRequest): Promise<MonitorDetails> => {
-  const url = getApiPath(`/api/uptime/monitor/details?monitorId=${monitorId}`, basePath);
-  const response = await fetch(url);
+  dateStart,
+  dateEnd,
+}: MonitorQueryParams): Promise<MonitorDetails> => {
+  const url = getApiPath(`/api/uptime/monitor/details`, basePath);
+  const params = {
+    monitorId,
+    dateStart,
+    dateEnd,
+  };
+  const urlParams = new URLSearchParams(params).toString();
+  const response = await fetch(`${url}?${urlParams}`);
+
   if (!response.ok) {
     throw new Error(response.statusText);
   }

x-pack/legacy/plugins/uptime/public/state/api/types.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+export interface BaseParams {
+  basePath: string;
+  dateStart: string;
+  dateEnd: string;
+  filters?: string;
+  statusFilter?: string;
+  location?: string;
+}

x-pack/legacy/plugins/uptime/public/state/effects/monitor.ts

@@ -16,12 +16,18 @@ import {
 } from '../actions/monitor';
 import { fetchMonitorDetails, fetchMonitorLocations } from '../api';
 import { getBasePath } from '../selectors';
+import { MonitorDetailsActionPayload } from '../actions/types';
 
 function* monitorDetailsEffect(action: Action<any>) {
-  const monitorId: string = action.payload;
+  const { monitorId, dateStart, dateEnd }: MonitorDetailsActionPayload = action.payload;
   try {
     const basePath = yield select(getBasePath);
-    const response = yield call(fetchMonitorDetails, { monitorId, basePath });
+    const response = yield call(fetchMonitorDetails, {
+      monitorId,
+      basePath,
+      dateStart,
+      dateEnd,
+    });
     yield put({ type: FETCH_MONITOR_DETAILS_SUCCESS, payload: response });
   } catch (error) {
     yield put({ type: FETCH_MONITOR_DETAILS_FAIL, payload: error.message });

x-pack/legacy/plugins/uptime/public/state/reducers/__tests__/ui.test.ts

@@ -4,15 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { UiActionTypes } from '../../actions';
+import { setBasePath, toggleIntegrationsPopover, triggerAppRefresh } from '../../actions';
 import { uiReducer } from '../ui';
+import { Action } from 'redux-actions';
 
 describe('ui reducer', () => {
   it(`sets the application's base path`, () => {
-    const action: UiActionTypes = {
-      type: 'SET_BASE_PATH',
-      payload: 'yyz',
-    };
+    const action = setBasePath('yyz') as Action<never>;
     expect(
       uiReducer(
         {
@@ -26,13 +24,10 @@ describe('ui reducer', () => {
   });
 
   it('adds integration popover status to state', () => {
-    const action: UiActionTypes = {
-      type: 'SET_INTEGRATION_POPOVER_STATE',
-      payload: {
-        id: 'popover-2',
-        open: true,
-      },
-    };
+    const action = toggleIntegrationsPopover({
+      id: 'popover-2',
+      open: true,
+    }) as Action<never>;
     expect(
       uiReducer(
         {
@@ -46,10 +41,16 @@ describe('ui reducer', () => {
   });
 
   it('updates the refresh value', () => {
-    const action: UiActionTypes = {
-      type: 'REFRESH_APP',
-      payload: 125,
-    };
-    expect(uiReducer(undefined, action)).toMatchSnapshot();
+    const action = triggerAppRefresh(125) as Action<never>;
+    expect(
+      uiReducer(
+        {
+          basePath: 'abc',
+          integrationsPopoverOpen: null,
+          lastRefresh: 125,
+        },
+        action
+      )
+    ).toMatchSnapshot();
   });
 });

x-pack/legacy/plugins/uptime/public/state/reducers/index.ts

@@ -12,5 +12,6 @@ import { uiReducer } from './ui';
 export const rootReducer = combineReducers({
   monitor: monitorReducer,
   snapshot: snapshotReducer,
+  // @ts-ignore for now TODO: refactor to use redux-action
   ui: uiReducer,
 });