2020-07-28 23:09:34 +05:30
< script >
2020-10-24 23:57:45 +05:30
import { GlEmptyState , GlButton , GlLink } from '@gitlab/ui' ;
2020-07-28 23:09:34 +05:30
import { s _ _ } from '~/locale' ;
2020-10-24 23:57:45 +05:30
import alertsHelpUrlQuery from '../graphql/queries/alert_help_url.query.graphql' ;
2020-07-28 23:09:34 +05:30
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' ) ,
} ,
} ,
moreInformation : s _ _ ( 'AlertManagement|More information' ) ,
} ,
components : {
GlEmptyState ,
GlButton ,
2020-10-24 23:57:45 +05:30
GlLink ,
} ,
apollo : {
alertsHelpUrl : {
query : alertsHelpUrlQuery ,
} ,
2020-07-28 23:09:34 +05:30
} ,
props : {
enableAlertManagementPath : {
type : String ,
required : true ,
} ,
userCanEnableAlertManagement : {
type : Boolean ,
required : true ,
} ,
emptyAlertSvgPath : {
type : String ,
required : true ,
} ,
opsgenieMvcEnabled : {
type : Boolean ,
required : false ,
default : false ,
} ,
opsgenieMvcTargetUrl : {
type : String ,
required : false ,
default : '' ,
} ,
} ,
2020-10-24 23:57:45 +05:30
data ( ) {
return {
alertsHelpUrl : '' ,
} ;
} ,
2020-07-28 23:09:34 +05:30
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" >
< template # description >
< div class = "gl-display-block" >
< span > { { emptyState . info } } < / span >
2020-10-24 23:57:45 +05:30
< gl -link v-if ="!opsgenieMvcEnabled" :href="alertsHelpUrl" target="_blank" >
2020-07-28 23:09:34 +05:30
{ { $options . i18n . moreInformation } }
2020-10-24 23:57:45 +05:30
< / g l - l i n k >
2020-07-28 23:09:34 +05:30
< / div >
< div v-if ="alertsCanBeEnabled" class="gl-display-block center gl-pt-4" >
< gl -button category = "primary" variant = "success" :href ="emptyState.link" >
{ { emptyState . buttonText } }
< / g l - b u t t o n >
< / div >
< / template >
< / g l - e m p t y - s t a t e >
< / div >
< / template >