[7.x] [Uptime] Simplify monitor param usage (elastic#63121) (elastic#…

…63335)

* add useMonitorId hook

* update url param hook

* update type

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

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

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

@@ -6,7 +6,7 @@
 
 import React, { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
 import {
   getAnomalyRecordsAction,
   getMLCapabilitiesAction,
@@ -28,13 +28,12 @@ interface Props {
 }
 
 export const DurationChart: React.FC<Props> = ({ monitorId }: Props) => {
-  const [getUrlParams] = useUrlParams();
   const {
     dateRangeStart,
     dateRangeEnd,
     absoluteDateRangeStart,
     absoluteDateRangeEnd,
-  } = getUrlParams();
+  } = useGetUrlParams();
 
   const { durationLines, loading } = useSelector(selectDurationLines);
 

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

@@ -15,7 +15,7 @@ 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';
+import { useGetUrlParams } from '../../../hooks';
 
 type Props = ResponsiveWrapperProps &
   Pick<PingHistogramComponentProps, 'height' | 'data' | 'loading'> &
@@ -30,14 +30,13 @@ const PingHistogramContainer: React.FC<Props> = ({
   loading,
   esKuery,
 }) => {
-  const [getUrlParams] = useUrlParams();
   const {
     absoluteDateRangeStart,
     absoluteDateRangeEnd,
     dateRangeStart: dateStart,
     dateRangeEnd: dateEnd,
     statusFilter,
-  } = getUrlParams();
+  } = useGetUrlParams();
 
   useEffect(() => {
     loadData({ monitorId, dateStart, dateEnd, statusFilter, filters: esKuery });

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

@@ -6,7 +6,7 @@
 
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
 import { AppState } from '../../../state';
 import { getSnapshotCountAction } from '../../../state/actions';
 import { SnapshotComponent } from '../../functional/snapshot';
@@ -54,8 +54,7 @@ export const Container: React.FC<Props> = ({
   esKuery,
   loadSnapshotCount,
 }: Props) => {
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart, dateRangeEnd, statusFilter } = getUrlParams();
+  const { dateRangeStart, dateRangeEnd, statusFilter } = useGetUrlParams();
 
   useEffect(() => {
     loadSnapshotCount({ dateRangeStart, dateRangeEnd, filters: esKuery, statusFilter });

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

@@ -11,7 +11,7 @@ import { monitorDetailsSelector } from '../../../state/selectors';
 import { MonitorDetailsActionPayload } from '../../../state/actions/types';
 import { getMonitorDetailsAction } from '../../../state/actions/monitor';
 import { MonitorListDrawerComponent } from '../../functional/monitor_list/monitor_list_drawer/monitor_list_drawer';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
 import { MonitorSummary } from '../../../../common/graphql/types';
 import { MonitorDetails } from '../../../../common/runtime_types/monitor';
 
@@ -24,8 +24,7 @@ interface ContainerProps {
 const Container: React.FC<ContainerProps> = ({ summary, loadMonitorDetails, monitorDetails }) => {
   const monitorId = summary?.monitor_id;
 
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = useGetUrlParams();
 
   useEffect(() => {
     loadMonitorDetails({

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

@@ -11,7 +11,7 @@ import { AppState } from '../../../state';
 import { monitorLocationsSelector, monitorStatusSelector } from '../../../state/selectors';
 import { MonitorStatusBarComponent } from '../../functional/monitor_status_details/monitor_status_bar';
 import { getMonitorStatusAction } from '../../../state/actions';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
 import { Ping } from '../../../../common/graphql/types';
 import { MonitorLocations } from '../../../../common/runtime_types/monitor';
 import { UptimeRefreshContext } from '../../../contexts';
@@ -39,8 +39,7 @@ const Container: React.FC<Props> = ({
 }: Props) => {
   const { lastRefresh } = useContext(UptimeRefreshContext);
 
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = useGetUrlParams();
 
   useEffect(() => {
     loadMonitorStatus({ dateStart, dateEnd, monitorId });

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

@@ -7,7 +7,7 @@
 import React, { useContext, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
 import { AppState } from '../../../state';
 import { monitorLocationsSelector } from '../../../state/selectors';
 import { getMonitorLocationsAction, MonitorLocationsPayload } from '../../../state/actions/monitor';
@@ -36,8 +36,7 @@ export const Container: React.FC<Props> = ({
 }: Props) => {
   const { lastRefresh } = useContext(UptimeRefreshContext);
 
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = useGetUrlParams();
 
   useEffect(() => {
     loadMonitorLocations({ dateStart, dateEnd, monitorId });

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

@@ -8,7 +8,7 @@ import { EuiText, EuiSpacer } from '@elastic/eui';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { MonitorPageLink } from '../monitor_page_link';
-import { useUrlParams } from '../../../../hooks';
+import { useGetUrlParams } from '../../../../hooks';
 import { stringifyUrlParams } from '../../../../lib/helper/stringify_url_params';
 import { MonitorError } from '../../../../../common/runtime_types';
 
@@ -30,8 +30,7 @@ interface MostRecentErrorProps {
 }
 
 export const MostRecentError = ({ error, monitorId, timestamp }: MostRecentErrorProps) => {
-  const [getUrlParams] = useUrlParams();
-  const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
+  const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams();
   params.selectedPingStatus = 'down';
   const linkParameters = stringifyUrlParams(params, true);
 

x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/manage_ml_job.tsx

@@ -7,13 +7,13 @@
 import React, { useContext, useState } from 'react';
 
 import { EuiButtonEmpty, EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
-import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { canDeleteMLJobSelector } from '../../../state/selectors';
 import { UptimeSettingsContext } from '../../../contexts';
 import * as labels from './translations';
 import { getMLJobLinkHref } from './ml_job_link';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
+import { useMonitorId } from '../../../hooks/use_monitor';
 
 interface Props {
   hasMLJob: boolean;
@@ -28,11 +28,9 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
 
   const canDeleteMLJob = useSelector(canDeleteMLJobSelector);
 
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart, dateRangeEnd } = getUrlParams();
+  const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
-  let { monitorId } = useParams();
-  monitorId = atob(monitorId || '');
+  const monitorId = useMonitorId();
 
   const button = (
     <EuiButtonEmpty

x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout_container.tsx

@@ -6,7 +6,6 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
 import {
   canCreateMLJobSelector,
   hasMLJobSelector,
@@ -24,8 +23,9 @@ import {
 import { MLFlyoutView } from './ml_flyout';
 import { ML_JOB_ID } from '../../../../common/constants';
 import { UptimeRefreshContext, UptimeSettingsContext } from '../../../contexts';
-import { useUrlParams } from '../../../hooks';
+import { useGetUrlParams } from '../../../hooks';
 import { getDynamicSettings } from '../../../state/actions/dynamic_settings';
+import { useMonitorId } from '../../../hooks/use_monitor';
 
 interface Props {
   onClose: () => void;
@@ -79,8 +79,7 @@ export const MachineLearningFlyout: React.FC<Props> = ({ onClose }) => {
 
   const { refreshApp } = useContext(UptimeRefreshContext);
 
-  let { monitorId } = useParams();
-  monitorId = atob(monitorId || '');
+  const monitorId = useMonitorId();
 
   const canCreateMLJob = useSelector(canCreateMLJobSelector) && heartbeatIndices !== '';
 
@@ -95,8 +94,7 @@ export const MachineLearningFlyout: React.FC<Props> = ({ onClose }) => {
 
   const [isCreatingJob, setIsCreatingJob] = useState(false);
 
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart, dateRangeEnd } = getUrlParams();
+  const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
   useEffect(() => {
     if (isCreatingJob && !isMLJobCreating) {

x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_integeration.tsx

@@ -5,8 +5,6 @@
  */
 
 import React, { useContext, useEffect, useState } from 'react';
-
-import { useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { MachineLearningFlyout } from './ml_flyout_container';
 import {
@@ -23,6 +21,7 @@ import * as labels from './translations';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { ManageMLJobComponent } from './manage_ml_job';
 import { JobStat } from '../../../../../../../plugins/ml/common/types/data_recognizer';
+import { useMonitorId } from '../../../hooks/use_monitor';
 
 export const MLIntegrationComponent = () => {
   const [isMlFlyoutOpen, setIsMlFlyoutOpen] = useState(false);
@@ -32,8 +31,7 @@ export const MLIntegrationComponent = () => {
 
   const { notifications } = useKibana();
 
-  let { monitorId } = useParams();
-  monitorId = atob(monitorId || '');
+  const monitorId = useMonitorId();
 
   const dispatch = useDispatch();
 

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

@@ -8,7 +8,7 @@ import React, { createContext, useMemo } from 'react';
 import { UptimeAppProps } from '../uptime_app';
 import { CLIENT_DEFAULTS, CONTEXT_DEFAULTS } from '../../common/constants';
 import { CommonlyUsedRange } from '../components/functional/uptime_date_picker';
-import { useUrlParams } from '../hooks';
+import { useGetUrlParams } from '../hooks';
 import { ILicense } from '../../../../../plugins/licensing/common/types';
 
 export interface UptimeSettingsContextValues {
@@ -50,9 +50,7 @@ export const UptimeSettingsContextProvider: React.FC<UptimeAppProps> = ({ childr
     plugins,
   } = props;
 
-  const [getUrlParams] = useUrlParams();
-
-  const { dateRangeStart, dateRangeEnd } = getUrlParams();
+  const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
   let license: ILicense | null = null;
 

x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx

@@ -19,6 +19,7 @@ interface MockUrlParamsComponentProps {
 const UseUrlParamsTestComponent = ({ hook, updateParams }: MockUrlParamsComponentProps) => {
   const [params, setParams] = useState({});
   const [getUrlParams, updateUrlParams] = hook();
+  const queryParams = getUrlParams();
   return (
     <Fragment>
       {Object.keys(params).length > 0 ? <div>{JSON.stringify(params)}</div> : null}
@@ -30,7 +31,7 @@ const UseUrlParamsTestComponent = ({ hook, updateParams }: MockUrlParamsComponen
       >
         Set url params
       </button>
-      <button id="getUrlParams" onClick={() => setParams(getUrlParams())}>
+      <button id="getUrlParams" onClick={() => setParams(queryParams)}>
         Get url params
       </button>
     </Fragment>

x-pack/legacy/plugins/uptime/public/hooks/use_monitor.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 { useParams } from 'react-router-dom';
+
+export const useMonitorId = (): string => {
+  const { monitorId } = useParams();
+
+  // decode 64 base string, it was decoded to make it a valid url, since monitor id can be a url
+  return atob(monitorId || '');
+};

x-pack/legacy/plugins/uptime/public/hooks/use_telemetry.ts

@@ -5,7 +5,7 @@
  */
 
 import { useEffect } from 'react';
-import { useUrlParams } from './use_url_params';
+import { useGetUrlParams } from './use_url_params';
 import { apiService } from '../state/api/utils';
 import { API_URLS } from '../../common/constants';
 
@@ -17,8 +17,12 @@ export enum UptimePage {
 }
 
 export const useUptimeTelemetry = (page?: UptimePage) => {
-  const [getUrlParams] = useUrlParams();
-  const { dateRangeStart, dateRangeEnd, autorefreshInterval, autorefreshIsPaused } = getUrlParams();
+  const {
+    dateRangeStart,
+    dateRangeEnd,
+    autorefreshInterval,
+    autorefreshIsPaused,
+  } = useGetUrlParams();
 
   useEffect(() => {
     if (!apiService.http) throw new Error('Core http services are not defined');

x-pack/legacy/plugins/uptime/public/hooks/use_url_params.ts

@@ -15,27 +15,26 @@ export type UpdateUrlParams = (updatedParams: {
 
 export type UptimeUrlParamsHook = () => [GetUrlParams, UpdateUrlParams];
 
-export const useUrlParams: UptimeUrlParamsHook = () => {
+const getParsedParams = (search: string) => {
+  return search ? parse(search[0] === '?' ? search.slice(1) : search, { sort: false }) : {};
+};
+
+export const useGetUrlParams: GetUrlParams = () => {
   const location = useLocation();
-  const history = useHistory();
 
-  const getUrlParams: GetUrlParams = () => {
-    let search: string | undefined;
-    if (location) {
-      search = location.search;
-    }
+  const params = getParsedParams(location?.search);
 
-    const params = search
-      ? parse(search[0] === '?' ? search.slice(1) : search, { sort: false })
-      : {};
+  return getSupportedUrlParams(params);
+};
 
-    return getSupportedUrlParams(params);
-  };
+export const useUrlParams: UptimeUrlParamsHook = () => {
+  const location = useLocation();
+  const history = useHistory();
 
   const updateUrlParams: UpdateUrlParams = updatedParams => {
     if (!history || !location) return;
     const { pathname, search } = location;
-    const currentParams = parse(search[0] === '?' ? search.slice(1) : search, { sort: false });
+    const currentParams = getParsedParams(search);
     const mergedParams = {
       ...currentParams,
       ...updatedParams,
@@ -60,5 +59,5 @@ export const useUrlParams: UptimeUrlParamsHook = () => {
     });
   };
 
-  return [getUrlParams, updateUrlParams];
+  return [useGetUrlParams, updateUrlParams];
 };

x-pack/legacy/plugins/uptime/public/pages/monitor.tsx

@@ -6,7 +6,6 @@
 
 import { EuiSpacer } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
-import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { MonitorCharts, PingList } from '../components/functional';
 import { UptimeRefreshContext } from '../contexts';
@@ -16,11 +15,10 @@ import { MonitorStatusDetails } from '../components/connected';
 import { monitorStatusSelector } from '../state/selectors';
 import { PageHeader } from './page_header';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
+import { useMonitorId } from '../hooks/use_monitor';
 
 export const MonitorPage: React.FC = () => {
-  // decode 64 base string, it was decoded to make it a valid url, since monitor id can be a url
-  let { monitorId } = useParams();
-  monitorId = atob(monitorId || '');
+  const monitorId = useMonitorId();
 
   const [pingListPageCount, setPingListPageCount] = useState<number>(10);
   const { refreshApp } = useContext(UptimeRefreshContext);