[7.6] [Uptime] Refresh absolute date ranges for Ping Histogram (#56381)…

… (#56649)

* [Uptime] Refresh absolute date ranges for Ping Histogram (#56381)

* fix abs date mismatch

* fixed types

* update pr

* simplify params

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* fix snaps

* update filter

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/uptime/public/components/connected/charts/ping_histogram.tsx

@@ -15,34 +15,40 @@ import { getPingHistogram } from '../../../state/actions';
 import { selectPingHistogram } from '../../../state/selectors';
 import { withResponsiveWrapper, ResponsiveWrapperProps } from '../../higher_order';
 import { GetPingHistogramParams, HistogramResult } from '../../../../common/types';
+import { useUrlParams } from '../../../hooks';
 
-type Props = GetPingHistogramParams &
-  ResponsiveWrapperProps &
-  PingHistogramComponentProps &
-  DispatchProps & { lastRefresh: number };
+type Props = ResponsiveWrapperProps &
+  Pick<PingHistogramComponentProps, 'height' | 'data' | 'loading'> &
+  DispatchProps & { lastRefresh: number; monitorId?: string; esKuery?: string };
 
 const PingHistogramContainer: React.FC<Props> = ({
   data,
   loadData,
-  statusFilter,
-  filters,
-  dateStart,
-  dateEnd,
-  absoluteStartDate,
-  absoluteEndDate,
   monitorId,
   lastRefresh,
-  ...props
+  height,
+  loading,
+  esKuery,
 }) => {
+  const [getUrlParams] = useUrlParams();
+  const {
+    absoluteDateRangeStart,
+    absoluteDateRangeEnd,
+    dateRangeStart: dateStart,
+    dateRangeEnd: dateEnd,
+    statusFilter,
+  } = getUrlParams();
+
   useEffect(() => {
-    loadData({ monitorId, dateStart, dateEnd, statusFilter, filters });
-  }, [loadData, dateStart, dateEnd, monitorId, filters, statusFilter, lastRefresh]);
+    loadData({ monitorId, dateStart, dateEnd, statusFilter, filters: esKuery });
+  }, [loadData, dateStart, dateEnd, monitorId, statusFilter, lastRefresh, esKuery]);
   return (
     <PingHistogramComponent
       data={data}
-      absoluteStartDate={absoluteStartDate}
-      absoluteEndDate={absoluteEndDate}
-      {...props}
+      absoluteStartDate={absoluteDateRangeStart}
+      absoluteEndDate={absoluteDateRangeEnd}
+      height={height}
+      loading={loading}
     />
   );
 };
@@ -51,6 +57,7 @@ interface StateProps {
   data: HistogramResult | null;
   loading: boolean;
   lastRefresh: number;
+  esKuery: string;
 }
 
 interface DispatchProps {
@@ -68,7 +75,7 @@ const mapDispatchToProps = (dispatch: any): DispatchProps => ({
 export const PingHistogram = connect<
   StateProps,
   DispatchProps,
-  PingHistogramComponentProps,
+  Pick<PingHistogramComponentProps, 'height'>,
   AppState
 >(
   mapStateToProps,

x-pack/legacy/plugins/uptime/public/components/connected/charts/snapshot_container.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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.
+ */
+
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { useUrlParams } from '../../../hooks';
+import { AppState } from '../../../state';
+import { fetchSnapshotCount } from '../../../state/actions';
+import { SnapshotComponent } from '../../functional/snapshot';
+import { Snapshot as SnapshotType } from '../../../../common/runtime_types';
+
+/**
+ * Props expected from parent components.
+ */
+interface OwnProps {
+  /**
+   * Height is needed, since by default charts takes height of 100%
+   */
+  height?: string;
+}
+
+/**
+ * Props given by the Redux store based on action input.
+ */
+interface StoreProps {
+  count: SnapshotType;
+  lastRefresh: number;
+  loading: boolean;
+  esKuery: string;
+}
+
+/**
+ * Contains functions that will dispatch actions used
+ * for this component's life cycle
+ */
+interface DispatchProps {
+  loadSnapshotCount: typeof fetchSnapshotCount;
+}
+
+/**
+ * Props used to render the Snapshot component.
+ */
+type Props = OwnProps & StoreProps & DispatchProps;
+
+export const Container: React.FC<Props> = ({
+  count,
+  height,
+  lastRefresh,
+  loading,
+  esKuery,
+  loadSnapshotCount,
+}: Props) => {
+  const [getUrlParams] = useUrlParams();
+  const { dateRangeStart, dateRangeEnd, statusFilter } = getUrlParams();
+
+  useEffect(() => {
+    loadSnapshotCount(dateRangeStart, dateRangeEnd, esKuery, statusFilter);
+  }, [dateRangeStart, dateRangeEnd, esKuery, lastRefresh, loadSnapshotCount, statusFilter]);
+  return <SnapshotComponent count={count} height={height} loading={loading} />;
+};
+
+/**
+ * Provides state to connected component.
+ * @param state the root app state
+ */
+const mapStateToProps = ({
+  snapshot: { count, loading },
+  ui: { lastRefresh, esKuery },
+}: AppState): StoreProps => ({
+  count,
+  lastRefresh,
+  loading,
+  esKuery,
+});
+
+/**
+ * Used for fetching snapshot counts.
+ * @param dispatch redux-provided action dispatcher
+ */
+const mapDispatchToProps = (dispatch: any) => ({
+  loadSnapshotCount: (
+    dateRangeStart: string,
+    dateRangeEnd: string,
+    filters?: string,
+    statusFilter?: string
+  ): DispatchProps => {
+    return dispatch(fetchSnapshotCount(dateRangeStart, dateRangeEnd, filters, statusFilter));
+  },
+});
+
+export const Snapshot = connect<StoreProps, DispatchProps, OwnProps>(
+  // @ts-ignore connect is expecting null | undefined for some reason
+  mapStateToProps,
+  mapDispatchToProps
+)(Container);

x-pack/legacy/plugins/uptime/public/components/connected/filter_group/filter_group_container.tsx

@@ -4,14 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { useUrlParams } from '../../../hooks';
 import { parseFiltersMap } from '../../functional/filter_group/parse_filter_map';
 import { AppState } from '../../../state';
 import { fetchOverviewFilters, GetOverviewFiltersPayload } from '../../../state/actions';
 import { FilterGroupComponent } from '../../functional/filter_group';
 import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
+import { UptimeRefreshContext } from '../../../contexts';
 
 interface OwnProps {
   esFilters?: string;
@@ -37,8 +38,9 @@ export const Container: React.FC<Props> = ({
   loadFilterGroup,
   overviewFilters,
 }: Props) => {
-  const [getUrlParams, updateUrl] = useUrlParams();
+  const { lastRefresh } = useContext(UptimeRefreshContext);
 
+  const [getUrlParams, updateUrl] = useUrlParams();
   const { dateRangeStart, dateRangeEnd, statusFilter, filters: urlFilters } = getUrlParams();
 
   useEffect(() => {
@@ -53,7 +55,16 @@ export const Container: React.FC<Props> = ({
       statusFilter,
       tags: filterSelections.tags ?? [],
     });
-  }, [dateRangeStart, dateRangeEnd, esKuery, esFilters, statusFilter, urlFilters, loadFilterGroup]);
+  }, [
+    lastRefresh,
+    dateRangeStart,
+    dateRangeEnd,
+    esKuery,
+    esFilters,
+    statusFilter,
+    urlFilters,
+    loadFilterGroup,
+  ]);
 
   // update filters in the URL from filter group
   const onFilterUpdate = (filtersKuery: string) => {

x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -5,6 +5,9 @@
  */
 
 export { PingHistogram } from './charts/ping_histogram';
+export { Snapshot } from './charts/snapshot_container';
 export { KueryBar } from './kuerybar/kuery_bar_container';
 export { OverviewPage } from './pages/overview_container';
 export { FilterGroup } from './filter_group/filter_group_container';
+export { MonitorStatusDetails } from './monitor/status_details_container';
+export { MonitorStatusBar } from './monitor/status_bar_container';

x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+import React, { useContext, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { AppState } from '../../../state';
+import { selectMonitorLocations, selectMonitorStatus } from '../../../state/selectors';
+import { MonitorStatusBarComponent } from '../../functional/monitor_status_details/monitor_status_bar';
+import { getMonitorStatus, getSelectedMonitor } from '../../../state/actions';
+import { useUrlParams } from '../../../hooks';
+import { Ping } from '../../../../common/graphql/types';
+import { MonitorLocations } from '../../../../common/runtime_types/monitor';
+import { UptimeRefreshContext } from '../../../contexts';
+
+interface StateProps {
+  monitorStatus: Ping;
+  monitorLocations: MonitorLocations;
+}
+
+interface DispatchProps {
+  loadMonitorStatus: (dateStart: string, dateEnd: string, monitorId: string) => void;
+}
+
+interface OwnProps {
+  monitorId: string;
+}
+
+type Props = OwnProps & StateProps & DispatchProps;
+
+export const Container: React.FC<Props> = ({
+  loadMonitorStatus,
+  monitorId,
+  monitorStatus,
+  monitorLocations,
+}: Props) => {
+  const { lastRefresh } = useContext(UptimeRefreshContext);
+
+  const [getUrlParams] = useUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
+
+  useEffect(() => {
+    loadMonitorStatus(dateStart, dateEnd, monitorId);
+  }, [monitorId, dateStart, dateEnd, loadMonitorStatus, lastRefresh]);
+
+  return (
+    <MonitorStatusBarComponent
+      monitorId={monitorId}
+      monitorStatus={monitorStatus}
+      monitorLocations={monitorLocations}
+    />
+  );
+};
+
+const mapStateToProps = (state: AppState, ownProps: OwnProps) => ({
+  monitorStatus: selectMonitorStatus(state),
+  monitorLocations: selectMonitorLocations(state, ownProps.monitorId),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchProps => ({
+  loadMonitorStatus: (dateStart: string, dateEnd: string, monitorId: string) => {
+    dispatch(
+      getMonitorStatus({
+        monitorId,
+        dateStart,
+        dateEnd,
+      })
+    );
+    dispatch(
+      getSelectedMonitor({
+        monitorId,
+      })
+    );
+  },
+});
+
+// @ts-ignore TODO: Investigate typescript issues here
+export const MonitorStatusBar = connect<StateProps, DispatchProps, MonitorStatusBarProps>(
+  // @ts-ignore TODO: Investigate typescript issues here
+  mapStateToProps,
+  mapDispatchToProps
+)(Container);

x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_details_container.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+import React, { useContext, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { useUrlParams } from '../../../hooks';
+import { AppState } from '../../../state';
+import { selectMonitorLocations } from '../../../state/selectors';
+import { fetchMonitorLocations, MonitorLocationsPayload } from '../../../state/actions/monitor';
+import { MonitorStatusDetailsComponent } from '../../functional/monitor_status_details';
+import { MonitorLocations } from '../../../../common/runtime_types';
+import { UptimeRefreshContext } from '../../../contexts';
+
+interface OwnProps {
+  monitorId: string;
+}
+
+interface StoreProps {
+  monitorLocations: MonitorLocations;
+}
+
+interface DispatchProps {
+  loadMonitorLocations: typeof fetchMonitorLocations;
+}
+
+type Props = OwnProps & StoreProps & DispatchProps;
+
+export const Container: React.FC<Props> = ({
+  loadMonitorLocations,
+  monitorLocations,
+  monitorId,
+}: Props) => {
+  const { lastRefresh } = useContext(UptimeRefreshContext);
+
+  const [getUrlParams] = useUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
+
+  useEffect(() => {
+    loadMonitorLocations({ dateStart, dateEnd, monitorId });
+  }, [loadMonitorLocations, monitorId, dateStart, dateEnd, lastRefresh]);
+
+  return (
+    <MonitorStatusDetailsComponent monitorId={monitorId} monitorLocations={monitorLocations} />
+  );
+};
+const mapStateToProps = (state: AppState, { monitorId }: OwnProps) => ({
+  monitorLocations: selectMonitorLocations(state, monitorId),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+  loadMonitorLocations: (params: MonitorLocationsPayload) => {
+    dispatch(fetchMonitorLocations(params));
+  },
+});
+
+export const MonitorStatusDetails = connect<StoreProps, DispatchProps, OwnProps>(
+  // @ts-ignore TODO: Investigate typescript issues here
+  mapStateToProps,
+  mapDispatchToProps
+)(Container);

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

@@ -73,8 +73,6 @@ describe('MonitorCharts component', () => {
           range="range"
           success="success"
           monitorId="something"
-          dateRangeStart="2011-12-03T10:15:30+01:00"
-          dateRangeEnd="2011-12-03T10:15:30+01:00"
         />
       )
     );