= ({ darkMode, children }) => {
+ let colors: UptimeAppColors;
+ if (darkMode) {
+ colors = {
+ danger: euiDarkVars.euiColorDanger,
+ mean: euiDarkVars.euiColorPrimary,
+ gray: euiDarkVars.euiColorLightShade,
+ range: euiDarkVars.euiFocusBackgroundColor,
+ success: euiDarkVars.euiColorSuccess,
+ warning: euiDarkVars.euiColorWarning,
+ };
+ } else {
+ colors = {
+ danger: euiLightVars.euiColorDanger,
+ mean: euiLightVars.euiColorPrimary,
+ gray: euiLightVars.euiColorLightShade,
+ range: euiLightVars.euiFocusBackgroundColor,
+ success: euiLightVars.euiColorSuccess,
+ warning: euiLightVars.euiColorWarning,
+ };
+ }
+ const value = useMemo(() => {
+ return {
+ colors,
+ };
+ }, [colors]);
+
+ return ;
+};
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
index 6abb14d015d67..a2c52f9405289 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
@@ -1,50 +1,324 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`useUrlParams deletes keys that do not have truthy values 1`] = `
-
-
- {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo"}
-
-
-
-
+
+ {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo"}
+
+
+
+
+
`;
exports[`useUrlParams gets the expected values using the context 1`] = `
-
-
- {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-19d","dateRangeEnd":"now-1m","filters":"","search":"","selectedPingStatus":"","statusFilter":""}
-
-
-
-
+
+ {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-15m","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":""}
+
+
+
+
+
`;
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx
index 66cb5d29d1742..c9ba7b9bc0098 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx
+++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx
@@ -8,16 +8,15 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
import DateMath from '@elastic/datemath';
import React, { useState, Fragment } from 'react';
import { useUrlParams, UptimeUrlParamsHook } from '../use_url_params';
-import { RouteComponentProps } from 'react-router-dom';
import { UptimeRefreshContext } from '../../contexts';
+import { renderWithRouter } from '../../lib';
+import { createMemoryHistory } from 'history';
interface MockUrlParamsComponentProps {
hook: UptimeUrlParamsHook;
updateParams?: { [key: string]: any };
}
-let mockRouter: RouteComponentProps;
-
const UseUrlParamsTestComponent = ({ hook, updateParams }: MockUrlParamsComponentProps) => {
const [params, setParams] = useState({});
const [getUrlParams, updateUrlParams] = hook();
@@ -42,61 +41,45 @@ const UseUrlParamsTestComponent = ({ hook, updateParams }: MockUrlParamsComponen
describe('useUrlParams', () => {
let dateMathSpy: any;
const MOCK_DATE_VALUE = 20;
+
beforeEach(() => {
- mockRouter = {
- // @ts-ignore other properties aren't needed for this test
- history: {
- push: jest.fn(),
- },
- location: {
- pathname: '',
- search: '?g=""',
- state: {},
- hash: '',
- },
- match: {
- params: '',
- isExact: true,
- path: '/',
- url: 'http://elastic.co',
- },
- };
dateMathSpy = jest.spyOn(DateMath, 'parse');
dateMathSpy.mockReturnValue(MOCK_DATE_VALUE);
});
it('accepts router props, updates URL params, and returns the current params', () => {
+ const history = createMemoryHistory();
+ jest.spyOn(history, 'push');
+
const component = mountWithIntl(
-
-
-
+ renderWithRouter(
+
+
+ ,
+ history
+ )
);
const setUrlParamsButton = component.find('#setUrlParams');
setUrlParamsButton.simulate('click');
-
- expect(mockRouter.history.push).toHaveBeenCalledWith({
- pathname: '',
- search: 'g=%22%22&dateRangeStart=now-12d&dateRangeEnd=now',
+ expect(history.push).toHaveBeenCalledWith({
+ pathname: '/',
+ search: 'dateRangeStart=now-12d&dateRangeEnd=now',
});
});
it('gets the expected values using the context', () => {
const component = mountWithIntl(
-
-
-
+ renderWithRouter(
+
+
+
+ )
);
const getUrlParamsButton = component.find('#getUrlParams');
@@ -106,17 +89,24 @@ describe('useUrlParams', () => {
});
it('deletes keys that do not have truthy values', () => {
- mockRouter.location.search = 'g=%22%22&dateRangeStart=now-12&dateRangeEnd=now&pagination=foo';
+ const history = createMemoryHistory({
+ initialEntries: ['/?g=%22%22&dateRangeStart=now-12&dateRangeEnd=now&pagination=foo'],
+ });
+ history.location.key = 'test';
+
+ jest.spyOn(history, 'push');
const component = mountWithIntl(
-
-
-
+ renderWithRouter(
+
+
+ ,
+ history
+ )
);
const getUrlParamsButton = component.find('#getUrlParams');
@@ -126,11 +116,11 @@ describe('useUrlParams', () => {
expect(component).toMatchSnapshot();
- const setUrlParmsButton = component.find('#setUrlParams');
- setUrlParmsButton.simulate('click');
+ const setUrlParamsButton = component.find('#setUrlParams');
+ setUrlParamsButton.simulate('click');
- expect(mockRouter.history.push).toHaveBeenCalledWith({
- pathname: '',
+ expect(history.push).toHaveBeenCalledWith({
+ pathname: '/',
search: 'g=%22%22&dateRangeStart=now-12&dateRangeEnd=now',
});
});
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/use_url_params.ts b/x-pack/legacy/plugins/uptime/public/hooks/use_url_params.ts
index 31343e6a1883c..e509e14223006 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/use_url_params.ts
+++ b/x-pack/legacy/plugins/uptime/public/hooks/use_url_params.ts
@@ -5,8 +5,7 @@
*/
import qs from 'querystring';
-import { useContext } from 'react';
-import { UptimeRefreshContext } from '../contexts';
+import { useLocation, useHistory } from 'react-router-dom';
import { UptimeUrlParams, getSupportedUrlParams } from '../lib/helper';
type GetUrlParams = () => UptimeUrlParams;
@@ -15,12 +14,13 @@ type UpdateUrlParams = (updatedParams: { [key: string]: string | number | boolea
export type UptimeUrlParamsHook = () => [GetUrlParams, UpdateUrlParams];
export const useUrlParams: UptimeUrlParamsHook = () => {
- const refreshContext = useContext(UptimeRefreshContext);
+ const location = useLocation();
+ const history = useHistory();
const getUrlParams: GetUrlParams = () => {
let search: string | undefined;
- if (refreshContext.location) {
- search = refreshContext.location.search;
+ if (location) {
+ search = location.search;
}
const params = search ? { ...qs.parse(search[0] === '?' ? search.slice(1) : search) } : {};
@@ -28,11 +28,8 @@ export const useUrlParams: UptimeUrlParamsHook = () => {
};
const updateUrlParams: UpdateUrlParams = updatedParams => {
- if (!refreshContext.history || !refreshContext.location) return;
- const {
- history,
- location: { pathname, search },
- } = refreshContext;
+ if (!history || !location) return;
+ const { pathname, search } = location;
const currentParams: any = qs.parse(search[0] === '?' ? search.slice(1) : search);
const mergedParams = {
...currentParams,
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx b/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx
new file mode 100644
index 0000000000000..5cd9ec23a3587
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx
@@ -0,0 +1,21 @@
+/*
+ * 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 from 'react';
+
+import { Router } from 'react-router-dom';
+import { MemoryHistory } from 'history/createMemoryHistory';
+import { createMemoryHistory } from 'history';
+
+export const renderWithRouter = (Component: any, customHistory?: MemoryHistory) => {
+ if (customHistory) {
+ return {Component};
+ }
+ const history = createMemoryHistory();
+ history.location.key = 'TestKeyForTesting';
+
+ return {Component};
+};
diff --git a/x-pack/legacy/plugins/uptime/public/lib/index.ts b/x-pack/legacy/plugins/uptime/public/lib/index.ts
new file mode 100644
index 0000000000000..9a78c6df5d63d
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/lib/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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 { renderWithRouter } from './helper/render_with_router';
diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
index 1b4ad8d82ead1..408d2584911e0 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
@@ -9,7 +9,7 @@ import React, { Fragment, useContext, useState } from 'react';
import { useParams } from 'react-router-dom';
import { MonitorCharts, PingList } from '../components/functional';
import { UMUpdateBreadcrumbs } from '../lib/lib';
-import { UptimeSettingsContext } from '../contexts';
+import { UptimeRefreshContext, UptimeThemeContext } from '../contexts';
import { useUptimeTelemetry, useUrlParams, UptimePage } from '../hooks';
import { useTrackPageview } from '../../../infra/public';
import { MonitorStatusDetails } from '../components/functional/monitor_status_details';
@@ -25,7 +25,8 @@ export const MonitorPage = ({ setBreadcrumbs }: MonitorPageProps) => {
monitorId = atob(monitorId || '');
const [pingListPageCount, setPingListPageCount] = useState(10);
- const { colors, refreshApp } = useContext(UptimeSettingsContext);
+ const { colors } = useContext(UptimeThemeContext);
+ const { refreshApp } = useContext(UptimeRefreshContext);
const [getUrlParams, updateUrlParams] = useUrlParams();
const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
const { dateRangeStart, dateRangeEnd, selectedPingStatus } = params;
diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
index e7ef7f53afde4..fbfbfc06e3c52 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -16,7 +16,6 @@ import {
StatusPanel,
} from '../components/functional';
import { UMUpdateBreadcrumbs } from '../lib/lib';
-import { UptimeSettingsContext } from '../contexts';
import { useIndexPattern, useUrlParams, useUptimeTelemetry, UptimePage } from '../hooks';
import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
import { useTrackPageview } from '../../../infra/public';
@@ -25,6 +24,7 @@ import { AutocompleteProviderRegister, esKuery } from '../../../../../../src/plu
import { store } from '../state';
import { setEsKueryString } from '../state/actions';
import { PageHeader } from './page_header';
+import { UptimeThemeContext } from '../contexts/uptime_theme_context';
interface OverviewPageProps {
autocomplete: Pick;
@@ -48,7 +48,7 @@ const EuiFlexItemStyled = styled(EuiFlexItem)`
`;
export const OverviewPage = ({ autocomplete, setBreadcrumbs }: Props) => {
- const { colors } = useContext(UptimeSettingsContext);
+ const { colors } = useContext(UptimeThemeContext);
const [getUrlParams, updateUrl] = useUrlParams();
const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
const {
diff --git a/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx b/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx
index 250dacb8914e7..d341a22bc583b 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx
@@ -5,7 +5,7 @@
*/
import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { useRouteMatch, useParams } from 'react-router-dom';
import { i18n } from '@kbn/i18n';
@@ -14,7 +14,6 @@ import { AppState } from '../state';
import { selectSelectedMonitor } from '../state/selectors';
import { getMonitorPageBreadcrumb, getOverviewPageBreadcrumbs } from '../breadcrumbs';
import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
-import { UptimeSettingsContext } from '../contexts';
import { getTitle } from '../lib/helper/get_title';
import { UMUpdateBreadcrumbs } from '../lib/lib';
import { MONITOR_ROUTE } from '../routes';
@@ -28,7 +27,6 @@ export const PageHeaderComponent = ({ monitorStatus, setBreadcrumbs }: PageHeade
const monitorPage = useRouteMatch({
path: MONITOR_ROUTE,
});
- const { refreshApp } = useContext(UptimeSettingsContext);
const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useParams();
@@ -61,6 +59,10 @@ export const PageHeaderComponent = ({ monitorStatus, setBreadcrumbs }: PageHeade
}
}, [headerText, setBreadcrumbs, params, monitorPage]);
+ useEffect(() => {
+ document.title = getTitle();
+ }, []);
+
return (
<>
@@ -70,7 +72,7 @@ export const PageHeaderComponent = ({ monitorStatus, setBreadcrumbs }: PageHeade
-
+
diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
index 25ff0e7177016..513faa3eb4bc2 100644
--- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
+++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
@@ -4,25 +4,24 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import DateMath from '@elastic/datemath';
-import { EuiPage } from '@elastic/eui';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { EuiPage, EuiErrorBoundary } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
import { ApolloProvider } from 'react-apollo';
import { Provider as ReduxProvider } from 'react-redux';
-import { BrowserRouter as Router, Route, RouteComponentProps } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
import { I18nStart, ChromeBreadcrumb, LegacyCoreStart } from 'src/core/public';
import { PluginsStart } from 'ui/new_platform/new_platform';
import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
import { UMGraphQLClient, UMUpdateBreadcrumbs, UMUpdateBadge } from './lib/lib';
-import { UptimeRefreshContext, UptimeSettingsContext, UMSettingsContextValues } from './contexts';
+import {
+ UptimeRefreshContextProvider,
+ UptimeSettingsContextProvider,
+ UptimeThemeContextProvider,
+} from './contexts';
import { CommonlyUsedRange } from './components/functional/uptime_date_picker';
-import { useUrlParams } from './hooks';
-import { getTitle } from './lib/helper/get_title';
import { store } from './state';
-import { setBasePath, triggerAppRefresh } from './state/actions';
+import { setBasePath } from './state/actions';
import { PageRouter } from './routes';
export interface UptimeAppColors {
@@ -60,11 +59,7 @@ const Application = (props: UptimeAppProps) => {
client,
core,
darkMode,
- commonlyUsedRanges,
i18n: i18nCore,
- isApmAvailable,
- isInfraAvailable,
- isLogsAvailable,
plugins,
renderGlobalHelpControls,
routerBasename,
@@ -72,28 +67,6 @@ const Application = (props: UptimeAppProps) => {
setBadge,
} = props;
- let colors: UptimeAppColors;
- if (darkMode) {
- colors = {
- danger: euiDarkVars.euiColorDanger,
- mean: euiDarkVars.euiColorPrimary,
- gray: euiDarkVars.euiColorLightShade,
- range: euiDarkVars.euiFocusBackgroundColor,
- success: euiDarkVars.euiColorSuccess,
- warning: euiDarkVars.euiColorWarning,
- };
- } else {
- colors = {
- danger: euiLightVars.euiColorDanger,
- mean: euiLightVars.euiColorPrimary,
- gray: euiLightVars.euiColorLightShade,
- range: euiLightVars.euiFocusBackgroundColor,
- success: euiLightVars.euiColorSuccess,
- warning: euiLightVars.euiColorWarning,
- };
- }
- const [lastRefresh, setLastRefresh] = useState(Date.now());
-
useEffect(() => {
renderGlobalHelpControls();
setBadge(
@@ -111,77 +84,36 @@ const Application = (props: UptimeAppProps) => {
);
}, [canSave, renderGlobalHelpControls, setBadge]);
- useEffect(() => {
- document.title = getTitle();
- }, []);
-
- const refreshApp = () => {
- const refreshTime = Date.now();
- setLastRefresh(refreshTime);
- store.dispatch(triggerAppRefresh(refreshTime));
- };
-
- const [getUrlParams] = useUrlParams();
- const initializeSettingsContextValues = (): UMSettingsContextValues => {
- const {
- autorefreshInterval,
- autorefreshIsPaused,
- dateRangeStart,
- dateRangeEnd,
- } = getUrlParams();
- const absoluteStartDate = DateMath.parse(dateRangeStart);
- const absoluteEndDate = DateMath.parse(dateRangeEnd);
- return {
- // TODO: extract these values to dedicated (and more sensible) constants
- absoluteStartDate: absoluteStartDate ? absoluteStartDate.valueOf() : 0,
- absoluteEndDate: absoluteEndDate ? absoluteEndDate.valueOf() : 1,
- autorefreshInterval,
- autorefreshIsPaused,
- basePath,
- colors,
- dateRangeStart,
- dateRangeEnd,
- isApmAvailable,
- isInfraAvailable,
- isLogsAvailable,
- refreshApp,
- commonlyUsedRanges,
- };
- };
-
store.dispatch(setBasePath(basePath));
return (
-
-
-
-
- {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
- }}
- />
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};