[7.x] [Uptime] Reduce page rendering cycles and api calls (#66216) (#…

…66997)

x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_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 { useDispatch, useSelector } from 'react-redux';
 import { PingHistogramComponent } from '../../common/charts';
 import { getPingHistogram } from '../../../state/actions';
-import { selectPingHistogram } from '../../../state/selectors';
+import { esKuerySelector, selectPingHistogram } from '../../../state/selectors';
 import { useGetUrlParams } from '../../../hooks';
 import { useMonitorId } from '../../../hooks';
 import { ResponsiveWrapperProps, withResponsiveWrapper } from '../../common/higher_order';
+import { UptimeRefreshContext } from '../../../contexts';
 
 interface Props {
   height: string;
@@ -28,7 +29,11 @@ const Container: React.FC<Props & ResponsiveWrapperProps> = ({ height }) => {
   const dispatch = useDispatch();
   const monitorId = useMonitorId();
 
-  const { loading, data, esKuery, lastRefresh } = useSelector(selectPingHistogram);
+  const { lastRefresh } = useContext(UptimeRefreshContext);
+
+  const esKuery = useSelector(esKuerySelector);
+
+  const { loading, pingHistogram: data } = useSelector(selectPingHistogram);
 
   useEffect(() => {
     dispatch(getPingHistogram({ monitorId, dateStart, dateEnd, filters: esKuery }));

x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_container.tsx

@@ -9,7 +9,7 @@ import React, { useContext, useCallback } from 'react';
 import { selectPingList } from '../../../state/selectors';
 import { getPings } from '../../../state/actions';
 import { GetPingsParams } from '../../../../common/runtime_types';
-import { UptimeSettingsContext } from '../../../contexts';
+import { UptimeRefreshContext, UptimeSettingsContext } from '../../../contexts';
 import { PingListComponent } from './index';
 
 export interface PingListProps {
@@ -18,14 +18,13 @@ export interface PingListProps {
 
 export const PingList = (props: PingListProps) => {
   const {
-    lastRefresh,
-    pings: {
-      error,
-      loading,
-      pingList: { locations, pings, total },
-    },
+    error,
+    loading,
+    pingList: { locations, pings, total },
   } = useSelector(selectPingList);
 
+  const { lastRefresh } = useContext(UptimeRefreshContext);
+
   const { dateRangeStart: drs, dateRangeEnd: dre } = useContext(UptimeSettingsContext);
 
   const dispatch = useDispatch();

x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx

@@ -24,7 +24,9 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
   newFilters,
   onRemoveFilter,
 }) => {
-  const { tags, ports, schemes, locations } = useSelector(overviewFiltersSelector);
+  const {
+    filters: { tags, ports, schemes, locations },
+  } = useSelector(overviewFiltersSelector);
 
   const [updatedFieldValues, setUpdatedFieldValues] = useState<{
     fieldName: string;