|
@ -1,36 +1,32 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="monitor-check mb-4"> |
|
|
<div class="monitor-check mb-4"> |
|
|
<div> |
|
|
<div> |
|
|
<select id="type" :value="monitorCheck.type" :class="{'form-select': true, 'mb-1': !!monitorCheck.type}" @input="changeType($event.target.value)" required> |
|
|
<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"> |
|
|
<option value="HTTP_STATUS_CODE_SHOULD_EQUAL"> |
|
|
{{ $t("MonitorCheckTypeHttpStatusCodeShouldEqual") }} |
|
|
{{ $t("MonitorCheckTypeHttpStatusCodeShouldEqual") }} |
|
|
</option> |
|
|
</option> |
|
|
<option value="RESPONSE_SHOULD_CONTAIN_TEXT"> |
|
|
<option value="RESPONSE_SHOULD_CONTAIN_TEXT"> |
|
|
{{ $t("MonitorCheckTypeResponseShouldContainText") }} |
|
|
{{ $t("MonitorCheckTypeResponseShouldContainText") }} |
|
|
</option> |
|
|
</option> |
|
|
<option value="RESPONSE_SHOULD_NOT_CONTAIN_TEXT"> |
|
|
|
|
|
{{ $t("MonitorCheckTypeResponseShouldNotContainText") }} |
|
|
|
|
|
</option> |
|
|
|
|
|
<option value="RESPONSE_SHOULD_MATCH_REGEX"> |
|
|
<option value="RESPONSE_SHOULD_MATCH_REGEX"> |
|
|
{{ $t("MonitorCheckTypeResponseShouldMatchRegex") }} |
|
|
{{ $t("MonitorCheckTypeResponseShouldMatchRegex") }} |
|
|
</option> |
|
|
</option> |
|
|
<option value="RESPONSE_SHOULD_NOT_MATCH_REGEX"> |
|
|
|
|
|
{{ $t("MonitorCheckTypeResponseShouldNotMatchRegex") }} |
|
|
|
|
|
</option> |
|
|
|
|
|
<option value="RESPONSE_SELECTOR_SHOULD_EQUAL"> |
|
|
<option value="RESPONSE_SELECTOR_SHOULD_EQUAL"> |
|
|
{{ $t("MonitorCheckTypeResponseSelectorShouldEqual") }} |
|
|
{{ $t("MonitorCheckTypeResponseSelectorShouldEqual") }} |
|
|
</option> |
|
|
</option> |
|
|
<option value="RESPONSE_SELECTOR_SHOULD_NOT_EQUAL"> |
|
|
|
|
|
{{ $t("MonitorCheckTypeResponseSelectorShouldNotEqual") }} |
|
|
|
|
|
</option> |
|
|
|
|
|
<option value="RESPONSE_SELECTOR_SHOULD_MATCH_REGEX"> |
|
|
<option value="RESPONSE_SELECTOR_SHOULD_MATCH_REGEX"> |
|
|
{{ $t("MonitorCheckTypeResponseSelectorShouldMatchRegex") }} |
|
|
{{ $t("MonitorCheckTypeResponseSelectorShouldMatchRegex") }} |
|
|
</option> |
|
|
</option> |
|
|
<option value="RESPONSE_SELECTOR_SHOULD_NOT_MATCH_REGEX"> |
|
|
|
|
|
{{ $t("MonitorCheckTypeResponseSelectorShouldNotMatchRegex") }} |
|
|
|
|
|
</option> |
|
|
|
|
|
</select> |
|
|
</select> |
|
|
<div v-if="monitorCheck.type === 'HTTP_STATUS_CODE_SHOULD_EQUAL'"> |
|
|
</div> |
|
|
|
|
|
<div v-if="monitorType === 'HTTP_STATUS_CODE_SHOULD_EQUAL'"> |
|
|
<VueMultiselect |
|
|
<VueMultiselect |
|
|
id="acceptedStatusCodes" |
|
|
id="acceptedStatusCodes" |
|
|
:options="acceptedStatusCodeOptions" |
|
|
:options="acceptedStatusCodeOptions" |
|
@ -46,29 +42,30 @@ |
|
|
@update:model-value="changeValue" |
|
|
@update:model-value="changeValue" |
|
|
></VueMultiselect> |
|
|
></VueMultiselect> |
|
|
</div> |
|
|
</div> |
|
|
<div v-if="monitorCheck.type === 'RESPONSE_SHOULD_CONTAIN_TEXT' || monitorCheck.type === 'RESPONSE_SHOULD_NOT_CONTAIN_TEXT'"> |
|
|
<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)"> |
|
|
<input :value="monitorCheck.value" type="text" class="form-control" required :placeholder="$t('MonitorCheckValuePlaceholder')" |
|
|
|
|
|
@input="changeValue($event.target.value)"> |
|
|
</div> |
|
|
</div> |
|
|
<div v-if="monitorCheck.type === 'RESPONSE_SHOULD_MATCH_REGEX' || monitorCheck.type === 'RESPONSE_SHOULD_NOT_MATCH_REGEX'"> |
|
|
<div v-if="monitorType === 'RESPONSE_SHOULD_MATCH_REGEX'"> |
|
|
<input type="text" class="form-control" required :value="monitorCheck.value" |
|
|
<input type="text" class="form-control" required :value="monitorCheck.value" |
|
|
:placeholder="$t('Regexp, Example: [a-z0-9.]+@gmail\.com')" @input="changeValue($event.target.value)" |
|
|
:placeholder="$t('Regexp, Example: [a-z0-9.]+@gmail\.com')" @input="changeValue($event.target.value)" |
|
|
> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div v-if="monitorType === 'RESPONSE_SELECTOR_SHOULD_EQUAL'"> |
|
|
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')" |
|
|
<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="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> |
|
|
<div |
|
|
<div v-if="monitorType === 'RESPONSE_SELECTOR_SHOULD_MATCH_REGEX'"> |
|
|
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')" |
|
|
<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="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)" |
|
|
@input="changeSelectorValue($event.target.value)" |
|
|
> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
@ -81,7 +78,14 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import VueMultiselect from "vue-multiselect"; |
|
|
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 { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
@ -100,6 +104,10 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
acceptedStatusCodeOptions: [], |
|
|
acceptedStatusCodeOptions: [], |
|
|
|
|
|
// Contains SHOULD or SHOULD_NOT |
|
|
|
|
|
invertedTypeOption: MONITOR_CHECK_SHOULD, |
|
|
|
|
|
// Always contains the normal type (never the NOT variant) |
|
|
|
|
|
monitorType: undefined, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
@ -116,13 +124,33 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.acceptedStatusCodeOptions = acceptedStatusCodeOptions; |
|
|
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: { |
|
|
methods: { |
|
|
deleteMonitorCheck() { |
|
|
deleteMonitorCheck() { |
|
|
this.$emit("delete"); |
|
|
this.$emit("delete"); |
|
|
}, |
|
|
}, |
|
|
|
|
|
changeTypeInversion(inversionType) { |
|
|
|
|
|
this.invertedTypeOption = inversionType; |
|
|
|
|
|
this.emitType(); |
|
|
|
|
|
}, |
|
|
changeType(type) { |
|
|
changeType(type) { |
|
|
if (MONITOR_CHECK_STRING_TYPES.includes(type) && MONITOR_CHECK_STRING_TYPES.includes(this.monitorCheck.type) || |
|
|
this.monitorType = type; |
|
|
|
|
|
this.emitType(); |
|
|
|
|
|
}, |
|
|
|
|
|
// Combine invertedTypeOption with monitorType to produce the combined this.monitorCheck.type |
|
|
|
|
|
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)) { |
|
|
MONITOR_CHECK_SELECTOR_TYPES.includes(type) && MONITOR_CHECK_SELECTOR_TYPES.includes(this.monitorCheck.type)) { |
|
|
// Check value stays same type (string => string or object => object) |
|
|
// Check value stays same type (string => string or object => object) |
|
|
this.$emit("change", { |
|
|
this.$emit("change", { |
|
@ -133,7 +161,7 @@ export default { |
|
|
// Check value switches (string => object or object => string) |
|
|
// Check value switches (string => object or object => string) |
|
|
this.$emit("change", { |
|
|
this.$emit("change", { |
|
|
type, |
|
|
type, |
|
|
value: undefined |
|
|
value: undefined, |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@ -166,14 +194,35 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
@import "../assets/vars.scss"; |
|
|
@import "../assets/vars.scss"; |
|
|
|
|
|
|
|
|
.monitor-check { |
|
|
.monitor-check { |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.side-by-side { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
|
|
> select:first-child { |
|
|
|
|
|
width: 40%; |
|
|
|
|
|
|
|
|
|
|
|
+ select { |
|
|
|
|
|
border-radius: 0; |
|
|
|
|
|
margin-left: -1px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
input, |
|
|
input, |
|
|
select { |
|
|
select { |
|
|
border-radius: 19px 0 0 19px; |
|
|
border-radius: 19px 0 0 19px; |
|
|
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
button { |
|
|
button { |
|
@ -182,13 +231,14 @@ export default { |
|
|
padding-right: 15px; |
|
|
padding-right: 15px; |
|
|
border-radius: 0 19px 19px 0; |
|
|
border-radius: 0 19px 19px 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
.monitor-check { |
|
|
.monitor-check { |
|
|
.multiselect__tags { |
|
|
.multiselect__tags { |
|
|
border-radius: 19px 0 0 19px; |
|
|
border-radius: 19px 0 0 19px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|