Commit 935bd1e9 authored by Denys Mishunov's avatar Denys Mishunov

Merge branch 'alert-opsgenie-intergration-refractor' into 'master'

Alert opsgenie integration refractor

See merge request gitlab-org/gitlab!36656
parents 35c3c09a 1df1b1d9
<script> <script>
import { GlEmptyState, GlButton } from '@gitlab/ui'; import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import alertsHelpUrlQuery from '../graphql/queries/alert_help_url.query.graphql';
export default { export default {
i18n: { i18n: {
...@@ -25,6 +26,12 @@ export default { ...@@ -25,6 +26,12 @@ export default {
components: { components: {
GlEmptyState, GlEmptyState,
GlButton, GlButton,
GlLink,
},
apollo: {
alertsHelpUrl: {
query: alertsHelpUrlQuery,
},
}, },
props: { props: {
enableAlertManagementPath: { enableAlertManagementPath: {
...@@ -50,6 +57,11 @@ export default { ...@@ -50,6 +57,11 @@ export default {
default: '', default: '',
}, },
}, },
data() {
return {
alertsHelpUrl: '',
};
},
computed: { computed: {
emptyState() { emptyState() {
return { return {
...@@ -71,13 +83,9 @@ export default { ...@@ -71,13 +83,9 @@ export default {
<template #description> <template #description>
<div class="gl-display-block"> <div class="gl-display-block">
<span>{{ emptyState.info }}</span> <span>{{ emptyState.info }}</span>
<a <gl-link v-if="!opsgenieMvcEnabled" :href="alertsHelpUrl" target="_blank">
v-if="!opsgenieMvcEnabled"
href="/help/user/project/operations/alert_management.html"
target="_blank"
>
{{ $options.i18n.moreInformation }} {{ $options.i18n.moreInformation }}
</a> </gl-link>
</div> </div>
<div v-if="alertsCanBeEnabled" class="gl-display-block center gl-pt-4"> <div v-if="alertsCanBeEnabled" class="gl-display-block center gl-pt-4">
<gl-button category="primary" variant="success" :href="emptyState.link"> <gl-button category="primary" variant="success" :href="emptyState.link">
......
...@@ -16,6 +16,7 @@ export default () => { ...@@ -16,6 +16,7 @@ export default () => {
enableAlertManagementPath, enableAlertManagementPath,
emptyAlertSvgPath, emptyAlertSvgPath,
populatingAlertsHelpUrl, populatingAlertsHelpUrl,
alertsHelpUrl,
opsgenieMvcTargetUrl, opsgenieMvcTargetUrl,
} = domEl.dataset; } = domEl.dataset;
let { alertManagementEnabled, userCanEnableAlertManagement, opsgenieMvcEnabled } = domEl.dataset; let { alertManagementEnabled, userCanEnableAlertManagement, opsgenieMvcEnabled } = domEl.dataset;
...@@ -41,6 +42,12 @@ export default () => { ...@@ -41,6 +42,12 @@ export default () => {
), ),
}); });
apolloProvider.clients.defaultClient.cache.writeData({
data: {
alertsHelpUrl,
},
});
return new Vue({ return new Vue({
el: selector, el: selector,
apolloProvider, apolloProvider,
......
...@@ -51,52 +51,26 @@ export default { ...@@ -51,52 +51,26 @@ export default {
'gl-modal': GlModalDirective, 'gl-modal': GlModalDirective,
}, },
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
props: { inject: ['prometheus', 'generic', 'opsgenie'],
prometheus: {
type: Object,
required: true,
validator: ({ activated }) => {
return activated !== undefined;
},
},
generic: {
type: Object,
required: true,
validator: ({ formPath }) => {
return formPath !== undefined;
},
},
opsgenie: {
type: Object,
required: true,
},
},
data() { data() {
return { return {
activated: {
generic: this.generic.activated,
prometheus: this.prometheus.activated,
opsgenie: this.opsgenie?.activated,
},
loading: false, loading: false,
authorizationKey: {
generic: this.generic.initialAuthorizationKey,
prometheus: this.prometheus.prometheusAuthorizationKey,
},
selectedEndpoint: serviceOptions[0].value, selectedEndpoint: serviceOptions[0].value,
options: serviceOptions, options: serviceOptions,
targetUrl: null, active: false,
authKey: '',
targetUrl: '',
feedback: { feedback: {
variant: 'danger', variant: 'danger',
feedbackMessage: null, feedbackMessage: '',
isFeedbackDismissed: false, isFeedbackDismissed: false,
}, },
serverError: null,
testAlert: { testAlert: {
json: null, json: null,
error: null, error: null,
}, },
canSaveForm: false, canSaveForm: false,
serverError: null,
}; };
}, },
computed: { computed: {
...@@ -123,24 +97,24 @@ export default { ...@@ -123,24 +97,24 @@ export default {
case 'generic': { case 'generic': {
return { return {
url: this.generic.url, url: this.generic.url,
authKey: this.authorizationKey.generic, authKey: this.generic.authorizationKey,
active: this.activated.generic, activated: this.generic.activated,
resetKey: this.resetGenericKey.bind(this), resetKey: this.resetKey.bind(this),
}; };
} }
case 'prometheus': { case 'prometheus': {
return { return {
url: this.prometheus.prometheusUrl, url: this.prometheus.prometheusUrl,
authKey: this.authorizationKey.prometheus, authKey: this.prometheus.authorizationKey,
active: this.activated.prometheus, activated: this.prometheus.activated,
resetKey: this.resetPrometheusKey.bind(this), resetKey: this.resetKey.bind(this, 'prometheus'),
targetUrl: this.prometheus.prometheusApiUrl, targetUrl: this.prometheus.prometheusApiUrl,
}; };
} }
case 'opsgenie': { case 'opsgenie': {
return { return {
targetUrl: this.opsgenie.opsgenieMvcTargetUrl, targetUrl: this.opsgenie.opsgenieMvcTargetUrl,
active: this.activated.opsgenie, activated: this.opsgenie.activated,
}; };
} }
default: { default: {
...@@ -164,7 +138,7 @@ export default { ...@@ -164,7 +138,7 @@ export default {
return this.testAlert.error === null; return this.testAlert.error === null;
}, },
canTestAlert() { canTestAlert() {
return this.selectedService.active && this.testAlert.json !== null; return this.active && this.testAlert.json !== null;
}, },
canSaveConfig() { canSaveConfig() {
return !this.loading && this.canSaveForm; return !this.loading && this.canSaveForm;
...@@ -187,19 +161,21 @@ export default { ...@@ -187,19 +161,21 @@ export default {
}, },
mounted() { mounted() {
if ( if (
this.activated.prometheus || this.prometheus.activated ||
this.activated.generic || this.generic.activated ||
!this.opsgenie.opsgenieMvcIsAvailable !this.opsgenie.opsgenieMvcIsAvailable
) { ) {
this.removeOpsGenieOption(); this.removeOpsGenieOption();
} else if (this.activated.opsgenie) { } else if (this.opsgenie.activated) {
this.setOpsgenieAsDefault(); this.setOpsgenieAsDefault();
} }
this.active = this.selectedService.activated;
this.authKey = this.selectedService.authKey ?? '';
}, },
methods: { methods: {
createUserErrorMessage(errors) { createUserErrorMessage(errors = { error: [''] }) {
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring
this.serverError = Object.values(errors)[0][0]; this.serverError = errors.error[0];
}, },
setOpsgenieAsDefault() { setOpsgenieAsDefault() {
this.options = this.options.map(el => { this.options = this.options.map(el => {
...@@ -224,41 +200,38 @@ export default { ...@@ -224,41 +200,38 @@ export default {
resetFormValues() { resetFormValues() {
this.testAlert.json = null; this.testAlert.json = null;
this.targetUrl = this.selectedService.targetUrl; this.targetUrl = this.selectedService.targetUrl;
this.active = this.selectedService.activated;
}, },
dismissFeedback() { dismissFeedback() {
this.serverError = null; this.serverError = null;
this.feedback = { ...this.feedback, feedbackMessage: null }; this.feedback = { ...this.feedback, feedbackMessage: null };
this.isFeedbackDismissed = false; this.isFeedbackDismissed = false;
}, },
resetGenericKey() { resetKey(key) {
return service const fn = key === 'prometheus' ? this.resetPrometheusKey() : this.resetGenericKey();
.updateGenericKey({ endpoint: this.generic.formPath, params: { service: { token: '' } } })
return fn
.then(({ data: { token } }) => { .then(({ data: { token } }) => {
this.authorizationKey.generic = token; this.authKey = token;
this.setFeedback({ feedbackMessage: this.$options.i18n.authKeyRest, variant: 'success' }); this.setFeedback({ feedbackMessage: this.$options.i18n.authKeyRest, variant: 'success' });
}) })
.catch(() => { .catch(() => {
this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' }); this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' });
}); });
}, },
resetPrometheusKey() { resetGenericKey() {
return service this.dismissFeedback();
.updatePrometheusKey({ endpoint: this.prometheus.prometheusResetKeyPath }) return service.updateGenericKey({
.then(({ data: { token } }) => { endpoint: this.generic.formPath,
this.authorizationKey.prometheus = token; params: { service: { token: '' } },
this.setFeedback({ feedbackMessage: this.$options.i18n.authKeyRest, variant: 'success' });
})
.catch(() => {
this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' });
}); });
}, },
resetPrometheusKey() {
return service.updatePrometheusKey({ endpoint: this.prometheus.prometheusResetKeyPath });
},
toggleService(value) { toggleService(value) {
this.canSaveForm = true; this.canSaveForm = true;
if (this.isPrometheus) { this.active = value;
this.activated.prometheus = value;
} else {
this.activated[this.selectedEndpoint] = value;
}
}, },
toggle(value) { toggle(value) {
return this.isPrometheus ? this.togglePrometheusActive(value) : this.toggleActivated(value); return this.isPrometheus ? this.togglePrometheusActive(value) : this.toggleActivated(value);
...@@ -273,7 +246,7 @@ export default { ...@@ -273,7 +246,7 @@ export default {
: { service: { active: value } }, : { service: { active: value } },
}) })
.then(() => { .then(() => {
this.activated[this.selectedEndpoint] = value; this.active = value;
this.toggleSuccess(value); this.toggleSuccess(value);
if (!this.isOpsgenie && value) { if (!this.isOpsgenie && value) {
...@@ -316,7 +289,7 @@ export default { ...@@ -316,7 +289,7 @@ export default {
}, },
}) })
.then(() => { .then(() => {
this.activated.prometheus = value; this.active = value;
this.toggleSuccess(value); this.toggleSuccess(value);
this.removeOpsGenieOption(); this.removeOpsGenieOption();
}) })
...@@ -358,6 +331,7 @@ export default { ...@@ -358,6 +331,7 @@ export default {
}, },
validateTestAlert() { validateTestAlert() {
this.loading = true; this.loading = true;
this.dismissFeedback();
this.validateJson(); this.validateJson();
return service return service
.updateTestAlert({ .updateTestAlert({
...@@ -382,7 +356,8 @@ export default { ...@@ -382,7 +356,8 @@ export default {
}); });
}, },
onSubmit() { onSubmit() {
this.toggle(this.selectedService.active); this.dismissFeedback();
this.toggle(this.active);
}, },
onReset() { onReset() {
this.testAlert.json = null; this.testAlert.json = null;
...@@ -391,7 +366,7 @@ export default { ...@@ -391,7 +366,7 @@ export default {
if (this.canSaveForm) { if (this.canSaveForm) {
this.canSaveForm = false; this.canSaveForm = false;
this.activated[this.selectedEndpoint] = this[this.selectedEndpoint].activated; this.active = this.selectedService.activated;
} }
}, },
}, },
...@@ -409,7 +384,7 @@ export default { ...@@ -409,7 +384,7 @@ export default {
variant="danger" variant="danger"
category="primary" category="primary"
class="gl-display-block gl-mt-3" class="gl-display-block gl-mt-3"
@click="toggle(selectedService.active)" @click="toggle(active)"
> >
{{ __('Save anyway') }} {{ __('Save anyway') }}
</gl-button> </gl-button>
...@@ -457,7 +432,7 @@ export default { ...@@ -457,7 +432,7 @@ export default {
id="activated" id="activated"
:disabled-input="loading" :disabled-input="loading"
:is-loading="loading" :is-loading="loading"
:value="selectedService.active" :value="active"
@change="toggleService" @change="toggleService"
/> />
</gl-form-group> </gl-form-group>
...@@ -472,7 +447,7 @@ export default { ...@@ -472,7 +447,7 @@ export default {
v-model="targetUrl" v-model="targetUrl"
type="url" type="url"
:placeholder="baseUrlPlaceholder" :placeholder="baseUrlPlaceholder"
:disabled="!selectedService.active" :disabled="!active"
/> />
<span class="gl-text-gray-200"> <span class="gl-text-gray-200">
{{ $options.i18n.apiBaseUrlHelpText }} {{ $options.i18n.apiBaseUrlHelpText }}
...@@ -498,28 +473,18 @@ export default { ...@@ -498,28 +473,18 @@ export default {
label-for="authorization-key" label-for="authorization-key"
label-class="label-bold" label-class="label-bold"
> >
<gl-form-input-group <gl-form-input-group id="authorization-key" class="gl-mb-2" readonly :value="authKey">
id="authorization-key"
class="gl-mb-2"
readonly
:value="selectedService.authKey"
>
<template #append> <template #append>
<clipboard-button <clipboard-button
:text="selectedService.authKey || ''" :text="authKey"
:title="$options.i18n.copyToClipboard" :title="$options.i18n.copyToClipboard"
class="gl-m-0!" class="gl-m-0!"
/> />
</template> </template>
</gl-form-input-group> </gl-form-input-group>
<div class="gl-display-flex gl-justify-content-end"> <gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3">{{
<gl-button $options.i18n.resetKey
v-gl-modal.authKeyModal }}</gl-button>
:disabled="!selectedService.active"
class="gl-mt-3"
>{{ $options.i18n.resetKey }}</gl-button
>
</div>
<gl-modal <gl-modal
modal-id="authKeyModal" modal-id="authKeyModal"
:title="$options.i18n.resetKey" :title="$options.i18n.resetKey"
...@@ -539,7 +504,7 @@ export default { ...@@ -539,7 +504,7 @@ export default {
<gl-form-textarea <gl-form-textarea
id="alert-json" id="alert-json"
v-model.trim="testAlert.json" v-model.trim="testAlert.json"
:disabled="!selectedService.active" :disabled="!active"
:state="jsonIsValid" :state="jsonIsValid"
:placeholder="$options.i18n.alertJsonPlaceholder" :placeholder="$options.i18n.alertJsonPlaceholder"
rows="6" rows="6"
......
...@@ -35,7 +35,9 @@ export const i18n = { ...@@ -35,7 +35,9 @@ export const i18n = {
testAlertSuccess: s__( testAlertSuccess: s__(
'AlertSettings|Test alert sent successfully. If you have made other changes, please save them now.', 'AlertSettings|Test alert sent successfully. If you have made other changes, please save them now.',
), ),
authKeyRest: s__('AlertSettings|Authorization key has been successfully reset'), authKeyRest: s__(
'AlertSettings|Authorization key has been successfully reset. Please save your changes now.',
),
}; };
export const serviceOptions = [ export const serviceOptions = [
......
...@@ -31,11 +31,13 @@ export default el => { ...@@ -31,11 +31,13 @@ export default el => {
const opsgenieMvcActivated = parseBoolean(opsgenieMvcEnabled); const opsgenieMvcActivated = parseBoolean(opsgenieMvcEnabled);
const opsgenieMvcIsAvailable = parseBoolean(opsgenieMvcAvailable); const opsgenieMvcIsAvailable = parseBoolean(opsgenieMvcAvailable);
const props = { return new Vue({
el,
provide: {
prometheus: { prometheus: {
activated: prometheusIsActivated, activated: prometheusIsActivated,
prometheusUrl, prometheusUrl,
prometheusAuthorizationKey, authorizationKey: prometheusAuthorizationKey,
prometheusFormPath, prometheusFormPath,
prometheusResetKeyPath, prometheusResetKeyPath,
prometheusApiUrl, prometheusApiUrl,
...@@ -45,7 +47,7 @@ export default el => { ...@@ -45,7 +47,7 @@ export default el => {
alertsUsageUrl, alertsUsageUrl,
activated: genericActivated, activated: genericActivated,
formPath, formPath,
initialAuthorizationKey: authorizationKey, authorizationKey,
url, url,
}, },
opsgenie: { opsgenie: {
...@@ -54,14 +56,12 @@ export default el => { ...@@ -54,14 +56,12 @@ export default el => {
opsgenieMvcTargetUrl, opsgenieMvcTargetUrl,
opsgenieMvcIsAvailable, opsgenieMvcIsAvailable,
}, },
}; },
components: {
return new Vue({ AlertSettingsForm,
el, },
render(createElement) { render(createElement) {
return createElement(AlertSettingsForm, { return createElement('alert-settings-form');
props,
});
}, },
}); });
}; };
...@@ -5,7 +5,8 @@ module Projects::AlertManagementHelper ...@@ -5,7 +5,8 @@ module Projects::AlertManagementHelper
{ {
'project-path' => project.full_path, 'project-path' => project.full_path,
'enable-alert-management-path' => project_settings_operations_path(project, anchor: 'js-alert-management-settings'), 'enable-alert-management-path' => project_settings_operations_path(project, anchor: 'js-alert-management-settings'),
'populating-alerts-help-url' => help_page_url('user/project/operations/alert_management.html', anchor: 'enable-alert-management'), 'alerts-help-url' => help_page_url('operations/incident_management/index.md'),
'populating-alerts-help-url' => help_page_url('operations/incident_management/index.md', anchor: 'enable-alert-management'),
'empty-alert-svg-path' => image_path('illustrations/alert-management-empty-state.svg'), 'empty-alert-svg-path' => image_path('illustrations/alert-management-empty-state.svg'),
'user-can-enable-alert-management' => can?(current_user, :admin_operations, project).to_s, 'user-can-enable-alert-management' => can?(current_user, :admin_operations, project).to_s,
'alert-management-enabled' => alert_management_enabled?(project).to_s 'alert-management-enabled' => alert_management_enabled?(project).to_s
......
...@@ -2264,7 +2264,7 @@ msgstr "" ...@@ -2264,7 +2264,7 @@ msgstr ""
msgid "AlertSettings|Authorization key" msgid "AlertSettings|Authorization key"
msgstr "" msgstr ""
msgid "AlertSettings|Authorization key has been successfully reset" msgid "AlertSettings|Authorization key has been successfully reset. Please save your changes now."
msgstr "" msgstr ""
msgid "AlertSettings|Copy" msgid "AlertSettings|Copy"
......
...@@ -15,6 +15,7 @@ describe('AlertManagementEmptyState', () => { ...@@ -15,6 +15,7 @@ describe('AlertManagementEmptyState', () => {
wrapper = shallowMount(AlertManagementEmptyState, { wrapper = shallowMount(AlertManagementEmptyState, {
propsData: { propsData: {
enableAlertManagementPath: '/link', enableAlertManagementPath: '/link',
alertsHelpUrl: '/link',
emptyAlertSvgPath: 'illustration/path', emptyAlertSvgPath: 'illustration/path',
...props, ...props,
}, },
......
...@@ -19,6 +19,7 @@ describe('AlertManagementList', () => { ...@@ -19,6 +19,7 @@ describe('AlertManagementList', () => {
propsData: { propsData: {
projectPath: 'gitlab-org/gitlab', projectPath: 'gitlab-org/gitlab',
enableAlertManagementPath: '/link', enableAlertManagementPath: '/link',
alertsHelpUrl: '/link',
populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data', populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data',
emptyAlertSvgPath: 'illustration/path', emptyAlertSvgPath: 'illustration/path',
...props, ...props,
......
...@@ -26,9 +26,7 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`] ...@@ -26,9 +26,7 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
</gl-form-group-stub> </gl-form-group-stub>
<gl-form-group-stub label=\\"Authorization key\\" label-for=\\"authorization-key\\" label-class=\\"label-bold\\"> <gl-form-group-stub label=\\"Authorization key\\" label-for=\\"authorization-key\\" label-class=\\"label-bold\\">
<gl-form-input-group-stub value=\\"abcedfg123\\" predefinedoptions=\\"[object Object]\\" id=\\"authorization-key\\" readonly=\\"\\" class=\\"gl-mb-2\\"></gl-form-input-group-stub> <gl-form-input-group-stub value=\\"abcedfg123\\" predefinedoptions=\\"[object Object]\\" id=\\"authorization-key\\" readonly=\\"\\" class=\\"gl-mb-2\\"></gl-form-input-group-stub>
<div class=\\"gl-display-flex gl-justify-content-end\\">
<gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\" class=\\"gl-mt-3\\" role=\\"button\\" tabindex=\\"0\\">Reset key</gl-button-stub> <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\" class=\\"gl-mt-3\\" role=\\"button\\" tabindex=\\"0\\">Reset key</gl-button-stub>
</div>
<gl-modal-stub modalid=\\"authKeyModal\\" titletag=\\"h4\\" modalclass=\\"\\" size=\\"md\\" title=\\"Reset key\\" ok-title=\\"Reset key\\" ok-variant=\\"danger\\"> <gl-modal-stub modalid=\\"authKeyModal\\" titletag=\\"h4\\" modalclass=\\"\\" size=\\"md\\" title=\\"Reset key\\" ok-title=\\"Reset key\\" ok-variant=\\"danger\\">
Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in. Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.
</gl-modal-stub> </gl-modal-stub>
......
...@@ -11,9 +11,18 @@ const KEY = 'abcedfg123'; ...@@ -11,9 +11,18 @@ const KEY = 'abcedfg123';
const INVALID_URL = 'http://invalid'; const INVALID_URL = 'http://invalid';
const ACTIVATED = false; const ACTIVATED = false;
const defaultProps = { describe('AlertsSettingsForm', () => {
let wrapper;
let mockAxios;
const createComponent = ({ methods } = {}, data) => {
wrapper = shallowMount(AlertsSettingsForm, {
data() {
return { ...data };
},
provide: {
generic: { generic: {
initialAuthorizationKey: KEY, authorizationKey: KEY,
formPath: INVALID_URL, formPath: INVALID_URL,
url: GENERIC_URL, url: GENERIC_URL,
alertsSetupUrl: INVALID_URL, alertsSetupUrl: INVALID_URL,
...@@ -21,7 +30,7 @@ const defaultProps = { ...@@ -21,7 +30,7 @@ const defaultProps = {
activated: ACTIVATED, activated: ACTIVATED,
}, },
prometheus: { prometheus: {
prometheusAuthorizationKey: KEY, authorizationKey: KEY,
prometheusFormPath: INVALID_URL, prometheusFormPath: INVALID_URL,
prometheusUrl: PROMETHEUS_URL, prometheusUrl: PROMETHEUS_URL,
activated: ACTIVATED, activated: ACTIVATED,
...@@ -32,20 +41,6 @@ const defaultProps = { ...@@ -32,20 +41,6 @@ const defaultProps = {
activated: ACTIVATED, activated: ACTIVATED,
opsgenieMvcTargetUrl: GENERIC_URL, opsgenieMvcTargetUrl: GENERIC_URL,
}, },
};
describe('AlertsSettingsForm', () => {
let wrapper;
let mockAxios;
const createComponent = (props = defaultProps, { methods } = {}, data) => {
wrapper = shallowMount(AlertsSettingsForm, {
data() {
return { ...data };
},
propsData: {
...defaultProps,
...props,
}, },
methods, methods,
}); });
...@@ -83,32 +78,33 @@ describe('AlertsSettingsForm', () => { ...@@ -83,32 +78,33 @@ describe('AlertsSettingsForm', () => {
describe('reset key', () => { describe('reset key', () => {
it('triggers resetKey method', () => { it('triggers resetKey method', () => {
const resetGenericKey = jest.fn(); const resetKey = jest.fn();
const methods = { resetGenericKey }; const methods = { resetKey };
createComponent(defaultProps, { methods }); createComponent({ methods });
wrapper.find(GlModal).vm.$emit('ok'); wrapper.find(GlModal).vm.$emit('ok');
expect(resetGenericKey).toHaveBeenCalled(); expect(resetKey).toHaveBeenCalled();
}); });
it('updates the authorization key on success', () => { it('updates the authorization key on success', () => {
const formPath = 'some/path'; createComponent(
mockAxios.onPut(formPath, { service: { token: '' } }).replyOnce(200, { token: 'newToken' }); {},
createComponent({ generic: { ...defaultProps.generic, formPath } }); {
authKey: 'newToken',
},
);
return wrapper.vm.resetGenericKey().then(() => {
expect(findAuthorizationKey().attributes('value')).toBe('newToken'); expect(findAuthorizationKey().attributes('value')).toBe('newToken');
}); });
});
it('shows a alert message on error', () => { it('shows a alert message on error', () => {
const formPath = 'some/path'; const formPath = 'some/path';
mockAxios.onPut(formPath).replyOnce(404); mockAxios.onPut(formPath).replyOnce(404);
createComponent({ generic: { ...defaultProps.generic, formPath } }); createComponent();
return wrapper.vm.resetGenericKey().then(() => { return wrapper.vm.resetKey().then(() => {
expect(wrapper.find(GlAlert).exists()).toBe(true); expect(wrapper.find(GlAlert).exists()).toBe(true);
}); });
}); });
...@@ -118,22 +114,18 @@ describe('AlertsSettingsForm', () => { ...@@ -118,22 +114,18 @@ describe('AlertsSettingsForm', () => {
it('triggers toggleActivated method', () => { it('triggers toggleActivated method', () => {
const toggleService = jest.fn(); const toggleService = jest.fn();
const methods = { toggleService }; const methods = { toggleService };
createComponent(defaultProps, { methods }); createComponent({ methods });
wrapper.find(ToggleButton).vm.$emit('change', true); wrapper.find(ToggleButton).vm.$emit('change', true);
expect(toggleService).toHaveBeenCalled(); expect(toggleService).toHaveBeenCalled();
}); });
describe('error is encountered', () => { describe('error is encountered', () => {
beforeEach(() => { it('restores previous value', () => {
const formPath = 'some/path'; const formPath = 'some/path';
mockAxios.onPut(formPath).replyOnce(500); mockAxios.onPut(formPath).replyOnce(500);
}); createComponent();
return wrapper.vm.resetKey().then(() => {
it('restores previous value', () => {
createComponent({ generic: { ...defaultProps.generic, initialActivated: false } });
return wrapper.vm.resetGenericKey().then(() => {
expect(wrapper.find(ToggleButton).props('value')).toBe(false); expect(wrapper.find(ToggleButton).props('value')).toBe(false);
}); });
}); });
...@@ -143,7 +135,6 @@ describe('AlertsSettingsForm', () => { ...@@ -143,7 +135,6 @@ describe('AlertsSettingsForm', () => {
describe('prometheus is active', () => { describe('prometheus is active', () => {
beforeEach(() => { beforeEach(() => {
createComponent( createComponent(
{ prometheus: { ...defaultProps.prometheus, prometheusIsActivated: true } },
{}, {},
{ {
selectedEndpoint: 'prometheus', selectedEndpoint: 'prometheus',
...@@ -164,10 +155,9 @@ describe('AlertsSettingsForm', () => { ...@@ -164,10 +155,9 @@ describe('AlertsSettingsForm', () => {
}); });
}); });
describe('opsgenie is active', () => { describe('Opsgenie is active', () => {
beforeEach(() => { beforeEach(() => {
createComponent( createComponent(
{ opsgenie: { ...defaultProps.opsgenie, opsgenieMvcActivated: true } },
{}, {},
{ {
selectedEndpoint: 'opsgenie', selectedEndpoint: 'opsgenie',
...@@ -175,15 +165,14 @@ describe('AlertsSettingsForm', () => { ...@@ -175,15 +165,14 @@ describe('AlertsSettingsForm', () => {
); );
}); });
it('shows a input for the opsgenie target URL', () => { it('shows a input for the Opsgenie target URL', () => {
expect(findApiUrl().exists()).toBe(true); expect(findApiUrl().exists()).toBe(true);
expect(findSelect().attributes('value')).toBe('opsgenie');
}); });
}); });
describe('trigger test alert', () => { describe('trigger test alert', () => {
beforeEach(() => { beforeEach(() => {
createComponent({ generic: { ...defaultProps.generic, initialActivated: true } }, {}, true); createComponent({});
}); });
it('should enable the JSON input', () => { it('should enable the JSON input', () => {
...@@ -191,30 +180,19 @@ describe('AlertsSettingsForm', () => { ...@@ -191,30 +180,19 @@ describe('AlertsSettingsForm', () => {
expect(findJsonInput().props('value')).toBe(null); expect(findJsonInput().props('value')).toBe(null);
}); });
it('should validate JSON input', () => { it('should validate JSON input', async () => {
createComponent({ generic: { ...defaultProps.generic } }, true, { createComponent(true, {
testAlertJson: '{ "value": "test" }', testAlertJson: '{ "value": "test" }',
}); });
findJsonInput().vm.$emit('change'); findJsonInput().vm.$emit('change');
return wrapper.vm.$nextTick().then(() => {
expect(findJsonInput().attributes('state')).toBe('true');
});
});
describe('alert service is toggled', () => {
it('should show a info alert if successful', () => {
const formPath = 'some/path';
const toggleService = true;
mockAxios.onPut(formPath).replyOnce(200);
createComponent({ generic: { ...defaultProps.generic, formPath } }); await wrapper.vm.$nextTick();
return wrapper.vm.toggleActivated(toggleService).then(() => { expect(findJsonInput().attributes('state')).toBe('true');
expect(wrapper.find(GlAlert).attributes('variant')).toBe('info');
});
}); });
describe('alert service is toggled', () => {
it('should show a error alert if failed', () => { it('should show a error alert if failed', () => {
const formPath = 'some/path'; const formPath = 'some/path';
const toggleService = true; const toggleService = true;
...@@ -222,9 +200,10 @@ describe('AlertsSettingsForm', () => { ...@@ -222,9 +200,10 @@ describe('AlertsSettingsForm', () => {
errors: 'Error message to display', errors: 'Error message to display',
}); });
createComponent({ generic: { ...defaultProps.generic, formPath } }); createComponent();
return wrapper.vm.toggleActivated(toggleService).then(() => { return wrapper.vm.toggleActivated(toggleService).then(() => {
expect(wrapper.vm.active).toBe(false);
expect(wrapper.find(GlAlert).attributes('variant')).toBe('danger'); expect(wrapper.find(GlAlert).attributes('variant')).toBe('danger');
}); });
}); });
......
...@@ -28,7 +28,8 @@ RSpec.describe Projects::AlertManagementHelper do ...@@ -28,7 +28,8 @@ RSpec.describe Projects::AlertManagementHelper do
expect(helper.alert_management_data(current_user, project)).to match( expect(helper.alert_management_data(current_user, project)).to match(
'project-path' => project_path, 'project-path' => project_path,
'enable-alert-management-path' => setting_path, 'enable-alert-management-path' => setting_path,
'populating-alerts-help-url' => 'http://test.host/help/user/project/operations/alert_management.html#enable-alert-management', 'alerts-help-url' => 'http://test.host/help/operations/incident_management/index.md',
'populating-alerts-help-url' => 'http://test.host/help/operations/incident_management/index.md#enable-alert-management',
'empty-alert-svg-path' => match_asset_path('/assets/illustrations/alert-management-empty-state.svg'), 'empty-alert-svg-path' => match_asset_path('/assets/illustrations/alert-management-empty-state.svg'),
'user-can-enable-alert-management' => 'true', 'user-can-enable-alert-management' => 'true',
'alert-management-enabled' => 'false' 'alert-management-enabled' => 'false'
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment