refactore component

x-pack/plugins/uptime/public/apps/plugin.ts

@@ -4,11 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'kibana/public';
-import {
-  LegacyCoreStart,
-  AppMountParameters,
-  DEFAULT_APP_CATEGORIES,
-} from '../../../../../src/core/public';
+import { AppMountParameters, DEFAULT_APP_CATEGORIES } from '../../../../../src/core/public';
 import { UMFrontendLibs } from '../lib/lib';
 import { PLUGIN } from '../../common/constants';
 import { FeatureCatalogueCategory } from '../../../../../src/plugins/home/public';
@@ -17,11 +13,6 @@ import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
 import { TriggersAndActionsUIPublicPluginSetup } from '../../../triggers_actions_ui/public';
 import { DataPublicPluginSetup } from '../../../../../src/plugins/data/public';
 
-export interface StartObject {
-  core: LegacyCoreStart;
-  plugins: any;
-}
-
 export interface ClientPluginsSetup {
   data: DataPublicPluginSetup;
   home: HomePublicPluginSetup;

x-pack/plugins/uptime/public/components/overview/overview_container.tsx

@@ -6,16 +6,11 @@
 
 import { useDispatch, useSelector } from 'react-redux';
 import React, { useCallback } from 'react';
-import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import { OverviewPageComponent } from '../../pages/overview';
 import { selectIndexPattern } from '../../state/selectors';
 import { setEsKueryString } from '../../state/actions';
 
-export interface OverviewPageProps {
-  autocomplete: DataPublicPluginSetup['autocomplete'];
-}
-
-export const OverviewPage: React.FC<OverviewPageProps> = props => {
+export const OverviewPage: React.FC = props => {
   const dispatch = useDispatch();
   const setEsKueryFilters = useCallback(
     (esFilters: string) => dispatch(setEsKueryString(esFilters)),

x-pack/plugins/uptime/public/pages/__tests__/overview.test.tsx

@@ -88,21 +88,10 @@ describe('MonitorPage', () => {
     title: 'heartbeat-8*',
   };
 
-  const autocomplete = {
-    getQuerySuggestions: jest.fn(),
-    hasQuerySuggestions: () => true,
-    getValueSuggestions: jest.fn(),
-    addQuerySuggestionProvider: jest.fn(),
-  };
-
   it('shallow renders expected elements for valid props', () => {
     expect(
       shallowWithRouter(
-        <OverviewPageComponent
-          autocomplete={autocomplete}
-          indexPattern={indexPattern}
-          setEsKueryFilters={jest.fn()}
-        />
+        <OverviewPageComponent indexPattern={indexPattern} setEsKueryFilters={jest.fn()} />
       )
     ).toMatchSnapshot();
   });

x-pack/plugins/uptime/public/pages/certificates.tsx

@@ -23,7 +23,6 @@ import { OVERVIEW_ROUTE, SETTINGS_ROUTE, CLIENT_ALERT_TYPES } from '../../common
 import { getDynamicSettings } from '../state/actions/dynamic_settings';
 import { UptimeRefreshContext } from '../contexts';
 import * as labels from './translations';
-import { UptimePage, useUptimeTelemetry } from '../hooks';
 import { certificatesSelector, getCertificatesAction } from '../state/certificates/certificates';
 import { CertificateList, CertificateSearch, CertSort } from '../components/certificates';
 import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
@@ -39,8 +38,6 @@ const getPageSizeValue = () => {
 };
 
 export const CertificatesPage: React.FC = () => {
-  useUptimeTelemetry(UptimePage.Certificates);
-
   useTrackPageview({ app: 'uptime', path: 'certificates' });
   useTrackPageview({ app: 'uptime', path: 'certificates', delay: 15000 });
 

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

@@ -11,7 +11,7 @@ import { monitorStatusSelector } from '../state/selectors';
 import { PageHeader } from './page_header';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
 import { useTrackPageview } from '../../../observability/public';
-import { useMonitorId, useUptimeTelemetry, UptimePage } from '../hooks';
+import { useMonitorId } from '../hooks';
 import { MonitorCharts } from '../components/monitor';
 import { MonitorStatusDetails, PingList } from '../components/monitor';
 import { getDynamicSettings } from '../state/actions/dynamic_settings';
@@ -27,8 +27,6 @@ export const MonitorPage: React.FC = () => {
 
   const selectedMonitor = useSelector(monitorStatusSelector);
 
-  useUptimeTelemetry(UptimePage.Monitor);
-
   useTrackPageview({ app: 'uptime', path: 'monitor' });
   useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 });
 

x-pack/plugins/uptime/public/pages/overview.tsx

@@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
-import { useUptimeTelemetry, UptimePage, useGetUrlParams } from '../hooks';
+import { useGetUrlParams } from '../hooks';
 import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
 import { PageHeader } from './page_header';
 import { IIndexPattern } from '../../../../../src/plugins/data/public';
@@ -18,9 +18,9 @@ import { useTrackPageview } from '../../../observability/public';
 import { MonitorList } from '../components/overview/monitor_list/monitor_list_container';
 import { EmptyState, FilterGroup, KueryBar, ParsingErrorCallout } from '../components/overview';
 import { StatusPanel } from '../components/overview/status_panel';
-import { OverviewPageProps } from '../components/overview/overview_container';
+import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 
-interface Props extends OverviewPageProps {
+interface Props {
   indexPattern: IIndexPattern | null;
   setEsKueryFilters: (esFilters: string) => void;
 }
@@ -34,11 +34,15 @@ const EuiFlexItemStyled = styled(EuiFlexItem)`
   }
 `;
 
-export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFilters }: Props) => {
+export const OverviewPageComponent = React.memo(({ indexPattern, setEsKueryFilters }: Props) => {
   const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams();
   const { search, filters: urlFilters } = params;
 
-  useUptimeTelemetry(UptimePage.Overview);
+  const {
+    services: {
+      data: { autocomplete },
+    },
+  } = useKibana();
 
   useTrackPageview({ app: 'uptime', path: 'overview' });
   useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 });
@@ -57,6 +61,7 @@ export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFi
   });
 
   useBreadcrumbs([]); // No extra breadcrumbs on overview
+
   return (
     <>
       <PageHeader headingText={heading} extraLinks={true} datePicker={true} />
@@ -83,4 +88,4 @@ export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFi
       </EmptyState>
     </>
   );
-};
+});

