diff options
Diffstat (limited to 'app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue')
-rw-r--r-- | app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue new file mode 100644 index 00000000000..4104ddbf06f --- /dev/null +++ b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue @@ -0,0 +1,71 @@ +<script> +import { GlTab, GlTabs } from '@gitlab/ui'; +import DescriptionComponent from '../description.vue'; +import HighlightBar from './highlight_bar.vue'; +import createFlash from '~/flash'; +import { s__ } from '~/locale'; +import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; + +import getAlert from './graphql/queries/get_alert.graphql'; + +export default { + components: { + AlertDetailsTable, + DescriptionComponent, + GlTab, + GlTabs, + HighlightBar, + }, + inject: ['fullPath', 'iid'], + 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; + }, + alertTableFields() { + if (this.alert) { + const { detailsUrl, __typename, ...restDetails } = this.alert; + return restDetails; + } + return null; + }, + }, +}; +</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 v-if="alert" :alert="alert" /> + <description-component v-bind="$attrs" /> + </gl-tab> + <gl-tab v-if="alert" class="alert-management-details" :title="s__('Incident|Alert details')"> + <alert-details-table :alert="alertTableFields" :loading="loading" /> + </gl-tab> + </gl-tabs> + </div> +</template> |