[Uptime] Add Settings Page (#53550)

Adds a settings page to the Uptime UI. The settings page values are per-space. The only current setting is heartbeatIndices.

To test this against alternate indices try changing setup.ilm.rollover_alias in heartbeat.yml to something like alt-prefix. See the ilm docs for more details.

This should be tested with read-only and write only roles. To test this in kibana try creating two users with two different roles in kibana. One roll should have read access to the Uptime space in kibana. The other should have all access. Both should have read permissions for the heartbeat-* index pattern.

This patch also splits API perms from just heartbeat to uptime-read and uptime-write.

This patch also refactors some of the header component functionality, using hooks for breadcrumbs, and making the top links optional.

Fixes elastic/uptime#43

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]);
+};