Skip to content

Commit

Permalink
[Synthetics UI] Add or edit a monitor (#132204)
Browse files Browse the repository at this point in the history
* add basic form setup

* add validation

* add edit flow

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

* Delete context.tsx

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* add locations

* update schedule field

* adjust script recorder fields

* adjust disclaimer to only show when using a service location

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* adjust edit flow

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* add Kibana space

* adjust Kibana space logic

* add throttling

* update content

* adjust hrefs

* adjust content

* adjust types

* add editing

* adjust monitor validation tests

* fix integration tests

* adjust tests

* adjust content

* add source field tests

* add tests

* add legacy validation

* rename file

* adjust legacy components

* add tests

* update tests

* update content

* adjust types

* adjust routes

* remove console logs

* adjust types

* update tests

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

* add Playwright link

* add placeholder

* update getting started page link

* add monitor details link

* adjust content

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/uploader.tsx

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

* Apply suggestions from code review

* Update x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx

* Update x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx

* fix jest

* adjust tests

* renaming

* move exported type

* move hook

* adjust file structure

* adjust test

* move hook

* adjust test

* add script recorder button

* adjust tests

* adjust tests

* adjust validation

* add ui keys to skip

* i18n misses

* move text assertion box down

* adjust content

* adjust validation

* adjust helpers

* align connection profile field baseline

* do not clear out url for single step monitors

* adjust defaults

* adjust types

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/uploader.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/steps/step_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/steps/step_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/field_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/steps/step_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/steps/step_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/field_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* Update x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/field_config.tsx

Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>

* merge edited monitor

* add Loading spinners

* update content

* adjust errors

* adjust types

* adjust tests

* adjust types

* merge edited monitor settings

* adjust tests

* adjust types

* subscribe to dirty fields

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: shahzad31 <shahzad.muhammad@elastic.co>
Co-authored-by: Colleen McGinnis <colleen.j.mcginnis@gmail.com>
  • Loading branch information
4 people committed Aug 24, 2022
1 parent 6ad1d1d commit 7a10739
Show file tree
Hide file tree
Showing 89 changed files with 6,228 additions and 125 deletions.
11 changes: 10 additions & 1 deletion x-pack/plugins/synthetics/common/constants/monitor_defaults.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
BrowserSimpleFields,
CommonFields,
DataStream,
FormMonitorType,
HTTPAdvancedFields,
HTTPMethod,
HTTPSimpleFields,
Expand All @@ -31,6 +32,7 @@ export const DEFAULT_NAMESPACE_STRING = 'default';

export const DEFAULT_COMMON_FIELDS: CommonFields = {
[ConfigKey.MONITOR_TYPE]: DataStream.HTTP,
[ConfigKey.FORM_MONITOR_TYPE]: FormMonitorType.MULTISTEP,
[ConfigKey.ENABLED]: true,
[ConfigKey.SCHEDULE]: {
number: '3',
Expand Down Expand Up @@ -85,13 +87,15 @@ export const DEFAULT_BROWSER_SIMPLE_FIELDS: BrowserSimpleFields = {
[ConfigKey.SOURCE_ZIP_PASSWORD]: '',
[ConfigKey.SOURCE_ZIP_FOLDER]: '',
[ConfigKey.SOURCE_ZIP_PROXY_URL]: '',
[ConfigKey.TEXT_ASSERTION]: '',
[ConfigKey.ZIP_URL_TLS_CERTIFICATE_AUTHORITIES]: undefined,
[ConfigKey.ZIP_URL_TLS_CERTIFICATE]: undefined,
[ConfigKey.ZIP_URL_TLS_KEY]: undefined,
[ConfigKey.ZIP_URL_TLS_KEY_PASSPHRASE]: undefined,
[ConfigKey.ZIP_URL_TLS_VERIFICATION_MODE]: undefined,
[ConfigKey.ZIP_URL_TLS_VERSION]: undefined,
[ConfigKey.URLS]: '',
[ConfigKey.FORM_MONITOR_TYPE]: FormMonitorType.MULTISTEP,
};

export const DEFAULT_HTTP_SIMPLE_FIELDS: HTTPSimpleFields = {
Expand All @@ -102,6 +106,7 @@ export const DEFAULT_HTTP_SIMPLE_FIELDS: HTTPSimpleFields = {
[ConfigKey.URLS]: '',
[ConfigKey.MAX_REDIRECTS]: '0',
[ConfigKey.MONITOR_TYPE]: DataStream.HTTP,
[ConfigKey.FORM_MONITOR_TYPE]: FormMonitorType.HTTP,
};

export const DEFAULT_HTTP_ADVANCED_FIELDS: HTTPAdvancedFields = {
Expand All @@ -127,6 +132,7 @@ export const DEFAULT_ICMP_SIMPLE_FIELDS: ICMPSimpleFields = {
[ConfigKey.HOSTS]: '',
[ConfigKey.MONITOR_TYPE]: DataStream.ICMP,
[ConfigKey.WAIT]: '1',
[ConfigKey.FORM_MONITOR_TYPE]: FormMonitorType.ICMP,
};

export const DEFAULT_TCP_SIMPLE_FIELDS: TCPSimpleFields = {
Expand All @@ -136,6 +142,7 @@ export const DEFAULT_TCP_SIMPLE_FIELDS: TCPSimpleFields = {
},
[ConfigKey.HOSTS]: '',
[ConfigKey.MONITOR_TYPE]: DataStream.TCP,
[ConfigKey.FORM_MONITOR_TYPE]: FormMonitorType.TCP,
};

export const DEFAULT_TCP_ADVANCED_FIELDS: TCPAdvancedFields = {
Expand Down Expand Up @@ -165,7 +172,9 @@ export const DEFAULT_FIELDS: MonitorDefaults = {
...DEFAULT_TCP_ADVANCED_FIELDS,
...DEFAULT_TLS_FIELDS,
},
[DataStream.ICMP]: DEFAULT_ICMP_SIMPLE_FIELDS,
[DataStream.ICMP]: {
...DEFAULT_ICMP_SIMPLE_FIELDS,
},
[DataStream.BROWSER]: {
...DEFAULT_BROWSER_SIMPLE_FIELDS,
...DEFAULT_BROWSER_ADVANCED_FIELDS,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export enum ConfigKey {
CUSTOM_HEARTBEAT_ID = 'custom_heartbeat_id',
CONFIG_ID = 'config_id',
ENABLED = 'enabled',
FORM_MONITOR_TYPE = 'form_monitor_type',
HOSTS = 'hosts',
IGNORE_HTTPS_ERRORS = 'ignore_https_errors',
MONITOR_SOURCE_TYPE = 'origin',
Expand Down Expand Up @@ -53,6 +54,7 @@ export enum ConfigKey {
SOURCE_ZIP_PROXY_URL = 'source.zip_url.proxy_url',
PROJECT_ID = 'project_id',
SYNTHETICS_ARGS = 'synthetics_args',
TEXT_ASSERTION = 'playwright_text_assertion',
TLS_CERTIFICATE_AUTHORITIES = 'ssl.certificate_authorities',
TLS_CERTIFICATE = 'ssl.certificate',
TLS_KEY = 'ssl.key',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,5 +77,6 @@ export const browserFormatters: BrowserFormatMap = {
[ConfigKey.PLAYWRIGHT_OPTIONS]: null,
[ConfigKey.CUSTOM_HEARTBEAT_ID]: null,
[ConfigKey.ORIGINAL_SPACE]: null,
[ConfigKey.TEXT_ASSERTION]: null,
...commonFormatters,
};
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const commonFormatters: CommonFormatMap = {
[ConfigKey.NAMESPACE]: null,
[ConfigKey.REVISION]: null,
[ConfigKey.MONITOR_SOURCE_TYPE]: null,
[ConfigKey.FORM_MONITOR_TYPE]: null,
};

export const arrayToJsonFormatter = (value: string[] = []) =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,3 +126,13 @@ export enum SourceType {
}

export const SourceTypeCodec = tEnum<SourceType>('SourceType', SourceType);

export enum FormMonitorType {
SINGLE = 'single',
MULTISTEP = 'multistep',
HTTP = 'http',
TCP = 'tcp',
ICMP = 'icmp',
}

export const FormMonitorTypeCodec = tEnum<FormMonitorType>('FormMonitorType', FormMonitorType);
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import {
DataStream,
DataStreamCodec,
FormMonitorTypeCodec,
ModeCodec,
ResponseBodyIndexPolicyCodec,
ScheduleUnitCodec,
Expand Down Expand Up @@ -79,6 +80,7 @@ export const CommonFieldsCodec = t.intersection([
[ConfigKey.LOCATIONS]: MonitorServiceLocationsCodec,
}),
t.partial({
[ConfigKey.FORM_MONITOR_TYPE]: FormMonitorTypeCodec,
[ConfigKey.TIMEOUT]: t.union([t.string, t.null]),
[ConfigKey.REVISION]: t.number,
[ConfigKey.MONITOR_SOURCE_TYPE]: SourceTypeCodec,
Expand Down Expand Up @@ -220,6 +222,7 @@ export const EncryptedBrowserSimpleFieldsCodec = t.intersection([
[ConfigKey.PROJECT_ID]: t.string,
[ConfigKey.ORIGINAL_SPACE]: t.string,
[ConfigKey.CUSTOM_HEARTBEAT_ID]: t.string,
[ConfigKey.TEXT_ASSERTION]: t.string,
}),
]),
ZipUrlTLSFieldsCodec,
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/synthetics/e2e/journeys/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
export * from './alerts';

export * from './synthetics';
export * from './alerts';
export * from './data_view_permissions';
export * from './uptime.journey';
export * from './step_duration.journey';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
/*
* 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 uuid from 'uuid';
import { journey, step, expect, Page } from '@elastic/synthetics';
import { FormMonitorType } from '../../../common/runtime_types/monitor_management';
import { syntheticsAppPageProvider } from '../../page_objects/synthetics_app';

const customLocation = process.env.SYNTHETICS_TEST_LOCATION;

const basicMonitorDetails = {
location: customLocation || 'US Central',
schedule: '3',
};
const httpName = `http monitor ${uuid.v4()}`;
const icmpName = `icmp monitor ${uuid.v4()}`;
const tcpName = `tcp monitor ${uuid.v4()}`;
const browserName = `browser monitor ${uuid.v4()}`;
const browserRecorderName = `browser monitor recorder ${uuid.v4()}`;
const apmServiceName = 'apmServiceName';

const configuration = {
[FormMonitorType.HTTP]: {
monitorType: FormMonitorType.HTTP,
monitorConfig: {
...basicMonitorDetails,
name: httpName,
url: 'https://elastic.co',
locations: [basicMonitorDetails.location],
apmServiceName,
},
monitorListDetails: {
...basicMonitorDetails,
name: httpName,
},
monitorEditDetails: [
['[data-test-subj=syntheticsMonitorConfigSchedule]', '3'],
['[data-test-subj=syntheticsMonitorConfigName]', httpName],
['[data-test-subj=syntheticsMonitorConfigURL]', 'https://elastic.co'],
['[data-test-subj=syntheticsMonitorConfigAPMServiceName]', apmServiceName],
],
},
[FormMonitorType.TCP]: {
monitorType: FormMonitorType.TCP,
monitorConfig: {
...basicMonitorDetails,
name: tcpName,
host: 'smtp.gmail.com:587',
locations: [basicMonitorDetails.location],
apmServiceName,
},
monitorListDetails: {
...basicMonitorDetails,
name: tcpName,
},
monitorEditDetails: [
['[data-test-subj=syntheticsMonitorConfigSchedule]', '3'],
['[data-test-subj=syntheticsMonitorConfigName]', tcpName],
['[data-test-subj=syntheticsMonitorConfigHost]', 'smtp.gmail.com:587'],
['[data-test-subj=syntheticsMonitorConfigAPMServiceName]', apmServiceName],
],
},
[FormMonitorType.ICMP]: {
monitorType: FormMonitorType.ICMP,
monitorConfig: {
...basicMonitorDetails,
name: icmpName,
host: '1.1.1.1',
locations: [basicMonitorDetails.location],
apmServiceName,
},
monitorListDetails: {
...basicMonitorDetails,
name: icmpName,
},
monitorEditDetails: [
['[data-test-subj=syntheticsMonitorConfigSchedule]', '3'],
['[data-test-subj=syntheticsMonitorConfigName]', icmpName],
['[data-test-subj=syntheticsMonitorConfigHost]', '1.1.1.1'],
['[data-test-subj=syntheticsMonitorConfigAPMServiceName]', apmServiceName],
// name: httpName,
],
},
[FormMonitorType.MULTISTEP]: {
monitorType: FormMonitorType.MULTISTEP,
monitorConfig: {
...basicMonitorDetails,
schedule: '10',
name: browserName,
inlineScript: 'step("test step", () => {})',
locations: [basicMonitorDetails.location],
apmServiceName,
},
monitorListDetails: {
...basicMonitorDetails,
schedule: '10',
name: browserName,
},
monitorEditDetails: [
['[data-test-subj=syntheticsMonitorConfigSchedule]', '10'],
['[data-test-subj=syntheticsMonitorConfigName]', browserName],
['[data-test-subj=codeEditorContainer] textarea', 'step("test step", () => {})'],
['[data-test-subj=syntheticsMonitorConfigAPMServiceName]', apmServiceName],
],
},
[`${FormMonitorType.MULTISTEP}__recorder`]: {
monitorType: FormMonitorType.MULTISTEP,
monitorConfig: {
...basicMonitorDetails,
schedule: '10',
name: browserRecorderName,
recorderScript: 'step("test step", () => {})',
locations: [basicMonitorDetails.location],
apmServiceName: 'Sample APM Service',
},
monitorListDetails: {
...basicMonitorDetails,
schedule: '10',
name: browserRecorderName,
},
monitorEditDetails: [
['[data-test-subj=syntheticsMonitorConfigSchedule]', '10'],
['[data-test-subj=syntheticsMonitorConfigName]', browserRecorderName],
['[data-test-subj=codeEditorContainer] textarea', 'step("test step", () => {})'],
// name: httpName,
],
},
};

const createMonitorJourney = ({
monitorName,
monitorType,
monitorConfig,
monitorListDetails,
monitorEditDetails,
}: {
monitorName: string;
monitorType: FormMonitorType;
monitorConfig: Record<string, string | string[]>;
monitorListDetails: Record<string, string>;
monitorEditDetails: Array<[string, string]>;
}) => {
journey(
`Synthetics - add monitor - ${monitorName}`,
async ({ page, params }: { page: Page; params: any }) => {
const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });

step('Go to monitor management', async () => {
await syntheticsApp.navigateToMonitorManagement();
});

step('login to Kibana', async () => {
await syntheticsApp.loginToKibana();
const invalid = await page.locator(
`text=Username or password is incorrect. Please try again.`
);
expect(await invalid.isVisible()).toBeFalsy();
});

step('Ensure all montiors are deleted', async () => {
await syntheticsApp.navigateToMonitorManagement();
await syntheticsApp.waitForLoadingToFinish();
const isSuccessful = await syntheticsApp.deleteMonitors();
expect(isSuccessful).toBeTruthy();
});

step(`create ${monitorName}`, async () => {
await syntheticsApp.navigateToAddMonitor();
await syntheticsApp.createMonitor({ monitorConfig, monitorType });
const isSuccessful = await syntheticsApp.confirmAndSave();
expect(isSuccessful).toBeTruthy();
});

step(`view ${monitorName} details in Monitor Management UI`, async () => {
await syntheticsApp.navigateToMonitorManagement();
const hasFailure = await syntheticsApp.findMonitorConfiguration(monitorListDetails);
expect(hasFailure).toBeFalsy();
});

step(`edit ${monitorName}`, async () => {
await syntheticsApp.navigateToEditMonitor();
await syntheticsApp.findByText(monitorListDetails.location);
const hasFailure = await syntheticsApp.findEditMonitorConfiguration(
monitorEditDetails,
monitorType
);
expect(hasFailure).toBeFalsy();
});

step('delete monitor', async () => {
await syntheticsApp.navigateToMonitorManagement();
await syntheticsApp.findByText('Monitor name');
const isSuccessful = await syntheticsApp.deleteMonitors();
expect(isSuccessful).toBeTruthy();
});
}
);
};

Object.values(configuration).forEach((config) => {
createMonitorJourney({
monitorType: config.monitorType,
monitorName: `${config.monitorConfig.name} monitor`,
monitorConfig: config.monitorConfig,
monitorListDetails: config.monitorListDetails,
monitorEditDetails: config.monitorEditDetails as Array<[string, string]>,
});
});
1 change: 1 addition & 0 deletions x-pack/plugins/synthetics/e2e/journeys/synthetics/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
*/

export * from './getting_started.journey';
export * from './add_monitor.journey';
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { Page } from '@elastic/synthetics';
import { expect, Page } from '@elastic/synthetics';
import { getQuerystring } from '@kbn/observability-plugin/e2e/utils';
import { DataStream } from '../../common/runtime_types/monitor_management';
import { loginPageProvider } from './login';
Expand Down Expand Up @@ -107,6 +107,8 @@ export function monitorManagementPageProvider({
},

async clickAddMonitor() {
const isEnabled = await this.checkIsEnabled();
expect(isEnabled).toBe(true);
await page.click('text=Add monitor');
},

Expand Down

0 comments on commit 7a10739

Please sign in to comment.