Skip to content

Commit

Permalink
[Uptime] Fix document title according to page (#65665)
Browse files Browse the repository at this point in the history
  • Loading branch information
shahzad31 authored May 12, 2020
1 parent fd66d47 commit 75ea9ea
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 83 deletions.
11 changes: 1 addition & 10 deletions x-pack/plugins/uptime/public/apps/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 1 addition & 12 deletions x-pack/plugins/uptime/public/pages/__tests__/overview.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
3 changes: 0 additions & 3 deletions x-pack/plugins/uptime/public/pages/certificates.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 });

Expand Down
4 changes: 1 addition & 3 deletions x-pack/plugins/uptime/public/pages/monitor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 });

Expand Down
17 changes: 11 additions & 6 deletions x-pack/plugins/uptime/public/pages/overview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}
Expand All @@ -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 });
Expand All @@ -57,6 +61,7 @@ export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFi
});

useBreadcrumbs([]); // No extra breadcrumbs on overview

return (
<>
<PageHeader headingText={heading} extraLinks={true} datePicker={true} />
Expand All @@ -83,4 +88,4 @@ export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFi
</EmptyState>
</>
);
};
});
5 changes: 1 addition & 4 deletions x-pack/plugins/uptime/public/pages/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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(() => {
Expand Down
97 changes: 68 additions & 29 deletions x-pack/plugins/uptime/public/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -16,33 +15,73 @@ import {
} from '../common/constants';
import { MonitorPage, NotFoundPage, SettingsPage } from './pages';
import { CertificatesPage } from './pages/certificates';
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 }) => (
<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>
<Route component={NotFoundPage} />
</Switch>
);
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>
{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>
);
};
2 changes: 1 addition & 1 deletion x-pack/plugins/uptime/public/uptime_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 75ea9ea

Please sign in to comment.