diff --git a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue index 471504f3ff83a690b8ffe7a04e5c990014e6c4bd..f764a8b9ff570cdb22c14d163b13d7601de7e17a 100644 --- a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue +++ b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue @@ -1,28 +1,38 @@ diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue index 0e858416881b4cd53d3c7a683806d6d154eae459..548bda6b64042a441d32d7e88457a041dd04c252 100644 --- a/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue +++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue @@ -2,10 +2,10 @@ import { GlModal, GlSprintf } from '@gitlab/ui'; import { __, s__ } from '~/locale'; -import externalDestinationsQuery from '../../graphql/queries/get_external_destinations.query.graphql'; -import instanceExternalDestinationsQuery from '../../graphql/queries/get_instance_external_destinations.query.graphql'; import deleteExternalDestination from '../../graphql/mutations/delete_external_destination.mutation.graphql'; import deleteInstanceExternalDestination from '../../graphql/mutations/delete_instance_external_destination.mutation.graphql'; +import googleCloudLoggingConfigurationDestroy from '../../graphql/mutations/delete_gcp_logging_destination.mutation.graphql'; +import { DESTINATION_TYPE_HTTP, DESTINATION_TYPE_GCP_LOGGING } from '../../constants'; export default { components: { @@ -18,19 +18,46 @@ export default { type: Object, required: true, }, + type: { + type: String, + required: true, + }, }, computed: { isInstance() { return this.groupPath === 'instance'; }, - destinationQuery() { - return this.isInstance ? instanceExternalDestinationsQuery : externalDestinationsQuery; - }, destinationDestroyMutation() { - return this.isInstance ? deleteInstanceExternalDestination : deleteExternalDestination; + switch (this.type) { + case DESTINATION_TYPE_GCP_LOGGING: + return googleCloudLoggingConfigurationDestroy; + case DESTINATION_TYPE_HTTP: + default: + return this.isInstance ? deleteInstanceExternalDestination : deleteExternalDestination; + } + }, + destinationTitle() { + switch (this.type) { + case DESTINATION_TYPE_GCP_LOGGING: + return this.item.googleProjectIdName; + case DESTINATION_TYPE_HTTP: + default: + return this.item.destinationUrl; + } }, }, methods: { + destinationErrors(data) { + switch (this.type) { + case DESTINATION_TYPE_GCP_LOGGING: + return data.googleCloudLoggingConfigurationDestroy.errors; + case DESTINATION_TYPE_HTTP: + default: + return this.isInstance + ? data.instanceExternalAuditEventDestinationDestroy.errors + : data.externalAuditEventDestinationDestroy.errors; + } + }, async deleteDestination() { this.reportDeleting(); @@ -46,14 +73,12 @@ export default { }, }); - const errors = this.isInstance - ? data.instanceExternalAuditEventDestinationDestroy.errors - : data.externalAuditEventDestinationDestroy.errors; + const errors = this.destinationErrors(data); if (errors.length > 0) { this.reportError(new Error(errors[0])); } else { - this.reportSuccess(this.id); + this.$emit('delete'); } } catch (error) { this.reportError(error); @@ -65,9 +90,6 @@ export default { reportError(error) { this.$emit('error', error); }, - reportSuccess(id) { - this.$emit('delete', id); - }, show() { this.$refs.modal.show(); }, @@ -100,7 +122,7 @@ export default { > diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue index 1136b442bf64855d9f9acd9bd3c0ff5e0d13ff1b..cb97d64ecd3987ed29e5d3b522ace04e8d29bade 100644 --- a/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue +++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue @@ -32,6 +32,7 @@ import { ADD_STREAM_EDITOR_I18N, AUDIT_STREAMS_NETWORK_ERRORS, createBlankHeader, + DESTINATION_TYPE_HTTP, } from '../../constants'; import { addAuditEventsStreamingDestination, @@ -568,6 +569,9 @@ export default { updateEventTypeFilters(newFilters) { this.filters = newFilters; }, + formSubmission() { + return this.isEditing ? this.updateDestination() : this.addDestination(); + }, }, i18n: { ...ADD_STREAM_EDITOR_I18N, CREATING_ERROR }, fields: [ @@ -596,6 +600,7 @@ export default { tdClass: finalTdClasses, }, ], + DESTINATION_TYPE_HTTP, }; @@ -624,7 +629,7 @@ export default { {{ error }} - + -import { GlButton, GlEmptyState } from '@gitlab/ui'; -import { ADD_STREAM, AUDIT_STREAMS_EMPTY_STATE_I18N } from '../../constants'; +import { GlEmptyState, GlDisclosureDropdown } from '@gitlab/ui'; +import { + ADD_STREAM, + AUDIT_STREAMS_EMPTY_STATE_I18N, + ADD_HTTP, + ADD_GCP_LOGGING, + DESTINATION_TYPE_HTTP, + DESTINATION_TYPE_GCP_LOGGING, +} from '../../constants'; export default { components: { - GlButton, GlEmptyState, + GlDisclosureDropdown, + }, + inject: ['groupPath', 'emptyStateSvgPath'], + computed: { + isInstance() { + return this.groupPath === 'instance'; + }, + destinationOptions() { + return [ + { + text: ADD_HTTP, + action: () => { + this.$emit('add', DESTINATION_TYPE_HTTP); + }, + }, + { + text: ADD_GCP_LOGGING, + action: () => { + this.$emit('add', DESTINATION_TYPE_GCP_LOGGING); + }, + }, + ]; + }, + addOptions() { + return this.isInstance ? [this.destinationOptions[0]] : this.destinationOptions; + }, }, - inject: ['emptyStateSvgPath'], i18n: { ...AUDIT_STREAMS_EMPTY_STATE_I18N, ADD_STREAM, @@ -32,9 +63,13 @@ export default {

{{ $options.i18n.DESCRIPTION_2 }}

diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue new file mode 100644 index 0000000000000000000000000000000000000000..cb33b17c2ac897c74dd0f6ea699a6b3cacbcfb32 --- /dev/null +++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue @@ -0,0 +1,300 @@ + + + diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue index 3bfb27cfb8ef295853adc6a2c869a2627ba5f2ad..9be778e430cfc7adbefe2c693197b32863d77150 100644 --- a/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue +++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue @@ -9,8 +9,13 @@ import { GlButton, GlTooltipDirective as GlTooltip, } from '@gitlab/ui'; -import { STREAM_ITEMS_I18N } from '../../constants'; +import { + STREAM_ITEMS_I18N, + DESTINATION_TYPE_HTTP, + DESTINATION_TYPE_GCP_LOGGING, +} from '../../constants'; import StreamDestinationEditor from './stream_destination_editor.vue'; +import StreamGcpLoggingDestinationEditor from './stream_gcp_logging_destination_editor.vue'; export default { components: { @@ -22,6 +27,7 @@ export default { GlButton, GlIcon, StreamDestinationEditor, + StreamGcpLoggingDestinationEditor, }, directives: { GlTooltip, @@ -32,6 +38,10 @@ export default { type: Object, required: true, }, + type: { + type: String, + required: true, + }, }, data() { return { @@ -45,6 +55,15 @@ export default { isInstance() { return this.groupPath === 'instance'; }, + destinationTitle() { + switch (this.type) { + case DESTINATION_TYPE_GCP_LOGGING: + return this.item.googleProjectIdName; + case DESTINATION_TYPE_HTTP: + default: + return this.item.destinationUrl; + } + }, }, methods: { toggleEditMode() { @@ -66,7 +85,9 @@ export default { : queryData.group.externalAuditEventDestinationCreate; }, }, - i18n: STREAM_ITEMS_I18N, + i18n: { ...STREAM_ITEMS_I18N }, + DESTINATION_TYPE_HTTP, + DESTINATION_TYPE_GCP_LOGGING, }; @@ -84,7 +105,7 @@ export default { name="chevron-right" class="gl-transition-medium" :class="{ 'gl-rotate-90': isEditing }" - />{{ item.destinationUrl }} + />{{ destinationTitle }}