Skip to content

G
gitlab-ce
Commit 167b667a authored by David O'Regan's avatar David O'Regan Committed by Natalia Tepluhina
Browse files
Options

Alert settings form UX 

Update UX for alert settings
form UX to match designs
provided for Operations
parent 72f5919a
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 70 deletions
app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
View file @ 167b667a
...@@ -141,8 +141,13 @@ export default { ...@@ -141,8 +141,13 @@ export default {
/> />
</h5> </h5>
</div> </div>
<div v-for="gitlabField in mappingData" :key="gitlabField.name" class="gl-display-table-row">
<div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p"> <div
v-for="(gitlabField, index) in mappingData"
:key="gitlabField.name"
class="gl-display-table-row"
>
<div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
<gl-form-input <gl-form-input
aria-labelledby="gitlabFieldsHeader" aria-labelledby="gitlabFieldsHeader"
disabled disabled
...@@ -151,17 +156,17 @@ export default { ...@@ -151,17 +156,17 @@ export default {
</div> </div>
<div class="gl-display-table-cell gl-py-3 gl-pr-3"> <div class="gl-display-table-cell gl-py-3 gl-pr-3">
<div class="right-arrow gl-vertical-align-middle gl-mt-n1"> <div class="right-arrow" :class="{ 'gl-vertical-align-middle': index === 0 }">
<i class="right-arrow-head"></i> <i class="right-arrow-head"></i>
</div> </div>
</div> </div>
<div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p"> <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
<gl-dropdown <gl-dropdown
:disabled="!gitlabField.mappingFields.length" :disabled="!gitlabField.mappingFields.length"
aria-labelledby="parsedFieldsHeader" aria-labelledby="parsedFieldsHeader"
:text="selectedValue(gitlabField.mapping)" :text="selectedValue(gitlabField.mapping)"
class="gl-w-full gl-vertical-align-baseline!" class="gl-w-full"
:header-text="$options.i18n.selectMappingKey" :header-text="$options.i18n.selectMappingKey"
> >
<gl-search-box-by-type @input="setSearchTerm($event, 'searchTerm', gitlabField.name)" /> <gl-search-box-by-type @input="setSearchTerm($event, 'searchTerm', gitlabField.name)" />
...@@ -186,7 +191,7 @@ export default { ...@@ -186,7 +191,7 @@ export default {
:disabled="!gitlabField.mappingFields.length" :disabled="!gitlabField.mappingFields.length"
aria-labelledby="fallbackFieldsHeader" aria-labelledby="fallbackFieldsHeader"
:text="selectedValue(gitlabField.fallback)" :text="selectedValue(gitlabField.fallback)"
class="gl-w-full gl-vertical-align-baseline!" class="gl-w-full"
:header-text="$options.i18n.selectMappingKey" :header-text="$options.i18n.selectMappingKey"
> >
<gl-search-box-by-type <gl-search-box-by-type
......
app/assets/javascripts/alerts_settings/components/alert_settings_form_help_block.vue
View file @ 167b667a
...@@ -20,7 +20,7 @@ export default { ...@@ -20,7 +20,7 @@ export default {
</script> </script>
<template> <template>
<span class="gl-text-gray-500"> <span>
<gl-sprintf :message="message"> <gl-sprintf :message="message">
<template #link="{ content }"> <template #link="{ content }">
<gl-link class="gl-display-inline-block" :href="link" target="_blank">{{ <gl-link class="gl-display-inline-block" :href="link" target="_blank">{{
......
app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
View file @ 167b667a
...@@ -13,7 +13,11 @@ import { ...@@ -13,7 +13,11 @@ import {
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 Tracking from '~/tracking'; import Tracking from '~/tracking';
import { trackAlertIntegrationsViewsOptions, integrationToDeleteDefault } from '../constants'; import {
trackAlertIntegrationsViewsOptions,
integrationToDeleteDefault,
typeSet,
} from '../constants';
import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql'; import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
export const i18n = { export const i18n = {
...@@ -36,6 +40,7 @@ const bodyTrClass = ...@@ -36,6 +40,7 @@ const bodyTrClass =
export default { export default {
i18n, i18n,
typeSet,
components: { components: {
GlButtonGroup, GlButtonGroup,
GlButton, GlButton,
...@@ -77,6 +82,8 @@ export default { ...@@ -77,6 +82,8 @@ export default {
}, },
{ {
key: 'actions', key: 'actions',
thClass: `gl-text-center`,
tdClass: `gl-text-center`,
label: __('Actions'), label: __('Actions'),
}, },
], ],
...@@ -121,6 +128,7 @@ export default { ...@@ -121,6 +128,7 @@ export default {
<div class="incident-management-list"> <div class="incident-management-list">
<h5 class="gl-font-lg">{{ $options.i18n.title }}</h5> <h5 class="gl-font-lg">{{ $options.i18n.title }}</h5>
<gl-table <gl-table
class="integration-list"
:items="integrations" :items="integrations"
:fields="$options.fields" :fields="$options.fields"
:busy="loading" :busy="loading"
...@@ -152,10 +160,11 @@ export default { ...@@ -152,10 +160,11 @@ export default {
</template> </template>
<template #cell(actions)="{ item }"> <template #cell(actions)="{ item }">
<gl-button-group v-if="glFeatures.httpIntegrationsList"> <gl-button-group v-if="glFeatures.httpIntegrationsList" class="gl-ml-3">
<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
:disabled="item.type === $options.typeSet.prometheus"
icon="remove" icon="remove"
@click="setIntegrationToDelete(item)" @click="setIntegrationToDelete(item)"
/> />
...@@ -168,7 +177,7 @@ export default { ...@@ -168,7 +177,7 @@ export default {
<template #empty> <template #empty>
<div <div
class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3" class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3 gl-px-5"
> >
<p class="gl-text-gray-400 gl-py-3 gl-my-3">{{ $options.i18n.emptyState }}</p> <p class="gl-text-gray-400 gl-py-3 gl-my-3">{{ $options.i18n.emptyState }}</p>
</div> </div>
...@@ -176,7 +185,7 @@ export default { ...@@ -176,7 +185,7 @@ export default {
</gl-table> </gl-table>
<gl-modal <gl-modal
modal-id="deleteIntegration" modal-id="deleteIntegration"
:title="__('Are you sure?')" :title="s__('AlertSettings|Delete integration')"
:ok-title="s__('AlertSettings|Delete integration')" :ok-title="s__('AlertSettings|Delete integration')"
ok-variant="danger" ok-variant="danger"
@ok="deleteIntegration" @ok="deleteIntegration"
......
app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
View file @ 167b667a
...@@ -43,7 +43,6 @@ export default { ...@@ -43,7 +43,6 @@ export default {
integrationFormSteps: { integrationFormSteps: {
step1: { step1: {
label: s__('AlertSettings|1. Select integration type'), label: s__('AlertSettings|1. Select integration type'),
help: s__('AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}'),
enterprise: s__( enterprise: s__(
'AlertSettings|In free versions of GitLab, only one integration for each type can be added. %{linkStart}Upgrade your subscription%{linkEnd} to add additional integrations.', 'AlertSettings|In free versions of GitLab, only one integration for each type can be added. %{linkStart}Upgrade your subscription%{linkEnd} to add additional integrations.',
), ),
...@@ -55,17 +54,23 @@ export default { ...@@ -55,17 +54,23 @@ export default {
step3: { step3: {
label: s__('AlertSettings|3. Set up webhook'), label: s__('AlertSettings|3. Set up webhook'),
help: s__( help: s__(
'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.', "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
),
prometheusHelp: s__(
'AlertSettings|Utilize the URL and authorization key below to authorize Prometheus to send alerts to GitLab. Review the Prometheus documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.',
), ),
info: s__('AlertSettings|Authorization key'), info: s__('AlertSettings|Authorization key'),
reset: s__('AlertSettings|Reset Key'), reset: s__('AlertSettings|Reset Key'),
}, },
step4: { step4: {
label: s__('AlertSettings|4. Test integration(optional)'), label: s__('AlertSettings|4. Sample alert payload (optional)'),
help: s__( help: s__(
'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the %{linkStart}alerts page%{linkEnd}. This payload can be used to test the integration using the "save and test payload" button.', 'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to create a custom mapping (optional), or to test the integration (also optional).',
),
prometheusHelp: s__(
'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional).',
), ),
placeholder: s__('AlertSettings|Enter test alert JSON....'), placeholder: s__('AlertSettings|{ "events": [{ "application": "Name of application" }] }'),
resetHeader: s__('AlertSettings|Reset the mapping'), resetHeader: s__('AlertSettings|Reset the mapping'),
resetBody: s__( resetBody: s__(
"AlertSettings|If you edit the payload, the stored mapping will be reset, and you'll need to re-map the fields.", "AlertSettings|If you edit the payload, the stored mapping will be reset, and you'll need to re-map the fields.",
...@@ -96,7 +101,7 @@ export default { ...@@ -96,7 +101,7 @@ export default {
opsgenie: { opsgenie: {
label: s__('AlertSettings|2. Add link to your Opsgenie alert list'), label: s__('AlertSettings|2. Add link to your Opsgenie alert list'),
info: s__( 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.', 'AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your existing Opsgenie instance. By selecting this option, you cannot receive alerts from any other source in GitLab; it will effectively be turning Alerts within GitLab off as a feature.',
), ),
}, },
}, },
...@@ -141,6 +146,12 @@ export default { ...@@ -141,6 +146,12 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
canManageOpsgenie: {
type: Boolean,
required: false,
default: false,
},
}, },
apollo: { apollo: {
currentIntegration: { currentIntegration: {
...@@ -165,12 +176,22 @@ export default { ...@@ -165,12 +176,22 @@ export default {
}; };
}, },
computed: { computed: {
isPrometheus() {
return this.selectedIntegration === this.$options.typeSet.prometheus;
},
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 // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
disabledIntegrations() { disabledIntegrations() {
return this.opsgenie.active ? [typeSet.http, typeSet.prometheus] : [typeSet.opsgenie]; const options = [];
if (this.opsgenie.active) {
options.push(typeSet.http, typeSet.prometheus);
} else if (!this.canManageOpsgenie) {
options.push(typeSet.opsgenie);
}
return options;
}, },
options() { options() {
return integrationTypesNew.map(el => ({ return integrationTypesNew.map(el => ({
...@@ -249,10 +270,13 @@ export default { ...@@ -249,10 +270,13 @@ export default {
} }
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 // 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) { if (this.canManageOpsgenie && this.selectedIntegration === typeSet.opsgenie) {
this.isManagingOpsgenie = true; this.isManagingOpsgenie = true;
this.active = this.opsgenie.active; this.active = this.opsgenie.active;
this.integrationForm.apiUrl = this.opsgenie.opsgenieMvcTargetUrl; this.integrationForm.apiUrl = this.opsgenie.opsgenieMvcTargetUrl;
} else {
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
this.isManagingOpsgenie = false;
} }
}, },
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
...@@ -319,6 +343,9 @@ export default { ...@@ -319,6 +343,9 @@ export default {
error: null, error: null,
}; };
this.active = false; this.active = false;
// TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
this.isManagingOpsgenie = false;
}, },
resetAuthKey() { resetAuthKey() {
if (!this.currentIntegration) { if (!this.currentIntegration) {
...@@ -388,13 +415,6 @@ export default { ...@@ -388,13 +415,6 @@ export default {
@change="integrationTypeSelect" @change="integrationTypeSelect"
/> />
<div class="gl-my-4">
<alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step1.help"
link="https://gitlab.com/groups/gitlab-org/-/epics/4390"
/>
</div>
<div v-if="!canAddIntegration" class="gl-my-4" data-testid="multi-integrations-not-supported"> <div v-if="!canAddIntegration" class="gl-my-4" data-testid="multi-integrations-not-supported">
<alert-settings-form-help-block <alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step1.enterprise" :message="$options.i18n.integrationFormSteps.step1.enterprise"
...@@ -451,7 +471,11 @@ export default { ...@@ -451,7 +471,11 @@ export default {
label-for="integration-webhook" label-for="integration-webhook"
> >
<alert-settings-form-help-block <alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step3.help" :message="
isPrometheus
? $options.i18n.integrationFormSteps.step3.prometheusHelp
: $options.i18n.integrationFormSteps.step3.help
"
link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html" link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
/> />
...@@ -462,8 +486,8 @@ export default { ...@@ -462,8 +486,8 @@ export default {
class="gl-my-4 gl-font-weight-normal" class="gl-my-4 gl-font-weight-normal"
/> />
<div v-if="selectedIntegration === $options.typeSet.prometheus" class="gl-my-4"> <div v-if="isPrometheus" class="gl-my-4">
<span> <span class="gl-font-weight-bold">
{{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }} {{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
</span> </span>
...@@ -471,7 +495,7 @@ export default { ...@@ -471,7 +495,7 @@ export default {
id="integration-apiUrl" id="integration-apiUrl"
v-model="integrationForm.apiUrl" v-model="integrationForm.apiUrl"
type="text" type="text"
:placeholder="$options.targetPrometheusUrlPlaceholder" :placeholder="$options.placeholders.prometheus"
/> />
<span class="gl-text-gray-400"> <span class="gl-text-gray-400">
...@@ -480,7 +504,7 @@ export default { ...@@ -480,7 +504,7 @@ export default {
</div> </div>
<div class="gl-my-4"> <div class="gl-my-4">
<span> <span class="gl-font-weight-bold">
{{ s__('AlertSettings|Webhook URL') }} {{ s__('AlertSettings|Webhook URL') }}
</span> </span>
...@@ -496,13 +520,13 @@ export default { ...@@ -496,13 +520,13 @@ export default {
</div> </div>
<div class="gl-my-4"> <div class="gl-my-4">
<span> <span class="gl-font-weight-bold">
{{ $options.i18n.integrationFormSteps.step3.info }} {{ $options.i18n.integrationFormSteps.step3.info }}
</span> </span>
<gl-form-input-group <gl-form-input-group
id="authorization-key" id="authorization-key"
class="gl-mb-2" class="gl-mb-3"
readonly readonly
:value="integrationForm.token" :value="integrationForm.token"
> >
...@@ -515,7 +539,7 @@ export default { ...@@ -515,7 +539,7 @@ export default {
</template> </template>
</gl-form-input-group> </gl-form-input-group>
<gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3"> <gl-button v-gl-modal.authKeyModal :disabled="!active">
{{ $options.i18n.integrationFormSteps.step3.reset }} {{ $options.i18n.integrationFormSteps.step3.reset }}
</gl-button> </gl-button>
<gl-modal <gl-modal
...@@ -529,6 +553,7 @@ export default { ...@@ -529,6 +553,7 @@ export default {
</gl-modal> </gl-modal>
</div> </div>
</gl-form-group> </gl-form-group>
<gl-form-group <gl-form-group
id="test-integration" id="test-integration"
:label="$options.i18n.integrationFormSteps.step4.label" :label="$options.i18n.integrationFormSteps.step4.label"
...@@ -537,7 +562,11 @@ export default { ...@@ -537,7 +562,11 @@ export default {
:invalid-feedback="integrationTestPayload.error" :invalid-feedback="integrationTestPayload.error"
> >
<alert-settings-form-help-block <alert-settings-form-help-block
:message="$options.i18n.integrationFormSteps.step4.help" :message="
isPrometheus || !showMappingBuilder
? $options.i18n.integrationFormSteps.step4.prometheusHelp
: $options.i18n.integrationFormSteps.step4.help
"
:link="generic.alertsUsageUrl" :link="generic.alertsUsageUrl"
/> />
...@@ -547,7 +576,7 @@ export default { ...@@ -547,7 +576,7 @@ export default {
:disabled="isPayloadEditDisabled" :disabled="isPayloadEditDisabled"
:state="jsonIsValid" :state="jsonIsValid"
:placeholder="$options.i18n.integrationFormSteps.step4.placeholder" :placeholder="$options.i18n.integrationFormSteps.step4.placeholder"
class="gl-my-4" class="gl-my-3"
:debounce="$options.JSON_VALIDATE_DELAY" :debounce="$options.JSON_VALIDATE_DELAY"
rows="6" rows="6"
max-rows="10" max-rows="10"
...@@ -594,32 +623,38 @@ export default { ...@@ -594,32 +623,38 @@ export default {
: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>{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
<mapping-builder <mapping-builder
:payload-fields="mappingBuilderFields" :payload-fields="mappingBuilderFields"
:mapping="mappingBuilderMapping" :mapping="mappingBuilderMapping"
/> />
</gl-form-group> </gl-form-group>
</div> </div>
<div class="gl-display-flex gl-justify-content-end"> <div class="gl-display-flex gl-justify-content-start gl-py-3">
<gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button> <gl-button
type="submit"
variant="success"
class="js-no-auto-disable"
data-testid="integration-form-submit"
>{{ s__('AlertSettings|Save integration') }}
</gl-button>
<!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 --> <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
<gl-button <gl-button
v-if="!isManagingOpsgenie"
data-testid="integration-test-and-submit" data-testid="integration-test-and-submit"
:disabled="Boolean(integrationTestPayload.error) || isManagingOpsgenie" :disabled="Boolean(integrationTestPayload.error)"
category="secondary" category="secondary"
variant="success" variant="success"
class="gl-mr-1 js-no-auto-disable" class="gl-mx-3 js-no-auto-disable"
@click="submitWithTestPayload" @click="submitWithTestPayload"
>{{ s__('AlertSettings|Save and test payload') }}</gl-button >{{ s__('AlertSettings|Save and test payload') }}</gl-button
> >
<gl-button <gl-button
type="submit" type="reset"
variant="success"
class="js-no-auto-disable" class="js-no-auto-disable"
data-testid="integration-form-submit" :class="{ 'gl-ml-3': isManagingOpsgenie }"
>{{ s__('AlertSettings|Save integration') }} >{{ __('Cancel') }}</gl-button
</gl-button> >
</div> </div>
</gl-collapse> </gl-collapse>
</gl-form> </gl-form>
......
app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
View file @ 167b667a
...@@ -118,6 +118,12 @@ export default { ...@@ -118,6 +118,12 @@ export default {
canAddIntegration() { canAddIntegration() {
return this.multiIntegrations || this.integrations?.list?.length < 2; return this.multiIntegrations || this.integrations?.list?.length < 2;
}, },
canManageOpsgenie() {
return (
this.integrations?.list?.every(({ active }) => active === false) ||
this.integrations?.list?.length === 0
);
},
}, },
methods: { methods: {
createNewIntegration({ type, variables }) { createNewIntegration({ type, variables }) {
...@@ -313,6 +319,7 @@ export default { ...@@ -313,6 +319,7 @@ export default {
v-if="glFeatures.httpIntegrationsList" v-if="glFeatures.httpIntegrationsList"
:loading="isUpdating" :loading="isUpdating"
:can-add-integration="canAddIntegration" :can-add-integration="canAddIntegration"
:can-manage-opsgenie="canManageOpsgenie"
@create-new-integration="createNewIntegration" @create-new-integration="createNewIntegration"
@update-integration="updateIntegration" @update-integration="updateIntegration"
@reset-token="resetToken" @reset-token="resetToken"
......
app/assets/stylesheets/pages/incident_management_list.scss
View file @ 167b667a
...@@ -139,4 +139,12 @@ ...@@ -139,4 +139,12 @@
@include gl-w-full; @include gl-w-full;
} }
} }
.integration-list {
.b-table-empty-row {
td {
@include gl-px-0;
}
}
}
} }
locale/gitlab.pot
View file @ 167b667a
...@@ -2520,7 +2520,7 @@ msgstr "" ...@@ -2520,7 +2520,7 @@ msgstr ""
msgid "AlertSettings|3. Set up webhook" msgid "AlertSettings|3. Set up webhook"
msgstr "" msgstr ""
msgid "AlertSettings|4. Test integration(optional)" msgid "AlertSettings|4. Sample alert payload (optional)"
msgstr "" msgstr ""
msgid "AlertSettings|5. Map fields (optional)" msgid "AlertSettings|5. Map fields (optional)"
...@@ -2586,9 +2586,6 @@ msgstr "" ...@@ -2586,9 +2586,6 @@ msgstr ""
msgid "AlertSettings|Learn more about our our upcoming %{linkStart}integrations%{linkEnd}" msgid "AlertSettings|Learn more about our our upcoming %{linkStart}integrations%{linkEnd}"
msgstr "" msgstr ""
msgid "AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}"
msgstr ""
msgid "AlertSettings|Opsgenie" msgid "AlertSettings|Opsgenie"
msgstr "" msgstr ""
...@@ -2598,7 +2595,10 @@ msgstr "" ...@@ -2598,7 +2595,10 @@ msgstr ""
msgid "AlertSettings|Prometheus API base URL" msgid "AlertSettings|Prometheus API base URL"
msgstr "" msgstr ""
msgid "AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the %{linkStart}alerts page%{linkEnd}. This payload can be used to test the integration using the \"save and test payload\" button." msgid "AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to create a custom mapping (optional), or to test the integration (also optional)."
msgstr ""
msgid "AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional)."
msgstr "" msgstr ""
msgid "AlertSettings|Reset Key" msgid "AlertSettings|Reset Key"
...@@ -2649,10 +2649,13 @@ msgstr "" ...@@ -2649,10 +2649,13 @@ msgstr ""
msgid "AlertSettings|URL cannot be blank and must start with http or https" msgid "AlertSettings|URL cannot be blank and must start with http or https"
msgstr "" 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 Prometheus to send alerts to GitLab. Review the Prometheus 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." msgid "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
msgstr ""
msgid "AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your existing Opsgenie instance. By selecting this option, you cannot receive alerts from any other source in GitLab; it will effectively be turning Alerts within GitLab off as a feature."
msgstr "" 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}" 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}"
...@@ -2670,6 +2673,9 @@ msgstr "" ...@@ -2670,6 +2673,9 @@ msgstr ""
msgid "AlertSettings|Your integration was successfully updated." msgid "AlertSettings|Your integration was successfully updated."
msgstr "" msgstr ""
msgid "AlertSettings|{ \"events\": [{ \"application\": \"Name of application\" }] }"
msgstr ""
msgid "Alerts" msgid "Alerts"
msgstr "" msgstr ""
......
spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_new_spec.js.snap
View file @ 167b667a
// 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\\" canmanageopsgenie=\\"true\\"> "<form class=\\"gl-mt-6\\">
<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 disabled=\\"disabled\\" value=\\"OPSGENIE\\">Opsgenie</option> <option 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> </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__10\\">
<div> <div>
<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 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 class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__15\\">
<!----> <!---->
<!----> <!---->
<!----> <!---->
</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>Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's 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> <div class=\\"gl-my-4\\"><span class=\\"gl-font-weight-bold\\">
Webhook URL Webhook URL
</span> </span>
<div id=\\"url\\" readonly=\\"readonly\\"> <div id=\\"url\\" readonly=\\"readonly\\">
...@@ -49,10 +48,10 @@ exports[`AlertsSettingsFormNew with default values renders the initial template ...@@ -49,10 +48,10 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
</div> </div>
</div> </div>
</div> </div>
<div class=\\"gl-my-4\\"><span> <div class=\\"gl-my-4\\"><span class=\\"gl-font-weight-bold\\">
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-3\\">
<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\\">
...@@ -63,7 +62,7 @@ exports[`AlertsSettingsFormNew with default values renders the initial template ...@@ -63,7 +62,7 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
<!----></button></div> <!----></button></div>
<!----> <!---->
</div> </div>
</div> <button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn gl-mt-3 btn-default btn-md disabled gl-button\\"> </div> <button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn btn-default btn-md disabled gl-button\\">
<!----> <!---->
<!----> <span class=\\"gl-button-text\\"> <!----> <span class=\\"gl-button-text\\">
Reset Key Reset Key
...@@ -75,8 +74,8 @@ exports[`AlertsSettingsFormNew with default values renders the initial template ...@@ -75,8 +74,8 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
<!----> <!---->
</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. Sample alert payload (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>Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional).</span> <textarea id=\\"test-payload\\" disabled=\\"disabled\\" placeholder=\\"{ &quot;events&quot;: [{ &quot;application&quot;: &quot;Name of application&quot; }] }\\" wrap=\\"soft\\" class=\\"gl-form-input gl-form-textarea gl-my-3 form-control is-valid\\" style=\\"resize: none; overflow-y: scroll;\\"></textarea>
<!----> <!---->
<!----> <!---->
<!----> <!---->
...@@ -85,14 +84,14 @@ exports[`AlertsSettingsFormNew with default values renders the initial template ...@@ -85,14 +84,14 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
<!----> <!---->
<!----> <!---->
</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-start gl-py-3\\"><button data-testid=\\"integration-form-submit\\" type=\\"submit\\" class=\\"btn js-no-auto-disable btn-success 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\\">Save integration
</span></button> <button data-testid=\\"integration-test-and-submit\\" type=\\"button\\" class=\\"btn gl-mx-3 js-no-auto-disable btn-success btn-md gl-button btn-success-secondary\\">
<!----> <!---->
<!----> <span class=\\"gl-button-text\\">Save and test payload</span></button> <button data-testid=\\"integration-form-submit\\" type=\\"submit\\" class=\\"btn js-no-auto-disable btn-success btn-md gl-button\\"> <!----> <span class=\\"gl-button-text\\">Save and test payload</span></button> <button type=\\"reset\\" class=\\"btn js-no-auto-disable btn-default btn-md gl-button\\">
<!----> <!---->
<!----> <span class=\\"gl-button-text\\">Save integration <!----> <span class=\\"gl-button-text\\">Cancel</span></button></div>
</span></button></div>
</div> </div>
</form>" </form>"
`; `;
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