diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue new file mode 100644 index 00000000000..4e7d77863b9 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -0,0 +1,65 @@ +<script> +import { GlLoadingIcon, GlTooltipDirective, GlButton } from '@gitlab/ui'; +import CiStatus from '~/vue_shared/components/ci_icon.vue'; + +export default { + directives: { + GlTooltip: GlTooltipDirective, + }, + components: { + CiStatus, + GlLoadingIcon, + GlButton, + }, + props: { + pipeline: { + type: Object, + required: true, + }, + }, + computed: { + tooltipText() { + return `${this.projectName} - ${this.pipelineStatus.label}`; + }, + buttonId() { + return `js-linked-pipeline-${this.pipeline.id}`; + }, + pipelineStatus() { + return this.pipeline.details.status; + }, + projectName() { + return this.pipeline.project.name; + }, + }, + methods: { + onClickLinkedPipeline() { + this.$root.$emit('bv::hide::tooltip', this.buttonId); + this.$emit('pipelineClicked'); + }, + }, +}; +</script> + +<template> + <li class="linked-pipeline build"> + <div class="curve"></div> + <gl-button + :id="buttonId" + v-gl-tooltip + :title="tooltipText" + class="js-linked-pipeline-content linked-pipeline-content" + data-qa-selector="linked_pipeline_button" + :class="`js-pipeline-expand-${pipeline.id}`" + @click="onClickLinkedPipeline" + > + <gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" /> + <ci-status + v-else + :status="pipelineStatus" + css-classes="position-top-0" + class="js-linked-pipeline-status" + /> + <span class="str-truncated align-bottom"> {{ projectName }} • #{{ pipeline.id }} </span> + </gl-button> + </li> +</template> |