[Uptime] add monitor edit and add pages

x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx

@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
+
 import { useStartServices } from '../../../hooks';
 import type { EnrollmentAPIKey } from '../../../types';
+
 import { PlatformSelector } from './platform_selector';
 
 interface Props {

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

@@ -4,6 +4,16 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { DataStream, PolicyConfig } from '../types';
+import { initialValues as defaultHTTPSimpleFields } from './http_context';
+import { initialValues as defaultHTTPAdvancedFields } from './http_context_advanced';
+import { initialValues as defaultTCPSimpleFields } from './tcp_context';
+import { initialValues as defaultICMPSimpleFields } from './icmp_context';
+import { initialValues as defaultTCPAdvancedFields } from './tcp_context_advanced';
+import { initialValues as defaultBrowserSimpleFields } from './browser_context';
+import { initialValues as defaultBrowserAdvancedFields } from './browser_context_advanced';
+import { initialValues as defaultTLSFields } from './tls_fields_context';
+
 export {
   PolicyConfigContext,
   PolicyConfigContextProvider,
@@ -61,3 +71,23 @@ export {
 export { HTTPContextProvider } from './http_provider';
 export { TCPContextProvider } from './tcp_provider';
 export { BrowserContextProvider } from './browser_provider';
+export { SyntheticsProviders } from './synthetics_context_providers';
+
+export const defaultConfig: PolicyConfig = {
+  [DataStream.HTTP]: {
+    ...defaultHTTPSimpleFields,
+    ...defaultHTTPAdvancedFields,
+    ...defaultTLSFields,
+  },
+  [DataStream.TCP]: {
+    ...defaultTCPSimpleFields,
+    ...defaultTCPAdvancedFields,
+    ...defaultTLSFields,
+  },
+  [DataStream.ICMP]: defaultICMPSimpleFields,
+  [DataStream.BROWSER]: {
+    ...defaultBrowserSimpleFields,
+    ...defaultBrowserAdvancedFields,
+    ...defaultTLSFields,
+  },
+};

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

@@ -10,6 +10,8 @@ import { DataStream } from '../types';
 
 interface IPolicyConfigContext {
   setMonitorType: React.Dispatch<React.SetStateAction<DataStream>>;
+  setName: React.Dispatch<React.SetStateAction<string>>;
+  setLocations: React.Dispatch<React.SetStateAction<string[]>>;
   setIsTLSEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   setIsZipUrlTLSEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   monitorType: DataStream;
@@ -19,13 +21,19 @@ interface IPolicyConfigContext {
   defaultIsTLSEnabled?: boolean;
   defaultIsZipUrlTLSEnabled?: boolean;
   isEditable?: boolean;
+  defaultName?: string;
+  name?: string;
+  defaultLocations?: string[];
+  locations?: string[];
 }
 
 interface IPolicyConfigContextProvider {
   children: React.ReactNode;
   defaultMonitorType?: DataStream;
   defaultIsTLSEnabled?: boolean;
   defaultIsZipUrlTLSEnabled?: boolean;
+  defaultName?: string;
+  defaultLocations?: string[];
   isEditable?: boolean;
 }
 
@@ -35,6 +43,12 @@ const defaultContext: IPolicyConfigContext = {
   setMonitorType: (_monitorType: React.SetStateAction<DataStream>) => {
     throw new Error('setMonitorType was not initialized, set it when you invoke the context');
   },
+  setName: (_name: React.SetStateAction<string>) => {
+    throw new Error('setName was not initialized, set it when you invoke the context');
+  },
+  setLocations: (_locations: React.SetStateAction<string[]>) => {
+    throw new Error('setLocations was not initialized, set it when you invoke the context');
+  },
   setIsTLSEnabled: (_isTLSEnabled: React.SetStateAction<boolean>) => {
     throw new Error('setIsTLSEnabled was not initialized, set it when you invoke the context');
   },
@@ -47,19 +61,25 @@ const defaultContext: IPolicyConfigContext = {
   defaultMonitorType: initialValue, // immutable,
   defaultIsTLSEnabled: false,
   defaultIsZipUrlTLSEnabled: false,
+  defaultName: '',
+  defaultLocations: [],
   isEditable: false,
 };
 
 export const PolicyConfigContext = createContext(defaultContext);
 
-export const PolicyConfigContextProvider = ({
+export function PolicyConfigContextProvider<ExtraFields = unknown>({
   children,
   defaultMonitorType = initialValue,
   defaultIsTLSEnabled = false,
   defaultIsZipUrlTLSEnabled = false,
+  defaultName = '',
+  defaultLocations = [],
   isEditable = false,
-}: IPolicyConfigContextProvider) => {
+}: IPolicyConfigContextProvider) {
   const [monitorType, setMonitorType] = useState<DataStream>(defaultMonitorType);
+  const [name, setName] = useState<string>(defaultName);
+  const [locations, setLocations] = useState<string[]>(defaultLocations);
   const [isTLSEnabled, setIsTLSEnabled] = useState<boolean>(defaultIsTLSEnabled);
   const [isZipUrlTLSEnabled, setIsZipUrlTLSEnabled] = useState<boolean>(defaultIsZipUrlTLSEnabled);
 
@@ -75,6 +95,12 @@ export const PolicyConfigContextProvider = ({
       defaultIsTLSEnabled,
       defaultIsZipUrlTLSEnabled,
       isEditable,
+      defaultName,
+      name,
+      setName,
+      defaultLocations,
+      locations,
+      setLocations,
     };
   }, [
     monitorType,
@@ -84,9 +110,15 @@ export const PolicyConfigContextProvider = ({
     defaultIsTLSEnabled,
     defaultIsZipUrlTLSEnabled,
     isEditable,
+    name,
+    defaultName,
+    locations,
+    defaultLocations,
   ]);
 
   return <PolicyConfigContext.Provider value={value} children={children} />;
-};
+}
 
-export const usePolicyConfigContext = () => useContext(PolicyConfigContext);
+export function usePolicyConfigContext() {
+  return useContext(PolicyConfigContext);
+}

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

@@ -0,0 +1,60 @@
+/*
+ * 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 { HTTPFields, TCPFields, ICMPFields, BrowserFields, ITLSFields, DataStream } from '../types';
+import {
+  PolicyConfigContextProvider,
+  TCPContextProvider,
+  ICMPSimpleFieldsContextProvider,
+  HTTPContextProvider,
+  BrowserContextProvider,
+  TLSFieldsContextProvider,
+} from '.';
+
+interface Props {
+  children: React.ReactNode;
+  httpDefaultValues?: HTTPFields;
+  tcpDefaultValues?: TCPFields;
+  icmpDefaultValues?: ICMPFields;
+  browserDefaultValues?: BrowserFields;
+  tlsDefaultValues?: ITLSFields;
+  policyDefaultValues?: {
+    defaultMonitorType: DataStream;
+    defaultIsTLSEnabled: boolean;
+    defaultIsZipUrlTLSEnabled: boolean;
+    defaultName?: string;
+    defaultLocations?: string[];
+    isEditable: boolean;
+  };
+}
+
+export const SyntheticsProviders = ({
+  children,
+  httpDefaultValues,
+  tcpDefaultValues,
+  icmpDefaultValues,
+  browserDefaultValues,
+  tlsDefaultValues,
+  policyDefaultValues,
+}: Props) => {
+  return (
+    <PolicyConfigContextProvider {...(policyDefaultValues || {})}>
+      <HTTPContextProvider defaultValues={httpDefaultValues}>
+        <TCPContextProvider defaultValues={tcpDefaultValues}>
+          <TLSFieldsContextProvider defaultValues={tlsDefaultValues}>
+            <ICMPSimpleFieldsContextProvider defaultValues={icmpDefaultValues}>
+              <BrowserContextProvider defaultValues={browserDefaultValues}>
+                {children}
+              </BrowserContextProvider>
+            </ICMPSimpleFieldsContextProvider>
+          </TLSFieldsContextProvider>
+        </TCPContextProvider>
+      </HTTPContextProvider>
+    </PolicyConfigContextProvider>
+  );
+};

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

@@ -33,6 +33,7 @@ import { BrowserAdvancedFields } from './browser/advanced_fields';
 interface Props {
   validate: Validation;
   dataStreams?: DataStream[];
+  children?: React.ReactNode;
 }
 
 const dataStreamToString = [
@@ -50,7 +51,7 @@ const dataStreamToString = [
   },
 ];
 
-export const CustomFields = memo<Props>(({ validate, dataStreams = [] }) => {
+export const CustomFields = memo<Props>(({ validate, dataStreams = [], children }) => {
   const { monitorType, setMonitorType, isTLSEnabled, setIsTLSEnabled, isEditable } =
     usePolicyConfigContext();
 
@@ -98,6 +99,7 @@ export const CustomFields = memo<Props>(({ validate, dataStreams = [] }) => {
       >
         <EuiFlexGroup>
           <EuiFlexItem>
+            {children}
             {!isEditable && (
               <EuiFormRow
                 label={

x-pack/plugins/uptime/public/components/fleet_package/hooks/use_policy.ts

@@ -54,12 +54,12 @@ export const defaultConfig: PolicyConfig = {
   },
 };
 
-/**
- * Exports Synthetics-specific package policy instructions
- * for use in the Ingest app create / edit package policy
- */
-export const usePolicy = (name: string) => {
-  const { isTLSEnabled, isZipUrlTLSEnabled } = usePolicyConfigContext();
+export const usePolicy = (fleetPolicyName: string = '') => {
+  const {
+    isTLSEnabled,
+    isZipUrlTLSEnabled,
+    name: monitorName, // the monitor name can come from two different places, either from fleet or from uptime
+  } = usePolicyConfigContext();
   const { fields: httpSimpleFields } = useHTTPSimpleFieldsContext();
   const { fields: tcpSimpleFields } = useTCPSimpleFieldsContext();
   const { fields: icmpSimpleFields } = useICMPSimpleFieldsContext();
@@ -77,6 +77,7 @@ export const usePolicy = (name: string) => {
     [isTLSEnabled, isZipUrlTLSEnabled]
   );
 
+  /* TODO add locations to policy config for synthetics service */
   const policyConfig: PolicyConfig = useMemo(
     () => ({
       [DataStream.HTTP]: {
@@ -87,7 +88,7 @@ export const usePolicy = (name: string) => {
           ...httpSimpleFields[ConfigKeys.METADATA],
           ...metadata,
         },
-        [ConfigKeys.NAME]: name,
+        [ConfigKeys.NAME]: fleetPolicyName || monitorName,
       } as HTTPFields,
       [DataStream.TCP]: {
         ...tcpSimpleFields,
@@ -97,11 +98,11 @@ export const usePolicy = (name: string) => {
           ...tcpSimpleFields[ConfigKeys.METADATA],
           ...metadata,
         },
-        [ConfigKeys.NAME]: name,
+        [ConfigKeys.NAME]: fleetPolicyName || monitorName,
       } as TCPFields,
       [DataStream.ICMP]: {
         ...icmpSimpleFields,
-        [ConfigKeys.NAME]: name,
+        [ConfigKeys.NAME]: fleetPolicyName || monitorName,
       } as ICMPFields,
       [DataStream.BROWSER]: {
         ...browserSimpleFields,
@@ -110,7 +111,7 @@ export const usePolicy = (name: string) => {
           ...browserSimpleFields[ConfigKeys.METADATA],
           ...metadata,
         },
-        [ConfigKeys.NAME]: name,
+        [ConfigKeys.NAME]: fleetPolicyName || monitorName,
       } as BrowserFields,
     }),
     [
@@ -123,7 +124,8 @@ export const usePolicy = (name: string) => {
       browserSimpleFields,
       browserAdvancedFields,
       tlsFields,
-      name,
+      fleetPolicyName,
+      monitorName,
     ]
   );
 

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

@@ -8,14 +8,7 @@
 import React, { memo } from 'react';
 import { PackagePolicyCreateExtensionComponentProps } from '../../../../fleet/public';
 import { SyntheticsPolicyCreateExtension } from './synthetics_policy_create_extension';
-import {
-  PolicyConfigContextProvider,
-  TCPContextProvider,
-  ICMPSimpleFieldsContextProvider,
-  HTTPContextProvider,
-  BrowserContextProvider,
-  TLSFieldsContextProvider,
-} from './contexts';
+import { SyntheticsProviders } from './contexts';
 
 /**
  * Exports Synthetics-specific package policy instructions
@@ -24,19 +17,9 @@ import {
 export const SyntheticsPolicyCreateExtensionWrapper =
   memo<PackagePolicyCreateExtensionComponentProps>(({ newPolicy, onChange }) => {
     return (
-      <PolicyConfigContextProvider>
-        <HTTPContextProvider>
-          <TCPContextProvider>
-            <TLSFieldsContextProvider>
-              <ICMPSimpleFieldsContextProvider>
-                <BrowserContextProvider>
-                  <SyntheticsPolicyCreateExtension newPolicy={newPolicy} onChange={onChange} />
-                </BrowserContextProvider>
-              </ICMPSimpleFieldsContextProvider>
-            </TLSFieldsContextProvider>
-          </TCPContextProvider>
-        </HTTPContextProvider>
-      </PolicyConfigContextProvider>
+      <SyntheticsProviders>
+        <SyntheticsPolicyCreateExtension newPolicy={newPolicy} onChange={onChange} />
+      </SyntheticsProviders>
     );
   });
 SyntheticsPolicyCreateExtensionWrapper.displayName = 'SyntheticsPolicyCreateExtensionWrapper';

x-pack/plugins/uptime/public/components/monitor_management/formatters/browser.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 { BrowserFields, ConfigKeys } from '../../fleet_package/types';
+import { Formatter, commonFormatters, objectFormatter, arrayFormatter } from './common';
+
+export type BrowserFormatMap = Record<keyof BrowserFields, Formatter>;
+
+export const browserFormatters: BrowserFormatMap = {
+  [ConfigKeys.METADATA]: (fields) => objectFormatter(fields[ConfigKeys.METADATA]),
+  [ConfigKeys.SOURCE_ZIP_URL]: null,
+  [ConfigKeys.SOURCE_ZIP_USERNAME]: null,
+  [ConfigKeys.SOURCE_ZIP_PASSWORD]: null,
+  [ConfigKeys.SOURCE_ZIP_FOLDER]: null,
+  [ConfigKeys.SOURCE_ZIP_PROXY_URL]: null,
+  [ConfigKeys.SOURCE_INLINE]: null,
+  [ConfigKeys.PARAMS]: null,
+  [ConfigKeys.SCREENSHOTS]: null,
+  [ConfigKeys.SYNTHETICS_ARGS]: (fields) => null,
+  [ConfigKeys.ZIP_URL_TLS_CERTIFICATE_AUTHORITIES]: null,
+  [ConfigKeys.ZIP_URL_TLS_CERTIFICATE]: null,
+  [ConfigKeys.ZIP_URL_TLS_KEY]: null,
+  [ConfigKeys.ZIP_URL_TLS_KEY_PASSPHRASE]: null,
+  [ConfigKeys.ZIP_URL_TLS_VERIFICATION_MODE]: null,
+  [ConfigKeys.ZIP_URL_TLS_VERSION]: (fields) =>
+    arrayFormatter(fields[ConfigKeys.ZIP_URL_TLS_VERSION]),
+  [ConfigKeys.JOURNEY_FILTERS_MATCH]: null,
+  [ConfigKeys.JOURNEY_FILTERS_TAGS]: null,
+  [ConfigKeys.IGNORE_HTTPS_ERRORS]: null,
+  ...commonFormatters,
+};