[Synthetics] Add Enabled toggle to monitor add/edit form (#140125)

* Add enabled feature to add/edit page.

* Update tests for new logic.

* Move enabled form field to bottom of group.

* Change copy to correspond to updated description.

* Fix punctuation.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Justin Kambic 2022-09-13 00:04:04 -04:00 committed by GitHub
parent 49d49b67a1
commit e838bb6dc8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 102 additions and 71 deletions

View file

@ -411,6 +411,28 @@ export const FIELD: Record<string, FieldMeta> = {
};
},
},
[ConfigKey.ENABLED]: {
fieldKey: ConfigKey.ENABLED,
component: EuiSwitch,
label: i18n.translate('xpack.synthetics.monitorConfig.enabled.label', {
defaultMessage: 'Enable Monitor',
}),
controlled: true,
props: ({ isEdit, setValue }) => ({
id: 'syntheticsMontiorConfigIsEnabled',
label: isEdit
? i18n.translate('xpack.synthetics.monitorConfig.edit.enabled.label', {
defaultMessage: 'Disabled monitors do not run tests.',
})
: i18n.translate('xpack.synthetics.monitorConfig.create.enabled.label', {
defaultMessage:
'Disabled monitors do not run tests. You can create a disabled monitor and enable it later.',
}),
onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(ConfigKey.ENABLED, !!event.target.checked);
},
}),
},
[ConfigKey.TAGS]: {
fieldKey: ConfigKey.TAGS,
component: ComboBox,

View file

@ -149,6 +149,7 @@ export const FORM_CONFIG: FieldConfig = {
FIELD[ConfigKey.SCHEDULE],
FIELD[ConfigKey.MAX_REDIRECTS],
FIELD[ConfigKey.TIMEOUT],
FIELD[ConfigKey.ENABLED],
],
advanced: [
DEFAULT_DATA_OPTIONS,
@ -166,6 +167,7 @@ export const FORM_CONFIG: FieldConfig = {
FIELD[ConfigKey.LOCATIONS],
FIELD[ConfigKey.SCHEDULE],
FIELD[ConfigKey.TIMEOUT],
FIELD[ConfigKey.ENABLED],
],
advanced: [
DEFAULT_DATA_OPTIONS,
@ -181,6 +183,7 @@ export const FORM_CONFIG: FieldConfig = {
FIELD[ConfigKey.LOCATIONS],
FIELD[ConfigKey.SCHEDULE],
FIELD[ConfigKey.THROTTLING_CONFIG],
FIELD[ConfigKey.ENABLED],
],
step3: [FIELD[ConfigKey.SOURCE_INLINE]],
scriptEdit: [FIELD[ConfigKey.SOURCE_INLINE]],
@ -205,6 +208,7 @@ export const FORM_CONFIG: FieldConfig = {
FIELD[ConfigKey.LOCATIONS],
FIELD[ConfigKey.SCHEDULE],
FIELD[ConfigKey.THROTTLING_CONFIG],
FIELD[ConfigKey.ENABLED],
],
advanced: [
{
@ -227,6 +231,7 @@ export const FORM_CONFIG: FieldConfig = {
FIELD[ConfigKey.SCHEDULE],
FIELD[ConfigKey.WAIT],
FIELD[ConfigKey.TIMEOUT],
FIELD[ConfigKey.ENABLED],
],
advanced: [DEFAULT_DATA_OPTIONS],
},

View file

@ -8,81 +8,85 @@
import { format } from './formatter';
describe('format', () => {
const formValues = {
type: 'http',
form_monitor_type: 'http',
enabled: true,
schedule: {
number: '3',
unit: 'm',
},
'service.name': '',
tags: [],
timeout: '16',
name: 'Sample name',
locations: [
{
id: 'us_central',
isServiceManaged: true,
let formValues: Record<string, unknown>;
beforeEach(() => {
formValues = {
type: 'http',
form_monitor_type: 'http',
enabled: true,
schedule: {
number: '3',
unit: 'm',
},
],
namespace: 'default',
origin: 'ui',
__ui: {
is_tls_enabled: false,
},
urls: 'sample url',
max_redirects: '0',
password: '',
proxy_url: '',
'check.response.body.negative': [],
'check.response.body.positive': [],
'response.include_body': 'on_error',
'check.response.headers': {},
'response.include_headers': true,
'check.response.status': [],
'check.request.body': {
value: '',
type: 'text',
},
'check.request.headers': {},
'check.request.method': 'GET',
username: '',
'ssl.certificate_authorities': '',
'ssl.certificate': '',
'ssl.key': '',
'ssl.key_passphrase': '',
'ssl.verification_mode': 'full',
'ssl.supported_protocols': ['TLSv1.1', 'TLSv1.2', 'TLSv1.3'],
isTLSEnabled: false,
service: {
name: '',
},
check: {
request: {
method: 'GET',
headers: {},
body: {
type: 'text',
value: '',
'service.name': '',
tags: [],
timeout: '16',
name: 'Sample name',
locations: [
{
id: 'us_central',
isServiceManaged: true,
},
],
namespace: 'default',
origin: 'ui',
__ui: {
is_tls_enabled: false,
},
urls: 'sample url',
max_redirects: '0',
password: '',
proxy_url: '',
'check.response.body.negative': [],
'check.response.body.positive': [],
'response.include_body': 'on_error',
'check.response.headers': {},
'response.include_headers': true,
'check.response.status': [],
'check.request.body': {
value: '',
type: 'text',
},
'check.request.headers': {},
'check.request.method': 'GET',
username: '',
'ssl.certificate_authorities': '',
'ssl.certificate': '',
'ssl.key': '',
'ssl.key_passphrase': '',
'ssl.verification_mode': 'full',
'ssl.supported_protocols': ['TLSv1.1', 'TLSv1.2', 'TLSv1.3'],
isTLSEnabled: false,
service: {
name: '',
},
check: {
request: {
method: 'GET',
headers: {},
body: {
type: 'text',
value: '',
},
},
response: {
status: [],
headers: {},
body: {
positive: [],
negative: [],
},
},
},
response: {
status: [],
headers: {},
body: {
positive: [],
negative: [],
},
include_headers: true,
include_body: 'on_error',
},
},
response: {
include_headers: true,
include_body: 'on_error',
},
};
};
});
it('correctly formats form fields to monitor type', () => {
it.each([[true], [false]])('correctly formats form fields to monitor type', (enabled) => {
formValues.enabled = enabled;
expect(format(formValues)).toEqual({
__ui: {
is_tls_enabled: false,
@ -98,7 +102,7 @@ describe('format', () => {
'check.response.body.positive': [],
'check.response.headers': {},
'check.response.status': [],
enabled: true,
enabled,
form_monitor_type: 'http',
locations: [
{

View file

@ -15,7 +15,7 @@ export const formatter = (fields: Record<string, any>) => {
Object.keys(defaults).map((key) => {
/* split key names on dot to handle dot notation fields,
* which are changed to nested fields by react-hook-form */
monitorFields[key] = get(fields, key.split('.')) || defaults[key as ConfigKey];
monitorFields[key] = get(fields, key.split('.')) ?? defaults[key as ConfigKey];
});
return monitorFields as MonitorFields;
};