Commit 074efadf authored by David O'Regan's avatar David O'Regan Committed by Kushal Pandya

Move Alert intergrations tab in Operations[RUN ALL RSPEC] [RUN AS-IF-FOSS]

parent 7b06f6bc
......@@ -3,7 +3,6 @@ import {
GlButton,
GlSprintf,
GlLink,
GlIcon,
GlFormGroup,
GlFormCheckbox,
GlDropdown,
......@@ -22,7 +21,6 @@ export default {
GlSprintf,
GlLink,
GlFormGroup,
GlIcon,
GlFormCheckbox,
GlDropdown,
GlDropdownItem,
......@@ -98,7 +96,7 @@ export default {
<label class="gl-display-inline-flex" for="alert-integration-settings-issue-template">
{{ $options.i18n.incidentTemplate.label }}
<gl-link :href="$options.ISSUE_TEMPLATES_DOCS_LINK" target="_blank">
<gl-icon name="question" :size="12" />
<span class="gl-font-weight-normal gl-pl-2">{{ $options.i18n.introLinkText }}</span>
</gl-link>
</label>
<gl-dropdown
......
......@@ -23,7 +23,6 @@ import getCurrentIntegrationQuery from '../graphql/queries/get_current_integrati
export const i18n = {
deleteIntegration: s__('AlertSettings|Delete integration'),
editIntegration: s__('AlertSettings|Edit integration'),
title: s__('AlertsIntegrations|Current integrations'),
emptyState: s__('AlertsIntegrations|No integrations have been added yet.'),
status: {
enabled: {
......@@ -141,7 +140,6 @@ export default {
<template>
<div class="incident-management-list">
<h5 class="gl-font-lg gl-mt-5">{{ $options.i18n.title }}</h5>
<gl-table
class="integration-list"
:items="integrations"
......
<script>
import { GlButton, GlAlert } from '@gitlab/ui';
import { GlButton, GlAlert, GlTabs, GlTab } from '@gitlab/ui';
import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql';
import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql';
import createFlash, { FLASH_TYPES } from '~/flash';
......@@ -30,6 +30,7 @@ import {
INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR,
DEFAULT_ERROR,
} from '../utils/error_messages';
import AlertsForm from './alerts_form.vue';
import IntegrationsList from './alerts_integrations_list.vue';
import AlertSettingsForm from './alerts_settings_form.vue';
......@@ -38,9 +39,12 @@ export default {
i18n,
components: {
IntegrationsList,
AlertsForm,
AlertSettingsForm,
GlAlert,
GlButton,
GlTabs,
GlTab,
},
inject: {
projectPath: {
......@@ -347,46 +351,51 @@ export default {
</script>
<template>
<div>
<gl-alert
v-if="showSuccessfulCreateAlert"
class="gl-mt-n2"
:primary-button-text="$options.i18n.integrationCreated.btnCaption"
:title="$options.i18n.integrationCreated.title"
@primaryAction="viewCreatedIntegration"
@dismiss="showSuccessfulCreateAlert = false"
>
{{ $options.i18n.integrationCreated.successMsg }}
</gl-alert>
<gl-tabs data-testid="alert-integration-settings">
<gl-tab :title="$options.i18n.settingsTabs.currentIntegrations">
<gl-alert
v-if="showSuccessfulCreateAlert"
class="gl-mt-n2"
:primary-button-text="$options.i18n.integrationCreated.btnCaption"
:title="$options.i18n.integrationCreated.title"
@primaryAction="viewCreatedIntegration"
@dismiss="showSuccessfulCreateAlert = false"
>
{{ $options.i18n.integrationCreated.successMsg }}
</gl-alert>
<integrations-list
:integrations="integrations"
:loading="loading"
@edit-integration="editIntegration"
@delete-integration="deleteIntegration"
/>
<gl-button
v-if="canAddIntegration && !formVisible"
category="secondary"
variant="confirm"
data-testid="add-integration-btn"
class="gl-mt-3"
@click="setFormVisibility(true)"
>
{{ $options.i18n.addNewIntegration }}
</gl-button>
<alert-settings-form
v-if="formVisible"
:loading="isUpdating"
:can-add-integration="canAddIntegration"
:alert-fields="alertFields"
:tab-index="tabIndex"
@create-new-integration="createNewIntegration"
@update-integration="updateIntegration"
@reset-token="resetToken"
@clear-current-integration="clearCurrentIntegration"
@test-alert-payload="testAlertPayload"
@save-and-test-alert-payload="saveAndTestAlertPayload"
/>
</div>
<integrations-list
:integrations="integrations"
:loading="loading"
@edit-integration="editIntegration"
@delete-integration="deleteIntegration"
/>
<gl-button
v-if="canAddIntegration && !formVisible"
category="secondary"
variant="confirm"
data-testid="add-integration-btn"
class="gl-mt-3"
@click="setFormVisibility(true)"
>
{{ $options.i18n.addNewIntegration }}
</gl-button>
<alert-settings-form
v-if="formVisible"
:loading="isUpdating"
:can-add-integration="canAddIntegration"
:alert-fields="alertFields"
:tab-index="tabIndex"
@create-new-integration="createNewIntegration"
@update-integration="updateIntegration"
@reset-token="resetToken"
@clear-current-integration="clearCurrentIntegration"
@test-alert-payload="testAlertPayload"
@save-and-test-alert-payload="saveAndTestAlertPayload"
/>
</gl-tab>
<gl-tab :title="$options.i18n.settingsTabs.integrationSettings">
<alerts-form class="gl-pt-3" data-testid="alert-integration-settings-tab" />
</gl-tab>
</gl-tabs>
</template>
......@@ -93,6 +93,10 @@ export const i18n = {
integrationRemoved: s__('AlertsIntegrations|The integration is deleted.'),
alertSent: s__('AlertsIntegrations|The test alert should now be visible in your alerts list.'),
addNewIntegration: s__('AlertSettings|Add new integration'),
settingsTabs: {
currentIntegrations: s__('AlertSettings|Current integrations'),
integrationSettings: s__('AlertSettings|Alert settings'),
},
};
export const integrationSteps = {
......@@ -156,3 +160,31 @@ export const tabIndices = {
};
export const testAlertModalId = 'confirmSendTestAlert';
/* Alerts integration settings constants */
export const I18N_ALERT_SETTINGS_FORM = {
saveBtnLabel: __('Save changes'),
introText: __('Action to take when receiving an alert. %{docsLink}'),
introLinkText: __('Learn more.'),
createIncident: {
label: __('Create an incident. Incidents are created for each alert triggered.'),
},
incidentTemplate: {
label: __('Incident template (optional).'),
},
sendEmail: {
label: __('Send a single email notification to Owners and Maintainers for new alerts.'),
},
autoCloseIncidents: {
label: __(
'Automatically close associated incident when a recovery alert notification resolves an alert',
),
},
};
export const NO_ISSUE_TEMPLATE_SELECTED = { key: '', name: __('No template selected') };
export const TAKING_INCIDENT_ACTION_DOCS_LINK =
'/help/operations/metrics/alerts#trigger-actions-from-alerts';
export const ISSUE_TEMPLATES_DOCS_LINK =
'/help/user/project/description_templates#create-an-issue-template';
import { GlToast } from '@gitlab/ui';
import Vue from 'vue';
import IncidentsSettingsService from '~/incidents_settings/incidents_settings_service';
import { parseBoolean } from '~/lib/utils/common_utils';
import AlertSettingsWrapper from './components/alerts_settings_wrapper.vue';
import apolloProvider from './graphql';
......@@ -19,14 +20,37 @@ export default (el) => {
return null;
}
const { alertsUsageUrl, projectPath, multiIntegrations, alertFields } = el.dataset;
const {
alertsUsageUrl,
projectPath,
multiIntegrations,
alertFields,
templates,
createIssue,
issueTemplateKey,
sendEmail,
autoCloseIncident,
pagerdutyResetKeyPath,
operationsSettingsEndpoint,
} = el.dataset;
const service = new IncidentsSettingsService(operationsSettingsEndpoint, pagerdutyResetKeyPath);
return new Vue({
el,
components: {
AlertSettingsWrapper,
},
provide: {
service,
alertSettings: {
templates: JSON.parse(templates),
createIssue: parseBoolean(createIssue),
issueTemplateKey,
sendEmail: parseBoolean(sendEmail),
autoCloseIncident: parseBoolean(autoCloseIncident),
pagerdutyResetKeyPath,
operationsSettingsEndpoint,
},
alertsUsageUrl,
projectPath,
multiIntegrations: parseBoolean(multiIntegrations),
......
<script>
import { GlButton, GlTabs, GlTab } from '@gitlab/ui';
import { INTEGRATION_TABS_CONFIG, I18N_INTEGRATION_TABS } from '../constants';
import AlertsSettingsForm from './alerts_form.vue';
import PagerDutySettingsForm from './pagerduty_form.vue';
export default {
......@@ -9,7 +8,6 @@ export default {
GlButton,
GlTabs,
GlTab,
AlertsSettingsForm,
PagerDutySettingsForm,
ServiceLevelAgreementForm: () =>
import('ee_component/incidents_settings/components/service_level_agreement_form.vue'),
......@@ -23,7 +21,7 @@ export default {
<section
id="incident-management-settings"
data-qa-selector="incidents_settings_content"
class="settings no-animate qa-incident-management-settings"
class="settings no-animate"
>
<div class="settings-header">
<h4
......
......@@ -2,11 +2,6 @@ import { __, s__ } from '~/locale';
/* Integration tabs constants */
export const INTEGRATION_TABS_CONFIG = [
{
title: s__('IncidentSettings|Alert integration'),
component: 'AlertsSettingsForm',
active: true,
},
{
title: s__('IncidentSettings|PagerDuty integration'),
component: 'PagerDutySettingsForm',
......@@ -27,34 +22,6 @@ export const I18N_INTEGRATION_TABS = {
),
};
/* Alerts integration settings constants */
export const I18N_ALERT_SETTINGS_FORM = {
saveBtnLabel: __('Save changes'),
introText: __('Action to take when receiving an alert. %{docsLink}'),
introLinkText: __('More information.'),
createIncident: {
label: __('Create an incident. Incidents are created for each alert triggered.'),
},
incidentTemplate: {
label: __('Incident template (optional)'),
},
sendEmail: {
label: __('Send a single email notification to Owners and Maintainers for new alerts.'),
},
autoCloseIncidents: {
label: __(
'Automatically close associated incident when a recovery alert notification resolves an alert',
),
},
};
export const NO_ISSUE_TEMPLATE_SELECTED = { key: '', name: __('No template selected') };
export const TAKING_INCIDENT_ACTION_DOCS_LINK =
'/help/operations/metrics/alerts#trigger-actions-from-alerts';
export const ISSUE_TEMPLATES_DOCS_LINK =
'/help/user/project/description_templates#create-an-issue-template';
/* PagerDuty integration settings constants */
export const I18N_PAGERDUTY_SETTINGS_FORM = {
......
......@@ -13,14 +13,9 @@ export default () => {
const {
dataset: {
operationsSettingsEndpoint,
templates,
createIssue,
issueTemplateKey,
sendEmail,
pagerdutyActive,
pagerdutyWebhookUrl,
pagerdutyResetKeyPath,
autoCloseIncident,
slaActive,
slaMinutes,
slaFeatureAvailable,
......@@ -32,13 +27,6 @@ export default () => {
el,
provide: {
service,
alertSettings: {
templates: JSON.parse(templates),
createIssue: parseBoolean(createIssue),
issueTemplateKey,
sendEmail: parseBoolean(sendEmail),
autoCloseIncident: parseBoolean(autoCloseIncident),
},
pagerDutySettings: {
active: parseBoolean(pagerdutyActive),
webhookUrl: pagerdutyWebhookUrl,
......
......@@ -10,6 +10,9 @@ module OperationsHelper
end
def alerts_settings_data(disabled: false)
setting = project_incident_management_setting
templates = setting.available_issue_templates.map { |t| { key: t.key, name: t.name } }
{
'prometheus_activated' => prometheus_service.manual_configuration?.to_s,
'prometheus_form_path' => scoped_integration_path(prometheus_service),
......@@ -21,21 +24,22 @@ module OperationsHelper
'alerts_usage_url' => project_alert_management_index_path(@project),
'disabled' => disabled.to_s,
'project_path' => @project.full_path,
'multi_integrations' => 'false'
'multi_integrations' => 'false',
'templates' => templates.to_json,
'create_issue' => setting.create_issue.to_s,
'issue_template_key' => setting.issue_template_key.to_s,
'send_email' => setting.send_email.to_s,
'auto_close_incident' => setting.auto_close_incident.to_s,
'pagerduty_reset_key_path' => reset_pagerduty_token_project_settings_operations_path(@project),
'operations_settings_endpoint' => project_settings_operations_path(@project)
}
end
def operations_settings_data
setting = project_incident_management_setting
templates = setting.available_issue_templates.map { |t| { key: t.key, name: t.name } }
{
operations_settings_endpoint: project_settings_operations_path(@project),
templates: templates.to_json,
create_issue: setting.create_issue.to_s,
issue_template_key: setting.issue_template_key.to_s,
send_email: setting.send_email.to_s,
auto_close_incident: setting.auto_close_incident.to_s,
pagerduty_active: setting.pagerduty_active.to_s,
pagerduty_token: setting.pagerduty_token.to_s,
pagerduty_webhook_url: project_incidents_integrations_pagerduty_url(@project, token: setting.pagerduty_token),
......
......@@ -167,7 +167,7 @@ alert to confirm your integration works properly.
1. Sign in as a user with Developer or greater [permissions](../../user/permissions.md).
1. Navigate to **Settings > Operations** in your project.
1. Click **Alert integrations** to expand the section.
1. Click **Alerts** to expand the section.
1. Click the **{settings}** settings icon on the right side of the integration in [the list](#integrations-list).
1. Select the **Send test alert** tab to open it.
1. Enter a test payload in the payload field (valid JSON is required).
......
......@@ -28,8 +28,8 @@ members with the **Owner** or **Maintainer** roles have the option to receive
a single email notification for new alerts.
1. Navigate to **Settings > Operations**.
1. Expand the **Incidents** section.
1. In the **Alert Integration** tab, select the checkbox
1. Expand the **Alerts** section.
1. In the **Integration settings** tab, select the checkbox
**Send a single email notification to Owners and Maintainers for new alerts**.
1. Select **Save changes**.
......
......@@ -100,7 +100,7 @@ Prometheus server to use the
Alerts can be used to trigger actions, like opening an issue automatically
(disabled by default since `13.1`). To configure the actions:
1. Navigate to your project's **Settings > Operations > Incidents**.
1. Navigate to your project's **Settings > Operations > Alerts**.
1. Enable the option to create issues.
1. Choose the [issue template](../../user/project/description_templates.md) to create the issue from.
1. Optionally, select whether to send an email notification to the developers of the project.
......
......@@ -110,9 +110,7 @@ RSpec.describe OperationsHelper, :routing do
create(
:project_incident_management_setting,
project: project,
issue_template_key: 'template-key',
pagerduty_active: true,
auto_close_incident: false
pagerduty_active: true
)
end
......@@ -121,11 +119,6 @@ RSpec.describe OperationsHelper, :routing do
it 'returns the correct set of data' do
is_expected.to eq(
operations_settings_endpoint: project_settings_operations_path(project),
templates: '[]',
create_issue: 'false',
issue_template_key: 'template-key',
send_email: 'false',
auto_close_incident: 'false',
pagerduty_active: 'true',
pagerduty_token: operations_settings.pagerduty_token,
pagerduty_webhook_url: project_incidents_integrations_pagerduty_url(project, token: operations_settings.pagerduty_token),
......
......@@ -3018,12 +3018,18 @@ msgstr ""
msgid "AlertSettings|Add new integration"
msgstr ""
msgid "AlertSettings|Alert settings"
msgstr ""
msgid "AlertSettings|Authorization key"
msgstr ""
msgid "AlertSettings|Configure details"
msgstr ""
msgid "AlertSettings|Current integrations"
msgstr ""
msgid "AlertSettings|Customize alert payload mapping (optional)"
msgstr ""
......@@ -3150,9 +3156,6 @@ msgstr ""
msgid "AlertsIntegrations|Alerts will not be created through this integration"
msgstr ""
msgid "AlertsIntegrations|Current integrations"
msgstr ""
msgid "AlertsIntegrations|If you delete the %{integrationName} integration, alerts are no longer sent from this endpoint. This action cannot be undone."
msgstr ""
......@@ -17363,7 +17366,7 @@ msgstr ""
msgid "Incident Management Limits"
msgstr ""
msgid "Incident template (optional)"
msgid "Incident template (optional)."
msgstr ""
msgid "IncidentManagement|%{hours} hours, %{minutes} minutes remaining"
......@@ -17453,9 +17456,6 @@ msgstr ""
msgid "IncidentSettings|Activate \"time to SLA\" countdown timer"
msgstr ""
msgid "IncidentSettings|Alert integration"
msgstr ""
msgid "IncidentSettings|Fine-tune incident settings and set up integrations with external tools to help better manage incidents."
msgstr ""
......
......@@ -339,7 +339,7 @@ module QA
autoload :Prometheus, 'qa/page/project/settings/services/prometheus'
end
autoload :Operations, 'qa/page/project/settings/operations'
autoload :Incidents, 'qa/page/project/settings/incidents'
autoload :Alerts, 'qa/page/project/settings/alerts'
autoload :Integrations, 'qa/page/project/settings/integrations'
end
......
......@@ -4,8 +4,8 @@ module QA
module Page
module Project
module Settings
class Incidents < Page::Base
view 'app/assets/javascripts/incidents_settings/components/alerts_form.vue' do
class Alerts < Page::Base
view 'app/assets/javascripts/alerts_settings/components/alerts_form.vue' do
element :create_issue_checkbox
element :incident_templates_dropdown
element :save_changes_button
......
......@@ -13,7 +13,7 @@ module QA
def expand_incidents(&block)
expand_content(:incidents_settings_content) do
Settings::Incidents.perform(&block)
Settings::Alerts.perform(&block)
end
end
end
......
......@@ -41,7 +41,7 @@ RSpec.describe 'Projects > Settings > For a forked project', :js do
visit project_settings_operations_path(project)
wait_for_requests
click_expand_incident_management_button
click_settings_tab
end
it 'renders form for incident management' do
......@@ -60,22 +60,24 @@ RSpec.describe 'Projects > Settings > For a forked project', :js do
click_on('bug')
save_form
click_expand_incident_management_button
click_settings_tab
expect(find_field(create_issue)).to be_checked
expect(page).to have_selector(:id, 'alert-integration-settings-issue-template', text: 'bug')
click_settings_tab
expect(find_field(send_email)).not_to be_checked
end
def click_expand_incident_management_button
within '.qa-incident-management-settings' do
click_button('Expand')
def click_settings_tab
within '[data-testid="alert-integration-settings"]' do
click_link 'Alert settings'
end
end
def save_form
page.within ".qa-incident-management-settings" do
click_on 'Save changes'
page.within '[data-testid="alert-integration-settings"]' do
click_button 'Save changes'
end
end
end
......
......@@ -34,16 +34,17 @@ exports[`Alert integration settings form default state should match the default
for="alert-integration-settings-issue-template"
>
Incident template (optional)
Incident template (optional).
<gl-link-stub
href="/help/user/project/description_templates#create-an-issue-template"
target="_blank"
>
<gl-icon-stub
name="question"
size="12"
/>
<span
class="gl-font-weight-normal gl-pl-2"
>
Learn more.
</span>
</gl-link-stub>
</label>
......
import { shallowMount } from '@vue/test-utils';
import AlertsSettingsForm from '~/incidents_settings/components/alerts_form.vue';
import AlertsSettingsForm from '~/alerts_settings/components/alerts_form.vue';
describe('Alert integration settings form', () => {
let wrapper;
......@@ -25,7 +25,6 @@ describe('Alert integration settings form', () => {
afterEach(() => {
if (wrapper) {
wrapper.destroy();
wrapper = null;
}
});
......
......@@ -95,6 +95,10 @@ describe('AlertsSettingsWrapper', () => {
},
provide: {
...provide,
alertSettings: {
templates: [],
},
service: {},
},
mocks: {
$apollo: {
......@@ -129,12 +133,17 @@ describe('AlertsSettingsWrapper', () => {
wrapper = mount(AlertsSettingsWrapper, {
localVue,
apolloProvider: fakeApollo,
provide: {
alertSettings: {
templates: [],
},
service: {},
},
});
}
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('template', () => {
......
......@@ -2,7 +2,7 @@
exports[`IncidentsSettingTabs should render the component 1`] = `
<section
class="settings no-animate qa-incident-management-settings"
class="settings no-animate"
data-qa-selector="incidents_settings_content"
id="incident-management-settings"
>
......@@ -43,15 +43,6 @@ exports[`IncidentsSettingTabs should render the component 1`] = `
>
<!---->
<gl-tab-stub
title="Alert integration"
titlelinkclass=""
>
<alertssettingsform-stub
class="gl-pt-3"
data-testid="AlertsSettingsForm-tab"
/>
</gl-tab-stub>
<gl-tab-stub
title="PagerDuty integration"
titlelinkclass=""
......
......@@ -40,7 +40,14 @@ RSpec.describe OperationsHelper do
'prometheus_url' => notify_project_prometheus_alerts_url(project, format: :json),
'disabled' => 'false',
'project_path' => project.full_path,
'multi_integrations' => 'false'
'multi_integrations' => 'false',
'templates' => '[]',
'create_issue' => 'false',
'issue_template_key' => '',
'send_email' => 'false',
'auto_close_incident' => 'true',
'operations_settings_endpoint' => project_settings_operations_path(project),
'pagerduty_reset_key_path' => reset_pagerduty_token_project_settings_operations_path(project)
)
end
end
......@@ -106,9 +113,7 @@ RSpec.describe OperationsHelper do
create(
:project_incident_management_setting,
project: project,
issue_template_key: 'template-key',
pagerduty_active: true,
auto_close_incident: false
pagerduty_active: true
)
end
......@@ -117,11 +122,6 @@ RSpec.describe OperationsHelper do
it 'returns the correct set of data' do
is_expected.to include(
operations_settings_endpoint: project_settings_operations_path(project),
templates: '[]',
create_issue: 'false',
issue_template_key: 'template-key',
send_email: 'false',
auto_close_incident: 'false',
pagerduty_active: 'true',
pagerduty_token: operations_settings.pagerduty_token,
pagerduty_webhook_url: project_incidents_integrations_pagerduty_url(project, token: operations_settings.pagerduty_token),
......
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