diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue index b3b1551497a..3da338bf13f 100644 --- a/app/assets/javascripts/alert_management/components/alert_details.vue +++ b/app/assets/javascripts/alert_management/components/alert_details.vue @@ -336,7 +336,7 @@ export default { :sidebar-collapsed="sidebarCollapsed" @alert-refresh="alertRefresh" @toggle-sidebar="toggleSidebar" - @alert-sidebar-error="handleAlertSidebarError" + @alert-error="handleAlertSidebarError" /> diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue index 6c92dc3c89a..ea6d3e3a931 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_list.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue @@ -6,8 +6,6 @@ import { GlTable, GlAlert, GlIcon, - GlDropdown, - GlDropdownItem, GlLink, GlTabs, GlTab, @@ -16,12 +14,13 @@ import { GlSearchBoxByType, GlSprintf, } from '@gitlab/ui'; -import createFlash from '~/flash'; import { __, s__ } from '~/locale'; import { debounce, trim } from 'lodash'; import { joinPaths, visitUrl } from '~/lib/utils/url_utility'; import { fetchPolicies } from '~/lib/graphql'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; +import { convertToSnakeCase } from '~/lib/utils/text_utility'; +import Tracking from '~/tracking'; import getAlerts from '../graphql/queries/get_alerts.query.graphql'; import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql'; import { @@ -31,9 +30,7 @@ import { trackAlertListViewsOptions, trackAlertStatusUpdateOptions, } from '../constants'; -import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql'; -import { convertToSnakeCase } from '~/lib/utils/text_utility'; -import Tracking from '~/tracking'; +import AlertStatus from './alert_status.vue'; const tdClass = 'table-col gl-display-flex d-md-table-cell gl-align-items-center'; const thClass = 'gl-hover-bg-blue-50'; @@ -107,11 +104,6 @@ export default { sortable: true, }, ], - statuses: { - TRIGGERED: s__('AlertManagement|Triggered'), - ACKNOWLEDGED: s__('AlertManagement|Acknowledged'), - RESOLVED: s__('AlertManagement|Resolved'), - }, severityLabels: ALERTS_SEVERITY_LABELS, statusTabs: ALERTS_STATUS_TABS, components: { @@ -121,8 +113,6 @@ export default { GlAlert, GlDeprecatedButton, TimeAgo, - GlDropdown, - GlDropdownItem, GlIcon, GlLink, GlTabs, @@ -131,6 +121,7 @@ export default { GlPagination, GlSearchBoxByType, GlSprintf, + AlertStatus, }, props: { projectPath: { @@ -204,6 +195,7 @@ export default { return { searchTerm: '', errored: false, + errorMessage: '', isAlertDismissed: false, isErrorAlertDismissed: false, sort: 'STARTED_AT_DESC', @@ -275,30 +267,6 @@ export default { this.searchTerm = trimmedInput; } }, 500), - updateAlertStatus(status, iid) { - this.$apollo - .mutate({ - mutation: updateAlertStatus, - variables: { - iid, - status: status.toUpperCase(), - projectPath: this.projectPath, - }, - }) - .then(() => { - this.trackStatusUpdate(status); - this.$apollo.queries.alerts.refetch(); - this.$apollo.queries.alertsCount.refetch(); - this.resetPagination(); - }) - .catch(() => { - createFlash( - s__( - 'AlertManagement|There was an error while updating the status of the alert. Please try again.', - ), - ); - }); - }, navigateToAlertDetails({ iid }) { return visitUrl(joinPaths(window.location.pathname, iid, 'details')); }, @@ -338,6 +306,14 @@ export default { resetPagination() { this.pagination = initialPaginationState; }, + handleAlertError(errorMessage) { + this.errored = true; + this.errorMessage = errorMessage; + }, + dismissError() { + this.isErrorAlertDismissed = true; + this.errorMessage = ''; + }, }, }; @@ -357,8 +333,13 @@ export default { - - {{ $options.i18n.errorMsg }} + + {{ errorMessage || $options.i18n.errorMsg }} @@ -437,22 +418,12 @@ export default {