x-pack/plugins/uptime/public/pages/settings.tsx

@@ -25,7 +25,6 @@ import { DynamicSettings } from '../../common/runtime_types';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
 import { OVERVIEW_ROUTE } from '../../common/constants';
 import { useKibana } from '../../../../../src/plugins/kibana_react/public';
-import { UptimePage, useUptimeTelemetry } from '../hooks';
 import { IndicesForm } from '../components/settings/indices_form';
 import {
   CertificateExpirationForm,
@@ -75,13 +74,11 @@ const getFieldErrors = (formFields: DynamicSettings | null): SettingsPageFieldEr
   return null;
 };
 
-export const SettingsPage = () => {
+export const SettingsPage: React.FC = () => {
   const dss = useSelector(selectDynamicSettings);
 
   useBreadcrumbs([{ text: Translations.settings.breadcrumbText }]);
 
-  useUptimeTelemetry(UptimePage.Settings);
-
   const dispatch = useDispatch();
 
   useEffect(() => {

x-pack/plugins/uptime/public/routes.tsx

@@ -4,9 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { DataPublicPluginSetup } from '../../../../src/plugins/data/public';
 import { OverviewPage } from './components/overview/overview_container';
 import {
   CERTIFICATES_ROUTE,
@@ -16,37 +15,72 @@ import {
 } from '../common/constants';
 import { MonitorPage, NotFoundPage, SettingsPage } from './pages';
 import { CertificatesPage } from './pages/certificates';
-import { useRouteChange } from './hooks/use_route_change';
+import { UptimePage, useUptimeTelemetry } from './hooks';
 
-interface RouterProps {
-  autocomplete: DataPublicPluginSetup['autocomplete'];
+interface RouteProps {
+  path: string;
+  component: React.FC;
+  dataTestSubj: string;
+  title: string;
+  telemetryId: UptimePage;
 }
 
-export const PageRouter: FC<RouterProps> = ({ autocomplete }) => {
-  useRouteChange();
+const baseTitle = 'Uptime - Kibana';
 
+const Routes: RouteProps[] = [
+  {
+    title: `Monitor | ${baseTitle}`,
+    path: MONITOR_ROUTE,
+    component: MonitorPage,
+    dataTestSubj: 'uptimeMonitorPage',
+    telemetryId: UptimePage.Monitor,
+  },
+  {
+    title: `Settings | ${baseTitle}`,
+    path: SETTINGS_ROUTE,
+    component: SettingsPage,
+    dataTestSubj: 'uptimeSettingsPage',
+    telemetryId: UptimePage.Settings,
+  },
+  {
+    title: `Certificates | ${baseTitle}`,
+    path: CERTIFICATES_ROUTE,
+    component: CertificatesPage,
+    dataTestSubj: 'uptimeCertificatesPage',
+    telemetryId: UptimePage.Certificates,
+  },
+  {
+    title: baseTitle,
+    path: OVERVIEW_ROUTE,
+    component: OverviewPage,
+    dataTestSubj: 'uptimeOverviewPage',
+    telemetryId: UptimePage.Overview,
+  },
+];
+
+const RouteInit: React.FC<Pick<RouteProps, 'path' | 'title' | 'telemetryId'>> = ({
+  path,
+  title,
+  telemetryId,
+}) => {
+  useUptimeTelemetry(telemetryId);
+  useEffect(() => {
+    document.title = title;
+  }, [path, title]);
+  return null;
+};
+
+export const PageRouter: FC = () => {
   return (
     <Switch>
-      <Route path={MONITOR_ROUTE}>
-        <div data-test-subj="uptimeMonitorPage">
-          <MonitorPage />
-        </div>
-      </Route>
-      <Route path={SETTINGS_ROUTE}>
-        <div data-test-subj="uptimeSettingsPage">
-          <SettingsPage />
-        </div>
-      </Route>
-      <Route path={CERTIFICATES_ROUTE}>
-        <div data-test-subj="uptimeCertificatesPage">
-          <CertificatesPage />
-        </div>
-      </Route>
-      <Route path={OVERVIEW_ROUTE}>
-        <div data-test-subj="uptimeOverviewPage">
-          <OverviewPage autocomplete={autocomplete} />
-        </div>
-      </Route>
+      {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => (
+        <Route path={path} key={telemetryId}>
+          <div data-test-subj={dataTestSubj}>
+            <RouteInit title={title} path={path} telemetryId={telemetryId} />
+            <RouteComponent />
+          </div>
+        </Route>
+      ))}
       <Route component={NotFoundPage} />
     </Switch>
   );

x-pack/plugins/uptime/public/uptime_app.tsx

@@ -106,7 +106,7 @@ const Application = (props: UptimeAppProps) => {
                         <EuiPage className="app-wrapper-panel " data-test-subj="uptimeApp">
                           <main>
                             <UptimeAlertsFlyoutWrapper />
-                            <PageRouter autocomplete={plugins.data.autocomplete} />
+                            <PageRouter />
                           </main>
                         </EuiPage>
                       </UptimeAlertsContextProvider>