diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue')
-rw-r--r-- | app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue | 189 |
1 files changed, 111 insertions, 78 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue index 366f2209fb2..3ffb652e61b 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue @@ -1,22 +1,26 @@ <script> +import { GlButton } 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'; import { fetchPolicies } from '~/lib/graphql'; import { s__ } from '~/locale'; import { typeSet } from '../constants'; -import createHttpIntegrationMutation from '../graphql/mutations/create_http_integration.mutation.graphql'; import createPrometheusIntegrationMutation from '../graphql/mutations/create_prometheus_integration.mutation.graphql'; import destroyHttpIntegrationMutation from '../graphql/mutations/destroy_http_integration.mutation.graphql'; import resetHttpTokenMutation from '../graphql/mutations/reset_http_token.mutation.graphql'; import resetPrometheusTokenMutation from '../graphql/mutations/reset_prometheus_token.mutation.graphql'; -import updateCurrentIntergrationMutation from '../graphql/mutations/update_current_intergration.mutation.graphql'; -import updateHttpIntegrationMutation from '../graphql/mutations/update_http_integration.mutation.graphql'; +import updateCurrentHttpIntegrationMutation from '../graphql/mutations/update_current_http_integration.mutation.graphql'; +import updateCurrentPrometheusIntegrationMutation from '../graphql/mutations/update_current_prometheus_integration.mutation.graphql'; import updatePrometheusIntegrationMutation from '../graphql/mutations/update_prometheus_integration.mutation.graphql'; import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql'; +import getHttpIntegrationsQuery from '../graphql/queries/get_http_integrations.query.graphql'; import getIntegrationsQuery from '../graphql/queries/get_integrations.query.graphql'; import service from '../services'; import { updateStoreAfterIntegrationDelete, updateStoreAfterIntegrationAdd, + updateStoreAfterHttpIntegrationAdd, } from '../utils/cache_updates'; import { DELETE_INTEGRATION_ERROR, @@ -28,20 +32,24 @@ import { import IntegrationsList from './alerts_integrations_list.vue'; import AlertSettingsForm from './alerts_settings_form.vue'; +export const i18n = { + changesSaved: s__( + 'AlertsIntegrations|The integration has been successfully saved. Alerts from this new integration should now appear on your alerts list.', + ), + integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'), + alertSent: s__( + 'AlertsIntegrations|The test alert has been successfully sent, and should now be visible on your alerts list.', + ), + addNewIntegration: s__('AlertSettings|Add new integration'), +}; + export default { typeSet, - i18n: { - changesSaved: s__( - 'AlertsIntegrations|The integration has been successfully saved. Alerts from this new integration should now appear on your alerts list.', - ), - integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'), - alertSent: s__( - 'AlertsIntegrations|The test alert has been successfully sent, and should now be visible on your alerts list.', - ), - }, + i18n, components: { IntegrationsList, AlertSettingsForm, + GlButton, }, inject: { generic: { @@ -84,6 +92,28 @@ export default { createFlash({ message: err }); }, }, + // TODO: we'll need to update the logic to request specific http integration by its id on edit + // when BE adds support for it https://gitlab.com/gitlab-org/gitlab/-/issues/321674 + // currently the request for ALL http integrations is made and on specific integration edit we search it in the list + httpIntegrations: { + fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, + query: getHttpIntegrationsQuery, + variables() { + return { + projectPath: this.projectPath, + }; + }, + update(data) { + const { alertManagementHttpIntegrations: { nodes: list = [] } = {} } = data.project || {}; + + return { + list, + }; + }, + error(err) { + createFlash({ message: err }); + }, + }, currentIntegration: { query: getCurrentIntegrationQuery, }, @@ -91,9 +121,10 @@ export default { data() { return { isUpdating: false, - testAlertPayload: null, integrations: {}, + httpIntegrations: {}, currentIntegration: null, + formVisible: false, }; }, computed: { @@ -105,22 +136,28 @@ export default { }, }, methods: { + isHttp(type) { + return type === typeSet.http; + }, createNewIntegration({ type, variables }) { const { projectPath } = this; + const isHttp = this.isHttp(type); this.isUpdating = true; this.$apollo .mutate({ - mutation: - type === this.$options.typeSet.http - ? createHttpIntegrationMutation - : createPrometheusIntegrationMutation, + mutation: isHttp ? createHttpIntegrationMutation : createPrometheusIntegrationMutation, variables: { ...variables, projectPath, }, update(store, { data }) { updateStoreAfterIntegrationAdd(store, getIntegrationsQuery, data, { projectPath }); + if (isHttp) { + updateStoreAfterHttpIntegrationAdd(store, getHttpIntegrationsQuery, data, { + projectPath, + }); + } }, }) .then(({ data: { httpIntegrationCreate, prometheusIntegrationCreate } = {} } = {}) => { @@ -128,18 +165,9 @@ export default { if (error) { return createFlash({ message: error }); } + const { integration } = httpIntegrationCreate || prometheusIntegrationCreate; - if (this.testAlertPayload) { - const integration = - httpIntegrationCreate?.integration || prometheusIntegrationCreate?.integration; - - const payload = { - ...this.testAlertPayload, - endpoint: integration.url, - token: integration.token, - }; - return this.validateAlertPayload(payload); - } + this.editIntegration(integration); return createFlash({ message: this.$options.i18n.changesSaved, @@ -157,10 +185,9 @@ export default { this.isUpdating = true; this.$apollo .mutate({ - mutation: - type === this.$options.typeSet.http - ? updateHttpIntegrationMutation - : updatePrometheusIntegrationMutation, + mutation: this.isHttp(type) + ? updateHttpIntegrationMutation + : updatePrometheusIntegrationMutation, variables: { ...variables, id: this.currentIntegration.id, @@ -172,11 +199,7 @@ export default { return createFlash({ message: error }); } - if (this.testAlertPayload) { - return this.validateAlertPayload(); - } - - this.clearCurrentIntegration(); + this.clearCurrentIntegration({ type }); return createFlash({ message: this.$options.i18n.changesSaved, @@ -188,23 +211,19 @@ export default { }) .finally(() => { this.isUpdating = false; - this.testAlertPayload = null; }); }, resetToken({ type, variables }) { this.isUpdating = true; this.$apollo .mutate({ - mutation: - type === this.$options.typeSet.http - ? resetHttpTokenMutation - : resetPrometheusTokenMutation, + mutation: this.isHttp(type) ? resetHttpTokenMutation : resetPrometheusTokenMutation, variables, }) .then( ({ data: { httpIntegrationResetToken, prometheusIntegrationResetToken } = {} } = {}) => { - const error = - httpIntegrationResetToken?.errors[0] || prometheusIntegrationResetToken?.errors[0]; + const [error] = + httpIntegrationResetToken?.errors || prometheusIntegrationResetToken?.errors; if (error) { return createFlash({ message: error }); } @@ -214,10 +233,10 @@ export default { prometheusIntegrationResetToken?.integration; this.$apollo.mutate({ - mutation: updateCurrentIntergrationMutation, - variables: { - ...integration, - }, + mutation: this.isHttp(type) + ? updateCurrentHttpIntegrationMutation + : updateCurrentPrometheusIntegrationMutation, + variables: integration, }); return createFlash({ @@ -233,33 +252,31 @@ export default { this.isUpdating = false; }); }, - editIntegration({ id }) { - const currentIntegration = this.integrations.list.find( - (integration) => integration.id === id, - ); + editIntegration({ id, type }) { + let currentIntegration = this.integrations.list.find((integration) => integration.id === id); + if (this.isHttp(type)) { + const httpIntegrationMappingData = this.httpIntegrations.list.find( + (integration) => integration.id === id, + ); + currentIntegration = { ...currentIntegration, ...httpIntegrationMappingData }; + } + this.$apollo.mutate({ - mutation: updateCurrentIntergrationMutation, - variables: { - id: currentIntegration.id, - name: currentIntegration.name, - active: currentIntegration.active, - token: currentIntegration.token, - type: currentIntegration.type, - url: currentIntegration.url, - apiUrl: currentIntegration.apiUrl, - }, + mutation: this.isHttp(type) + ? updateCurrentHttpIntegrationMutation + : updateCurrentPrometheusIntegrationMutation, + variables: currentIntegration, }); + this.setFormVisibility(true); }, - deleteIntegration({ id }) { + deleteIntegration({ id, type }) { const { projectPath } = this; this.isUpdating = true; this.$apollo .mutate({ mutation: destroyHttpIntegrationMutation, - variables: { - id, - }, + variables: { id }, update(store, { data }) { updateStoreAfterIntegrationDelete(store, getIntegrationsQuery, data, { projectPath }); }, @@ -269,7 +286,7 @@ export default { if (error) { return createFlash({ message: error }); } - this.clearCurrentIntegration(); + this.clearCurrentIntegration({ type }); return createFlash({ message: this.$options.i18n.integrationRemoved, type: FLASH_TYPES.SUCCESS, @@ -282,18 +299,20 @@ export default { this.isUpdating = false; }); }, - clearCurrentIntegration() { - this.$apollo.mutate({ - mutation: updateCurrentIntergrationMutation, - variables: {}, - }); - }, - setTestAlertPayload(payload) { - this.testAlertPayload = payload; + clearCurrentIntegration({ type }) { + if (type) { + this.$apollo.mutate({ + mutation: this.isHttp(type) + ? updateCurrentHttpIntegrationMutation + : updateCurrentPrometheusIntegrationMutation, + variables: {}, + }); + } + this.setFormVisibility(false); }, - validateAlertPayload(payload) { + testAlertPayload(payload) { return service - .updateTestAlert(payload ?? this.testAlertPayload) + .updateTestAlert(payload) .then(() => { return createFlash({ message: this.$options.i18n.alertSent, @@ -304,6 +323,9 @@ export default { createFlash({ message: INTEGRATION_PAYLOAD_TEST_ERROR }); }); }, + setFormVisibility(visible) { + this.formVisible = visible; + }, }, }; </script> @@ -316,7 +338,18 @@ export default { @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" @@ -324,7 +357,7 @@ export default { @update-integration="updateIntegration" @reset-token="resetToken" @clear-current-integration="clearCurrentIntegration" - @set-test-alert-payload="setTestAlertPayload" + @test-alert-payload="testAlertPayload" /> </div> </template> |