[Uptime] Feature/refactor context initialization

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

@@ -10,17 +10,17 @@ import { UptimeDatePicker } from '../uptime_date_picker';
 
 describe('UptimeDatePicker component', () => {
   it('validates props with shallow render', () => {
-    const component = shallowWithIntl(<UptimeDatePicker refreshApp={jest.fn()} />);
+    const component = shallowWithIntl(<UptimeDatePicker />);
     expect(component).toMatchSnapshot();
   });
 
   it('renders properly with mock data', () => {
-    const component = renderWithIntl(<UptimeDatePicker refreshApp={jest.fn()} />);
+    const component = renderWithIntl(<UptimeDatePicker />);
     expect(component).toMatchSnapshot();
   });
 
   it('renders properly without commonlyUsedRanges prop', () => {
-    const component = renderWithIntl(<UptimeDatePicker refreshApp={jest.fn()} />);
+    const component = renderWithIntl(<UptimeDatePicker />);
     expect(component).toMatchSnapshot();
   });
 });

x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx

@@ -9,7 +9,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import * as d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import { DonutChartLegend } from './donut_chart_legend';
-import { UptimeSettingsContext } from '../../../contexts';
+import { UptimeThemeContext } from '../../../contexts/uptime_theme_context';
 
 interface DonutChartProps {
   down: number;
@@ -23,7 +23,7 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
 
   const {
     colors: { danger, gray },
-  } = useContext(UptimeSettingsContext);
+  } = useContext(UptimeThemeContext);
 
   let upCount = up;
   if (up === 0 && down === 0) {

x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart_legend.tsx

@@ -9,7 +9,7 @@ import { EuiSpacer } from '@elastic/eui';
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { DonutChartLegendRow } from './donut_chart_legend_row';
-import { UptimeSettingsContext } from '../../../contexts';
+import { UptimeThemeContext } from '../../../contexts';
 
 const LegendContainer = styled.div`
   max-width: 260px;
@@ -28,7 +28,7 @@ interface Props {
 export const DonutChartLegend = ({ down, up }: Props) => {
   const {
     colors: { gray, danger },
-  } = useContext(UptimeSettingsContext);
+  } = useContext(UptimeThemeContext);
   return (
     <LegendContainer>
       <DonutChartLegendRow

x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx

@@ -14,7 +14,7 @@ import { getChartDateLabel } from '../../../lib/helper';
 import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order';
 import { snapshotHistogramQuery } from '../../../queries/snapshot_histogram_query';
 import { ChartWrapper } from './chart_wrapper';
-import { UptimeSettingsContext } from '../../../contexts';
+import { UptimeThemeContext } from '../../../contexts';
 import { ResponsiveWrapperProps, withResponsiveWrapper } from '../../higher_order';
 import { HistogramResult } from '../../../../common/domain_types';
 
@@ -53,7 +53,7 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
 }: Props) => {
   const {
     colors: { danger, gray },
-  } = useContext(UptimeSettingsContext);
+  } = useContext(UptimeThemeContext);
   if (!data || !data.queryResult)
     /**
      * TODO: the Fragment, EuiTitle, and EuiPanel should be extracted to a dumb component

x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx

@@ -15,7 +15,7 @@ import { MAP_SAVED_OBJECT_TYPE } from '../../../../../../maps/common/constants';
 
 import { MapEmbeddable } from './types';
 import { getLayerList } from './map_config';
-import { UptimeSettingsContext } from '../../../../contexts';
+import { UptimeThemeContext } from '../../../../contexts';
 
 export interface EmbeddedMapProps {
   upPoints: LocationPoint[];
@@ -46,7 +46,7 @@ const EmbeddedPanel = styled.div`
 `;
 
 export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
-  const { colors } = useContext(UptimeSettingsContext);
+  const { colors } = useContext(UptimeThemeContext);
   const [embeddable, setEmbeddable] = useState<MapEmbeddable>();
   const embeddableRoot: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
   const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);

x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_status_tags.tsx

@@ -7,7 +7,7 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { EuiBadge, EuiText } from '@elastic/eui';
-import { UptimeSettingsContext } from '../../../contexts';
+import { UptimeThemeContext } from '../../../contexts';
 import { MonitorLocation } from '../../../../common/runtime_types';
 
 const TextStyle = styled.div`
@@ -31,7 +31,7 @@ interface Props {
 export const LocationStatusTags = ({ locations }: Props) => {
   const {
     colors: { gray, danger },
-  } = useContext(UptimeSettingsContext);
+  } = useContext(UptimeThemeContext);
 
   const upLocs: string[] = [];
   const downLocs: string[] = [];

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

@@ -7,7 +7,7 @@
 import React, { useContext } from 'react';
 import { EuiHealth, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { UptimeSettingsContext } from '../../../../contexts';
+import { UptimeThemeContext } from '../../../../contexts';
 import { UNNAMED_LOCATION, UP } from './monitor_status_list';
 
 interface MonitorStatusRowProps {
@@ -24,7 +24,7 @@ interface MonitorStatusRowProps {
 export const MonitorStatusRow = ({ locationNames, status }: MonitorStatusRowProps) => {
   const {
     colors: { success, danger },
-  } = useContext(UptimeSettingsContext);
+  } = useContext(UptimeThemeContext);
 
   const color = status === UP ? success : danger;
 

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

@@ -8,7 +8,7 @@ import { EuiSuperDatePicker } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { useUrlParams } from '../../hooks';
 import { CLIENT_DEFAULTS } from '../../../common/constants';
-import { UptimeSettingsContext } from '../../contexts';
+import { UptimeRefreshContext, UptimeSettingsContext } from '../../contexts';
 
 // TODO: when EUI exports types for this, this should be replaced
 interface SuperDateRangePickerRangeChangedEvent {
@@ -27,14 +27,11 @@ export interface CommonlyUsedRange {
   display: string;
 }
 
-interface UptimeDatePickerProps {
-  refreshApp: () => void;
-}
-
-export const UptimeDatePicker = ({ refreshApp }: UptimeDatePickerProps) => {
+export const UptimeDatePicker = () => {
   const [getUrlParams, updateUrl] = useUrlParams();
   const { autorefreshInterval, autorefreshIsPaused, dateRangeStart, dateRangeEnd } = getUrlParams();
   const { commonlyUsedRanges } = useContext(UptimeSettingsContext);
+  const { refreshApp } = useContext(UptimeRefreshContext);
 
   const euiCommonlyUsedRanges = commonlyUsedRanges
     ? commonlyUsedRanges.map(

x-pack/legacy/plugins/uptime/public/contexts/index.ts

@@ -4,5 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { UptimeRefreshContext } from './uptime_refresh_context';
-export { UMSettingsContextValues, UptimeSettingsContext } from './uptime_settings_context';
+export { UptimeRefreshContext, UptimeRefreshContextProvider } from './uptime_refresh_context';
+export {
+  UMSettingsContextValues,
+  UptimeSettingsContext,
+  UptimeSettingsContextProvider,
+} from './uptime_settings_context';
+export { UptimeThemeContextProvider, UptimeThemeContext } from './uptime_theme_context';

x-pack/legacy/plugins/uptime/public/contexts/uptime_refresh_context.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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, { createContext, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { store } from '../state';
+import { triggerAppRefresh } from '../state/actions';
+
+interface UMRefreshContext {
+  lastRefresh: number;
+  refreshApp: () => void;
+}
+
+const defaultContext: UMRefreshContext = {
+  lastRefresh: 0,
+  refreshApp: () => {
+    throw new Error('App refresh was not initialized, set it when you invoke the context');
+  },
+};
+
+export const UptimeRefreshContext = createContext(defaultContext);
+
+export const UptimeRefreshContextProvider: React.FC = ({ children }) => {
+  const history = useHistory();
+  const location = useLocation();
+
+  const [lastRefresh, setLastRefresh] = useState<number>(Date.now());
+
+  const refreshApp = () => {
+    const refreshTime = Date.now();
+    setLastRefresh(refreshTime);
+    store.dispatch(triggerAppRefresh(refreshTime));
+  };
+
+  const value = useMemo(() => {
+    return { lastRefresh, history, location, refreshApp };
+  }, [history, location, lastRefresh]);
+
+  return <UptimeRefreshContext.Provider value={value} children={children} />;
+};

x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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, { createContext, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { UptimeAppProps } from '../uptime_app';
+import { CONTEXT_DEFAULTS } from '../../common/constants';
+import { CommonlyUsedRange } from '../components/functional/uptime_date_picker';
+
+export interface UMSettingsContextValues {
+  basePath: string;
+  dateRangeStart: string;
+  dateRangeEnd: string;
+  isApmAvailable: boolean;
+  isInfraAvailable: boolean;
+  isLogsAvailable: boolean;
+  commonlyUsedRanges?: CommonlyUsedRange[];
+}
+
+const { BASE_PATH, DATE_RANGE_START, DATE_RANGE_END } = CONTEXT_DEFAULTS;
+
+/**
+ * These are default values for the context. These defaults are typically
+ * overwritten by the Uptime App upon its invocation.
+ */
+const defaultContext: UMSettingsContextValues = {
+  basePath: BASE_PATH,
+  dateRangeStart: DATE_RANGE_START,
+  dateRangeEnd: DATE_RANGE_END,
+  isApmAvailable: true,
+  isInfraAvailable: true,
+  isLogsAvailable: true,
+};
+export const UptimeSettingsContext = createContext(defaultContext);
+
+export const UptimeSettingsContextProvider: React.FC<UptimeAppProps> = ({ children, ...props }) => {
+  const { basePath, isApmAvailable, isInfraAvailable, isLogsAvailable } = props;
+
+  const { dateRangeStart, dateRangeEnd } = useParams();
+
+  const value = useMemo(() => {
+    return {
+      basePath,
+      isApmAvailable,
+      isInfraAvailable,
+      isLogsAvailable,
+      dateRangeStart: dateRangeStart ?? DATE_RANGE_START,
+      dateRangeEnd: dateRangeEnd ?? DATE_RANGE_END,
+    };
+  }, [basePath, isApmAvailable, isInfraAvailable, isLogsAvailable, dateRangeStart, dateRangeEnd]);
+
+  return <UptimeSettingsContext.Provider value={value} children={children} />;
+};