Skip to content

G
gitlab-ce
Commit 5c5c90cf authored by David O'Regan's avatar David O'Regan Committed by Kushal Pandya
Browse files
Options

Resolve "Migrate Opsgenie integration to new Integrations UI"

parent a7ccc61e
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 211 deletions
app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
View file @ 5c5c90cf
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
GlSprintf, GlSprintf,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { s__, __ } from '~/locale'; import { s__, __ } from '~/locale';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
import { trackAlertIntegrationsViewsOptions, integrationToDeleteDefault } from '../constants'; import { trackAlertIntegrationsViewsOptions, integrationToDeleteDefault } from '../constants';
import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql'; import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
...@@ -48,6 +49,7 @@ export default { ...@@ -48,6 +49,7 @@ export default {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
GlModal: GlModalDirective, GlModal: GlModalDirective,
}, },
mixins: [glFeatureFlagsMixin()],
props: { props: {
integrations: { integrations: {
type: Array, type: Array,
...@@ -96,7 +98,7 @@ export default { ...@@ -96,7 +98,7 @@ export default {
tbodyTrClass(item) { tbodyTrClass(item) {
return { return {
[bodyTrClass]: this.integrations.length, [bodyTrClass]: this.integrations.length,
'gl-bg-blue-50': item?.id === this.currentIntegration?.id, 'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id,
}; };
}, },
trackPageViews() { trackPageViews() {
...@@ -150,7 +152,7 @@ export default { ...@@ -150,7 +152,7 @@ export default {
</template> </template>
<template #cell(actions)="{ item }"> <template #cell(actions)="{ item }">
<gl-button-group> <gl-button-group v-if="glFeatures.httpIntegrationsList">
<gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" /> <gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" />
<gl-button <gl-button
v-gl-modal.deleteIntegration v-gl-modal.deleteIntegration
......
app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
View file @ 5c5c90cf
...@@ -23,7 +23,9 @@ import { ...@@ -23,7 +23,9 @@ import {
integrationTypesNew, integrationTypesNew,
JSON_VALIDATE_DELAY, JSON_VALIDATE_DELAY,
targetPrometheusUrlPlaceholder, targetPrometheusUrlPlaceholder,
targetOpsgenieUrlPlaceholder,
typeSet, typeSet,
sectionHash,
} from '../constants'; } from '../constants';
// Mocks will be removed when integrating with BE is ready // Mocks will be removed when integrating with BE is ready
// data format is defined and will be the same as mocked (maybe with some minor changes) // data format is defined and will be the same as mocked (maybe with some minor changes)
...@@ -31,7 +33,10 @@ import { ...@@ -31,7 +33,10 @@ import {
import mockedCustomMapping from './mocks/parsedMapping.json'; import mockedCustomMapping from './mocks/parsedMapping.json';
export default { export default {
targetPrometheusUrlPlaceholder, placeholders: {
prometheus: targetPrometheusUrlPlaceholder,
opsgenie: targetOpsgenieUrlPlaceholder,
},
JSON_VALIDATE_DELAY, JSON_VALIDATE_DELAY,
typeSet, typeSet,
i18n: { i18n: {
...@@ -84,6 +89,13 @@ export default { ...@@ -84,6 +89,13 @@ export default {
'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.', 'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
), ),
}, },
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
opsgenie: {
label: s__('AlertSettings|2. Add link to your Opsgenie alert list'),
info: s__(
'AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your exisiting Opsgenie instance. By selecting this option, you cannot recieve alerts from any other source in GitLab; it will effectivley be turing Alerts within GitLab off as a feature.',
),
},
}, },
}, },
components: { components: {
...@@ -111,6 +123,10 @@ export default { ...@@ -111,6 +123,10 @@ export default {
prometheus: { prometheus: {
default: {}, default: {},
}, },
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
opsgenie: {
default: {},
},
}, },
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
props: { props: {
...@@ -131,7 +147,6 @@ export default { ...@@ -131,7 +147,6 @@ export default {
data() { data() {
return { return {
selectedIntegration: integrationTypesNew[0].value, selectedIntegration: integrationTypesNew[0].value,
options: integrationTypesNew,
active: false, active: false,
formVisible: false, formVisible: false,
integrationTestPayload: { integrationTestPayload: {
...@@ -142,18 +157,33 @@ export default { ...@@ -142,18 +157,33 @@ export default {
customMapping: null, customMapping: null,
parsingPayload: false, parsingPayload: false,
currentIntegration: null, currentIntegration: null,
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
isManagingOpsgenie: false,
}; };
}, },
computed: { computed: {
jsonIsValid() { jsonIsValid() {
return this.integrationTestPayload.error === null; return this.integrationTestPayload.error === null;
}, },
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
disabledIntegrations() {
return this.opsgenie.active ? [typeSet.http, typeSet.prometheus] : [typeSet.opsgenie];
},
options() {
return integrationTypesNew.map(el => ({
...el,
disabled: this.disabledIntegrations.includes(el.value),
}));
},
selectedIntegrationType() { selectedIntegrationType() {
switch (this.selectedIntegration) { switch (this.selectedIntegration) {
case this.$options.typeSet.http: case typeSet.http:
return this.generic; return this.generic;
case this.$options.typeSet.prometheus: case typeSet.prometheus:
return this.prometheus; return this.prometheus;
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
case typeSet.opsgenie:
return this.opsgenie;
default: default:
return {}; return {};
} }
...@@ -214,6 +244,30 @@ export default { ...@@ -214,6 +244,30 @@ export default {
} else { } else {
this.formVisible = true; this.formVisible = true;
} }
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
if (this.opsgenie.active && this.selectedIntegration === typeSet.opsgenie) {
this.isManagingOpsgenie = true;
this.active = this.opsgenie.active;
this.integrationForm.apiUrl = this.opsgenie.opsgenieMvcTargetUrl;
}
},
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
submitWithOpsgenie() {
return service
.updateGenericActive({
endpoint: this.opsgenie.formPath,
params: {
service: {
opsgenie_mvc_target_url: this.integrationForm.apiUrl,
opsgenie_mvc_enabled: this.active,
},
},
})
.then(() => {
window.location.hash = sectionHash;
window.location.reload();
});
}, },
submitWithTestPayload() { submitWithTestPayload() {
return service return service
...@@ -226,9 +280,14 @@ export default { ...@@ -226,9 +280,14 @@ export default {
}); });
}, },
submit() { submit() {
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
if (this.isManagingOpsgenie) {
return this.submitWithOpsgenie();
}
const { name, apiUrl } = this.integrationForm; const { name, apiUrl } = this.integrationForm;
const variables = const variables =
this.selectedIntegration === this.$options.typeSet.http this.selectedIntegration === typeSet.http
? { name, active: this.active } ? { name, active: this.active }
: { apiUrl, active: this.active }; : { apiUrl, active: this.active };
const integrationPayload = { type: this.selectedIntegration, variables }; const integrationPayload = { type: this.selectedIntegration, variables };
...@@ -312,7 +371,6 @@ export default { ...@@ -312,7 +371,6 @@ export default {
<template> <template>
<gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset"> <gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset">
<h5 class="gl-font-lg gl-my-5">{{ s__('AlertSettings|Add new integrations') }}</h5> <h5 class="gl-font-lg gl-my-5">{{ s__('AlertSettings|Add new integrations') }}</h5>
<gl-form-group <gl-form-group
id="integration-type" id="integration-type"
:label="$options.i18n.integrationFormSteps.step1.label" :label="$options.i18n.integrationFormSteps.step1.label"
...@@ -340,170 +398,206 @@ export default { ...@@ -340,170 +398,206 @@ export default {
</div> </div>
</gl-form-group> </gl-form-group>
<gl-collapse v-model="formVisible" class="gl-mt-3"> <gl-collapse v-model="formVisible" class="gl-mt-3">
<gl-form-group <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
id="name-integration" <div v-if="isManagingOpsgenie">
:label="$options.i18n.integrationFormSteps.step2.label" <gl-form-group
label-for="name-integration" id="integration-webhook"
> :label="$options.i18n.integrationFormSteps.opsgenie.label"
<gl-form-input label-for="integration-webhook"
v-model="integrationForm.name" >
type="text" <span class="gl-my-4">
:placeholder="$options.i18n.integrationFormSteps.step2.placeholder" {{ $options.i18n.integrationFormSteps.opsgenie.info }}
/>
</gl-form-group>
<gl-form-group
id="integration-webhook"
:label="$options.i18n.integrationFormSteps.step3.label"
label-for="integration-webhook"
>
<alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step3.help"
link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
/>
<gl-toggle
v-model="active"
:is-loading="loading"
:label="__('Active')"
class="gl-my-4 gl-font-weight-normal"
/>
<div v-if="selectedIntegration === $options.typeSet.prometheus" class="gl-my-4">
<span>
{{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
</span> </span>
<gl-toggle
v-model="active"
:is-loading="loading"
:label="__('Active')"
class="gl-my-4 gl-font-weight-normal"
/>
<gl-form-input <gl-form-input
id="integration-apiUrl" id="opsgenie-opsgenieMvcTargetUrl"
v-model="integrationForm.apiUrl" v-model="integrationForm.apiUrl"
type="text" type="text"
:placeholder="$options.targetPrometheusUrlPlaceholder" :placeholder="$options.placeholders.opsgenie"
/> />
<span class="gl-text-gray-400"> <span class="gl-text-gray-400 gl-my-1">
{{ $options.i18n.integrationFormSteps.prometheusFormUrl.help }} {{ $options.i18n.integrationFormSteps.prometheusFormUrl.help }}
</span> </span>
</div> </gl-form-group>
</div>
<div v-else>
<gl-form-group
id="name-integration"
:label="$options.i18n.integrationFormSteps.step2.label"
label-for="name-integration"
>
<gl-form-input
v-model="integrationForm.name"
type="text"
:placeholder="$options.i18n.integrationFormSteps.step2.placeholder"
/>
</gl-form-group>
<gl-form-group
id="integration-webhook"
:label="$options.i18n.integrationFormSteps.step3.label"
label-for="integration-webhook"
>
<alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step3.help"
link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
/>
<div class="gl-my-4"> <gl-toggle
<span> v-model="active"
{{ s__('AlertSettings|Webhook URL') }} :is-loading="loading"
</span> :label="__('Active')"
class="gl-my-4 gl-font-weight-normal"
/>
<gl-form-input-group id="url" readonly :value="integrationForm.url"> <div v-if="selectedIntegration === $options.typeSet.prometheus" class="gl-my-4">
<template #append> <span>
<clipboard-button {{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
:text="integrationForm.url || ''" </span>
:title="__('Copy')"
class="gl-m-0!"
/>
</template>
</gl-form-input-group>
</div>
<div class="gl-my-4"> <gl-form-input
<span> id="integration-apiUrl"
{{ $options.i18n.integrationFormSteps.step3.info }} v-model="integrationForm.apiUrl"
</span> type="text"
:placeholder="$options.targetPrometheusUrlPlaceholder"
/>
<gl-form-input-group <span class="gl-text-gray-400">
id="authorization-key" {{ $options.i18n.integrationFormSteps.prometheusFormUrl.help }}
class="gl-mb-2" </span>
readonly </div>
:value="integrationForm.token"
>
<template #append>
<clipboard-button
:text="integrationForm.token || ''"
:title="__('Copy')"
class="gl-m-0!"
/>
</template>
</gl-form-input-group>
<gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3"> <div class="gl-my-4">
{{ $options.i18n.integrationFormSteps.step3.reset }} <span>
</gl-button> {{ s__('AlertSettings|Webhook URL') }}
<gl-modal </span>
modal-id="authKeyModal"
:title="$options.i18n.integrationFormSteps.step3.reset"
:ok-title="$options.i18n.integrationFormSteps.step3.reset"
ok-variant="danger"
@ok="resetAuthKey"
>
{{ $options.i18n.integrationFormSteps.restKeyInfo.label }}
</gl-modal>
</div>
</gl-form-group>
<gl-form-group
id="test-integration"
:label="$options.i18n.integrationFormSteps.step4.label"
label-for="test-integration"
:invalid-feedback="integrationTestPayload.error"
>
<alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step4.help"
:link="generic.alertsUsageUrl"
/>
<gl-form-textarea <gl-form-input-group id="url" readonly :value="integrationForm.url">
id="test-payload" <template #append>
v-model.trim="integrationTestPayload.json" <clipboard-button
:disabled="isPayloadEditDisabled" :text="integrationForm.url || ''"
:state="jsonIsValid" :title="__('Copy')"
:placeholder="$options.i18n.integrationFormSteps.step4.placeholder" class="gl-m-0!"
class="gl-my-4" />
:debounce="$options.JSON_VALIDATE_DELAY" </template>
rows="6" </gl-form-input-group>
max-rows="10" </div>
@input="validateJson"
/> <div class="gl-my-4">
<span>
{{ $options.i18n.integrationFormSteps.step3.info }}
</span>
<gl-form-input-group
id="authorization-key"
class="gl-mb-2"
readonly
:value="integrationForm.token"
>
<template #append>
<clipboard-button
:text="integrationForm.token || ''"
:title="__('Copy')"
class="gl-m-0!"
/>
</template>
</gl-form-input-group>
<gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3">
{{ $options.i18n.integrationFormSteps.step3.reset }}
</gl-button>
<gl-modal
modal-id="authKeyModal"
:title="$options.i18n.integrationFormSteps.step3.reset"
:ok-title="$options.i18n.integrationFormSteps.step3.reset"
ok-variant="danger"
@ok="resetAuthKey"
>
{{ $options.i18n.integrationFormSteps.restKeyInfo.label }}
</gl-modal>
</div>
</gl-form-group>
<gl-form-group
id="test-integration"
:label="$options.i18n.integrationFormSteps.step4.label"
label-for="test-integration"
:invalid-feedback="integrationTestPayload.error"
>
<alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step4.help"
:link="generic.alertsUsageUrl"
/>
<gl-form-textarea
id="test-payload"
v-model.trim="integrationTestPayload.json"
:disabled="isPayloadEditDisabled"
:state="jsonIsValid"
:placeholder="$options.i18n.integrationFormSteps.step4.placeholder"
class="gl-my-4"
:debounce="$options.JSON_VALIDATE_DELAY"
rows="6"
max-rows="10"
@input="validateJson"
/>
<template v-if="showMappingBuilder"> <template v-if="showMappingBuilder">
<gl-button <gl-button
v-if="canEditPayload" v-if="canEditPayload"
v-gl-modal.resetPayloadModal v-gl-modal.resetPayloadModal
:disabled="!active" :disabled="!active"
class="gl-mt-3" class="gl-mt-3"
> >
{{ $options.i18n.integrationFormSteps.step4.editPayload }} {{ $options.i18n.integrationFormSteps.step4.editPayload }}
</gl-button> </gl-button>
<gl-button <gl-button
v-else v-else
:disabled="!active" :disabled="!active"
:loading="parsingPayload" :loading="parsingPayload"
class="gl-mt-3" class="gl-mt-3"
@click="parseMapping" @click="parseMapping"
> >
{{ $options.i18n.integrationFormSteps.step4.submitPayload }} {{ $options.i18n.integrationFormSteps.step4.submitPayload }}
</gl-button> </gl-button>
<gl-modal <gl-modal
modal-id="resetPayloadModal" modal-id="resetPayloadModal"
:title="$options.i18n.integrationFormSteps.step4.resetHeader" :title="$options.i18n.integrationFormSteps.step4.resetHeader"
:ok-title="$options.i18n.integrationFormSteps.step4.resetOk" :ok-title="$options.i18n.integrationFormSteps.step4.resetOk"
ok-variant="danger" ok-variant="danger"
@ok="resetSamplePayloadConfirmed = true" @ok="resetSamplePayloadConfirmed = true"
> >
{{ $options.i18n.integrationFormSteps.step4.resetBody }} {{ $options.i18n.integrationFormSteps.step4.resetBody }}
</gl-modal> </gl-modal>
</template> </template>
</gl-form-group> </gl-form-group>
<gl-form-group <gl-form-group
v-if="showMappingBuilder" v-if="showMappingBuilder"
id="mapping-builder" id="mapping-builder"
:label="$options.i18n.integrationFormSteps.step5.label" :label="$options.i18n.integrationFormSteps.step5.label"
label-for="mapping-builder" label-for="mapping-builder"
> >
<span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span> <span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
<mapping-builder :payload-fields="mappingBuilderFields" :mapping="mappingBuilderMapping" /> <mapping-builder
</gl-form-group> :payload-fields="mappingBuilderFields"
:mapping="mappingBuilderMapping"
/>
</gl-form-group>
</div>
<div class="gl-display-flex gl-justify-content-end"> <div class="gl-display-flex gl-justify-content-end">
<gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button> <gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button>
<!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
<gl-button <gl-button
data-testid="integration-test-and-submit" data-testid="integration-test-and-submit"
:disabled="Boolean(integrationTestPayload.error)" :disabled="Boolean(integrationTestPayload.error) || isManagingOpsgenie"
category="secondary" category="secondary"
variant="success" variant="success"
class="gl-mr-1 js-no-auto-disable" class="gl-mr-1 js-no-auto-disable"
......
app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
View file @ 5c5c90cf
<script> <script>
import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { fetchPolicies } from '~/lib/graphql'; import { fetchPolicies } from '~/lib/graphql';
...@@ -38,6 +39,10 @@ export default { ...@@ -38,6 +39,10 @@ export default {
integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'), integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'),
}, },
components: { components: {
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
GlAlert,
GlLink,
GlSprintf,
IntegrationsList, IntegrationsList,
SettingsFormOld, SettingsFormOld,
SettingsFormNew, SettingsFormNew,
...@@ -50,6 +55,10 @@ export default { ...@@ -50,6 +55,10 @@ export default {
prometheus: { prometheus: {
default: {}, default: {},
}, },
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
opsgenie: {
default: {},
},
projectPath: { projectPath: {
default: '', default: '',
}, },
...@@ -274,7 +283,27 @@ export default { ...@@ -274,7 +283,27 @@ export default {
<template> <template>
<div> <div>
<!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
<gl-alert v-if="opsgenie.active" :dismissible="false" variant="tip">
<gl-sprintf
:message="
s__(
'AlertSettings|We will soon be introducing the ability to create multiple unique HTTP endpoints. When this functionality is live, you will be able to configure an integration with Opsgenie to surface Opsgenie alerts in GitLab. This will replace the current Opsgenie integration which will be deprecated. %{linkStart}More Information%{linkEnd}',
)
"
>
<template #link="{ content }">
<gl-link
class="gl-display-inline-block"
href="https://gitlab.com/gitlab-org/gitlab/-/issues/273657"
target="_blank"
>{{ content }}</gl-link
>
</template>
</gl-sprintf>
</gl-alert>
<integrations-list <integrations-list
v-else
:integrations="glFeatures.httpIntegrationsList ? integrations.list : integrationsOptionsOld" :integrations="glFeatures.httpIntegrationsList ? integrations.list : integrationsOptionsOld"
:loading="loading" :loading="loading"
@edit-integration="editIntegration" @edit-integration="editIntegration"
......
app/assets/javascripts/alerts_settings/constants.js
View file @ 5c5c90cf
...@@ -55,6 +55,7 @@ export const integrationTypesNew = [ ...@@ -55,6 +55,7 @@ export const integrationTypesNew = [
export const typeSet = { export const typeSet = {
http: 'HTTP', http: 'HTTP',
prometheus: 'PROMETHEUS', prometheus: 'PROMETHEUS',
opsgenie: 'OPSGENIE',
}; };
export const integrationToDeleteDefault = { id: null, name: '' }; export const integrationToDeleteDefault = { id: null, name: '' };
......
locale/gitlab.pot
View file @ 5c5c90cf
...@@ -2508,6 +2508,9 @@ msgstr "" ...@@ -2508,6 +2508,9 @@ msgstr ""
msgid "AlertSettings|1. Select integration type" msgid "AlertSettings|1. Select integration type"
msgstr "" msgstr ""
msgid "AlertSettings|2. Add link to your Opsgenie alert list"
msgstr ""
msgid "AlertSettings|2. Name integration" msgid "AlertSettings|2. Name integration"
msgstr "" msgstr ""
...@@ -2643,6 +2646,12 @@ msgstr "" ...@@ -2643,6 +2646,12 @@ msgstr ""
msgid "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint." msgid "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
msgstr "" msgstr ""
msgid "AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your exisiting Opsgenie instance. By selecting this option, you cannot recieve alerts from any other source in GitLab; it will effectivley be turing Alerts within GitLab off as a feature."
msgstr ""
msgid "AlertSettings|We will soon be introducing the ability to create multiple unique HTTP endpoints. When this functionality is live, you will be able to configure an integration with Opsgenie to surface Opsgenie alerts in GitLab. This will replace the current Opsgenie integration which will be deprecated. %{linkStart}More Information%{linkEnd}"
msgstr ""
msgid "AlertSettings|Webhook URL" msgid "AlertSettings|Webhook URL"
msgstr "" msgstr ""
......
spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_new_spec.js.snap
View file @ 5c5c90cf
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AlertsSettingsFormNew with default values renders the initial template 1`] = ` exports[`AlertsSettingsFormNew with default values renders the initial template 1`] = `
"<form class=\\"gl-mt-6\\"> "<form class=\\"gl-mt-6\\" canmanageopsgenie=\\"true\\">
<h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5> <h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5>
<div id=\\"integration-type\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-type__BV_label_\\" for=\\"integration-type\\" class=\\"d-block col-form-label\\">1. Select integration type</label> <div id=\\"integration-type\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-type__BV_label_\\" for=\\"integration-type\\" class=\\"d-block col-form-label\\">1. Select integration type</label>
<div class=\\"bv-no-focus-ring\\"><select class=\\"gl-form-select custom-select\\" id=\\"__BVID__8\\"> <div class=\\"bv-no-focus-ring\\"><select class=\\"gl-form-select custom-select\\" id=\\"__BVID__8\\">
<option value=\\"\\">Select integration type</option> <option value=\\"\\">Select integration type</option>
<option value=\\"HTTP\\">HTTP Endpoint</option> <option value=\\"HTTP\\">HTTP Endpoint</option>
<option value=\\"PROMETHEUS\\">External Prometheus</option> <option value=\\"PROMETHEUS\\">External Prometheus</option>
<option value=\\"OPSGENIE\\">Opsgenie</option> <option disabled=\\"disabled\\" value=\\"OPSGENIE\\">Opsgenie</option>
</select> </select>
<div class=\\"gl-my-4\\"><span class=\\"gl-text-gray-500\\">Learn more about our upcoming <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://gitlab.com/groups/gitlab-org/-/epics/4390\\" class=\\"gl-link gl-display-inline-block\\">integrations</a></span></div> <div class=\\"gl-my-4\\"><span class=\\"gl-text-gray-500\\">Learn more about our upcoming <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://gitlab.com/groups/gitlab-org/-/epics/4390\\" class=\\"gl-link gl-display-inline-block\\">integrations</a></span></div>
<!----> <!---->
...@@ -18,71 +18,73 @@ exports[`AlertsSettingsFormNew with default values renders the initial template ...@@ -18,71 +18,73 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
</div> </div>
</div> </div>
<div class=\\"gl-mt-3 collapse\\" style=\\"display: none;\\" id=\\"__BVID__13\\"> <div class=\\"gl-mt-3 collapse\\" style=\\"display: none;\\" id=\\"__BVID__13\\">
<div id=\\"name-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"name-integration__BV_label_\\" for=\\"name-integration\\" class=\\"d-block col-form-label\\">2. Name integration</label> <div>
<div class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__18\\"> <div id=\\"name-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"name-integration__BV_label_\\" for=\\"name-integration\\" class=\\"d-block col-form-label\\">2. Name integration</label>
<!----> <div class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__18\\">
<!----> <!---->
<!----> <!---->
<!---->
</div>
</div> </div>
</div> <div id=\\"integration-webhook\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-webhook__BV_label_\\" for=\\"integration-webhook\\" class=\\"d-block col-form-label\\">3. Set up webhook</label>
<div id=\\"integration-webhook\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-webhook__BV_label_\\" for=\\"integration-webhook\\" class=\\"d-block col-form-label\\">3. Set up webhook</label> <div class=\\"bv-no-focus-ring\\"><span class=\\"gl-text-gray-500\\">Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html\\" class=\\"gl-link gl-display-inline-block\\">GitLab documentation</a> to learn more about configuring your endpoint.</span> <label class=\\"gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content gl-my-4 gl-font-weight-normal\\">
<div class=\\"bv-no-focus-ring\\"><span class=\\"gl-text-gray-500\\">Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html\\" class=\\"gl-link gl-display-inline-block\\">GitLab documentation</a> to learn more about configuring your endpoint.</span> <label class=\\"gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content gl-my-4 gl-font-weight-normal\\"> <div class=\\"gl-toggle-wrapper\\"><span class=\\"gl-toggle-label\\">Active</span>
<div class=\\"gl-toggle-wrapper\\"><span class=\\"gl-toggle-label\\">Active</span> <!----> <button aria-label=\\"Active\\" type=\\"button\\" class=\\"gl-toggle\\"><span class=\\"toggle-icon\\"><svg data-testid=\\"close-icon\\" class=\\"gl-icon s16\\"><use href=\\"#close\\"></use></svg></span></button></div>
<!----> <button aria-label=\\"Active\\" type=\\"button\\" class=\\"gl-toggle\\"><span class=\\"toggle-icon\\"><svg data-testid=\\"close-icon\\" class=\\"gl-icon s16\\"><use href=\\"#close\\"></use></svg></span></button></div> <!---->
</label>
<!----> <!---->
</label> <div class=\\"gl-my-4\\"><span>
<!----> Webhook URL
<div class=\\"gl-my-4\\"><span> </span>
Webhook URL <div id=\\"url\\" readonly=\\"readonly\\">
</span> <div role=\\"group\\" class=\\"input-group\\">
<div id=\\"url\\" readonly=\\"readonly\\"> <!---->
<div role=\\"group\\" class=\\"input-group\\"> <!----> <input id=\\"url\\" type=\\"text\\" readonly=\\"readonly\\" class=\\"gl-form-input form-control\\">
<!----> <div class=\\"input-group-append\\"><button title=\\"Copy\\" data-clipboard-text=\\"\\" aria-label=\\"Copy this value\\" type=\\"button\\" class=\\"btn gl-m-0! btn-default btn-md gl-button btn-default-secondary btn-icon\\">
<!----> <input id=\\"url\\" type=\\"text\\" readonly=\\"readonly\\" class=\\"gl-form-input form-control\\"> <!----> <svg data-testid=\\"copy-to-clipboard-icon\\" class=\\"gl-button-icon gl-icon s16\\">
<div class=\\"input-group-append\\"><button title=\\"Copy\\" data-clipboard-text=\\"\\" aria-label=\\"Copy this value\\" type=\\"button\\" class=\\"btn gl-m-0! btn-default btn-md gl-button btn-default-secondary btn-icon\\"> <use href=\\"#copy-to-clipboard\\"></use>
<!----> <svg data-testid=\\"copy-to-clipboard-icon\\" class=\\"gl-button-icon gl-icon s16\\"> </svg>
<use href=\\"#copy-to-clipboard\\"></use> <!----></button></div>
</svg> <!---->
<!----></button></div> </div>
<!---->
</div> </div>
</div> </div>
</div> <div class=\\"gl-my-4\\"><span>
<div class=\\"gl-my-4\\"><span> Authorization key
Authorization key </span>
</span> <div id=\\"authorization-key\\" readonly=\\"readonly\\" class=\\"gl-mb-2\\">
<div id=\\"authorization-key\\" readonly=\\"readonly\\" class=\\"gl-mb-2\\"> <div role=\\"group\\" class=\\"input-group\\">
<div role=\\"group\\" class=\\"input-group\\"> <!---->
<!----> <!----> <input id=\\"authorization-key\\" type=\\"text\\" readonly=\\"readonly\\" class=\\"gl-form-input form-control\\">
<!----> <input id=\\"authorization-key\\" type=\\"text\\" readonly=\\"readonly\\" class=\\"gl-form-input form-control\\"> <div class=\\"input-group-append\\"><button title=\\"Copy\\" data-clipboard-text=\\"\\" aria-label=\\"Copy this value\\" type=\\"button\\" class=\\"btn gl-m-0! btn-default btn-md gl-button btn-default-secondary btn-icon\\">
<div class=\\"input-group-append\\"><button title=\\"Copy\\" data-clipboard-text=\\"\\" aria-label=\\"Copy this value\\" type=\\"button\\" class=\\"btn gl-m-0! btn-default btn-md gl-button btn-default-secondary btn-icon\\"> <!----> <svg data-testid=\\"copy-to-clipboard-icon\\" class=\\"gl-button-icon gl-icon s16\\">
<!----> <svg data-testid=\\"copy-to-clipboard-icon\\" class=\\"gl-button-icon gl-icon s16\\"> <use href=\\"#copy-to-clipboard\\"></use>
<use href=\\"#copy-to-clipboard\\"></use> </svg>
</svg> <!----></button></div>
<!----></button></div> <!---->
</div>
</div> <button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn gl-mt-3 btn-default btn-md disabled gl-button\\">
<!----> <!---->
</div> <!----> <span class=\\"gl-button-text\\">
</div> <button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn gl-mt-3 btn-default btn-md disabled gl-button\\"> Reset Key
</span></button>
<!----> <!---->
<!----> <span class=\\"gl-button-text\\"> </div>
Reset Key <!---->
</span></button> <!---->
<!----> <!---->
</div> </div>
<!---->
<!---->
<!---->
</div> </div>
</div> <div id=\\"test-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"test-integration__BV_label_\\" for=\\"test-integration\\" class=\\"d-block col-form-label\\">4. Test integration(optional)</label>
<div id=\\"test-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"test-integration__BV_label_\\" for=\\"test-integration\\" class=\\"d-block col-form-label\\">4. Test integration(optional)</label> <div class=\\"bv-no-focus-ring\\"><span class=\\"gl-text-gray-500\\">Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"http://invalid\\" class=\\"gl-link gl-display-inline-block\\">alerts page</a>. This payload can be used to test the integration using the \\"save and test payload\\" button.</span> <textarea id=\\"test-payload\\" disabled=\\"disabled\\" placeholder=\\"Enter test alert JSON....\\" wrap=\\"soft\\" class=\\"gl-form-input gl-form-textarea gl-my-4 form-control is-valid\\" style=\\"resize: none; overflow-y: scroll;\\"></textarea>
<div class=\\"bv-no-focus-ring\\"><span class=\\"gl-text-gray-500\\">Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"http://invalid\\" class=\\"gl-link gl-display-inline-block\\">alerts page</a>. This payload can be used to test the integration using the \\"save and test payload\\" button.</span> <textarea id=\\"test-payload\\" disabled=\\"disabled\\" placeholder=\\"Enter test alert JSON....\\" wrap=\\"soft\\" class=\\"gl-form-input gl-form-textarea gl-my-4 form-control is-valid\\" style=\\"resize: none; overflow-y: scroll;\\"></textarea> <!---->
<!----> <!---->
<!----> <!---->
<!----> <!---->
<!----> </div>
</div> </div>
<!---->
</div> </div>
<!---->
<div class=\\"gl-display-flex gl-justify-content-end\\"><button type=\\"reset\\" class=\\"btn gl-mr-3 js-no-auto-disable btn-default btn-md gl-button\\"> <div class=\\"gl-display-flex gl-justify-content-end\\"><button type=\\"reset\\" class=\\"btn gl-mr-3 js-no-auto-disable btn-default btn-md gl-button\\">
<!----> <!---->
<!----> <span class=\\"gl-button-text\\">Cancel</span></button> <button data-testid=\\"integration-test-and-submit\\" type=\\"button\\" class=\\"btn gl-mr-1 js-no-auto-disable btn-success btn-md gl-button btn-success-secondary\\"> <!----> <span class=\\"gl-button-text\\">Cancel</span></button> <button data-testid=\\"integration-test-and-submit\\" type=\\"button\\" class=\\"btn gl-mr-1 js-no-auto-disable btn-success btn-md gl-button btn-success-secondary\\">
......
spec/frontend/alerts_settings/alerts_integrations_list_spec.js
View file @ 5c5c90cf
...@@ -33,6 +33,9 @@ describe('AlertIntegrationsList', () => { ...@@ -33,6 +33,9 @@ describe('AlertIntegrationsList', () => {
integrations: mockIntegrations, integrations: mockIntegrations,
...props, ...props,
}, },
provide: {
glFeatures: { httpIntegrationsList: true },
},
stubs: { stubs: {
GlIcon: true, GlIcon: true,
GlButton: true, GlButton: true,
......
spec/frontend/alerts_settings/alerts_settings_form_new_spec.js
View file @ 5c5c90cf
...@@ -27,6 +27,7 @@ describe('AlertsSettingsFormNew', () => { ...@@ -27,6 +27,7 @@ describe('AlertsSettingsFormNew', () => {
propsData: { propsData: {
loading: false, loading: false,
canAddIntegration: true, canAddIntegration: true,
canManageOpsgenie: true,
...props, ...props,
}, },
provide: { provide: {
......
spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
View file @ 5c5c90cf
...@@ -2,7 +2,7 @@ import VueApollo from 'vue-apollo'; ...@@ -2,7 +2,7 @@ import VueApollo from 'vue-apollo';
import { mount, createLocalVue } from '@vue/test-utils'; import { mount, createLocalVue } from '@vue/test-utils';
import createMockApollo from 'jest/helpers/mock_apollo_helper'; import createMockApollo from 'jest/helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
import AlertsSettingsWrapper from '~/alerts_settings/components/alerts_settings_wrapper.vue'; import AlertsSettingsWrapper from '~/alerts_settings/components/alerts_settings_wrapper.vue';
import AlertsSettingsFormOld from '~/alerts_settings/components/alerts_settings_form_old.vue'; import AlertsSettingsFormOld from '~/alerts_settings/components/alerts_settings_form_old.vue';
import AlertsSettingsFormNew from '~/alerts_settings/components/alerts_settings_form_new.vue'; import AlertsSettingsFormNew from '~/alerts_settings/components/alerts_settings_form_new.vue';
...@@ -21,6 +21,7 @@ import { ...@@ -21,6 +21,7 @@ import {
RESET_INTEGRATION_TOKEN_ERROR, RESET_INTEGRATION_TOKEN_ERROR,
UPDATE_INTEGRATION_ERROR, UPDATE_INTEGRATION_ERROR,
INTEGRATION_PAYLOAD_TEST_ERROR, INTEGRATION_PAYLOAD_TEST_ERROR,
DELETE_INTEGRATION_ERROR,
} from '~/alerts_settings/utils/error_messages'; } from '~/alerts_settings/utils/error_messages';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { defaultAlertSettingsConfig } from './util'; import { defaultAlertSettingsConfig } from './util';
...@@ -59,6 +60,12 @@ describe('AlertsSettingsWrapper', () => { ...@@ -59,6 +60,12 @@ describe('AlertsSettingsWrapper', () => {
.vm.$emit('delete-integration', { id: integrationToDestroy.id }); .vm.$emit('delete-integration', { id: integrationToDestroy.id });
} }
async function awaitApolloDomMock() {
await wrapper.vm.$nextTick(); // kick off the DOM update
await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
await wrapper.vm.$nextTick(); // kick off the DOM update for flash
}
const createComponent = ({ data = {}, provide = {}, loading = false } = {}) => { const createComponent = ({ data = {}, provide = {}, loading = false } = {}) => {
wrapper = mount(AlertsSettingsWrapper, { wrapper = mount(AlertsSettingsWrapper, {
data() { data() {
...@@ -372,12 +379,35 @@ describe('AlertsSettingsWrapper', () => { ...@@ -372,12 +379,35 @@ describe('AlertsSettingsWrapper', () => {
}); });
await destroyHttpIntegration(wrapper); await destroyHttpIntegration(wrapper);
await awaitApolloDomMock();
await wrapper.vm.$nextTick(); // kick off the DOM update
await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
await wrapper.vm.$nextTick(); // kick off the DOM update for flash
expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' }); expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
}); });
it('displays flash if mutation had a non-recoverable error', async () => {
createComponentWithApollo({
destroyHandler: jest.fn().mockRejectedValue('Error'),
});
await destroyHttpIntegration(wrapper);
await awaitApolloDomMock();
expect(createFlash).toHaveBeenCalledWith({
message: DELETE_INTEGRATION_ERROR,
});
});
});
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
describe('Opsgenie integration', () => {
it.each([true, false])('it shows/hides the alert when opsgenie is %s', active => {
createComponent({
data: { integrations: { list: mockIntegrations }, currentIntegration: mockIntegrations[0] },
provide: { glFeatures: { httpIntegrationsList: true }, opsgenie: { active } },
loading: false,
});
expect(wrapper.find(GlAlert).exists()).toBe(active);
});
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7