[Uptime] Add Custom Fleet Integration UI

x-pack/plugins/fleet/server/routes/data_streams/handlers.ts

@@ -14,7 +14,7 @@ import type { GetDataStreamsResponse } from '../../../common';
 import { getPackageSavedObjects } from '../../services/epm/packages/get';
 import { defaultIngestErrorHandler } from '../../errors';
 
-const DATA_STREAM_INDEX_PATTERN = 'logs-*-*,metrics-*-*,traces-*-*';
+const DATA_STREAM_INDEX_PATTERN = 'logs-*-*,metrics-*-*,traces-*-*,synthetics-*-*';
 
 interface ESDataStreamInfo {
   name: string;

x-pack/plugins/fleet/server/services/agent_policy.ts

@@ -745,7 +745,13 @@ class AgentPolicyService {
           cluster: ['monitor'],
           indices: [
             {
-              names: ['logs-*', 'metrics-*', 'traces-*', '.logs-endpoint.diagnostic.collection-*'],
+              names: [
+                'logs-*',
+                'metrics-*',
+                'traces-*',
+                '.logs-endpoint.diagnostic.collection-*',
+                'synthetics-*',
+              ],
               privileges: ['auto_configure', 'create_doc'],
             },
           ],

x-pack/plugins/observability/public/typings/fetch_overview_data/index.ts

@@ -47,7 +47,7 @@ export type HasData<T extends ObservabilityFetchDataPlugins> = (
 
 export type ObservabilityFetchDataPlugins = Exclude<
   ObservabilityApp,
-  'observability-overview' | 'stack_monitoring'
+  'observability-overview' | 'stack_monitoring' | 'fleet'
 >;
 
 export interface DataHandler<

x-pack/plugins/observability/typings/common.ts

@@ -14,7 +14,8 @@ export type ObservabilityApp =
   | 'synthetics'
   | 'observability-overview'
   | 'stack_monitoring'
-  | 'ux';
+  | 'ux'
+  | 'fleet';
 
 export type PromiseReturnType<Func> = Func extends (...args: any[]) => Promise<infer Value>
   ? Value

x-pack/plugins/uptime/kibana.json

@@ -9,7 +9,8 @@
     "data",
     "home",
     "observability",
-    "ml"
+    "ml",
+    "fleet"
   ],
   "requiredPlugins": [
     "alerting",

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

@@ -27,9 +27,14 @@ import {
   DataPublicPluginStart,
 } from '../../../../../src/plugins/data/public';
 import { alertTypeInitializers } from '../lib/alert_types';
+import { FleetStart } from '../../../fleet/public';
 import { FetchDataParams, ObservabilityPublicSetup } from '../../../observability/public';
 import { PLUGIN } from '../../common/constants/plugin';
 import { IStorageWrapper } from '../../../../../src/plugins/kibana_utils/public';
+import {
+  LazySyntheticsPolicyCreateExtension,
+  LazySyntheticsPolicyEditExtension,
+} from '../components/fleet_package';
 
 export interface ClientPluginsSetup {
   data: DataPublicPluginSetup;
@@ -42,6 +47,7 @@ export interface ClientPluginsStart {
   embeddable: EmbeddableStart;
   data: DataPublicPluginStart;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+  fleet?: FleetStart;
 }
 
 export interface UptimePluginServices extends Partial<CoreStart> {
@@ -143,6 +149,22 @@ export class UptimePlugin
         plugins.triggersActionsUi.alertTypeRegistry.register(alertInitializer);
       }
     });
+
+    if (plugins.fleet) {
+      const { registerExtension } = plugins.fleet;
+
+      registerExtension({
+        package: 'synthetics',
+        view: 'package-policy-create',
+        component: LazySyntheticsPolicyCreateExtension,
+      });
+
+      registerExtension({
+        package: 'synthetics',
+        view: 'package-policy-edit',
+        component: LazySyntheticsPolicyEditExtension,
+      });
+    }
   }
 
   public stop(): void {}

x-pack/plugins/uptime/public/components/fleet_package/combo_box.test.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '../../lib/helper/rtl_helpers';
+import { ComboBox } from './combo_box';
+
+describe('<ComboBox />', () => {
+  const onChange = jest.fn();
+  const selectedOptions: string[] = [];
+
+  it('renders ComboBox', () => {
+    const { getByTestId } = render(
+      <ComboBox selectedOptions={selectedOptions} onChange={onChange} />
+    );
+
+    expect(getByTestId('syntheticsFleetComboBox')).toBeInTheDocument();
+  });
+});

x-pack/plugins/uptime/public/components/fleet_package/combo_box.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+
+export interface Props {
+  onChange: (value: string[]) => void;
+  selectedOptions: string[];
+}
+
+export const ComboBox = ({ onChange, selectedOptions }: Props) => {
+  const [formattedSelectedOptions, setSelectedOptions] = useState<
+    Array<EuiComboBoxOptionOption<string>>
+  >(selectedOptions.map((option) => ({ label: option, key: option })));
+  const [isInvalid, setInvalid] = useState(false);
+
+  const onOptionsChange = useCallback(
+    (options: Array<EuiComboBoxOptionOption<string>>) => {
+      setSelectedOptions(options);
+      const formattedTags = options.map((option) => option.label);
+      onChange(formattedTags);
+      setInvalid(false);
+    },
+    [onChange, setSelectedOptions, setInvalid]
+  );
+
+  const onCreateOption = useCallback(
+    (tag: string) => {
+      const formattedTag = tag.trim();
+      const newOption = {
+        label: formattedTag,
+      };
+
+      onChange([...selectedOptions, formattedTag]);
+
+      // Select the option.
+      setSelectedOptions([...formattedSelectedOptions, newOption]);
+    },
+    [onChange, formattedSelectedOptions, selectedOptions, setSelectedOptions]
+  );
+
+  const onSearchChange = useCallback(
+    (searchValue: string) => {
+      if (!searchValue) {
+        setInvalid(false);
+
+        return;
+      }
+
+      setInvalid(!isValid(searchValue));
+    },
+    [setInvalid]
+  );
+
+  return (
+    <EuiComboBox<string>
+      data-test-subj="syntheticsFleetComboBox"
+      noSuggestions
+      selectedOptions={formattedSelectedOptions}
+      onCreateOption={onCreateOption}
+      onChange={onOptionsChange}
+      onSearchChange={onSearchChange}
+      isInvalid={isInvalid}
+    />
+  );
+};
+
+const isValid = (value: string) => {
+  // Ensure that the tag is more than whitespace
+  return value.match(/\S+/) !== null;
+};

x-pack/plugins/uptime/public/components/fleet_package/contexts/advanced_fields_http_context.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import {
+  IHTTPAdvancedFields,
+  ConfigKeys,
+  Mode,
+  ResponseBodyIndexPolicy,
+  HTTPMethod,
+} from '../types';
+
+interface IHTTPAdvancedFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<IHTTPAdvancedFields>>;
+  fields: IHTTPAdvancedFields;
+  defaultValues: IHTTPAdvancedFields;
+}
+
+interface IHTTPAdvancedFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: IHTTPAdvancedFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.PASSWORD]: '',
+  [ConfigKeys.PROXY_URL]: '',
+  [ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE]: [],
+  [ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE]: [],
+  [ConfigKeys.RESPONSE_BODY_INDEX]: ResponseBodyIndexPolicy.ON_ERROR,
+  [ConfigKeys.RESPONSE_HEADERS_CHECK]: {},
+  [ConfigKeys.RESPONSE_HEADERS_INDEX]: true,
+  [ConfigKeys.RESPONSE_STATUS_CHECK]: [],
+  [ConfigKeys.REQUEST_BODY_CHECK]: {
+    value: '',
+    type: Mode.TEXT,
+  },
+  [ConfigKeys.REQUEST_HEADERS_CHECK]: {},
+  [ConfigKeys.REQUEST_METHOD_CHECK]: HTTPMethod.GET,
+  [ConfigKeys.USERNAME]: '',
+};
+
+export const defaultContext: IHTTPAdvancedFieldsContext = {
+  setFields: (_fields: React.SetStateAction<IHTTPAdvancedFields>) => {
+    throw new Error('setFields was not initialized, set it when you invoke the context');
+  },
+  fields: initialValues,
+  defaultValues: initialValues,
+};
+
+export const HTTPAdvancedFieldsContext = createContext(defaultContext);
+
+export const HTTPAdvancedFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: IHTTPAdvancedFieldsContextProvider) => {
+  const [fields, setFields] = useState<IHTTPAdvancedFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <HTTPAdvancedFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useHTTPAdvancedFieldsContext = () => useContext(HTTPAdvancedFieldsContext);

x-pack/plugins/uptime/public/components/fleet_package/contexts/advanced_fields_tcp_context.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { ITCPAdvancedFields, ConfigKeys } from '../types';
+
+interface ITCPAdvancedFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<ITCPAdvancedFields>>;
+  fields: ITCPAdvancedFields;
+  defaultValues: ITCPAdvancedFields;
+}
+
+interface ITCPAdvancedFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: ITCPAdvancedFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.PROXY_URL]: '',
+  [ConfigKeys.PROXY_USE_LOCAL_RESOLVER]: false,
+  [ConfigKeys.RESPONSE_RECEIVE_CHECK]: '',
+  [ConfigKeys.REQUEST_SEND_CHECK]: '',
+};
+
+const defaultContext: ITCPAdvancedFieldsContext = {
+  setFields: (_fields: React.SetStateAction<ITCPAdvancedFields>) => {
+    throw new Error('setFields was not initialized, set it when you invoke the context');
+  },
+  fields: initialValues, // mutable
+  defaultValues: initialValues, // immutable
+};
+
+export const TCPAdvancedFieldsContext = createContext(defaultContext);
+
+export const TCPAdvancedFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: ITCPAdvancedFieldsContextProvider) => {
+  const [fields, setFields] = useState<ITCPAdvancedFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <TCPAdvancedFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useTCPAdvancedFieldsContext = () => useContext(TCPAdvancedFieldsContext);

x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export {
+  SimpleFieldsContext,
+  SimpleFieldsContextProvider,
+  initialValues as defaultSimpleFields,
+  useSimpleFieldsContext,
+} from './simple_fields_context';
+export {
+  TCPAdvancedFieldsContext,
+  TCPAdvancedFieldsContextProvider,
+  initialValues as defaultTCPAdvancedFields,
+  useTCPAdvancedFieldsContext,
+} from './advanced_fields_tcp_context';
+export {
+  HTTPAdvancedFieldsContext,
+  HTTPAdvancedFieldsContextProvider,
+  initialValues as defaultHTTPAdvancedFields,
+  useHTTPAdvancedFieldsContext,
+} from './advanced_fields_http_context';
+export {
+  TLSFieldsContext,
+  TLSFieldsContextProvider,
+  initialValues as defaultTLSFields,
+  useTLSFieldsContext,
+} from './tls_fields_context';