diff options
Diffstat (limited to 'app/assets/javascripts/alert_management')
15 files changed, 50 insertions, 163 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue index 1f3fdd5eef2..895c6e76019 100644 --- a/app/assets/javascripts/alert_management/components/alert_details.vue +++ b/app/assets/javascripts/alert_management/components/alert_details.vue @@ -140,7 +140,7 @@ export default { }, currentTabIndex: { get() { - return this.$options.tabsConfig.findIndex(tab => tab.id === this.activeTab); + return this.$options.tabsConfig.findIndex((tab) => tab.id === this.activeTab); }, set(tabIdx) { const tabId = this.$options.tabsConfig[tabIdx].id; @@ -194,15 +194,21 @@ export default { projectPath: this.projectPath, }, }) - .then(({ data: { createAlertIssue: { errors, issue } } }) => { - if (errors?.length) { - [this.createIncidentError] = errors; - this.incidentCreationInProgress = false; - } else if (issue) { - visitUrl(this.incidentPath(issue.iid)); - } - }) - .catch(error => { + .then( + ({ + data: { + createAlertIssue: { errors, issue }, + }, + }) => { + if (errors?.length) { + [this.createIncidentError] = errors; + this.incidentCreationInProgress = false; + } else if (issue) { + visitUrl(this.incidentPath(issue.iid)); + } + }, + ) + .catch((error) => { this.createIncidentError = error; this.incidentCreationInProgress = false; }); diff --git a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue index c5ff2dc0d11..9b0e5090a75 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue @@ -6,20 +6,11 @@ import alertsHelpUrlQuery from '../graphql/queries/alert_help_url.query.graphql' export default { i18n: { emptyState: { - opsgenie: { - title: s__('AlertManagement|Opsgenie is enabled'), - info: s__( - 'AlertManagement|You have enabled the Opsgenie integration. Your alerts will be visible directly in Opsgenie.', - ), - buttonText: s__('AlertManagement|View alerts in Opsgenie'), - }, - gitlab: { - title: s__('AlertManagement|Surface alerts in GitLab'), - info: s__( - 'AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents.', - ), - buttonText: s__('AlertManagement|Authorize external service'), - }, + title: s__('AlertManagement|Surface alerts in GitLab'), + info: s__( + 'AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents.', + ), + buttonText: s__('AlertManagement|Authorize external service'), }, moreInformation: s__('AlertManagement|More information'), }, @@ -33,46 +24,27 @@ export default { query: alertsHelpUrlQuery, }, }, - inject: [ - 'enableAlertManagementPath', - 'userCanEnableAlertManagement', - 'emptyAlertSvgPath', - 'opsgenieMvcEnabled', - 'opsgenieMvcTargetUrl', - ], + inject: ['enableAlertManagementPath', 'userCanEnableAlertManagement', 'emptyAlertSvgPath'], data() { return { alertsHelpUrl: '', }; }, - computed: { - emptyState() { - return { - ...(this.opsgenieMvcEnabled - ? this.$options.i18n.emptyState.opsgenie - : this.$options.i18n.emptyState.gitlab), - link: this.opsgenieMvcEnabled ? this.opsgenieMvcTargetUrl : this.enableAlertManagementPath, - }; - }, - alertsCanBeEnabled() { - return this.userCanEnableAlertManagement || this.opsgenieMvcEnabled; - }, - }, }; </script> <template> <div> - <gl-empty-state :title="emptyState.title" :svg-path="emptyAlertSvgPath"> + <gl-empty-state :title="$options.i18n.emptyState.title" :svg-path="emptyAlertSvgPath"> <template #description> <div class="gl-display-block"> - <span>{{ emptyState.info }}</span> - <gl-link v-if="!opsgenieMvcEnabled" :href="alertsHelpUrl" target="_blank"> + <span>{{ $options.i18n.emptyState.info }}</span> + <gl-link :href="alertsHelpUrl" target="_blank"> {{ $options.i18n.moreInformation }} </gl-link> </div> - <div v-if="alertsCanBeEnabled" class="gl-display-block center gl-pt-4"> - <gl-button category="primary" variant="success" :href="emptyState.link"> - {{ emptyState.buttonText }} + <div v-if="userCanEnableAlertManagement" class="gl-display-block center gl-pt-4"> + <gl-button category="primary" variant="success" :href="enableAlertManagementPath"> + {{ $options.i18n.emptyState.buttonText }} </gl-button> </div> </template> diff --git a/app/assets/javascripts/alert_management/components/alert_management_table.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue index f287b425826..2bad15faa85 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_table.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue @@ -23,7 +23,7 @@ import { } from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { convertToSnakeCase } from '~/lib/utils/text_utility'; -import getAlerts from '../graphql/queries/get_alerts.query.graphql'; +import getAlertsQuery from '~/graphql_shared/queries/get_alerts.query.graphql'; import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql'; import { ALERTS_STATUS_TABS, @@ -119,7 +119,7 @@ export default { apollo: { alerts: { fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, - query: getAlerts, + query: getAlertsQuery, variables() { return { searchTerm: this.searchTerm, @@ -138,7 +138,7 @@ export default { data.project || {}; const now = new Date(); - const listWithData = list.map(alert => { + const listWithData = list.map((alert) => { const then = new Date(alert.startedAt); const diff = now - then; diff --git a/app/assets/javascripts/alert_management/components/alert_metrics.vue b/app/assets/javascripts/alert_management/components/alert_metrics.vue index 8a6490ecd5c..dd4faa03c00 100644 --- a/app/assets/javascripts/alert_management/components/alert_metrics.vue +++ b/app/assets/javascripts/alert_management/components/alert_metrics.vue @@ -33,7 +33,7 @@ export default { }); this.metricEmbedComponent = MetricEmbed; }) - .catch(e => Sentry.captureException(e)); + .catch((e) => Sentry.captureException(e)); } }, }; diff --git a/app/assets/javascripts/alert_management/components/alert_status.vue b/app/assets/javascripts/alert_management/components/alert_status.vue index 3083a85cbd9..2afdeb8b6fd 100644 --- a/app/assets/javascripts/alert_management/components/alert_status.vue +++ b/app/assets/javascripts/alert_management/components/alert_status.vue @@ -3,7 +3,7 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { s__ } from '~/locale'; import Tracking from '~/tracking'; import { trackAlertStatusUpdateOptions } from '../constants'; -import updateAlertStatusMutation from '../graphql/mutations/update_alert_status.mutation.graphql'; +import updateAlertStatusMutation from '~/graphql_shared/mutations/update_alert_status.mutation.graphql'; export default { i18n: { @@ -57,7 +57,7 @@ export default { projectPath: this.projectPath, }, }) - .then(resp => { + .then((resp) => { this.trackStatusUpdate(status); const errors = resp.data?.updateAlertStatus?.errors || []; diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue index 3af68d42ddf..2a999b908f9 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue @@ -92,7 +92,7 @@ export default { }, sortedUsers() { return this.users - .map(user => ({ ...user, active: this.isActive(user.username) })) + .map((user) => ({ ...user, active: this.isActive(user.username) })) .sort((a, b) => (a.active === b.active ? 0 : a.active ? -1 : 1)); // eslint-disable-line no-nested-ternary }, dropdownClass() { @@ -192,7 +192,7 @@ export default { </script> <template> - <div class="block alert-assignees "> + <div class="block alert-assignees"> <div ref="assignees" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')"> <gl-icon name="user" :size="14" /> <gl-loading-icon v-if="isUpdating" /> diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue index 84d54466a10..485395bcac2 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue @@ -115,7 +115,7 @@ export default { variables: this.getAlertQueryVariables, }); - const data = produce(sourceData, draftData => { + const data = produce(sourceData, (draftData) => { // eslint-disable-next-line no-param-reassign draftData.project.alertManagementAlerts.nodes[0].todos.nodes = []; }); diff --git a/app/assets/javascripts/alert_management/details.js b/app/assets/javascripts/alert_management/details.js index cbbdecae390..4217b702d0a 100644 --- a/app/assets/javascripts/alert_management/details.js +++ b/app/assets/javascripts/alert_management/details.js @@ -9,7 +9,7 @@ import createRouter from './router'; Vue.use(VueApollo); -export default selector => { +export default (selector) => { const domEl = document.querySelector(selector); const { alertId, projectPath, projectIssuesPath, projectId } = domEl.dataset; const router = createRouter(); @@ -18,7 +18,7 @@ export default selector => { Mutation: { toggleSidebarStatus: (_, __, { cache }) => { const sourceData = cache.readQuery({ query: sidebarStatusQuery }); - const data = produce(sourceData, draftData => { + const data = produce(sourceData, (draftData) => { // eslint-disable-next-line no-param-reassign draftData.sidebarStatus = !draftData.sidebarStatus; }); @@ -30,7 +30,7 @@ export default selector => { const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(resolvers, { cacheConfig: { - dataIdFromObject: object => { + dataIdFromObject: (object) => { // eslint-disable-next-line no-underscore-dangle if (object.__typename === 'AlertManagementAlert') { return object.iid; @@ -51,6 +51,9 @@ export default selector => { // eslint-disable-next-line no-new new Vue({ el: selector, + components: { + AlertDetails, + }, provide: { projectPath, alertId, @@ -58,9 +61,6 @@ export default selector => { projectId, }, apolloProvider, - components: { - AlertDetails, - }, router, render(createElement) { return createElement('alert-details', {}); diff --git a/app/assets/javascripts/alert_management/graphql/fragments/alert_note.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/alert_note.fragment.graphql deleted file mode 100644 index 74b425717a0..00000000000 --- a/app/assets/javascripts/alert_management/graphql/fragments/alert_note.fragment.graphql +++ /dev/null @@ -1,17 +0,0 @@ -#import "~/graphql_shared/fragments/author.fragment.graphql" - -fragment AlertNote on Note { - id - author { - id - state - ...Author - } - body - bodyHtml - createdAt - discussion { - id - } - systemNoteIconName -} diff --git a/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql index 406dfe97ce0..9a9ae369519 100644 --- a/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql +++ b/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql @@ -1,5 +1,5 @@ -#import "./list_item.fragment.graphql" -#import "./alert_note.fragment.graphql" +#import "~/graphql_shared/fragments/alert.fragment.graphql" +#import "~/graphql_shared/fragments/alert_note.fragment.graphql" fragment AlertDetailItem on AlertManagementAlert { ...AlertListItem diff --git a/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql deleted file mode 100644 index 62119177887..00000000000 --- a/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql +++ /dev/null @@ -1,17 +0,0 @@ -fragment AlertListItem on AlertManagementAlert { - iid - title - severity - status - startedAt - eventCount - issueIid - assignees { - nodes { - name - username - avatarUrl - webUrl - } - } -} diff --git a/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql b/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql index 5008bfa5e1b..63d952a4857 100644 --- a/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql +++ b/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql @@ -1,4 +1,4 @@ -#import "../fragments/alert_note.fragment.graphql" +#import "~/graphql_shared/fragments/alert_note.fragment.graphql" mutation alertSetAssignees($projectPath: ID!, $assigneeUsernames: [String!]!, $iid: String!) { alertSetAssignees( diff --git a/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.mutation.graphql b/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.mutation.graphql deleted file mode 100644 index ba1e607bc10..00000000000 --- a/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.mutation.graphql +++ /dev/null @@ -1,17 +0,0 @@ -#import "../fragments/alert_note.fragment.graphql" - -mutation updateAlertStatus($projectPath: ID!, $status: AlertManagementStatus!, $iid: String!) { - updateAlertStatus(input: { iid: $iid, status: $status, projectPath: $projectPath }) { - errors - alert { - iid - status - endedAt - notes { - nodes { - ...AlertNote - } - } - } - } -} diff --git a/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql b/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql deleted file mode 100644 index bc7e51a2e90..00000000000 --- a/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql +++ /dev/null @@ -1,36 +0,0 @@ -#import "../fragments/list_item.fragment.graphql" - -query getAlerts( - $projectPath: ID! - $statuses: [AlertManagementStatus!] - $sort: AlertManagementAlertSort - $firstPageSize: Int - $lastPageSize: Int - $prevPageCursor: String = "" - $nextPageCursor: String = "" - $searchTerm: String = "" - $assigneeUsername: String = "" -) { - project(fullPath: $projectPath) { - alertManagementAlerts( - search: $searchTerm - assigneeUsername: $assigneeUsername - statuses: $statuses - sort: $sort - first: $firstPageSize - last: $lastPageSize - after: $nextPageCursor - before: $prevPageCursor - ) { - nodes { - ...AlertListItem - } - pageInfo { - hasNextPage - endCursor - hasPreviousPage - startCursor - } - } - } -} diff --git a/app/assets/javascripts/alert_management/list.js b/app/assets/javascripts/alert_management/list.js index e34450204fb..b484841ed2c 100644 --- a/app/assets/javascripts/alert_management/list.js +++ b/app/assets/javascripts/alert_management/list.js @@ -17,12 +17,10 @@ export default () => { emptyAlertSvgPath, populatingAlertsHelpUrl, alertsHelpUrl, - opsgenieMvcTargetUrl, textQuery, assigneeUsernameQuery, alertManagementEnabled, userCanEnableAlertManagement, - opsgenieMvcEnabled, } = domEl.dataset; const apolloProvider = new VueApollo({ @@ -30,7 +28,7 @@ export default () => { {}, { cacheConfig: { - dataIdFromObject: object => { + dataIdFromObject: (object) => { // eslint-disable-next-line no-underscore-dangle if (object.__typename === 'AlertManagementAlert') { return object.iid; @@ -50,6 +48,9 @@ export default () => { return new Vue({ el: selector, + components: { + AlertManagementList, + }, provide: { projectPath, textQuery, @@ -57,15 +58,10 @@ export default () => { enableAlertManagementPath, populatingAlertsHelpUrl, emptyAlertSvgPath, - opsgenieMvcTargetUrl, alertManagementEnabled: parseBoolean(alertManagementEnabled), userCanEnableAlertManagement: parseBoolean(userCanEnableAlertManagement), - opsgenieMvcEnabled: parseBoolean(opsgenieMvcEnabled), }, apolloProvider, - components: { - AlertManagementList, - }, render(createElement) { return createElement('alert-management-list'); }, |