2017-06-02 09:24:42 -04:00
< script >
2020-08-10 14:09:54 -04:00
import { GlLoadingIcon , GlModal , GlModalDirective , GlButton } from '@gitlab/ui' ;
2020-01-29 16:09:22 -05:00
import ciHeader from '~/vue_shared/components/header_ci_component.vue' ;
2018-06-27 10:28:05 -04:00
import eventHub from '../event_hub' ;
2019-06-25 02:10:25 -04:00
import { _ _ } from '~/locale' ;
2017-06-02 09:24:42 -04:00
2020-01-08 07:07:59 -05:00
const DELETE _MODAL _ID = 'pipeline-delete-modal' ;
2018-06-27 10:28:05 -04:00
export default {
name : 'PipelineHeaderSection' ,
components : {
ciHeader ,
2018-11-07 05:06:15 -05:00
GlLoadingIcon ,
2020-01-08 07:07:59 -05:00
GlModal ,
2020-08-10 14:09:54 -04:00
GlButton ,
2020-01-29 16:09:22 -05:00
} ,
directives : {
GlModal : GlModalDirective ,
2018-06-27 10:28:05 -04:00
} ,
props : {
pipeline : {
type : Object ,
required : true ,
2017-06-02 09:24:42 -04:00
} ,
2018-06-27 10:28:05 -04:00
isLoading : {
type : Boolean ,
required : true ,
2017-06-02 09:24:42 -04:00
} ,
2018-06-27 10:28:05 -04:00
} ,
data ( ) {
return {
2020-01-29 16:09:22 -05:00
isCanceling : false ,
isRetrying : false ,
isDeleting : false ,
2018-06-27 10:28:05 -04:00
} ;
} ,
2018-01-04 19:18:35 -05:00
2018-06-27 10:28:05 -04:00
computed : {
status ( ) {
return this . pipeline . details && this . pipeline . details . status ;
} ,
shouldRenderContent ( ) {
return ! this . isLoading && Object . keys ( this . pipeline ) . length ;
2017-06-02 09:24:42 -04:00
} ,
2020-01-08 07:07:59 -05:00
deleteModalConfirmationText ( ) {
return _ _ (
'Are you sure you want to delete this pipeline? Doing so will expire all pipeline caches and delete all related objects, such as builds, logs, artifacts, and triggers. This action cannot be undone.' ,
) ;
} ,
2018-06-27 10:28:05 -04:00
} ,
2017-06-02 09:24:42 -04:00
2018-06-27 10:28:05 -04:00
methods : {
2020-01-29 16:09:22 -05:00
cancelPipeline ( ) {
this . isCanceling = true ;
eventHub . $emit ( 'headerPostAction' , this . pipeline . cancel _path ) ;
2020-01-08 07:07:59 -05:00
} ,
2020-01-29 16:09:22 -05:00
retryPipeline ( ) {
this . isRetrying = true ;
eventHub . $emit ( 'headerPostAction' , this . pipeline . retry _path ) ;
2018-06-27 10:28:05 -04:00
} ,
2020-01-08 07:07:59 -05:00
deletePipeline ( ) {
2020-01-29 16:09:22 -05:00
this . isDeleting = true ;
eventHub . $emit ( 'headerDeleteAction' , this . pipeline . delete _path ) ;
2017-06-02 09:24:42 -04:00
} ,
2018-06-27 10:28:05 -04:00
} ,
2020-01-08 07:07:59 -05:00
DELETE _MODAL _ID ,
2018-06-27 10:28:05 -04:00
} ;
2017-06-02 09:24:42 -04:00
< / script >
< template >
< div class = "pipeline-header-container" >
< ci -header
v - if = "shouldRenderContent"
: status = "status"
: item - id = "pipeline.id"
: time = "pipeline.created_at"
: user = "pipeline.user"
2018-06-11 05:49:47 -04:00
item - name = "Pipeline"
2020-01-29 16:09:22 -05:00
>
2020-08-10 14:09:54 -04:00
< gl -button
2020-01-29 16:09:22 -05:00
v - if = "pipeline.retry_path"
: loading = "isRetrying"
: disabled = "isRetrying"
2020-08-10 14:09:54 -04:00
data - testid = "retryButton"
category = "secondary"
variant = "info"
2020-01-29 16:09:22 -05:00
@ click = "retryPipeline()"
2020-08-10 14:09:54 -04:00
>
{ { _ _ ( 'Retry' ) } }
< / g l - b u t t o n >
2020-01-29 16:09:22 -05:00
2020-08-10 14:09:54 -04:00
< gl -button
2020-01-29 16:09:22 -05:00
v - if = "pipeline.cancel_path"
: loading = "isCanceling"
: disabled = "isCanceling"
2020-08-10 14:09:54 -04:00
data - testid = "cancelPipeline"
class = "gl-ml-3"
category = "primary"
variant = "danger"
2020-01-29 16:09:22 -05:00
@ click = "cancelPipeline()"
2020-08-10 14:09:54 -04:00
>
{ { _ _ ( 'Cancel running' ) } }
< / g l - b u t t o n >
2020-01-29 16:09:22 -05:00
2020-08-10 14:09:54 -04:00
< gl -button
2020-01-29 16:09:22 -05:00
v - if = "pipeline.delete_path"
v - gl - modal = "$options.DELETE_MODAL_ID"
: loading = "isDeleting"
: disabled = "isDeleting"
2020-08-10 14:09:54 -04:00
data - testid = "deletePipeline"
class = "gl-ml-3"
category = "secondary"
variant = "danger"
>
{ { _ _ ( 'Delete' ) } }
< / g l - b u t t o n >
2020-01-29 16:09:22 -05:00
< / c i - h e a d e r >
2020-01-08 07:07:59 -05:00
2020-06-26 02:09:03 -04:00
< gl -loading -icon v -if = " isLoading " size = "lg" class = "gl-mt-3 gl-mb-3" / >
2020-01-08 07:07:59 -05:00
< gl -modal
: modal - id = "$options.DELETE_MODAL_ID"
: title = "__('Delete pipeline')"
: ok - title = "__('Delete pipeline')"
ok - variant = "danger"
@ ok = "deletePipeline()"
>
< p >
{ { deleteModalConfirmationText } }
< / p >
< / g l - m o d a l >
2017-06-02 09:24:42 -04:00
< / div >
< / template >