added filters into expanded list query

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

@@ -16,6 +16,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';
 
 const ContainerDiv = styled.div`
   padding: 10px;
@@ -51,9 +53,24 @@ export function MonitorListDrawerComponent({
   if (!summary || !summary.state.checks) {
     return null;
   }
+  const { monitor_id: monitorId } = summary;
+  const [getUrlParams] = useUrlParams();
+  const {
+    dateRangeStart: dateStart,
+    dateRangeEnd: dateEnd,
+    statusFilter,
+    filters,
+  } = getUrlParams();
+
   useEffect(() => {
-    loadMonitorDetails(summary.monitor_id);
-  }, []);
+    loadMonitorDetails({
+      dateStart,
+      dateEnd,
+      statusFilter,
+      filters,
+      monitorId,
+    });
+  }, [dateStart, dateEnd, statusFilter, filters]);
 
   const monitorUrl: string | undefined = get(summary.state.url, 'full', undefined);
 
@@ -85,7 +102,8 @@ const mapStateToProps = (state: AppState, { summary }: any) => ({
 });
 
 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,18 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { MonitorDetailsActionPayload } from './types';
+import { MonitorError } from '../../../common/runtime_types';
+
 export const FETCH_MONITOR_DETAILS = 'FETCH_MONITOR_DETAILS';
 export const FETCH_MONITOR_DETAILS_SUCCESS = 'FETCH_MONITOR_DETAILS_SUCCESS';
 export const FETCH_MONITOR_DETAILS_FAIL = 'FETCH_MONITOR_DETAILS_FAIL';
 
 export interface MonitorDetailsState {
   monitorId: string;
-  error: Error;
+  error: MonitorError;
 }
 
 interface GetMonitorDetailsAction {
   type: typeof FETCH_MONITOR_DETAILS;
-  payload: string;
+  payload: MonitorDetailsActionPayload;
 }
 
 interface GetMonitorDetailsSuccessAction {
@@ -28,10 +31,10 @@ interface GetMonitorDetailsFailAction {
   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

@@ -0,0 +1,13 @@
+/*
+ * 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 MonitorDetailsActionPayload {
+  monitorId: string;
+  dateStart: string;
+  dateEnd: string;
+  filters?: string;
+  statusFilter?: string;
+}

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

@@ -7,18 +7,34 @@
 import { ThrowReporter } from 'io-ts/lib/ThrowReporter';
 import { getApiPath } from '../../lib/helper';
 import { MonitorDetailsType, MonitorDetails } from '../../../common/runtime_types';
+import { BaseParams } from './types';
 
 interface ApiRequest {
   monitorId: string;
   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,
+  filters,
+  statusFilter,
+}: MonitorQueryParams): Promise<MonitorDetails> => {
+  const url = getApiPath(`/api/uptime/monitor/details`, basePath);
+  const params = {
+    monitorId,
+    dateStart,
+    dateEnd,
+    ...(filters && { filters }),
+    ...(statusFilter && { statusFilter }),
+  };
+  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,13 @@
+/*
+ * 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;
+}

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

@@ -13,12 +13,26 @@ import {
 } from '../actions/monitor';
 import { fetchMonitorDetails } 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,
+    statusFilter,
+    filters,
+  }: 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,
+      statusFilter,
+      filters,
+    });
     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/server/lib/adapters/monitors/adapter_types.ts

@@ -16,5 +16,12 @@ export interface UMMonitorsAdapter {
   ): Promise<MonitorChart>;
   getFilterBar(request: any, dateRangeStart: string, dateRangeEnd: string): Promise<any>;
   getMonitorPageTitle(request: any, monitorId: string): Promise<MonitorPageTitle | null>;
-  getMonitorDetails(request: any, monitorId: string): Promise<any>;
+  getMonitorDetails(
+    request: any,
+    monitorId: string,
+    dateStart: string,
+    dateEnd: string,
+    filters?: string,
+    statusFilter?: string
+  ): Promise<any>;
 }

x-pack/legacy/plugins/uptime/server/lib/adapters/monitors/elasticsearch_monitors_adapter.ts

@@ -273,7 +273,14 @@ export class ElasticsearchMonitorsAdapter implements UMMonitorsAdapter {
     };
   }
 
-  public async getMonitorDetails(request: any, monitorId: string): Promise<MonitorDetails> {
+  public async getMonitorDetails(
+    request: any,
+    monitorId: string,
+    dateStart: string,
+    dateEnd: string,
+    filters?: string,
+    statusFilter?: string
+  ): Promise<MonitorDetails> {
     const params = {
       index: INDEX_NAMES.HEARTBEAT,
       body: {
@@ -289,11 +296,8 @@ export class ElasticsearchMonitorsAdapter implements UMMonitorsAdapter {
               },
             ],
             filter: [
-              {
-                term: {
-                  'monitor.id': monitorId,
-                },
-              },
+              { range: { '@timestamp': { gte: dateStart, lte: dateEnd } } },
+              { term: { 'monitor.id': monitorId } },
             ],
           },
         },

x-pack/legacy/plugins/uptime/server/rest_api/monitors/monitors_details.ts

@@ -20,10 +20,19 @@ export const createGetMonitorDetailsRoute: UMRestApiRouteCreator = (libs: UMServ
     tags: ['access:uptime'],
   },
   handler: async (_context, request, response): Promise<any> => {
-    const { monitorId } = request.query;
+    const { monitorId, dateStart, dateEnd, filters, statusFilter } = request.query;
 
     return response.ok({
-      body: { ...(await libs.monitors.getMonitorDetails(request, monitorId)) },
+      body: {
+        ...(await libs.monitors.getMonitorDetails(
+          request,
+          monitorId,
+          dateStart,
+          dateEnd,
+          filters,
+          statusFilter
+        )),
+      },
     });
   },
 });