diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components')
3 files changed, 58 insertions, 53 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue index 5171588eb64..2733a59f62d 100644 --- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue +++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue @@ -12,7 +12,11 @@ import Vue from 'vue'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import { s__, __ } from '~/locale'; import { mappingFields } from '../constants'; -import { getMappingData, transformForSave } from '../utils/mapping_transformations'; +import { + getMappingData, + transformForSave, + setFieldsLabels, +} from '../utils/mapping_transformations'; export const i18n = { columns: { @@ -72,11 +76,14 @@ export default { }, computed: { mappingData() { - return getMappingData(this.gitlabFields, this.parsedPayload, this.savedMapping); + return getMappingData(this.gitlabFields, this.formattedParsedPayload, this.savedMapping); }, hasFallbackColumn() { return this.gitlabFields.some(({ numberOfFallbacks }) => Boolean(numberOfFallbacks)); }, + formattedParsedPayload() { + return setFieldsLabels(this.parsedPayload); + }, }, methods: { setMapping(gitlabKey, mappingKey, valueKey = mappingFields.mapping) { @@ -92,14 +99,16 @@ export default { }, filterFields(searchTerm = '', fields) { const search = searchTerm.toLowerCase(); - return fields.filter((field) => field.label.toLowerCase().includes(search)); + return fields.filter((field) => + field.displayLabel.replace('...', '').toLowerCase().includes(search), + ); }, isSelected(fieldValue, mapping) { return isEqual(fieldValue, mapping); }, selectedValue(mapping) { return ( - this.parsedPayload.find((item) => isEqual(item.path, mapping))?.label || + this.formattedParsedPayload.find((item) => isEqual(item.path, mapping))?.displayLabel || this.$options.i18n.makeSelection ); }, @@ -167,11 +176,13 @@ export default { <gl-dropdown-item v-for="mappingField in filterFields(gitlabField.searchTerm, gitlabField.mappingFields)" :key="`${mappingField.path}__mapping`" + v-gl-tooltip :is-checked="isSelected(gitlabField.mapping, mappingField.path)" is-check-item + :title="mappingField.tooltip" @click="setMapping(gitlabField.name, mappingField.path)" > - {{ mappingField.label }} + {{ mappingField.displayLabel }} </gl-dropdown-item> <gl-dropdown-item v-if="noResults(gitlabField.searchTerm, gitlabField.mappingFields)"> {{ $options.i18n.noResults }} @@ -197,13 +208,15 @@ export default { gitlabField.mappingFields, )" :key="`${mappingField.path}__fallback`" + v-gl-tooltip :is-checked="isSelected(gitlabField.fallback, mappingField.path)" is-check-item + :title="mappingField.tooltip" @click=" setMapping(gitlabField.name, mappingField.path, $options.mappingFields.fallback) " > - {{ mappingField.label }} + {{ mappingField.displayLabel }} </gl-dropdown-item> <gl-dropdown-item v-if="noResults(gitlabField.fallbackSearchTerm, gitlabField.mappingFields)" diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue index ef29fc5e8b4..d9e5878b9e3 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue @@ -116,7 +116,7 @@ export default { methods: { tbodyTrClass(item) { return { - [bodyTrClass]: this.integrations.length, + [bodyTrClass]: this.integrations?.length, 'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id, }; }, 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 f51c8d7e9f7..3917e4c5fdd 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue @@ -14,13 +14,12 @@ import updateCurrentHttpIntegrationMutation from '../graphql/mutations/update_cu 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 getHttpIntegrationQuery from '../graphql/queries/get_http_integration.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, @@ -68,33 +67,8 @@ export default { }; }, update(data) { - const { alertManagementIntegrations: { nodes: list = [] } = {} } = data.project || {}; - - return { - list, - }; - }, - error(err) { - 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, - }; + const { alertManagementIntegrations: { nodes = [] } = {} } = data.project || {}; + return nodes; }, error(err) { createFlash({ message: err }); @@ -107,9 +81,9 @@ export default { data() { return { isUpdating: false, - integrations: {}, - httpIntegrations: {}, + integrations: [], currentIntegration: null, + currentHttpIntegration: null, newIntegration: null, formVisible: false, showSuccessfulCreateAlert: false, @@ -121,7 +95,7 @@ export default { return this.$apollo.queries.integrations.loading; }, canAddIntegration() { - return this.multiIntegrations || this.integrations?.list?.length < 2; + return this.multiIntegrations || this.integrations.length < 2; }, }, methods: { @@ -142,11 +116,6 @@ export default { }, update(store, { data }) { updateStoreAfterIntegrationAdd(store, getIntegrationsQuery, data, { projectPath }); - if (isHttp) { - updateStoreAfterHttpIntegrationAdd(store, getHttpIntegrationsQuery, data, { - projectPath, - }); - } }, }) .then(({ data: { httpIntegrationCreate, prometheusIntegrationCreate } = {} } = {}) => { @@ -253,15 +222,38 @@ export default { }); }, 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 }; - } + const currentIntegration = this.integrations.find((integration) => integration.id === id); - this.viewIntegration(currentIntegration, tabIndices.viewCredentials); + if (this.multiIntegrations && this.isHttp(type)) { + this.$apollo.addSmartQuery('currentHttpIntegration', { + query: getHttpIntegrationQuery, + variables() { + return { + projectPath: this.projectPath, + id, + }; + }, + update(data) { + const { + project: { + alertManagementHttpIntegrations: { nodes = [{}] }, + }, + } = data; + return nodes[0]; + }, + result() { + this.viewIntegration( + { ...currentIntegration, ...this.currentHttpIntegration }, + tabIndices.viewCredentials, + ); + }, + error() { + createFlash({ message: DEFAULT_ERROR }); + }, + }); + } else { + this.viewIntegration(currentIntegration, tabIndices.viewCredentials); + } }, viewIntegration(integration, tabIndex) { this.$apollo @@ -368,7 +360,7 @@ export default { </gl-alert> <integrations-list - :integrations="integrations.list" + :integrations="integrations" :loading="loading" @edit-integration="editIntegration" @delete-integration="deleteIntegration" |