@ -1,36 +1,32 @@
< template >
< div class = "monitor-check mb-4" >
< div >
< select id = "type" :value ="monitorCheck.type" : class = "{'form-select': true, 'mb-1': !!monitorCheck.type}" @input ="changeType($event.target.value)" required >
< option value = "HTTP_STATUS_CODE_SHOULD_EQUAL" >
{ { $t ( "MonitorCheckTypeHttpStatusCodeShouldEqual" ) } }
< / option >
< option value = "RESPONSE_SHOULD_CONTAIN_TEXT" >
{ { $t ( "MonitorCheckTypeResponseShouldContainText" ) } }
< / option >
< option value = "RESPONSE_SHOULD_NOT_CONTAIN_TEXT" >
{ { $t ( "MonitorCheckTypeResponseShouldNotContainText" ) } }
< / option >
< option value = "RESPONSE_SHOULD_MATCH_REGEX" >
{ { $t ( "MonitorCheckTypeResponseShouldMatchRegex" ) } }
< / option >
< option value = "RESPONSE_SHOULD_NOT_MATCH_REGEX" >
{ { $t ( "MonitorCheckTypeResponseShouldNotMatchRegex" ) } }
< / option >
< option value = "RESPONSE_SELECTOR_SHOULD_EQUAL" >
{ { $t ( "MonitorCheckTypeResponseSelectorShouldEqual" ) } }
< / option >
< option value = "RESPONSE_SELECTOR_SHOULD_NOT_EQUAL" >
{ { $t ( "MonitorCheckTypeResponseSelectorShouldNotEqual" ) } }
< / option >
< option value = "RESPONSE_SELECTOR_SHOULD_MATCH_REGEX" >
{ { $t ( "MonitorCheckTypeResponseSelectorShouldMatchRegex" ) } }
< / option >
< option value = "RESPONSE_SELECTOR_SHOULD_NOT_MATCH_REGEX" >
{ { $t ( "MonitorCheckTypeResponseSelectorShouldNotMatchRegex" ) } }
< / option >
< / select >
< div v-if ="monitorCheck.type === 'HTTP_STATUS_CODE_SHOULD_EQUAL'" >
< div class = "side-by-side" >
< select id = "invert-check" :value ="invertedTypeOption" : class = "{'form-select': true, 'mb-1': !!monitorCheck.type, 'me-1': true}"
@ input = "changeTypeInversion($event.target.value)" required >
< option value = "SHOULD" > { { $t ( "MonitorCheckTypeShould" ) } } < / option >
< option value = "SHOULD_NOT" > { { $t ( "MonitorCheckTypeShouldNot" ) } } < / option >
< / select >
< select id = "type" :value ="monitorType" : class = "{'form-select': true, 'mb-1': !!monitorCheck.type}"
@ input = "changeType($event.target.value)" required >
< option value = "HTTP_STATUS_CODE_SHOULD_EQUAL" >
{ { $t ( "MonitorCheckTypeHttpStatusCodeShouldEqual" ) } }
< / option >
< option value = "RESPONSE_SHOULD_CONTAIN_TEXT" >
{ { $t ( "MonitorCheckTypeResponseShouldContainText" ) } }
< / option >
< option value = "RESPONSE_SHOULD_MATCH_REGEX" >
{ { $t ( "MonitorCheckTypeResponseShouldMatchRegex" ) } }
< / option >
< option value = "RESPONSE_SELECTOR_SHOULD_EQUAL" >
{ { $t ( "MonitorCheckTypeResponseSelectorShouldEqual" ) } }
< / option >
< option value = "RESPONSE_SELECTOR_SHOULD_MATCH_REGEX" >
{ { $t ( "MonitorCheckTypeResponseSelectorShouldMatchRegex" ) } }
< / option >
< / select >
< / div >
< div v-if ="monitorType === 'HTTP_STATUS_CODE_SHOULD_EQUAL'" >
< VueMultiselect
id = "acceptedStatusCodes"
: options = "acceptedStatusCodeOptions"
@ -46,29 +42,30 @@
@ update : model - value = "changeValue"
> < / VueMultiselect >
< / div >
< div v-if ="monitorCheck.type === 'RESPONSE_SHOULD_CONTAIN_TEXT' || monitorCheck.type === 'RESPONSE_SHOULD_NOT_CONTAIN_TEXT'" >
< input :value ="monitorCheck.value" type = "text" class = "form-control" required :placeholder ="$t('MonitorCheckValuePlaceholder')" @input ="changeValue($event.target.value)" >
< div v-if ="monitorType === 'RESPONSE_SHOULD_CONTAIN_TEXT'" >
< input :value ="monitorCheck.value" type = "text" class = "form-control" required :placeholder ="$t('MonitorCheckValuePlaceholder')"
@ input = "changeValue($event.target.value)" >
< / div >
< div v-if ="monitorCheck.type === 'RESPONSE_SHOULD_MA TCH_REGEX' || monitorCheck.t ype === 'RESPONSE_SHOULD_NOT _MATCH_REGEX'" >
< div v-if ="monitorType === 'RESPONSE_SHOULD_MATCH_REGEX'" >
< input type = "text" class = "form-control" required :value ="monitorCheck.value"
: placeholder = "$t('Regexp, Example: [a-z0-9.]+@gmail\.com')" @ input = "changeValue($event.target.value)"
>
< / div >
< div
v - if = "monitorCheck.type === 'RESPONSE_SELECTOR_SHOULD_EQUAL' || monitorCheck.type === 'RESPONSE_SELECTOR_SHOULD_NOT_EQUAL'"
>
< input : value = "monitorCheck?.value?.selectorPath || ''" type = "text" class = "form-control mb-1" required : placeholder = "$t('Selector, Example: customer.address.street')"
< div v-if ="monitorType === 'RESPONSE_SELECTOR_SHOULD_EQUAL'" >
< input : value = "monitorCheck?.value?.selectorPath || ''" type = "text" class = "form-control mb-1" required
: placeholder = "$t('Selector, Example: customer.address.street')"
@ input = "changeSelectorPath($event.target.value)"
>
< input : value = "monitorCheck?.value?.selectorValue || ''" type = "text" class = "form-control" required : placeholder = "$t('Value, Example: First street')" @input ="changeSelectorValue($event.target.value)" >
< input : value = "monitorCheck?.value?.selectorValue || ''" type = "text" class = "form-control" required
: placeholder = "$t('Value, Example: First street')" @ input = "changeSelectorValue($event.target.value)" >
< / div >
< div
v - if = "monitorCheck.type === 'RESPONSE_SELECTOR_SHOULD_MATCH_REGEX' || monitorCheck.type === 'RESPONSE_SELECTOR_SHOULD_NOT_MATCH_REGEX'"
>
< input : value = "monitorCheck?.value?.selectorPath || ''" type = "text" class = "form-control mb-1" required : placeholder = "$t('Selector, Example: customer.contactInfo.email')"
< div v-if ="monitorType === 'RESPONSE_SELECTOR_SHOULD_MATCH_REGEX'" >
< input : value = "monitorCheck?.value?.selectorPath || ''" type = "text" class = "form-control mb-1" required
: placeholder = "$t('Selector, Example: customer.contactInfo.email')"
@ input = "changeSelectorPath($event.target.value)"
>
< input : value = "monitorCheck?.value?.selectorValue || ''" type = "text" class = "form-control" required : placeholder = "$t('Regexp, Example: [a-z0-9.]+@gmail\.com')"
< input : value = "monitorCheck?.value?.selectorValue || ''" type = "text" class = "form-control" required
: placeholder = "$t('Regexp, Example: [a-z0-9.]+@gmail\.com')"
@ input = "changeSelectorValue($event.target.value)"
>
< / div >
@ -81,7 +78,14 @@
< script >
import VueMultiselect from "vue-multiselect" ;
import { MONITOR_CHECK_SELECTOR_TYPES , MONITOR_CHECK_STRING_TYPES } from "../util.ts" ;
import {
MONITOR_CHECK_INVERTED_TYPES ,
MONITOR_CHECK_SELECTOR_TYPES ,
MONITOR_CHECK_STRING_TYPES ,
MONITOR_CHECK_SHOULD ,
MONITOR_CHECK_SHOULD_NOT ,
MONITOR_CHECK_MAP_NORMAL_TO_INVERTED , MONITOR_CHECK_MAP_INVERTED_TO_NORMAL , MONITOR_CHECK_HTTP_CODE_TYPES ,
} from "../util.ts" ;
export default {
components : {
@ -100,6 +104,10 @@ export default {
data ( ) {
return {
acceptedStatusCodeOptions : [ ] ,
/ / C o n t a i n s S H O U L D o r S H O U L D _ N O T
invertedTypeOption : MONITOR_CHECK_SHOULD ,
/ / A l w a y s c o n t a i n s t h e n o r m a l t y p e ( n e v e r t h e N O T v a r i a n t )
monitorType : undefined ,
} ;
} ,
mounted ( ) {
@ -116,13 +124,33 @@ export default {
}
this . acceptedStatusCodeOptions = acceptedStatusCodeOptions ;
if ( this . monitorCheck . type ) {
this . invertedTypeOption = MONITOR_CHECK_INVERTED_TYPES . includes ( this . monitorCheck . type ) ? MONITOR_CHECK_SHOULD_NOT : MONITOR_CHECK_SHOULD ;
this . monitorType = MONITOR_CHECK_MAP_INVERTED_TO_NORMAL [ this . monitorCheck . type ] || this . monitorCheck . type ;
}
} ,
methods : {
deleteMonitorCheck ( ) {
this . $emit ( "delete" ) ;
} ,
changeTypeInversion ( inversionType ) {
this . invertedTypeOption = inversionType ;
this . emitType ( ) ;
} ,
changeType ( type ) {
if ( MONITOR_CHECK_STRING_TYPES . includes ( type ) && MONITOR_CHECK_STRING_TYPES . includes ( this . monitorCheck . type ) ||
this . monitorType = type ;
this . emitType ( ) ;
} ,
/ / C o m b i n e i n v e r t e d T y p e O p t i o n w i t h m o n i t o r T y p e t o p r o d u c e t h e c o m b i n e d t h i s . m o n i t o r C h e c k . t y p e
emitType ( ) {
if ( ! this . monitorType ) {
return ;
}
const type = this . invertedTypeOption === MONITOR_CHECK_SHOULD ? this . monitorType : MONITOR_CHECK_MAP_NORMAL_TO_INVERTED [ this . monitorType ] ;
if ( MONITOR_CHECK_HTTP_CODE_TYPES . includes ( type ) && MONITOR_CHECK_HTTP_CODE_TYPES . includes ( this . monitorCheck . type ) ||
MONITOR_CHECK_STRING_TYPES . includes ( type ) && MONITOR_CHECK_STRING_TYPES . includes ( this . monitorCheck . type ) ||
MONITOR_CHECK_SELECTOR_TYPES . includes ( type ) && MONITOR_CHECK_SELECTOR_TYPES . includes ( this . monitorCheck . type ) ) {
/ / C h e c k v a l u e s t a y s s a m e t y p e ( s t r i n g = > s t r i n g o r o b j e c t = > o b j e c t )
this . $emit ( "change" , {
@ -133,7 +161,7 @@ export default {
/ / C h e c k v a l u e s w i t c h e s ( s t r i n g = > o b j e c t o r o b j e c t = > s t r i n g )
this . $emit ( "change" , {
type ,
value : undefined
value : undefined ,
} ) ;
}
} ,
@ -166,29 +194,51 @@ export default {
< / script >
< style lang = "scss" scoped >
@ import "../assets/vars.scss" ;
. monitor - check {
display : flex ;
input ,
select {
border - radius : 19 px 0 0 19 px ;
}
button {
margin - left : 0.25 rem ;
padding - left : 15 px ;
padding - right : 15 px ;
border - radius : 0 19 px 19 px 0 ;
@ import "../assets/vars.scss" ;
. monitor - check {
display : flex ;
> div : first - child {
width : 100 % ;
}
. side - by - side {
display : flex ;
> select : first - child {
width : 40 % ;
+ select {
border - radius : 0 ;
margin - left : - 1 px ;
}
}
}
input ,
select {
border - radius : 19 px 0 0 19 px ;
& : focus {
z - index : 1 ;
}
}
button {
margin - left : 0.25 rem ;
padding - left : 15 px ;
padding - right : 15 px ;
border - radius : 0 19 px 19 px 0 ;
}
}
}
< / style >
< style lang = "scss" >
. monitor - check {
. multiselect__tags {
border - radius : 19 px 0 0 19 px ;
. monitor - check {
. multiselect__tags {
border - radius : 19 px 0 0 19 px ;
}
}
}
< / style >