2020-04-21 15:21:10 +00:00
< script >
2020-04-27 18:09:41 +00:00
import { GlEmptyState , GlDeprecatedButton , GlLoadingIcon , GlTable , GlAlert } from '@gitlab/ui' ;
2020-04-24 18:09:46 +00:00
import { s _ _ } from '~/locale' ;
2020-04-30 12:09:45 +00:00
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue' ;
2020-04-24 18:09:46 +00:00
import getAlerts from '../graphql/queries/getAlerts.query.graphql' ;
2020-04-24 09:09:44 +00:00
2020-04-21 15:21:10 +00:00
export default {
2020-04-24 18:09:46 +00:00
i18n : {
noAlertsMsg : s _ _ (
"AlertManagement|No alerts available to display. If you think you're seeing this message in error, refresh the page." ,
) ,
errorMsg : s _ _ (
"AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear." ,
) ,
} ,
2020-04-24 09:09:44 +00:00
fields : [
{
key : 'severity' ,
2020-04-24 18:09:46 +00:00
label : s _ _ ( 'AlertManagement|Severity' ) ,
2020-04-24 09:09:44 +00:00
} ,
{
2020-04-30 12:09:45 +00:00
key : 'startedAt' ,
label : s _ _ ( 'AlertManagement|Start time' ) ,
2020-04-24 09:09:44 +00:00
} ,
{
2020-04-30 12:09:45 +00:00
key : 'endedAt' ,
label : s _ _ ( 'AlertManagement|End time' ) ,
2020-04-24 09:09:44 +00:00
} ,
{
2020-04-30 12:09:45 +00:00
key : 'title' ,
2020-04-24 18:09:46 +00:00
label : s _ _ ( 'AlertManagement|Alert' ) ,
2020-04-24 09:09:44 +00:00
thClass : 'w-30p' ,
} ,
{
2020-04-30 12:09:45 +00:00
key : 'eventCount' ,
2020-04-24 18:09:46 +00:00
label : s _ _ ( 'AlertManagement|Events' ) ,
2020-04-30 12:09:45 +00:00
thClass : 'text-right event-count' ,
tdClass : 'text-right event-count' ,
2020-04-24 09:09:44 +00:00
} ,
{
key : 'status' ,
2020-04-24 18:09:46 +00:00
label : s _ _ ( 'AlertManagement|Status' ) ,
2020-04-24 09:09:44 +00:00
} ,
] ,
2020-04-21 15:21:10 +00:00
components : {
GlEmptyState ,
GlLoadingIcon ,
2020-04-24 09:09:44 +00:00
GlTable ,
GlAlert ,
2020-04-27 18:09:41 +00:00
GlDeprecatedButton ,
2020-04-30 12:09:45 +00:00
TimeAgo ,
2020-04-21 15:21:10 +00:00
} ,
props : {
2020-04-30 12:09:45 +00:00
projectPath : {
2020-04-21 15:21:10 +00:00
type : String ,
required : true ,
} ,
2020-04-24 09:09:44 +00:00
alertManagementEnabled : {
type : Boolean ,
2020-04-27 18:09:41 +00:00
required : true ,
2020-04-24 09:09:44 +00:00
} ,
2020-04-21 15:21:10 +00:00
enableAlertManagementPath : {
type : String ,
required : true ,
} ,
2020-04-27 18:09:41 +00:00
userCanEnableAlertManagement : {
type : Boolean ,
required : true ,
} ,
2020-04-21 15:21:10 +00:00
emptyAlertSvgPath : {
type : String ,
required : true ,
} ,
} ,
2020-04-24 18:09:46 +00:00
apollo : {
alerts : {
query : getAlerts ,
variables ( ) {
return {
2020-04-30 12:09:45 +00:00
projectPath : this . projectPath ,
2020-04-24 18:09:46 +00:00
} ;
} ,
2020-04-30 12:09:45 +00:00
update ( data ) {
return data . project . alertManagementAlerts . nodes ;
} ,
2020-04-24 18:09:46 +00:00
error ( ) {
this . errored = true ;
} ,
} ,
} ,
2020-04-21 15:21:10 +00:00
data ( ) {
return {
2020-04-24 18:09:46 +00:00
alerts : null ,
errored : false ,
2020-04-24 09:09:44 +00:00
isAlertDismissed : false ,
2020-04-24 18:09:46 +00:00
isErrorAlertDismissed : false ,
2020-04-21 15:21:10 +00:00
} ;
} ,
2020-04-24 09:09:44 +00:00
computed : {
showNoAlertsMsg ( ) {
2020-04-24 18:09:46 +00:00
return ! this . errored && ! this . loading && ! this . alerts ? . length && ! this . isAlertDismissed ;
} ,
showErrorMsg ( ) {
return this . errored && ! this . isErrorAlertDismissed ;
} ,
loading ( ) {
return this . $apollo . queries . alerts . loading ;
2020-04-24 09:09:44 +00:00
} ,
} ,
2020-04-21 15:21:10 +00:00
} ;
< / script >
< template >
< div >
2020-04-24 09:09:44 +00:00
< div v-if ="alertManagementEnabled" class="alert-management-list" >
< gl -alert v-if ="showNoAlertsMsg" @dismiss="isAlertDismissed = true" >
2020-04-24 18:09:46 +00:00
{ { $options . i18n . noAlertsMsg } }
< / g l - a l e r t >
< gl -alert v-if ="showErrorMsg" variant="danger" @dismiss="isErrorAlertDismissed = true" >
{ { $options . i18n . errorMsg } }
2020-04-24 09:09:44 +00:00
< / g l - a l e r t >
< gl -table
class = "mt-3"
: items = "alerts"
: fields = "$options.fields"
: show - empty = "true"
2020-04-24 18:09:46 +00:00
: busy = "loading"
2020-04-24 09:09:44 +00:00
fixed
2020-04-30 12:09:45 +00:00
stacked = "md"
2020-04-24 09:09:44 +00:00
>
2020-04-30 12:09:45 +00:00
< template # cell ( startedAt ) = " { item } " >
< time -ago :time ="item.startedAt" / >
< / template >
< template # cell ( endedAt ) = " { item } " >
< time -ago :time ="item.endedAt" / >
< / template >
< template # cell ( title ) = " { item } " >
< div class = "gl-max-w-full text-truncate" > { { item . title } } < / div >
< / template >
2020-04-24 09:09:44 +00:00
< template # empty >
2020-04-24 18:09:46 +00:00
{ { s _ _ ( 'AlertManagement|No alerts to display.' ) } }
< / template >
2020-04-30 12:09:45 +00:00
2020-04-24 18:09:46 +00:00
< template # table -busy >
< gl -loading -icon size = "lg" color = "dark" class = "mt-3" / >
2020-04-24 09:09:44 +00:00
< / template >
< / g l - t a b l e >
2020-04-21 15:21:10 +00:00
< / div >
2020-04-30 12:09:45 +00:00
< gl -empty -state
v - else
: title = "__('AlertManagement|Surface alerts in GitLab')"
: svg - path = "emptyAlertSvgPath"
>
2020-04-27 18:09:41 +00:00
< template # description >
< div class = "d-block" >
< span > { {
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.' ,
)
} } < / span >
< a href = "/help/user/project/operations/alert_management.html" target = "_blank" >
{ { s _ _ ( 'AlertManagement|More information' ) } }
< / a >
< / div >
< div v-if ="userCanEnableAlertManagement" class="d-block center pt-4" >
< gl -deprecated -button
category = "primary"
variant = "success"
: href = "enableAlertManagementPath"
>
{ { s _ _ ( 'AlertManagement|Authorize external service' ) } }
< / g l - d e p r e c a t e d - b u t t o n >
< / div >
< / template >
< / g l - e m p t y - s t a t e >
2020-04-21 15:21:10 +00:00
< / div >
< / template >