diff options
Diffstat (limited to 'app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue')
-rw-r--r-- | app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue new file mode 100644 index 00000000000..4790062ab7d --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue @@ -0,0 +1,81 @@ +<script> +import { GlTab, GlTabs } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { trackIncidentDetailsViewsOptions } from '~/incidents/constants'; +import { s__ } from '~/locale'; +import Tracking from '~/tracking'; +import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; +import DescriptionComponent from '../description.vue'; +import getAlert from './graphql/queries/get_alert.graphql'; +import HighlightBar from './highlight_bar.vue'; + +export default { + components: { + AlertDetailsTable, + DescriptionComponent, + GlTab, + GlTabs, + HighlightBar, + MetricsTab: () => import('ee_component/issues/show/components/incidents/metrics_tab.vue'), + }, + inject: ['fullPath', 'iid', 'uploadMetricsFeatureAvailable'], + apollo: { + alert: { + query: getAlert, + variables() { + return { + fullPath: this.fullPath, + iid: this.iid, + }; + }, + update(data) { + return data?.project?.issue?.alertManagementAlert; + }, + error() { + createFlash({ + message: s__('Incident|There was an issue loading alert data. Please try again.'), + }); + }, + }, + }, + data() { + return { + alert: null, + }; + }, + computed: { + loading() { + return this.$apollo.queries.alert.loading; + }, + }, + mounted() { + this.trackPageViews(); + }, + methods: { + trackPageViews() { + const { category, action } = trackIncidentDetailsViewsOptions; + Tracking.event(category, action); + }, + }, +}; +</script> + +<template> + <div> + <gl-tabs content-class="gl-reset-line-height" class="gl-mt-n3" data-testid="incident-tabs"> + <gl-tab :title="s__('Incident|Summary')"> + <highlight-bar :alert="alert" /> + <description-component v-bind="$attrs" /> + </gl-tab> + <metrics-tab v-if="uploadMetricsFeatureAvailable" data-testid="metrics-tab" /> + <gl-tab + v-if="alert" + class="alert-management-details" + :title="s__('Incident|Alert details')" + data-testid="alert-details-tab" + > + <alert-details-table :alert="alert" :loading="loading" /> + </gl-tab> + </gl-tabs> + </div> +</template> |