diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/alert_details')
3 files changed, 59 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue index d595c49f9aa..948d2505966 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue @@ -21,12 +21,12 @@ import Tracking from '~/tracking'; import initUserPopovers from '~/user_popovers'; import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import MetricImagesTab from '~/vue_shared/components/metric_images/metric_images_tab.vue'; import { PAGE_CONFIG, SEVERITY_LEVELS } from '../constants'; import createIssueMutation from '../graphql/mutations/alert_issue_create.mutation.graphql'; import toggleSidebarStatusMutation from '../graphql/mutations/alert_sidebar_status.mutation.graphql'; import alertQuery from '../graphql/queries/alert_sidebar_details.query.graphql'; import sidebarStatusQuery from '../graphql/queries/alert_sidebar_status.query.graphql'; -import AlertMetrics from './alert_metrics.vue'; import AlertSidebar from './alert_sidebar.vue'; import AlertSummaryRow from './alert_summary_row.vue'; import SystemNote from './system_notes/system_note.vue'; @@ -74,7 +74,7 @@ export default { TimeAgoTooltip, AlertSidebar, SystemNote, - AlertMetrics, + MetricImagesTab, }, inject: { projectPath: { @@ -372,13 +372,12 @@ export default { </alert-summary-row> <alert-details-table :alert="alert" :loading="loading" :statuses="statuses" /> </gl-tab> - <gl-tab + + <metric-images-tab v-if="!isThreatMonitoringPage" :data-testid="$options.tabsConfig[1].id" :title="$options.tabsConfig[1].title" - > - <alert-metrics :dashboard-url="alert.metricsDashboardUrl" /> - </gl-tab> + /> <gl-tab :data-testid="$options.tabsConfig[2].id" :title="$options.tabsConfig[2].title"> <div v-if="alert.notes.nodes.length > 0" class="issuable-discussion"> <ul class="notes main-notes-list timeline"> diff --git a/app/assets/javascripts/vue_shared/alert_details/index.js b/app/assets/javascripts/vue_shared/alert_details/index.js index d0155c18b9c..614748fa80d 100644 --- a/app/assets/javascripts/vue_shared/alert_details/index.js +++ b/app/assets/javascripts/vue_shared/alert_details/index.js @@ -3,6 +3,9 @@ import produce from 'immer'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import createStore from '~/vue_shared/components/metric_images/store'; +import service from './service'; import AlertDetails from './components/alert_details.vue'; import { PAGE_CONFIG } from './constants'; import sidebarStatusQuery from './graphql/queries/alert_sidebar_status.query.graphql'; @@ -12,7 +15,8 @@ Vue.use(VueApollo); export default (selector) => { const domEl = document.querySelector(selector); - const { alertId, projectPath, projectIssuesPath, projectId, page } = domEl.dataset; + const { alertId, projectPath, projectIssuesPath, projectId, page, canUpdate } = domEl.dataset; + const iid = alertId; const router = createRouter(); const resolvers = { @@ -54,15 +58,20 @@ export default (selector) => { page, projectIssuesPath, projectId, + iid, statuses: PAGE_CONFIG[page].STATUSES, + canUpdate: parseBoolean(canUpdate), }; + const opsProperties = {}; + if (page === PAGE_CONFIG.OPERATIONS.TITLE) { const { TRACK_ALERTS_DETAILS_VIEWS_OPTIONS, TRACK_ALERT_STATUS_UPDATE_OPTIONS } = PAGE_CONFIG[ page ]; provide.trackAlertsDetailsViewsOptions = TRACK_ALERTS_DETAILS_VIEWS_OPTIONS; provide.trackAlertStatusUpdateOptions = TRACK_ALERT_STATUS_UPDATE_OPTIONS; + opsProperties.store = createStore({}, service); } else if (page === PAGE_CONFIG.THREAT_MONITORING.TITLE) { provide.isThreatMonitoringPage = true; } @@ -74,6 +83,7 @@ export default (selector) => { components: { AlertDetails, }, + ...opsProperties, provide, apolloProvider, router, diff --git a/app/assets/javascripts/vue_shared/alert_details/service.js b/app/assets/javascripts/vue_shared/alert_details/service.js new file mode 100644 index 00000000000..90f4961103b --- /dev/null +++ b/app/assets/javascripts/vue_shared/alert_details/service.js @@ -0,0 +1,43 @@ +import { + fetchAlertMetricImages, + uploadAlertMetricImage, + updateAlertMetricImage, + deleteAlertMetricImage, +} from '~/rest_api'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; + +function replaceModelIId(payload = {}) { + delete Object.assign(payload, { alertIid: payload.modelIid }).modelIid; + return payload; +} + +export const getMetricImages = async (payload) => { + const apiPayload = replaceModelIId(payload); + const response = await fetchAlertMetricImages(apiPayload); + return convertObjectPropsToCamelCase(response.data, { deep: true }); +}; + +export const uploadMetricImage = async (payload) => { + const apiPayload = replaceModelIId(payload); + const response = await uploadAlertMetricImage(apiPayload); + return convertObjectPropsToCamelCase(response.data); +}; + +export const updateMetricImage = async (payload) => { + const apiPayload = replaceModelIId(payload); + const response = await updateAlertMetricImage(apiPayload); + return convertObjectPropsToCamelCase(response.data); +}; + +export const deleteMetricImage = async (payload) => { + const apiPayload = replaceModelIId(payload); + const response = await deleteAlertMetricImage(apiPayload); + return convertObjectPropsToCamelCase(response.data); +}; + +export default { + getMetricImages, + uploadMetricImage, + updateMetricImage, + deleteMetricImage, +}; |