[Uptime] Add Settings Page

x-pack/legacy/plugins/uptime/common/constants/ui.ts

@@ -8,6 +8,8 @@ export const MONITOR_ROUTE = '/monitor/:monitorId?';
 
 export const OVERVIEW_ROUTE = '/';
 
+export const SETTINGS_ROUTE = '/settings';
+
 export enum STATUS {
   UP = 'up',
   DOWN = 'down',

x-pack/legacy/plugins/uptime/common/runtime_types/dynamic_settings.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 * as t from 'io-ts';
+
+export const DynamicSettingsType = t.type({
+  heartbeatIndices: t.string,
+});
+
+export const DynamicSettingsSaveType = t.intersection([
+  t.type({
+    success: t.boolean,
+  }),
+  t.partial({
+    error: t.string,
+  }),
+]);
+
+export type DynamicSettings = t.TypeOf<typeof DynamicSettingsType>;
+export type DynamicSettingsSaveResponse = t.TypeOf<typeof DynamicSettingsSaveType>;
+
+export const defaultDynamicSettings: DynamicSettings = {
+  heartbeatIndices: 'heartbeat-8*',
+};

x-pack/legacy/plugins/uptime/common/runtime_types/index.ts

@@ -9,3 +9,4 @@ export * from './common';
 export * from './monitor';
 export * from './overview_filters';
 export * from './snapshot';
+export * from './dynamic_settings';

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

@@ -24,7 +24,7 @@ interface DataMissingProps {
 export const DataMissing = ({ headingMessage }: DataMissingProps) => {
   const { basePath } = useContext(UptimeSettingsContext);
   return (
-    <EuiFlexGroup justifyContent="center">
+    <EuiFlexGroup justifyContent="center" data-test-subj="data-missing">
       <EuiFlexItem grow={false}>
         <EuiSpacer size="xs" />
         <EuiPanel>

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

@@ -0,0 +1,63 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { mountWithRouter } from '../../lib';
+import { OVERVIEW_ROUTE } from '../../../common/constants';
+import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
+import { UptimeUrlParams, getSupportedUrlParams } from '../../lib/helper';
+import { makeBaseBreadcrumb, useBreadcrumbs } from '../../hooks/use_breadcrumbs';
+
+describe('useBreadcrumbs', () => {
+  it('sets the given breadcrumbs', () => {
+    const [getBreadcrumbs, core] = mockCore();
+
+    const expectedCrumbs: ChromeBreadcrumb[] = [
+      {
+        text: 'Crumb: ',
+        href: 'http://href.example.net',
+      },
+      {
+        text: 'Crumb II: Son of Crumb',
+        href: 'http://href2.example.net',
+      },
+    ];
+
+    const Component = () => {
+      useBreadcrumbs(expectedCrumbs);
+      return <>Hello</>;
+    };
+
+    mountWithRouter(
+      <KibanaContextProvider services={{ ...core }}>
+        <Route path={OVERVIEW_ROUTE}>
+          <Component />
+        </Route>
+      </KibanaContextProvider>
+    );
+
+    const urlParams: UptimeUrlParams = getSupportedUrlParams({});
+    expect(getBreadcrumbs()).toStrictEqual([makeBaseBreadcrumb(urlParams)].concat(expectedCrumbs));
+  });
+});
+
+const mockCore: () => [() => ChromeBreadcrumb[], any] = () => {
+  let breadcrumbObj: ChromeBreadcrumb[] = [];
+  const get = () => {
+    return breadcrumbObj;
+  };
+  const core = {
+    chrome: {
+      setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => {
+        breadcrumbObj = newBreadcrumbs;
+      },
+    },
+  };
+
+  return [get, core];
+};

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

@@ -0,0 +1,41 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { i18n } from '@kbn/i18n';
+import { useEffect } from 'react';
+import { UptimeUrlParams } from '../lib/helper';
+import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { useUrlParams } from '.';
+
+export const makeBaseBreadcrumb = (params?: UptimeUrlParams): ChromeBreadcrumb => {
+  let href = '#/';
+  if (params) {
+    const crumbParams: Partial<UptimeUrlParams> = { ...params };
+    // We don't want to encode this values because they are often set to Date.now(), the relative
+    // values in dateRangeStart are better for a URL.
+    delete crumbParams.absoluteDateRangeStart;
+    delete crumbParams.absoluteDateRangeEnd;
+    href += stringifyUrlParams(crumbParams, true);
+  }
+  return {
+    text: i18n.translate('xpack.uptime.breadcrumbs.overviewBreadcrumbText', {
+      defaultMessage: 'Uptime',
+    }),
+    href,
+  };
+};
+
+export const useBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
+  const params = useUrlParams()[0]();
+  const setBreadcrumbs = useKibana().services.chrome?.setBreadcrumbs;
+  useEffect(() => {
+    if (setBreadcrumbs) {
+      setBreadcrumbs([makeBaseBreadcrumb(params)].concat(extraCrumbs));
+    }
+  }, [extraCrumbs, params, setBreadcrumbs]);
+};